【初心者向け】3ステップで始める NuxtJS インストール編

こんにちは、タロウです。

久しぶりのNuxtJSネタはインストール編にしました。
(これからNuxtJSを勉強を始める方向けです)

起動までを3ステップで追ってみましょう！

NuxtJSとは
プロジェクトを作成する
起動・動作確認

NuxtJSとは

呼び方：ナクストジェーエス
一言で言うと
Vue.jsのアプリケーションを構築するためのフレームワークです。
外部システムとの連携を簡単に実現できることや、
プロジェクトを動かすために必要なライブラリを自動で導入してくれたりと、
プロジェクトの基礎を簡単に作れてしまいます。

公式ガイド

また、対話式のツールが提供されており、

UIのフレームワークに何を使用するのか
バックエンドのフレームワークは何を使用するのか
テストのフレームワークは何を使用するのか

を自由に選択して作成することができます。

次のステップで早速作成してみましょう！

プロジェクトを作成する

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

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

注意
自分のマシン又は作成先の環境にNode.jsが入っていない場合はこちらから先にインストールしましょう！

コマンドを実行すると、
プロジェクト名は何にする？プロジェクト概要は？のように質問してくれるので答えながら進めます。


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

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in [プロジェクト名]
? Project name [コマンドに指定したプロジェクト名が表示される]
? Project description My best Nuxt.js project
? Author name test-user
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework Express
? Choose Nuxt.js modules Axios, DotEnv
? Choose linting tools ESLint, Prettier
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

? Project name

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

? Project description

プロジェクトの概要・説明を設定します。
未入力でもOKです。

? Author name

作成者を設定します。
未入力の場合はマシンにログイン中のユーザ名が設定されます。

? Choose the package manager

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

Npm
yarn

どちらでも好きなほうを選びます。
僕はNpmが好きなのでNpmを選択しています。

? Choose UI framework

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

None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
iView
Tachyons
Tailwind CSS
Vuetify.js

型にとらわれない開発で、フロントをゴリゴリできる人がいる場合はNoneを選ぶことが多いです。
(僕も含め)CSSと聞いただけで拒絶反応が出てしまう方は、フレームワークを使いましょう。
「Bootstrap Vue」や「Vuetify.js」あたりがメジャーで、ドキュメントも豊富なのでおススメです。

? Choose custom server framework

バックエンド(サーバサイド)のフレームワークを設定します。

AdonisJs
Express
Fastify
Feathers
hapi
Koa
Micro

SPA(シングルページアプリケーション)には欠かせないREST APIの実現に重点を置くと、
高速かつ、手軽に実現できる部分で「Express」が一番おススメかなと思います。

認証や決済処理などバックエンドの強靭化が必要な場合は「Hapi」、
とにかく軽量化させたい！という場合は「Micro」などと、
要件やシステム構成によって採用するフレームワークを変えることも必要です。

? Choose Nuxt.js modules

Axios
Progressive Web App (PWA) Support

モジュールを設定します。
必要なものに↑↓でカーソルを当て、エンターで選択状態を切り替えます。
Axiosは最低限いれておきましょう。

Axios

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

PWA

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

? Choose linting tools

Lintツールを設定します。
必要なものに↑↓でカーソルを当て、エンターで選択状態を切り替えます。
Lintツールとは、ソースコードを静的解析してくれるツールで、
宣言されていない変数を使用している場合などの不具合を検出してくれます。

ESLint
Prettier
Lint staged files

ESLint

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

Prettier

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