BLOG

【Nuxt.js】プロジェクト作成ツール[v3系]での作成方法を紹介

2020.9.15
TECH

こんばんは、タロウです。

前回こちらで紹介したテンプレートプロジェクト作成ツールですが、
メジャーバージョンがリリースされ、v3.2.0(2020/9/11現在)となりましたので、最新バージョンでのインストール方法を紹介します!

変更点

  • 2020/06にメジャーバージョンアップ(v2.15.0 → v3.0.0)
  • 対話内容に若干変更

大きくは変わらず、対話式で使用するツールやプラグイン、構成を聞かれるので
答えて進めていくだけです。

動作環境

“-v”をつけてバージョンを確認します。
※-vというプロジェクトが作成されるわけじゃなのでご安心を!

$ npx create-nuxt-app -v
create-nuxt-app/3.2.0 win32-x64 node-v12.18.3

プロジェクトを作成する

まずは作成したいディレクトリに移動して、
テンプレートプロジェクト作成コマンドを実行します。

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

任意のプロジェクト名をつけて作成します。
ここではプロジェクト名を「v3_test」を付けています。

create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in v3_test
? Project name: v3_test
? Programming language: TypeScript 
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier    
? Testing framework: None
? Rendering mode: Single Page App    
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript), Semantic Pull Requests
warning nuxt > @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
warning nuxt > @nuxt/cli > @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
warning nuxt > @nuxt/webpack > @nuxt/babel-preset-app > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the  
actual version of core-js@3.
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
yarn run v1.22.5
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
Done in 6.47s.

�  Successfully created project v3_test

  To get started:

        cd v3_test
        yarn dev

  To build & start for production:

        cd v3_test
        yarn build
        yarn start


  For TypeScript users.

  See : https://typescript.nuxtjs.org/cookbook/components/

? Project name

プロジェクト名を設定します。
未入力の場合は最初に実行したコマンドで指定したプロジェクト名が設定されます。

? Programming language:

開発言語を指定します。

  • JavaScript
  • TypeScript

v3ではTypeScriptが選択できるようになっています。
nuxtを使用した開発でもTypeScriptを使用するのが主流になりつつあるので、
ここで指定できるのは便利ですね。

? Package manager:

パッケージ管理ツールを選択します。

  • Yarn
  • Npm

どちらでも好きなほうを選びます。
Yarnの方が依存パッケージに強いので、Yarn推しです。

? UI framework:

UIフレームワークを設定します。

  • None
  • Ant Design Vue
  • Bootstrap Vue
  • Buefy
  • Bulma
  • Chakra UI
  • Element
  • Framevuerk
  • iView
  • Tachyons
  • Tailwind CSS
  • Vuesax
  • Vuetify.js

好きなフレームワークを選択します。
豊富なUIパーツに、日本語ドキュメントと使い勝手が良いので、Vuetifyが一番人気だと思います!

? Nuxt.js modules:

moduleを選択します。
よく使うものなので、ここでインストールしておくと便利です。

  • Axios
  • Progressive Web App (PWA)
  • Content

Axios

非同期通信を簡易化させるモジュールで、必ずとと言っても良いほど選択したほうが良いです。
バックエンド側で作成したREST APIや、外部システムのAPIを呼ぶ際に使用します。

Progressive Web App (PWA)

Progressive Web Appsの略で、数年前から話題になっている概念です。
Webアプリ/Wedサイトをネイティブアプリのように動かすことができます。

Content

v3から選択できるようになったヘッドレスCMSを可能とするモジュールです。
※モジュール自体は2020/05にメジャーバージョンがリリースされています。
Markdown形式で記載できるので、.mdに慣れている人はこっちのほうが書きやすいかもしれません。

? Linting tools:

Lintツールを設定します。
言わずとしれたツールばかりなので、複数人で開発する場合はいれておきましょう。

  • ESLint
  • Prettier
  • Lint staged files
  • StyleLint

ESLint

JavaScriptのコードチェックツールで、まず入れるに越したことはありません。

Prettier

