Nuxt.jsについて調べてみた
今回は多くのフロントエンド開発で利用されているNuxt.jsについて調べてみました。
1. Nuxt.js(ナクストジェイエス)とは
Nuxt.jsはJavaScriptアプリケーションフレームワークで、同じくJavaScriptアプリケーションフレームワークのVue.jsをベースとして開発されました。
Vue.js(ビュージェイエス)やReact(リアクト)と同様にフロントエンド開発で使用され、Vue.jsを使いやすくする機能が搭載されています。
2024年4月現在、最新バージョンはNuxt3がリリースされています。
Nuxt3はVue3やTypeScriptに対応しており、TypeScriptへの対応に伴い「Nuxt.js」の「.js」は削除されました。
2. そもそもVue.jsとは
1.フロントエンド作成用のフレームワーク
Vue.jsはユーザーインタフェースなど視覚的要素にかかわるフロントエンド作成用のJavaScriptアプリケーションフレームワークの1つです。
ライブラリが多く拡張性が高いフレームワークで、必要な機能はライブラリを追加し、より簡単に実装ができます。
2.学習コストが低い
Vue.js特有の機能が少ないので、フロントエンドの開発経験があれば、少ない学習時間でHTML、CSS、JavaScriptを用いて動きのあるWebページを作ることができます。
最近はインターネットでVue.jsの日本語のドキュメントや解説記事が多く公開されており、学習しやすくなっております。
3.SPAのサイトが作成しやすい
SPAとはSingle Page Applicationの略です。
表示内容に変更があるときにページ全体を更新するのではなく、ページ内の必要な個所のみ更新し表示するWebページのことを指します。
ページ全体を再度表示する必要がなく、サーバーとのデータ通信量も少なく、操作性が高いページを作成できます。
欠点として初回起動時に画面の全機能のプログラムを読み込むため、表示に時間を要します。
3. Nuxt.jsはVue.jsと比べてどんなエンハンスがあるの？
1.Code Splitting(コードスプリッティング)
プログラム(コード)を分割し、初回起動時に必要最低限のプログラムを読み込み、ボタンをクリックしたりラベルをホバーするなどのタイミングで必要な機能のプログラムを読み込む機能です。プログラムの読み込みが分散されることにより、初回起動時の待ち時間が少なくなります。
2.自動インポート機能
Vue.jsではプログラム中で使用する別プログラムやライブラリを明示的に指定(インポート)する必要がありますが、Nuxt.jsではその必要が無いので手間が省けます。3.PWA対応
PWAとはProgressive web appsの略です。Webアプリケーションがスマートフォンの機能を扱うことができるフロントエンド技術のことを言います。
従来はAndroidであればAndroid studioで、iOSであればswiftで作成したネイティブアプリにより実現していました。
PWAによりネイティブアプリが無くてもプッシュ通知やモバイル決済などの機能をOSに依存することなく扱えるようになります。
4.初回読み込みのレスポンス向上(SSR)
SSRとはServer side rendering(サーバー側レンダリング)の略です。クライアントからリクエストされたページを初回ロード時にサーバー側で生成し、クライアントにHTMLを送信する機能です。
クライアント側ではWebページの初期表示を高速化できます。
また、検索エンジンのクローラーがアクセスした場合にもページが返されるので、SEO対策が可能になります。
注意点として、ページリロード時はCSR(Client side rendering:クライアント側レンダリング)になり、ページのふるまいが変わってしまうため、SSRでもCSRでも正常に動作するようにページを作りこむ必要があります。
また、SSRの利用可否は任意に選択することができます。
5.読み込みのレスポンス向上(SSG)
SSGとはStatic Site Generationの略です。ビルド時に予めページを生成し、クライアントからリクエストされたページのHTMLを送信する機能です。
SSRとの違いは、クライアントからのリクエスト毎のページ生成処理が発生しないことにより性能が向上する点です。
また、ページがキャッシュされ、同じコンテンツへのリクエストに対して効率的にキャッシュを提供できます。
SSRと同様に検索エンジンのクローラーがアクセスした場合にもページが返されるので、SEO対策が可能になります。
注意点として、ビルド時間がコンテンツ量に比例することと、動的なコンテンツの場合はAPIを利用してデータを取得するなどの工夫が必要なことです。
4. Typescriptとは？
TypeScriptはJavaScriptを拡張して開発されたプログラミング言語です。2017年にGoogle社の社内標準開発言語に採用されてからは世界的に注目を集めています。
1.Typescriptの特徴
TypeScriptはJavaScriptと同じ構文であり、同じライブラリを使用できるので違いがわかりにくいですが、大きな違いは型付けです。JavaScriptでは実行時にデータを決める動的型付けを採用しており、実行時にデータ型が自動で決定するため実行するまでエラーに気付けずにバグが発生する問題がありました。
Typescriptでは予め変数の型を定義する静的型付けを採用しており、コンパイラオプションで変数をチェックしエラーの発見が可能です。
このようにTypeScriptはエラーを防止できるので大規模な開発で利用されるケースが増えています。
2.実行時はJavaScriptに変換される
TypeScriptのコードはJavaScriptに変換してから実行するため、TypeScriptコンパイラが必要になります。TypeScriptコンパイラはNode.jsを利用しインストールします。
5. Nuxt.jsはどのようなサイトでに採用されているの？
・note
https://note.com/
・新型コロナウイルス保健医療情報ポータル
https://www.hokeniryo.metro.tokyo.lg.jp/kansen/corona_portal/index.html
・三井住友海上 MSコンパス
https://mscompass.ms-ins.com/
・ブリヂストンBRM
https://bs-brm.jp/
・タニタ
https://www.tanita.co.jp/
6. まとめ
Nuxt.jsはVue.jsをベースに開発されたフレームワークで、コードをVue.jsでもTypeScriptでも記述できることが分かりました。
また、Vue.jsにはないレスポンス向上機能やスマーフォンの機能を扱える技術が搭載されていることが分かりました。
以前Nuxt.jsの知見がないまま画面を作成したことがあり、ページ表示時とリロード時のふるまいが安定せず難航しました。
原因はSSRとCSRの両方に対応したプログラミングをしていなかったことだと、今回Nuxt.jsについてまとめることにより気付けました…