目次

はじめに

本書の構成
リポジトリとサポートについて
謝辞
表記関係について
免責事項
底本について

第1章 Nuxt.jsとは

1.1 ユニバーサルアプリ
1.2 サーバーサイドレンダリング
1.3 静的ファイルジェネレータ
1.4 まとめ

第2章 Nuxt.jsのはじめ方

2.1 npmを使う
2.2 vue-cliを使う
2.3 まとめ

第3章 Nuxt.jsの設定について

3.1 build
3.2 css
3.3 dev
3.4 env
3.5 generate
3.6 head
3.8 modules
3.9 plugins
3.10 rootDir
3.11 router
3.12 srcDir
3.13 transition
3.14 まとめ

第4章 ディレクトリ構成と役割

4.1 pages
4.2 components
4.3 layouts
4.4 plugins
4.5 middleware
4.6 store
4.7 assets
4.8 static
4.9 まとめ

第5章 ページコンポーネント

5.1 コンテキスト
5.2 .vueファイルに追加されたオプション
5.3 まとめ

第6章 レイアウト

6.1 デフォルトレイアウト
6.2 エラーページ
6.3 カスタムレイアウト
6.4 まとめ

第7章 プラグイン

7.1 プラグインとは
7.2 OSSのVueプラグインを使用する場合
7.3 アプリケーションのルートやcontextに挿入する
7.4 クライアントサイドでのみプラグインを利用したい場合
7.5 サーバサイドでのみプラグインを利用したい場合
7.6 まとめ

第8章 ミドルウェア

8.1 ミドルウェアとは
8.2 ミドルウェアを実装する
8.3 まとめ

第9章 ストア

9.1 ストアの使い方
9.2 プラグインの作成
9.3 まとめ

第10章 モジュール

10.1 OSSのモジュールを使用する
10.2 モジュールの作成方法
10.3 まとめ

第11章 コマンド

11.1 nuxt
11.2 nuxt build
11.3 nuxt start
11.4 nuxt generate
11.5 まとめ

第12章 Nuxt.jsでのWebアプリケーション開発

12.1 Nuxt.jsをフロントエンドサーバーとして使う方法
12.2 静的ファイルジェネレータで出力したものをホスティングサービスで利用する
12.3 expressのミドルウェアとして使用する場合
12.4 まとめ

付録A Nuxtバージョン2について

A.1 webpackがバージョン4になる
A.2 nuxt.config.jsの設定でvendorオプションがなくなる
A.3 buildオプションにsplitChunksが追加される
A.4 nuxt.config.js内でES Moduleが使用できるようになる
A.5 その他ブレーキングチェンジ
A.6 まとめ

おわりに

はじめに

 本書は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で公開しています。

 https://github.com/nasum/hello_nuxt_sample_code

謝辞

 本書の作成には多くの人に助けられました、特に家族には自宅での作業中迷惑をかけて申し訳なく思っております。この場を借りて感謝を申し上げます。そのうち何かしら贈り物ができればと思います。

 Nuxt.jsの公式ガイドは、本書を執筆する上でとても参考にさせていただきました。ガイドの翻訳を行っているVue.js日本ユーザグループの皆様にも深く御礼を申し上げます。

表記関係について

 本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

免責事項

 本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

底本について

 本書籍は、技術系同人誌即売会「技術書典4」で頒布されたものを底本としています

1. Nuxt.js日本語ガイド https://ja.nuxtjs.org/guide

第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はサーバーサイドレンダリングを行うフロントエンドサーバーとして利用したり、静的ファイルジェネレータとしてサーバーレスなアプリケーションを作成するなど、さまざまな利用方法があります。プロジェクトに応じて利用できる、柔軟性のあるフレームワークであるといえます。

試し読みはここまでです。
この続きは、製品版でお楽しみください。