Nuxt.js で Todo アプリを開発しよう #1 [環境構築編]

こんにちは、ミラスタでフロントエンドをメインで担当している村家です。

これから何回かに分けて、Nuxt.jsを用いたTodoアプリの開発の方法を紹介していきます。

何か新たに言語やフレームワークを身につけようと思っているとき、その言語やフレームワークでTodoアプリを開発することで、無駄なく効率よく基本的な知識や使い方を身につけることができます。

順を追ってNuxt.jsによるTodoアプリの開発をしていきますので、これからNuxt.jsを身につけようとしている場合はぜひ参考にしてみてください。

今回はまずNuxt.jsの環境構築をおこなっていきます。

[事前準備]npxまたはyarnのインストール

Nuxt.jsのプロジェクトを作成するためには、npxまたはyarnがインストールされていることが前提となります。

もしまだこれらがお使いのPCにインストールされていない場合は、先にインストールしましょう。

Nuxt.jsプロジェクトの作成

では次は、Nuxt.jsにあらかじめ用意されている足場ツールcreate-nuxt-appを用いてサクッとNuxt.jsプロジェクトを作成しましょう。Nuxt.jsによってアプリを開発する場合、基本的にcreate-nuxt-appを使えばOKです。

プロジェクトを配置したいディレクトリまで移動したら、下記コマンドを実行します。(本記事では、nuxt-todo-appという名前のプロジェクトとして作成します。下記コマンドのnuxt-todo-appという部分は、作成するプロジェクト名によって書き換えてください。)

# npxの場合
npx create-nuxt-app nuxt-todo-app

# yarnの場合
yarn create nuxt-app nuxt-todo-app

するとNuxt.jsプロジェクトの作成が始まり、いくつか質問されます。順番に答えていきましょう。ちなみに今回は下記のように答えました。

  • パッケージマネージャーにyarnを使用
  • UIフレームワークにVuetifyを使用(余計な説明を省略するため)
  • LintingツールにESLintとPrettierを使用(自動整形最高!)
  • レンダリングモードはSSR(サーバーサイドレンダリング)
  • その他はデフォルト

プロジェクトのディレクトリ構成

プロジェクト作成後のディレクトリ構成は下記のようになると思います。

nuxt-todo-app
├── .editorconfig
├── .eslintrc.js
├── .git
├── .gitignore
├── .prettierrc
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
└── yarn.lock

各ディレクトリの説明は次回おこないます。ひとまず、「ざっとこんなディレクトリ構成になっているんだ」くらいに思っていただければOKです。

プロジェクトの起動

では、プロジェクトが作成できたのでプロジェクトを起動してみましょう。

下記コマンドを実行してプロジェクトディレクトリに移動し、サーバーを立ち上げてアプリケーションを起動しましょう。

cd nuxt-todo-app
yarn dev

すると、http://localhost:3000 にてアプリケーションを確認できるので、ブラウザから確認してみましょう。

下記のような画面が表示されたらOKです。

※画面の見た目に関しては、プロジェクト作成時に聞かれるUIフレームワークの質問への回答次第で変わりますので、必ずしも上画像のような見た目になるわけではありません。

以上でNuxt.jsを用いたプロジェクトの作成は完了です。

次回はNuxt.jsプロジェクトのディレクトリ構成の説明

今回は、「Nuxt.jsでTodoアプリを開発しよう」の第1回目として、Nuxt.jsの環境構築方法をしました。

次回は、作成したNuxt.jsプロジェクトの各ディレクトリの説明をしていきます。また次回も楽しみにしていてください。