コードフォーマッターで、インデントやセミコロンなど自動で整えてくれるツールです。
複数人で開発を行う場合、コードの書き方をそろえるために導入しているプロジェクトが多いです。
もちろん1人で開発の場合も、自動でキレイなコードに整えてくれるので可読性の良いコードになります。
VSCode(開発ツール)のPrettierについてはこちらにかなり詳しく書いています!

Lint staged files

git(バージョン管理ツール)を使用している場合、コミット前にチェックを走らせることができます。

StyleLint

v3から選択できるようになったCSSのLinterです。
なかなかCSS設計までしっかりされている開発現場は少ないかと思います。
好き勝手な記述にならないようチームで美しいCSSにすることができます。

? Testing framework:

テストフレームワークを選択します。

  • None
  • Jest
  • AVA
  • WebdriverIO

Jest

Facebook社が開発したテストフレームワークで、高速なテストを可能にしています。
TwitterやInstagramもこのフレームワークを取り入れて開発されているようです。

AVA

シンプルな構文を書くことでテストができるフレームワークです。
ドキュメントを見れば書ける くらいシンプルなので学習コストが低く、導入しやすいです。

WebdriverIO

javaScriptでテストケースを作成することができるE2Eテストフレームワークです。
単体試験というよりは、システム全体を通したIN/OUTを確認するブラックボックステストです。

? Rendering mode:

レンダリングモードを選択します。

  • Universal (SSR)
  • Single Page App

v3になってからバックエンドの選択項目がなくなってしまったので、
フロント制作で使用されるケースが多くなってきたのでは・・?と思っています。(個人的には)
NuxtでDOM操作、Axiosで情報取得、表示が主な動作になるのでSSRを選択するメリットが薄く感じます。

? Deployment target:

デプロイ先を選択します。

Server (Node.js hosting)

AWS EC2などのコンピュータエンジン上に構築する場合で、
DBアクセスやファイル操作などAPIだけで完結しないような場合に指定します。

Static (Static/JAMStack hosting)

フロントのみNuxtで作成し、コンテンツはAPI経由で取得する場合に恩恵を受けることができます。
静的ファイルを書き出して動作するので静的ホスティングサービス上に展開して使用します。
※もちろんServerを立てて使用もできます。

? Development tools:

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

  • jsconfig.json (Recommended for VS Code if you’re not using typescript)
  • Semantic Pull Requests

jsconfig.json

VSCode(Visual Studio Code)で開発する際は入れたほうが良いです。
VSCodeの設定ファイルなので動作自体に影響があるわけではありません。
コンパイルの設定や、VSCode上の警告を出なくしたり などの設定ができます。

Semantic Pull Requests

GithubのSemantic Pull Requestsを使用する際に設定しておくと便利です。
commitのメッセージやPull Requestのタイトルの付け方などをチェックしてくれるツールです。

構築実行

最後の項目を選択しEnterを押すと、
パッケージのインストールや構築が始まります。
選択した項目にもよりますが、約1分ほどで完了します。

あとは最後に出力された下記を実行すれば準備が整います。

cd v3_test
yarn dev

ブラウザから下記にアクセスして画面が表示されれば完了です!

localhost:3000

起動方法について

開発用と、本番用と2種類あります。

開発用 -Development-

cd v3_test
yarn dev

随時Buildされて動作します。
またホットデプロイなので、ソースの変更は再起動やBuildを行わなくても反映されます。

本番用 -Production-

cd v3_test
yarn build
yarn start

事前にBuildを行い動きます。ホットデプロイではないので、ソースの変更は随時反映されませんが、
毎回Buildが走らないので、開発用に比べると速度もメモリ消費量も断然違います。

まとめ

v2の時とそこまで大きく変わっていませんが、
デフォルトでバックエンドのフレームワークを選択できなくなっていたり、
CSSのLinterやContentなどのフロント技術の選択肢が増えていることから、
Nuxtjsの使われ方、シェアが見えてくる気がします。

モダンな技術なのでバージョンアップが目まぐるしくですが、
またメジャーバージョンがリリースされたら紹介していきたいと思います。

The following two tabs change content below.
Taro

Taro

ディレクターも、サーバ構築も、ゴリゴリ開発もやります。 オールマイティ担当。 スパイスも甘いものも大好き。