プロジェクトの作成

ではアプリケーションの実装に入ります。

イントロダクションでも述べたように、今回はNuxt.jsというフレームワークを使ってVueを書いていきます。

Nuxt.jsにはプロジェクトを対話的に作成してくれる、create-nuxt-app というNodeパッケージが用意されています。下のように、ワークスペースの一番上に移動して実行してみましょう。

console
  
Copied!
cd ~/nuxt-scheduler
npx create-nuxt-app app

この npx というコマンドは前章で使った npm コマンドの仲間です。Nodeパッケージをコマンドのように使うとき、npm がグローバルインストールする必要があったのに対して npx はインストールなしに実行できます。

create-nuxt-app を実行すると、各オプションをそれぞれ選択するよう求められます。バージョンによって異なる場合があるので参考程度ですが、筆者の選択例を載せておきます。

text
123456789101112131415
               
Copied!
create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in app
? Project name: app
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Progressive Web App (PWA)
? Linting tools: ESLint
? 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)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? tomon9086
? Version control system: Git

この教材を進めるにあたって推奨する設定は、

• UI framework を Vuetify.js にすること
• Deployment target を Static にすること

です。これらの設定は後からでも変えられるので、他のものを選んだり飛ばしてしまった場合も問題ありません。

text
1234
    
Copied!
To get started:

  cd app
  npm run dev

設定と作成が終わるとこのような指示があると思いますので、実行しましょう。

console
  
Copied!
cd app
npm run dev

npm run スクリプト名 の形式で実行されるのは、package.json の scripts に定義されたコマンドで、npm-scriptsと呼ばれます。この dev というスクリプトで実行される nuxt というコマンドでは、Nuxt.jsの開発サーバが実行されます。開発サーバはローカルサーバとしてVueファイルをブラウザでプレビューできるようにするだけでなく、プロジェクト内のファイル変更を監視してその差分をプレビューに適用する機能も持っています。

開発サーバが立っている localhost:3000 にアクセスすると初期状態のページが表示されます。

Nuxt.js とは

Nuxt.js (ナクスト-) は、Vueを使ったWebサイトやWebアプリの制作を簡単にするフレームワークです。同様のフレームワークにReactベースのNext.jsというものがありますが、Nuxtという変な名前はこれをもじったものです。

Vue.js単体でプロジェクトを作ると、もちろんVue.jsしか入っていないので、周辺機能を自分でインストールなり実装する必要があります。Nuxt.jsには、ルーティングや状態管理といった周辺機能が予めインストールされた状態でプロジェクトが作成されるので、早く開発を進めることができます。

ルーティング

Vue.jsのような仮想DOMを使ったプロジェクトでは、Webアプリのページ遷移にかかるロード時間を短縮するため、SPA (Single Page Application) という構成がよく導入されます。これは、ブラウザが1ページだけのHTMLファイルを読み込み、JavaScriptでページ要素を書き換えることで仮想的にページ遷移を実現するものです。こういったページ遷移の実現をルーティング (routing) と呼びます。

Vue.js公式のルーティングライブラリである vue-router は1ページを1コンポーネントに対応して設定します。Nuxt.jsではこれをさらに簡単に、pages ディレクトリにある1ファイルを1ページに対応するよう構成されています。

状態管理

アプリケーションにはユーザの操作に応じて動きや見た目が変わるものがあります。例えば、入力フィールドとボタンがあって、文字が入力済みのときだけボタンを有効化する、というような場合です。こうした操作可能な要素の「状態」に応じた処理は、特に大規模なアプリケーションで複雑になりがちで、気を抜くとバグの温床になります。そこで、これらを適切に「管理」する必要があるのです。

多くの場合、状態管理はライブラリを使って実現します。Vue.js向けに作られた状態管理ライブラリにはVuexというものがあり、Nuxt.jsもこれを内蔵しています。詳しくは5章で実装・解説しますので、楽しみに(?)していてください。

以上でプロジェクトの作成は完了です。Nuxt.jsについてもだいたい理解していただけたでしょうか？