BLOG

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

2020.1.17
TECH

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

久しぶりの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についてはこちらにかなり詳しく書いています!

Lint staged files

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

? Choose test framework

テストのフレームワークを設定します。

  • None
  • Jest
  • AVA

練習目的や趣味ならテストフレームワークは要れる必要はないと思います。

Jest

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

AVA

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

? Choose rendering mode

レンダリングモードを設定します。

  • Universal (SSR)
  • Single Page App

デフォルトは「universal(SSR)」になっていますが、変更することができます。
nuxtでバックエンドもマルっと作成する場合は、「Universal (SSR)」にしましょう。
フロントエンドのみを開発する場合は「Single Page App」を選択して問題ありません。

nuxtでプロジェクトを作成する方のほとんどは、バックエンドも同じプロジェクトなので、
考えずに「Universal (SSR)」で良いと思います。

? Choose development tools

設定ファイルを設定します。

  • jsconfig.json (Recommended for VS Code)

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

最後の設定を行いEnterを押すと、コンソールが動きだしプロジェクトが作成されていきます。

起動・動作確認

コンソールから↓のコマンドを実行して、起動させます。

cd [プロジェクト名]
npm run dev

「cd [プロジェクト名]」でディレクトリ移動します。
「npm run dev」で起動させます。

コンソールが↑の状態になれば起動完了です!
さっそくブラウザから「http://localhost:3000」にアクセスしてみましょう!

今回作成したプロジェクトをベースとして、
いろいろなプラグインを試したり、REST APIを作成して勉強に役立てていただければと思います!
▼過去にNuxtプラグインの紹介記事を書いているので、良ければご参考までに…
3ステップでできる【Vue.js】無限スクロールを簡単に実現する方法
【Nuxt.js】多言語化対応におすすめのプラグインnuxt-i18nの使い方
Nuxt.js(Vue.js)で使える!絶対取り入れたいオススメのプラグイン

まとめ

勉強したいと思っても、動かすまですごく難しいイメージがありますが、
それを払拭させるツールのご紹介でした。

実際の開発現場でもこのツールを使用してベースを作成し、
カスタマイズを重ねて開発を進めていく方法をよく目にします。

また、新卒や他業種からの転職のポートフォリオにも有効かと思うのでぜひチャレンジしてみましょう!

The following two tabs change content below.
Taro

Taro

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