CodeZine(コードジン)

特集ページ一覧

「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

Nuxt.jsのサーバーサイドレンダリングと静的ファイル生成を試す

 ここでは、Vue.jsを補完するNuxt.jsの機能として、サーバーサイドレンダリングと、静的ファイル生成を紹介します。

サーバーサイドレンダリング

 サーバーサイドレンダリングは、サーバーサイドでWebページの内容を生成する機能で、検索エンジン最適化(SEO)や表示の高速化に有用です。また、JavaScriptが無効な環境でも、最低限の内容を表示できるメリットがあります。

 Nuxt.jsのプロジェクトでは、デフォルトでサーバーサイドレンダリングが有効になるため、JavaScriptを無効にしたWebブラウザーでもWebページを表示できます(ただし、動的な処理は機能しません)。例えば、図4のWebページをJavaScript無効のWebブラウザーで表示すると、初期表示は行えますが、テキストボックスの内容を変更しても画面に反映されません。

[補足]ChromeでJavaScriptの有効/無効を切り替える

 ChromeでJavaScriptの有効/無効を切り替える設定は、設定画面の「詳細設定」-「サイトの設定」-「JavaScript」にあります。「chrome://settings/content/javascript」のURLを開いて、設定画面を直接表示することもできます。

図5:ChromeでJavaScriptの有効/無効を設定する画面
図5:ChromeでJavaScriptの有効/無効を設定する画面

 図4のサンプルで、Webページのソースコードを参照すると、サーバーサイドレンダリングされた初期表示の内容がHTMLで記述されていることがわかります(図6の赤枠部)。

図6:サーバーサイドレンダリングされたWebページのソースコード(p002-basic)
図6:サーバーサイドレンダリングされたWebページのソースコード(p002-basic)

 Nuxt.jsの設定ファイルnuxt.config.jsで、「mode」を「universal」から「spa」に変更すると、サーバーサイドレンダリングを無効にできます。

[リスト6]サーバーサイドレンダリングを無効化するnuxt.config.jsの設定
export default {
  mode: 'spa', // 'universal'から変更
(略)

 図4のサンプルでリスト6のmodeを変更後、「npm run dev」を実行して、JavaScript無効のWebブラウザーでWebページを開くと、真っ白なページが表示されます。ソースコードを参照すると、初期表示のHTML記述を含まないことがわかります。

図7:サーバーサイドレンダリングされていないWebページのソースコード(p002-basic)
図7:サーバーサイドレンダリングされていないWebページのソースコード(p002-basic)

 なお、リスト6のmodeは、プロジェクト生成時に、表2のNo.7(レンダリングモード)で初期設定できます。デフォルト値の「Universal」を選択するとmodeがuniversalに、「Single Page App」を選択するとmodeがspaに、それぞれ設定されます。

静的ファイル生成

 Nuxt.jsでは、プロジェクトから静的なファイルを生成できます。生成した静的ファイルは任意のWebサーバーにホストできます。Webサーバーにnode.jsやサーバーサイドアプリケーションの実行環境は必要ありません。

 「npm run generate」コマンドを実行すると、図8の通り、プロジェクトのdistフォルダーに静的ファイルが生成されます。

図8:Nuxt.jsプロジェクトから生成した静的ファイルの例
図8:Nuxt.jsプロジェクトから生成した静的ファイルの例

 ダウンロードできるサンプルに、図4のプロジェクト(p002-basic)から生成した静的ファイル(distフォルダー)を、Node.jsのWebサーバーでホストする例(p003-generated)を含めています。実行すると図4と同じ画面が表示されます。実行方法などの詳細は、サンプルコードのreadmeを参照してください。

まとめ

 本記事では、UIフレームワーク「Vue.js」を利用してWebページを作成できるJavaScriptフレームワーク「Nuxt.js」について、フレームワークの概要、プロジェクトの生成/実行方法、基本的な実装方法を説明しました。また、サーバーサイドレンダリングや静的ファイルの生成といった、Nuxt.jsの特徴的な機能を紹介しました。

 Nuxt.jsを使いこなすには、Vue.jsの基本について理解することが必要です。次回は、Vue.js(*.vueファイル)のバインディングやディレクティブの基本を説明していきます。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5