カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-2

開発環境を構築をする

1-1 で導入したツール群を用いて Vue の開発環境を構築します。

Vite で 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 プロジェクトをブラウザで開く
Vite で作成した Vue プロジェクトをブラウザで開く


さて npm installnpm run dev コマンドで Vue プロジェクトの動作検証が可能になりましたが、それぞれ内部でどのような処理が行われていたのか説明します。

まずプロジェクト内に存在する package.json の中身を見ていきます。

package.json
12345678910111213141516171819
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 プロジェクの開発時のみ利用するライブラリの依存関係

参考)package.json の詳細

npm install コマンドは、package.jsondependencies および devDependencies の記述を元にプロジェクトを動作させるのに必要となるライブラリを一括でダウンロードする際に利用します。

npm run コマンドは、package.jsonscripts で定義されたコマンドを実行するために利用します。例えば npm run dev コマンドを実行した場合 scripts で定義された dev コマンドを実行することと同義です。そのため、内部的には vite コマンドが実行されることとなります。

vite コマンドを実行すると Vue の開発用サーバーが起動します。そのため、npm run dev コマンドを実行した際に Vue の開発用サーバーが起動するわけです。

npm install コマンドを実行した後、npm run コマンドを実行したのは、devDependencies に記載のある vite のインストールが完了した状態でないと、vite コマンドが実行できないからです。

Vue Router

Vue プロジェクトのセットアップが完了したら、Vue でページ遷移を実現するために利用するライブラリである Vue Router をインストールします。ターミナルで下記のコマンドを Vue プロジェクトフォルダで実行します。

console
Copied!
npm install vue-router@4

先程説明した npm install の後ろに vue-router とあります。npm install の後ろに明示的にインストールしたいライブラリ名を指定することで、指定したライブラリをインストールすることが可能です。また、インストールしたライブラリは package.jsondependencies に追加されます。

具体的には Vue Router はトップページからゲームページへ遷移する実装を行う際に利用します。

次はコードの品質を一定以上に保ちバグの少ないコードを書くために ESLint と呼ばれるリンターを導入します。