ド素人ですが、趣味でフロントエンド開発できるようになりたくて、奮闘した記録です。リアルに全然分かりませんが、ReactやAngularよりとっつきやすそうだったので（根拠はゼロです。感覚です。）、しばらくVue.jsを学んでみようと思います。
そして、Vue.jsでアプリケーション開発するにあたっては、Nuxt.jsを利用するのが手っ取り早そうだったので、Nuxt.jsをベースにフロントエンド開発に挑戦していこうと思います。
という訳で、今回はNuxt.jsのアプリケーションをセットアップしていきます。（ちょろっと書くつもりでしたが、コマンドの実行結果やら素人目線での解説を書いていたら長文になってしまいました。。）
ゴール
今回のゴールしたコードは下記GitHub参照。（1-initial-setupブランチ）
環境・前提など
Windows環境で実施した内容になっておるが、Macでも基本的には同じなんじゃなかろうか。MacBook Pro 2019の16インチが欲しいけど、今年の4Qにフルモデルチェンジの噂もあるので、我慢。。Windowsで開発つらい。。
手順
Nuxt.jsアプリケーションを生成
生成コマンド
create-nuxt-appというオフィシャルなツールで生成します。
PowerShell（Macならターミナル）を開いて、アプリケーションを生成する親ディレクトリ（ディレクトリごと生成されるため）で下記コマンドを実行します。
# コマンド
$ npx create-nuxt-app <application name>
# 例
$ npx create-nuxt-app nuxt-example
生成コマンド実行時の対話内容
上記コマンドを実行すると下記のように対話形式でUIフレームワークなどを選択しながら、Nuxt.jsのアプリケーションのひな型を生成することができます。
✨ Generating Nuxt.js project in nuxt-example
? Project name (nuxt-example)
? Project description (My laudable Nuxt.js project)
? Author name (Norio)
? Choose the package manager (Use arrow keys)
Yarn
Npm
? Choose UI framework (Use arrow keys)
None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuetify.js
? Choose custom server framework (Use arrow keys)
None (Recommended)
AdonisJs
Express
Fastify
Feathers
hapi
Koa
Micro
? Choose Nuxt.js modules (Press to select, to toggle all, to invert selection)
( ) Axios
( ) Progressive Web App (PWA) Support
( ) DotEnv
? Choose linting tools (Press to select, to toggle all, to invert selection)
( ) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint
? Choose test framework (Use arrow keys)
None
Jest
AVA
? Choose rendering mode (Use arrow keys)
Universal (SSR)
Single Page App
? Choose development tools (Press to select, to toggle all, to invert selection)
( ) jsconfig.json (Recommended for VS Code)
生成コマンド実行時の入力内容の説明と例
| 項目 | 説明 |
|---|---|
| Project name | プロジェクト（アプリケーション）の名前です。生成するアプリケーションのディレクトリ名や、package.jsonのnameに使用されます。 |
| Project description | プロジェクト（アプリケーション）の説明です。 package.jsonのdescriptionに使用されます。 |
| Author name | プロジェクト（アプリケーション）の作者の名前です。 package.jsonのauthorに使用されます。 |
| Choose the package manager | 使用するパッケージマネージャを選択します。 本記事はnpmを使用する前提で説明していますが、手順の流れ自体は同様なので、使い慣れている方でいいと思います。 |
| Choose UI framework | UIフレームワークをひとつ選択します。 CSSフレームワークとしてはBootstrap派でしたが、 本記事ではVuetify.jsを選択した前提で説明します。 |
| Choose custom server framework | サーバフレームワークをひとつ選択します。 よく分からないので、本記事では推奨のNoneを選択した前提で説明します。 |
| Choose Nuxt.js modules | Nuxt.jsのモジュールを選択します。（ゼロ個または複数可） AxiosはHTTPクライアントです。バックエンドのAPIを呼び出す際などに使用します。OpenAPIジェネレータのクライアントライブラリの生成でもTypeScript+Axios版が生成できるようなので、入れておきます。（OpenAPIジェネレータで生成したクライアントライブラリに含まれていて不要かもしれないですが、まだ試してないので分からず。。ひとまず入れておきました） Progressive Web App (PWA) Supportは名前の通りPWA対応するための モジュールです。使ったことないですが、PWA対応したいので入れておきます。 DotEnvは.envファイルから変数を直接contextyaprocess.envに読み込んでくれるモジュールらしいです。まだ使ったことないですが、プロダクト環境にリリースする頃にはプロファイル的に使えることを期待して、入れておきました。 |
| Choose linting tools | 静的解析ツールを選択します。 （ゼロ個または複数可） どれも使ったことないですが、ESLintとPrettierを選択しました。 |
| Choose test framework | テストのフレームワークをひとつ選択します。 どれも使ったことないですが、Jestを選択しました。 |
| Choose rendering mode | レンダリングモードをひとつ選択します。 面倒くさそうな名前のSSRですが、Nuxt.jsではどちらを選んでも実装内容に差はなさそうな雰囲気だったので、ひとまずSSR（Universal）を選択しました。 |
| Choose development tools | 現状選択肢はひとつしかありませんが、開発ツールを選択します。 （ゼロ個または複数可） 個人的にはIntelliJ IDEAで開発していますが、一応VS code向けに推奨となっているjsconfig.jsonを選択しておきました。 |
実際の入力例と、成功した時の出力です。
create-nuxt-app v2.12.0
✨ Generating Nuxt.js project in nuxt-example
? Project name nuxt-example
? Project description Nuxt.js example application by Norio.
? Author name Norio
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press to select, to toggle all, to invert selection)Axios, Progressive Web App
(PWA) Support, DotEnv
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
（中略）
🎉 Successfully created project nuxt-example
To get started:
cd nuxt-example
npm run dev
To build & start for production:
cd nuxt-example
npm run build
npm run start
To test:
cd nuxt-example
npm run test
生成したアプリケーションの起動
生成完了時に出力されたログの説明通り、生成されたディレクトリに移動して下記コマンドを実行すると、生成したアプリケーションを起動できます。 （ Ctrl+C で停止できます）
$ npm run dev
起動成功時は下記のようにログが出力されます。
> [email protected] dev C:\git\nuxt-example
> nuxt
╭─────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.11.0 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰─────────────────────────────────────────────╯
i Preparing project for development 01:52:54
i Initial build may take a while 01:52:54
√ Builder initialized 01:52:54
√ Nuxt files generated 01:52:54
√ Client
Compiled successfully in 10.56s
√ Server
Compiled successfully in 9.40s
i Waiting for file changes 01:53:06
i Memory usage: 478 MB (RSS: 579 MB)
ブラウザで下記URLにアクセスすると、生成したアプリケーションが表示されます。
http://localhost:3000/
生成したアプリケーションの静的解析ツール実行
同様に生成されたディレクトリで下記コマンドで静的解析ツールを実行できます。
$ npm run lint
成功時の出力は下記のようになります。生成時に指定した通り、ESLintが使用されています。
> [email protected] lint C:\git\nuxt-example
> eslint --ext .js,.vue --ignore-path .gitignore .
生成したアプリケーションのテスト実行
同様に生成されたディレクトリで下記コマンドでテストを実行できます。
$ npm run test
成功時の出力は下記のようになります。 生成時に指定した通り、Jestが使用されています。
> [email protected] test C:\git\nuxt-example
> jest
PASS test/Logo.spec.js
Logo
√ is a Vue instance (9ms)
------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
------------------|----------|----------|----------|----------|-------------------|
All files | 16.67 | 100 | 25 | 16.67 | |
components | 50 | 100 | 50 | 50 | |
Logo.vue | 100 | 100 | 100 | 100 | |
VuetifyLogo.vue | 0 | 100 | 0 | 0 | 1 |
pages | 0 | 100 | 0 | 0 | |
index.vue | 0 | 100 | 0 | 0 | 1,66,67 |
inspire.vue | 0 | 100 | 0 | 0 | 1 |
------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 5.262s
Ran all test suites.
依存パッケージの最新化
npm-check-updatesのインストール
依存パッケージのアップデートにはncuを使います。インストールされていなければ、下記コマンドでグローバルにインストールします。
$ npm install -g npm-check-updates
package.jsonのアップデート
インストールしたら、アプリケーションのルートディレクトリで下記コマンドを実行します。
$ ncu
すると、下記のようにバージョンアップ可能な依存パッケージが分かります。
Checking C:\git\nuxt-example\package.json
[====================] 17/17 100%
nuxt ^2.0.0 → ^2.11.0
@nuxtjs/axios ^5.3.6 → ^5.9.0
@nuxtjs/pwa ^3.0.0-0 → ^3.0.0-beta.19
@nuxtjs/dotenv ^1.4.0 → ^1.4.1
@nuxtjs/vuetify ^1.0.0 → ^1.9.1
@nuxtjs/eslint-config ^1.0.1 → ^2.0.0
@nuxtjs/eslint-module ^1.0.0 → ^1.1.0
babel-eslint ^10.0.1 → ^10.0.3
eslint ^6.1.0 → ^6.8.0
eslint-plugin-nuxt >=0.4.2 → >=0.5.0
eslint-config-prettier ^4.1.0 → ^6.9.0
eslint-plugin-prettier ^3.0.1 → ^3.1.2
prettier ^1.16.4 → ^1.19.1
@vue/test-utils ^1.0.0-beta.27 → ^1.0.0-beta.30
babel-jest ^24.1.0 → ^24.9.0
jest ^24.1.0 → ^24.9.0
Run ncu -u to upgrade package.json
上記指示通り、下記コマンドでpackage.jsonをアップデートします。
$ ncu -u
すると、下記のように同様ですがアップデート結果が出力されます。バージョンアップされるとなんだか最新て感じで気分がいいですね。
Upgrading C:\git\nuxt-example\package.json
[====================] 17/17 100%
nuxt ^2.0.0 → ^2.11.0
@nuxtjs/axios ^5.3.6 → ^5.9.0
@nuxtjs/pwa ^3.0.0-0 → ^3.0.0-beta.19
@nuxtjs/dotenv ^1.4.0 → ^1.4.1
@nuxtjs/vuetify ^1.0.0 → ^1.9.1
@nuxtjs/eslint-config ^1.0.1 → ^2.0.0
@nuxtjs/eslint-module ^1.0.0 → ^1.1.0
babel-eslint ^10.0.1 → ^10.0.3
eslint ^6.1.0 → ^6.8.0
eslint-plugin-nuxt >=0.4.2 → >=0.5.0
eslint-config-prettier ^4.1.0 → ^6.9.0
eslint-plugin-prettier ^3.0.1 → ^3.1.2
prettier ^1.16.4 → ^1.19.1
@vue/test-utils ^1.0.0-beta.27 → ^1.0.0-beta.30
babel-jest ^24.1.0 → ^24.9.0
jest ^24.1.0 → ^24.9.0
Run npm install to install new versions.
アップデートされた依存パッケージをインストール
package.jsonがアップデートされたので、上記指示通り、下記コマンドで依存パッケージをインストールします。
$ npm install
成功すると下記のように追加件数などのログが出力されます。
（前略）
added 21 packages from 10 contributors, updated 14 packages and audited 896360 packages in 15.881s
29 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
アップデート後の確認
依存パッケージをアップデートしたので、念のため再度動作確認などしておきます。
$ npm run lint
$ npm run test
$ npm run dev
バージョンに依るのかもしれませんが、今回はLintの警告が5件ほど出るようになってしまいました。。（テストとブラウザ確認はOKでした。）
> [email protected] lint C:\git\nuxt-example
> eslint --ext .js,.vue --ignore-path .gitignore .
C:\git\nuxt-example\layouts\default.vue
29:55 warning Attribute "icon" should go before "@click.stop" vue/attributes-order
32:47 warning Attribute "icon" should go before "@click.stop" vue/attributes-order
35:43 warning Attribute "icon" should go before "@click.stop" vue/attributes-order
40:55 warning Attribute "icon" should go before "@click.stop" vue/attributes-order
C:\git\nuxt-example\layouts\error.vue
31:3 warning The "data" property should be above the "head" property on line 24 vue/order-in-components
✖ 5 problems (0 errors, 5 warnings)
0 errors and 5 warnings potentially fixable with the `--fix` option.
静的解析エラーを解消する
静的解析エラーを修正するためのコマンド（スクリプト）追加
ド素人すぎてお作法が分からないので、ここは安直に対応します。
先の静的解析（eslintコマンド）のエラー時に–fixオプションで修正可能かもよ的なログが出力されていたので、package.jsonのscriptsにfixオプションを付与したコマンドを追加します。（下記13行目）
13行目に下記を追加しました。
"fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
追加した静的解析エラー修正コマンドを実行
さっそく追加したコマンド（スクリプト）で静的解析エラーを解消します。
$ npm run fix
すると、下記のようにeslintコマンドがfixオプション付きで実行されました。
> [email protected] fix C:\git\nuxt-example
> eslint --fix --ext .js,.vue --ignore-path .gitignore .
再度静的解析を実行すると、
$ npm run lint
無事、5件あった警告が解消されました。
> [email protected] lint C:\git\nuxt-example
> eslint --ext .js,.vue --ignore-path .gitignore .
ソースディレクトリの変更
最後にソースディレクトリを変更してディレクトリ構成をすっきりさせます。
まずは、アプリケーションのルートディレクトリにsrcディレクトリを作成します。
そして、作成したsrcディレクトリ直下に下記のディレクトリ、ファイルを移動します。
そして、下記4ファイルを修正します。
nuxt.config.jsは下記5行目のように、ソースディレクトリの指定を追加します。
jest.config.jsは下記3、4、14、15行目のように、ソースディレクトリのpathを修正します。（pathの階層にsrcを追加）
jsconfig.json は下記5、6行目のように、ソースディレクトリのpathを修正します。（pathの階層にsrcを追加）
.gitignore は下記8行目のように、.envファイルのpathを修正します。 （pathの階層にsrcを追加）
ソースディレクトリ変更後の各種確認をしたところ、ブラウザ確認、静的解析、テストともOKでした。静的解析とテストのコマンドの結果だけ下記に貼っておきます。テストのカバレッジも変更前と同じなので大丈夫そうです。
PS C:\git\nuxt-example> npm run lint
> [email protected] lint C:\git\nuxt-example
> eslint --ext .js,.vue --ignore-path .gitignore .
PS C:\git\nuxt-example> npm run test
> [email protected] test C:\git\nuxt-example
> jest
PASS src/test/Logo.spec.js
Logo
√ is a Vue instance (10ms)
------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
------------------|----------|----------|----------|----------|-------------------|
All files | 16.67 | 100 | 25 | 16.67 | |
components | 50 | 100 | 50 | 50 | |
Logo.vue | 100 | 100 | 100 | 100 | |
VuetifyLogo.vue | 0 | 100 | 0 | 0 | 1 |
pages | 0 | 100 | 0 | 0 | |
index.vue | 0 | 100 | 0 | 0 | 1,66,67 |
inspire.vue | 0 | 100 | 0 | 0 | 1 |
------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 6.077s
Ran all test suites.
分かりにくかったかもしれないので、下記がソースディレクトリを変更した際のコミットです。
また、だいぶあっさりしていますが、ソースディレクトリに関する説明はオフィシャルにも載っていました。
長くなりましたが、以上で下記ゴールを達成できたので今回はここまでです。
補足
Nuxt.jsとは直接関係ありませんが、フロントエンド系のリポジトリということで画像ファイルなども多数コミットするかもしれないため、Git LFSの設定をした.gitattributesファイルもしれっと追加しています。あとはWindowsなので改行コードの指定も併せて入れておきました。。Macほしい。。
コメント