目次
はじめに
第1章 Nuxt.jsとは
第2章 Nuxt.jsのはじめ方
第3章 Nuxt.jsの設定について
第4章 ディレクトリ構成と役割
第5章 ページコンポーネント
第6章 レイアウト
第7章 プラグイン
第8章 ミドルウェア
第9章 ストア
第10章 モジュール
第11章 コマンド
第12章 Nuxt.jsでのWebアプリケーション開発
付録A Nuxtバージョン2について
おわりに
はじめに
本書はVue.jsでユニバーサルなアプリケーションを構築するためのフレームワークNuxt.jsの入門書です。Vue.jsとVuex、vue-routerを触ったことのある方であれば、問題なく読むことができるように構成されています。Vue.jsは触ったことはあるけどNuxt.jsは触ったことない、Nuxt.jsの使い方がいまいちわからない、SSRって何をすればよいか分からない、という方が想定読者となっています。
本書を読んでNuxt.jsを使用するイメージがつきましたら、Nuxt.jsのガイド1が存在するので、これを閲覧するとさらにステップアップが図れるでしょう。
本書で扱うNuxt.jsのバージョンは1.4系です。
本書の構成
本書は次の内容で構成されています。
第1章「Nuxt.jsとは」
Nuxt.jsがどのようなフレームワークなのか解説します
第2章「Nuxt.jsのはじめ方」
Nuxt.jsのはじめ方を解説します
第3章「Nuxt.jsの設定について」
Nuxt.jsの設定ファイルnuxt.config.jsについて解説します
第4章「ディレクトリ構成と役割」
Nuxt.jsのディレクトリ構成について解説します
第5章「ページコンポーネント」
Nuxt.jsのページコンポーネントについて解説します
第6章「レイアウト」
Nuxt.jsのレイアウトについて解説します
第7章「プラグイン」
Nuxt.jsのpluginについて解説します
第8章「ミドルウェア」
Nuxt.jsのmiddlewareについて解説します
第9章「ストア」
Nuxt.jsのストアについて解説します
第10章「Modules」
Nuxt.jsのmoduleについて解説します
第11章「コマンド」
Nuxt.jsで使用するコマンドについて解説します
第12章「Nuxt.jsでのWebアプリケーション開発」
Nuxt.jsでアプリケーションの開発方法について解説します
付録A「Nuxtバージョン2について」
Nuxt.jsの2系の差分について解説します
リポジトリとサポートについて
本書に掲載されたサンプルコードと正誤表などの情報は、次のURLで公開しています。
謝辞
本書の作成には多くの人に助けられました、特に家族には自宅での作業中迷惑をかけて申し訳なく思っております。この場を借りて感謝を申し上げます。そのうち何かしら贈り物ができればと思います。
Nuxt.jsの公式ガイドは、本書を執筆する上でとても参考にさせていただきました。ガイドの翻訳を行っているVue.js日本ユーザグループの皆様にも深く御礼を申し上げます。
表記関係について
本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。
免責事項
本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。
底本について
本書籍は、技術系同人誌即売会「技術書典4」で頒布されたものを底本としています
第1章 Nuxt.jsとは
本章ではNuxt.jsがどのようなフレームワークなのかを解説します。中でもNuxt.jsが実現するユニバーサルアプリの概念と、機能として実装されているサーバーサイドレンダリングと静的ファイルジェネレータについて紹介します。
1.1 ユニバーサルアプリ
Nuxt.jsとは、ユニバーサルなアプリケーションを構築するためのフレームワークです。Vue.jsとVuex、vue-routerを内包し、アプリケーションのビューを構築するための規約・ルールを提供しています。
さて、ユニバーサルなアプリケーションとは一体何でしょうか？
ここでの「ユニバーサルなアプリケーション」とはクライアントサイドとサーバーサイドの両方で実行できるJavaScriptのアプリケーションを指します。かつてはisomophicと呼ばれていた概念です。ユニバーサルなアプリケーションの場合はさらにその概念を拡張し、同じコードをネイティブアプリやデスクトップアプリでも実行できるアプリケーションのことを指しています。
Nuxt.jsでは、同じコードでクライアントサイドのSPA（Single Page Application）とサーバーサイドのSSR（Server Side Rendering）実現し、ユニバーサルなアプリケーションを実現しています。
1.2 サーバーサイドレンダリング
Nuxt.jsは、プロジェクトのUIレンダリングを担うフロントエンドサーバーとして利用することができます。
UIレンダリングをNuxt.jsで構築したフロントエンドサーバーに任せ、ビューをレンダリングするための情報はバックエンドサーバーから取得する、という設計でアプリケーションを構築することができます。
Nuxt.jsでは、サーバーサイドレンダリングをするために事前にデータをバックエンドサーバーから取得するための機能があり、ページコンポーネントのasyncDataメソッドやfetchメソッドでデータを取得します。ビューをレンダリングする前にデータを取得できるので、完成した状態のHTMLを構築しブラウザで表示することが可能です。asyncDataとfetchについては第5章「ページコンポーネント」で詳しく見ていきます。
1.3 静的ファイルジェネレータ
Nuxt.jsは、静的ファイルジェネレータとしても使うことができます。Nuxt.jsで構築したアプリケーションを、そのままHTML・JavaScript・CSSファイルとして出力できます。出力された静的ファイルはVue.jsやVuexを含んでいるので、SPA（Single Page Application）として動作させることができます。
また静的ファイルとして出力されることにより、firebase hostingやNetlify、GitHub Pagesでホストすることができます。静的ファイルホスティングサービスを利用することにより、サーバーレスなWebアプリケーションを簡単に作成できるようになります。
1.4 まとめ
本章ではNuxt.jsが何をできるかについて紹介し、その中でユニバーサルアプリとは何か、またNuxt.jsというフレームワークについて解説しました。
Nuxt.jsはサーバーサイドレンダリングを行うフロントエンドサーバーとして利用したり、静的ファイルジェネレータとしてサーバーレスなアプリケーションを作成するなど、さまざまな利用方法があります。プロジェクトに応じて利用できる、柔軟性のあるフレームワークであるといえます。