教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
1-1 で導入したツール群を用いて Vue の開発環境を構築します。
Vue のプロジェクトを Vite を使って作成します。
Vite とは、効率よくフロントエンド開発を進めるためのビルドツールです。
早速 npm
コマンドを利用することで Vite を利用した Vue のプロジェクトを作成します。
※ npm
コマンドは Node.js インストール時に利用可能になる、Node.js のライブラリ群を管理するのに利用するコマンドです
npm
コマンドのバージョンに応じて実行するコマンドが少し変わるため、まずは npm
コマンドのバージョンを確認します。
ターミナルを開いて下記のコマンドを実行して npm
コマンドのバージョンを確認します。
console Copied!npm -v
7.x.x
のような出力が確認できたら、その内容に応じて下記コマンドをターミナルで実行します。
コマンドを実行する場所に Vue プロジェクトが生成されるため、cd
コマンドで予め作業用フォルダに移動しておくことを推奨します。
console Copied!# デスクトップ上に Vue プロジェクトを作成したい場合は下記コマンドを実行する
cd ~/Desktop/
# npm 6.x
npm init vite@latest techpit-vue-tetris --template vue-ts
# npm 7+ は追加で 2 つのダッシュが必要:
npm init vite@latest techpit-vue-tetris -- --template vue-ts
コマンドの実行に成功すると下記のような出力が確認できます。
console Copied!npx: 6個のパッケージを3.528秒でインストールしました。
Scaffolding project in /Users/nika/Desktop/techpit-vue-tetris...
Done. Now run:
cd techpit-vue-tetris
npm install
npm run dev
出力内容に従って、正常に Vue プロジェクトが作成されたか確かめます。
console Copied!# 生成された Vue プロジェクトフォルダに移動する
cd techpit-vue-tetris
# 開発に必要なライブラリ群をインストールする
# ライブラリ群の情報は package.json に記載あり (詳細は後述)
npm install
# Vue の開発用サーバーを起動する
# npm run dev コマンドの詳細は package.json に記載あり (詳細は後述)
npm run dev
上記一連のコマンドの実行に成功すると下記のような出力が確認できます。
console Copied! vite v2.5.8 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 419ms.
出力内容に表示されている http://localhost:3000/
をブラウザで開き、Vue のサンプルアプリケーションの表示が確認できれば Vue プロジェクトの構築は完了です。
Vite で作成した Vue プロジェクトをブラウザで開く
さて npm install
や npm run dev
コマンドで Vue プロジェクトの動作検証が可能になりましたが、それぞれ内部でどのような処理が行われていたのか説明します。
まずプロジェクト内に存在する package.json
の中身を見ていきます。
package.json12345678910111213141516171819 Copied!{
"name": "techpit-vue-tetris",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.6.1",
"@vue/compiler-sfc": "^3.2.6",
"typescript": "^4.3.2",
"vite": "^2.5.4",
"vue-tsc": "^0.2.2"
}
}
それぞれの項目についての説明は下記になります。
項目 | 説明 |
---|---|
name | プロジェクトの名前 |
version | プロジェクトのバージョン |
scripts | プロジェクト上で動作させるコマンド集 |
dependencies | プロジェクトで利用するライブラリの依存関係 |
devDependencies | プロジェクの開発時のみ利用するライブラリの依存関係 |
npm install
コマンドは、package.json
の dependencies
および devDependencies
の記述を元にプロジェクトを動作させるのに必要となるライブラリを一括でダウンロードする際に利用します。
npm run
コマンドは、package.json
の scripts
で定義されたコマンドを実行するために利用します。例えば npm run dev
コマンドを実行した場合 scripts
で定義された dev
コマンドを実行することと同義です。そのため、内部的には vite
コマンドが実行されることとなります。
vite
コマンドを実行すると Vue の開発用サーバーが起動します。そのため、npm run dev
コマンドを実行した際に Vue の開発用サーバーが起動するわけです。
npm install
コマンドを実行した後、npm run
コマンドを実行したのは、devDependencies
に記載のある vite
のインストールが完了した状態でないと、vite
コマンドが実行できないからです。
Vue プロジェクトのセットアップが完了したら、Vue でページ遷移を実現するために利用するライブラリである Vue Router をインストールします。ターミナルで下記のコマンドを Vue プロジェクトフォルダで実行します。
console Copied!npm install vue-router@4
先程説明した npm install
の後ろに vue-router
とあります。npm install
の後ろに明示的にインストールしたいライブラリ名を指定することで、指定したライブラリをインストールすることが可能です。また、インストールしたライブラリは package.json
の dependencies
に追加されます。
具体的には Vue Router はトップページからゲームページへ遷移する実装を行う際に利用します。
次はコードの品質を一定以上に保ちバグの少ないコードを書くために ESLint と呼ばれるリンターを導入します。