Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」

最近Nuxt.jsをガッツリ触ることが多くなってきたので、理解を深めるためにもまとめていきます。

Nuxt.jsとは

Nuxt.jsが生まれた経緯

もともとNuxt.jsは、Reactのフレームワークとして開発されたNext.jsにインスパイアされて開発されました。

NuxtとNextで名前が1文字違いとややこしいのですが、Vue.jsとReactで別のものなので検索結果でたまに紛れて出てきたときに惑わされないように注意しましょう。

最初はVue.jsのサーバーサイドレンダリングを支援する目的で開発されていましたが、いまでは機能が追加されていき、かなり高機能になっています。

Vue CLIとの使い分け

Vue.js公式の開発ツールであるVue CLIでも、Vue.jsの開発環境は簡単に構築できます。

GUIによって環境構築もできますし、必要な機能を選択しインストール。
高度なことを行わずにとりあえず触ってみたいという方は、Vue CLIから初めてみてもよさそうです。

Webrandum

Vue CLIでVue.jsの開発環境をセットアップするまでの流れ

https://webrandum.net/vue-cli

今回はVue CLIを使って、Vue.jsの開発環境を作るまでの手順をメモしておきます。Vue CLIはVue.jsの開発環境を作ってくれる公式のコマンドラインツールVue CLIはVue.jsでアプリケーションを構築するときに、必要となるツールを簡単にセットアップしてくれる公式のコマンドラインツールです。これを使うことで、1から自分でインストールして回る必要がなくなり、プロジェクトの作成が簡単にできます。Vue CLIとYarnのグローバルインストールまずは必要となる「Vue CLI」のインストールと「Yarn（インストールしていない人）」をインスト...

SSR（サーバーサイドレンダリング）

Vue CLIでは「SPA」と呼ばれるブラウザ上でJavaScriptの処理を用いてページを描画する方式を取っています。
そのためもとのHTMLは空で、その状態からどんどん書き込みを行っていきます。

人の目から見るとブラウザ側で描画しようが、サーバー側で描画しようが違いがあまり分かりませんが、HTMLしか理解できないクローラーなどは、JavaScriptの処理ができないため真っ白なページだと判定してしまいます。

せっかく作ったページも、クローラーに判定されなければ検索エンジンを利用して見つけてもらえません。

しかし、Nuxt.jsではSSR（Server Side Rendering）という機能を使って、サーバー側がでJavaScriptのレンダリングを行って、その結果をブラウザに渡します（設定でSPAを作ることも可能です）。

PHPやPythonなどのサーバーサイドプログラムの役割をJavaScriptが行っているようなイメージです。
そのため、返ってくるデータには通常のウェブサイトと同様のHTMLが記述されていて、クローラーも理解できます。

さらに最初のアクセス時はサーバーサイドで処理をしますが、その後のページ遷移はクライアント側でデータの取得をしてやり取りをするなど、SPAのメリットの描画スピードの速さも受けられます（設定で完全なSPAにもできます）。

Nuxt.jsのインストール

前提として、下記インストールされている必要があります。

• Node.js（npm 5.2.0以上）
• Yarn（yarnを使いたい場合）

プロジェクトの作成

Nuxt.jsを始めるときは、create nuxt-appを使用します。

npx create-nuxt-app プロジェクト名

Yarnを使用する場合は下記のコマンドでOKです。

yarn create nuxt-app プロジェクト名

npxの場合はcreate-nuxt-appとハイフンが続いていますが、yarnの場合はcreate nuxt-appという風に「create」と「nuxt-app」の間がハイフンではなくスペースなので注意が必要です。

実行すると必要なパッケージをインストールするか聞かれるので、enterを押して進みます。

その後にいくつか質問されるので、順に答えていきます。

プロジェクト名

? Project name (プロジェクト名)

最初にプロジェクト名を聞かれます。
create nuxt-appコマンドのパラメータとして渡した値が表示されるので、基本はこのままenterを押して先に進みます。

TypeScriptを使うかどうか

? Programming language

JavaScriptを使うか、TypeScriptを使うか選択します。
矢印キーで選択してenterを押せば先に進みます。

パッケージマネージャーの選択

? Choose a package manager (Use arrow keys)
> npm
yarn

npmを使うか、yarnを使うかパッケージマネージャーの選択をします。

この選択によって、Nuxt起動のために表示されたりREADME.mdに書かれるコマンドが変わったり、yarnの場合はyarnlockファイルが生成されたりします。

複数人のプロジェクトで、全員がyarnを使うと明確に決めていない場合はnpmの方がすぐスタートしてもらえますし、最近はnpmでもいいのかなと思い始めています。

個人で使う場合はyarnにしています。

UIフレームワークの選択

? UI framework (Use arrow keys)
> None
   Ant Design Vue
   BalmUI
   Bootstrap Vue
   Buefy
   Chakra UI
   Element
   Oruga
   Primevue
   Tachyons
   Tailwind CSS
   Windi CSS
   Vant
   View UI
   Vietify.js

