ド素人フロントエンド開発【1】:Nuxt2.11のセットアップ

フロントエンド開発
この記事は約27分で読めます。

ド素人ですが、趣味でフロントエンド開発できるようになりたくて、奮闘した記録です。リアルに全然分かりませんが、ReactやAngularよりとっつきやすそうだったので(根拠はゼロです。感覚です。)、しばらくVue.jsを学んでみようと思います。

そして、Vue.jsでアプリケーション開発するにあたっては、Nuxt.jsを利用するのが手っ取り早そうだったので、Nuxt.jsをベースにフロントエンド開発に挑戦していこうと思います。

という訳で、今回はNuxt.jsのアプリケーションをセットアップしていきます。(ちょろっと書くつもりでしたが、コマンドの実行結果やら素人目線での解説を書いていたら長文になってしまいました。。)

ゴール

  • ローカル環境でNuxt.jsのアプリケーションが起動し、ブラウザからアクセスできるようにする。
  • 作成したアプリケーションについて、静的解析ツールを通す。
  • 作成したアプリケーションについて、 テストを通す。
  • 各種依存パッケージを最新化する。
  • 静的解析のエラーを簡単に修正できるようにする。
  • アプリケーションのソースディレクトリをルートディレクトリからsrcディレクトリに変更する。

今回のゴールしたコードは下記GitHub参照。(1-initial-setupブランチ

norio-io/nuxt-example
Contribute to norio-io/nuxt-example development by creating an account on GitHub.

環境・前提など

Windows環境で実施した内容になっておるが、Macでも基本的には同じなんじゃなかろうか。MacBook Pro 2019の16インチが欲しいけど、今年の4Qにフルモデルチェンジの噂もあるので、我慢。。Windowsで開発つらい。。

  • Windows 10 (CLIはPowerShellを使用)
  • Node.js 12.14.0
  • npm 6.13.4
  • Nuxt.js 2.11.0
  • Vuetify 2.1.16 (@nuxtjs/vuetifyは1.9.1)
  • Axios 0.19.0
  • DotEnv 8.2.0
  • ESLint 6.8.0
  • Prettier 1.19.1
  • Jest 24.9.0

WindowsでNode.jsが未インストールの場合は、下記からインストーラーをダウンロードしてインストールします。npmも一緒にインストールされます。

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Macの場合は、homebrewをインストールして、homebrewでnodebrewをインストールして、nodebrewでNode.jsをインストールが良さそうです。

Homebrew
The Missing Package Manager for macOS (or Linux).

手順

Nuxt.jsアプリケーションを生成

生成コマンド

create-nuxt-appというオフィシャルなツールで生成します。

PowerShell(Macならターミナル)を開いて、アプリケーションを生成する親ディレクトリ(ディレクトリごと生成されるため)で下記コマンドを実行します。

# コマンド
$ npx create-nuxt-app <application name> 
# 例
$ npx create-nuxt-app nuxt-example
nuxt/create-nuxt-app
Create Nuxt.js App in seconds. Contribute to nuxt/create-nuxt-app development by creating an account on GitHub.

生成コマンド実行時の対話内容

上記コマンドを実行すると下記のように対話形式で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)  

モジュールなど後から手動で追加・削除はもちろん可能ですが、ここで選択しておくと例えば、package.json内のスクリプトやnuxt.config.jsなども整合をとって生成してくれるので、なるべくここで選択しておきたいところです。 (自分みたいな素人には手動であれこれ組み合わせるのはハマりどころ満載でした。。)

生成コマンド実行時の入力内容の説明と例

項目説明
Project nameプロジェクト(アプリケーション)の名前です。生成するアプリケーションのディレクトリ名や、package.jsonのnameに使用されます。
Project descriptionプロジェクト(アプリケーション)の説明です。 package.jsonのdescriptionに使用されます。
Author name プロジェクト(アプリケーション)の作者の名前です。 package.jsonのauthorに使用されます。
Choose the package manager使用するパッケージマネージャを選択します。

本記事はnpmを使用する前提で説明していますが、手順の流れ自体は同様なので、使い慣れている方でいいと思います。
Choose UI frameworkUIフレームワークをひとつ選択します。

CSSフレームワークとしてはBootstrap派でしたが、 本記事ではVuetify.jsを選択した前提で説明します。
Choose custom server frameworkサーバフレームワークをひとつ選択します。

よく分からないので、本記事では推奨のNoneを選択した前提で説明します。
Choose Nuxt.js modulesNuxt.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 &amp; start for production:
     cd nuxt-example
     npm run build
     npm run start
 To test:
     cd nuxt-example
     npm run test

何か不手際があるのかもしれませんが、なぜか.gitディレクトリ(と、その中身も)生成され、アプリケーションのディレクトリ内にあります。生成したディレクトリごとクローンしたGit管理下のディレクトリにコピーや移動する際は、.gitディレクトリ配下を上書きしてしまわないように注意が必要です。

生成したアプリケーションの起動

生成完了時に出力されたログの説明通り、生成されたディレクトリに移動して下記コマンドを実行すると、生成したアプリケーションを起動できます。 ( 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

-gオプションをつけるとプロジェクトのpackage.jsonに追記されず、グローバルにインストールされるとのことです。(プロジェクトのビルドやランタイムに必要のないものはプロジェクトには不要なのでグローバルにインストールする感じ?)

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 .",

ド素人なので、ここで疑問が生じたのですが、静的解析もその修正もESLintのコマンドでやってるし、Prettierはどこ行ったの?と思ったら、.eslintrc.jsの中でプラグインとしてPrettierが指定されていました。(下記18行目)

この辺りからも、ド素人にはcreate-nuxt-appで良しなに生成してもらってよかったという感じですね。

追加した静的解析エラー修正コマンドを実行

さっそく追加したコマンド(スクリプト)で静的解析エラーを解消します。

$ 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ディレクトリ直下に下記のディレクトリ、ファイルを移動します。

  • assets
  • components
  • layouts
  • middleware
  • pages
  • plugins
  • static
  • store
  • test
  • .env

そして、下記4ファイルを修正します。

  • nuxt.config.js
  • jest.config.js
  • jsconfig.json
  • .gitignore

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.

分かりにくかったかもしれないので、下記がソースディレクトリを変更した際のコミットです。

#1 Change the source directory from the root to src. · norio-io/[email protected]
Contribute to norio-io/nuxt-example development by creating an account on GitHub.

また、だいぶあっさりしていますが、ソースディレクトリに関する説明はオフィシャルにも載っていました。

API: srcDir プロパティ
Nuxt.js アプリケーションのソースディレクトリを指定します

長くなりましたが、以上で下記ゴールを達成できたので今回はここまでです。

  • ローカル環境でNuxt.jsのアプリケーションが起動し、ブラウザからアクセスできるようにする。
  • 作成したアプリケーションについて、静的解析ツールを通す。
  • 作成したアプリケーションについて、 テストを通す。
  • 各種依存パッケージを最新化する。
  • 静的解析のエラーを簡単に修正できるようにする。
  • アプリケーションのソースディレクトリをルートディレクトリからsrcディレクトリに変更する。

補足

Nuxt.jsとは直接関係ありませんが、フロントエンド系のリポジトリということで画像ファイルなども多数コミットするかもしれないため、Git LFSの設定をした.gitattributesファイルもしれっと追加しています。あとはWindowsなので改行コードの指定も併せて入れておきました。。Macほしい。。

コメント

タイトルとURLをコピーしました