Nuxtjsとは？メリットや利用シーンを初心者に徹底解説
スポンサードリンク
おはようございます。Shotaです。
🤨「Nuxtjsは聞いたことあるけど使い方がわからない....」
🤨「Nuxtjsって何？」
本記事にたどり着いた人の中には、このようば疑問を持つ人も少なくないでしょう。そこで、今回の記事ではNuxtjsについてメリットや利用シーンを中心に詳細に解説していきます。
Nuxtjsとは？
Nuxtjsとは、VuejsベースのJavaScriptフレームワークで「ナクスト」と呼びます。</span
UIなどフロントエンド開発向けのフレームワークであるVueに対し、UI以外の部分でWebアプリケーション開発に必要な機能が最初から組み込まれています。Nuxtjsは作品配信サイト「note」に利用されており、2017年以降、Vuejsの活躍とともに爆発的に普及しました。
Nuxtjsでできること
それでは、Nuxtjsで何ができるのでしょうか？例えば、以下のようなことができます。
SSR(サーバサイドレンダリング)
サーバサイドレンダリングとは、「JavaScriptをサーバ内部で実行してHTMLを生成し、クライアントに返す仕組み」です。JavaScriptは本来Webブラウザ上で行われるものでしたが、サーバサイドで実行するコットで高速に処理できます。
ルーティング
ルーティングとは、クライアントからのリクエスト内容とサーバ処理を関連させる動作です。Nuxtjsでは、ルーティングが簡単に設定できるようになっています。
head要素の管理
metaタグの管理を、JavaScriptのオブジェクトベースで記載できます。設定ファイルに記載してフォーマット化しておけば、全てのページに反映されるので安心です。
拡張性が高い言語
Nuxtjsではnpmパッケージを利用しています。すでにリリースされているオープンソースだけではなく、自分で独自にパッケージを開発して運用できます。
SSRとSPA
ここで、SSRとよく比較されるSPA(シングルページアプリケーション)との関係について見ていきましょう。
SPAとは、ページ遷移をすることなく、同一のページ内でコンテンツのみを切り替えるアプリケーションのことです。SPAでは、ユーザがページに対して行ったクリックなどのアクションに応じて、ページを必要とする分のデータのみをサーバに要求し処理します。そうすることで、初期表示よりも後のサーバとの連携を最低限に抑えることができます。
現在は一般的に使われているSPAですが、単体では以下のような欠点が存在します。
SSRでは、サーバサイドでHTMLを生成できるので、SPAの「初期表示が遅い」という欠点を解消できます。また、SEOへの影響を抑えられます。SSRの実装は多少の手間がかかりますが、これらのメリットを踏まえると試してみる価値は十分にあると思います。
Nuxtjsのメリット
ここで、Nuxtjsのメリットについて解説します。
手軽にVueベースで構築できる
Vuejsは、比較的容易にWebアプリのUIを構築できるJavaScriptフレームワークです。その流れをくんだNuxtjsなら、手軽にSSRを実装できます。
アプリケーション開発に集中できる環境
Nuxtjsには、複雑な設定をせずにアプリ開発に必要な機能がデフォルトで備わっているので開発に集中できます。
通信の最適化
Nuxtjsは57KBと非常に軽量なので、ユーザにほとんど負荷がかかりません。また、コードの分割やHTTP/2で提供されているサーバプッシュのHeaderを自動的に利用することで通信を最適化できます。
静的サイトを簡単に作れる
コマンド一つで簡単にhtmlファイルを生成できるので、静的サイトであれば簡単に作れます。
ルーティングの自動生成
Nuxtjsでは、pagesディレクトリ内の木構造に従って、自動的にルーティングを生成できます。もちろん静的や動的のどちらにも対応できます。
日本語のドキュメントが多い
Nuxtjsは日本語ドキュメントが充実しています。Vuejsの知識があることが前提ですが、日本語で情報を手に入れられるので誰でもNuxtjsを導入しやすくなっています。
PWAに対応
PWAは「Progressive Web Application」の略称です。PWAを導入すると、プッシュ通知やホーム画面へのアイコン追加などスマホアプリのような機能をWebサイトに持たせられます。NuxtjsにはPWAのモジュールがあるので簡単に対応できます。
Nuxtjsが利用されるサイト
独自のメディアやSNSなどをSPAとして構築運用できるサイト
WebサイトをSPAで構築し、個々の投稿やアカウントなどの情報をSSRで運用したい場合はNuxtjsを利用するのが効果的でしょう。例えば、NuxtjsはすでにTwitterで活用されています。
検索系ドキュメントや個人サイトなどの一般的なWebサイト
Nuxtjsでは、静的コンテンツがコマンド一つで実行できます。そのため、技術系ドキュメントがサイトを運用する場合はMarkdownで原稿を管理し、Vuejsでデザインを管理するという運用もできます。
詳細なことを知りたい場合は、以下のWebサイトにアクセスしてください。
まとめ
今回の記事では、Nuxtjsについて利用シーンやメリットを中心に徹底解説しました。
今日の記事はこれで終了です。
【参考サイト】