UIフレームワークを使用する場合は、ここで選択します。
選択肢に関してはNuxtのバージョンによってどんどん追加されていっているようです。

使用モジュールの選択

? Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
> Axios - Promise based HTTP client
   Progressive Web App (PWA)
   Content - Git-based headless CMS

AxiosはAPI通信を簡単にしてくれるモジュールです。
過去に記事にしたこともありますが、ここでインストールできるのは通常のAxiosではなく、Nuxt.jsに合わせた専用のAxiosモジュールがインストールされます。

APIを利用する場合はとりあえずインストールしておいた方が良いです。

Progressive Web AppはPWAに対応したサイトを作るためのモジュールがインストールされます。

ContentはGitベースのHeadless CMSを作るためのモジュールがインストールされます。
Markdownファイルなどを置いて、それをベースにブログ記事が生成されたりします。

カーソルを矢印キーで移動してspaceを押せば、それぞれインストールしたいモジュール選択できます。
すべて選択したらenterで次に進みます。

Lintツールを選択

? Linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
> ESLint
   Prettier
   Lint staged files
   StyleLint
   Commitlint

ESLintやPrettierなどのというコーディングのスタイルを統一するためのリントツールを使用するかどうか選択します。

これも複数選択可能で、カーソルを矢印キーで移動してspaceを押せば、それぞれインストールできます。

テストツールの選択

? Testing framework (Use arrow keys)
> None
   Jest
   AVA
   WebdriverIO
   Nightwatch

コードを書いたあとのテストツールを選択します。

レンダリング方法を選択

? Choose rendering mode (Use arrow keys)
> Universal (SSR / SSG)
   Single Page App

ユニバーサルアプリケーション（SSR）とするか、シングルページアプリケーション（SPA）で作成するか選択します。

デプロイ先の選択

? Deployment target (Use arrow keys)
> Server (Node.js hosting)
   Static (Static/Jamstack hosting)

APIだけで完結しないような場合に「Server」を選択して、コンテンツは開発環境でビルドしたHTMLファイルを設置してAPI経由で表示させる場合は「Static」を選択します。

開発ツールの選択

? Development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
> jsconfig.json (Recommended for VS Code if you're not using typescript)
   Semantic Pull Request
   Dependabot (For auto-updating dependencies, GitHub only)

開発ツールを選択します。

「jsconfig.json」はVisual Studio Codeの設定ファイルを作成してくれて、コンパイルの設定なども入っています。

「Semantic Pull Requests」はコミットメッセージやプルリクエストのタイトルの付け方をチェックしてくれるツールです。

「Dependabot」はGitHubのボットで、リポジトリ内を監視して脆弱性が検知されたときなど必要に応じてアラートの通知を出してくれます（GitHub以外では使用できません）。

継続的インテグレーションの選択

? Continuous integration (Use arrow keys)
> None
   GitHub Actions (GitHub only)
   Travis CI
   Circle CI

「CI」と略されることの多い「継続的インテグレーション（Continuous Integration）」は、コードを更新して指定したブランチにプッシュすると、自動でビルド → テストをして、設定すればサーバーへのアップまでしてくれます。

バージョン管理（Git）を使うかどうかの選択

? Version control system (Use arrow keys)
> Git
   None

Gitを使用するかどうか選択します。
選択すると自動で「.git」フォルダなどGitに必要なフォルダやファイルが生成されます。

セットアップの完了

「Successfully created project ○○」と表示されれば、無事セットアップ完了です。

Nuxt.jsの起動

プロジェクト作成の最後のメッセージに起動コマンドが書かれています。
内容は「プロジェクト名」ディレクトリに移動して、npmの場合はnpm run devでNuxt起動。yarnの場合は「yarn run dev」で起動です。

下記がnpmの場合です。

$ cd プロジェクト名
$ npm run dev

そして下記がyarnの場合です。

$ cd プロジェクト名
$ yarn run dev

Nuxtが起動したら「localhost:3000」にアクセスして、ページが表示されていれば無事プロジェクトの作成と起動成功です（Nuxt.jsのバージョンや選択したUIフレームワークなどによって、表示はかなり大きく変わります）。

ディレクトリ構造

最後にNuxt.jsのディレクトリ構造についてざっくり触れておきます（セットアップ時に選択した設定によっては生成されていないフォルダもあります）。

• asset：SassやLessなどのコンパイルされていないアセットや、Webpackでインクルードする画像を入れる
• components：名前の通りコンポーネントを入れる
• layout：レイアウトを入れる（pageから指定することで、レイアウトを反映できる）
• middleware：ページやレイアウトのレンダリング前に実行するミドルウェアを入れる
• pages：この中にページを入れる（このファイルがそのままサイトの構造になる）
• plugins：JavaScriptプラグインファイルを入れる
• static：静的ファイルやWebpackでインクルードしない画像を入れる
• store：Vuexのストアファイルを入れる（index.jsを追加すると自動でVuexのオプションが有効化される）

Vue CLIと比べると違う部分が多いですが、そこまで大きく悩むことはなさそうです。