Vue 初めてのプロジェクト作成

実際の Vue プロジェクトの作成に入りましょう。Vite というものが下支えしてくれるテンプレートで作成します。

コマンドプロンプトやターミナルで以下を実行してください。

npm create vue@latest

このコマンドを実行すると、Vite があなたにいくつかの質問をしてきます。質問に答える形で、プロジェクトの基本的な構成を決めます。今回は、以下の選択肢で進めてください。

Project name (target directory): -> my-vue-app (または任意のプロジェクト名)
Select features to include in your project: ->
- チェックする
  - TypeScript: より堅牢な開発ができます。
  - ESLint (error prevention): コード品質を上げるための支援ツールです。
  - Prettier (code formatting): コードを整形してくれます。
- チェックしない (あとで導入)
  - Router (SPA development): ルーティングは後で手動で追加して学びます。
  - Pinia (state management): 状態管理も後で学びます。
- チェックしない
  - JSX Support: JSX は React 系統のライブラリで使われる記法です。
  - Vitest (unit testing): 自動テストは今回は扱いませんが、このツールも高品質です。
  - End-to-End Testing: こちらも今回対象外ですが、Playwright 等のツールは強力です。
Install Oxlint for faster linting? (experimental) -> No

回答が完了すると、Vite が指定された名前のディレクトリ (例: my-vue-app) を作成し、必要なファイルや、他のライブラリ (依存関係) を自動的にインストールしてくれます。

プロジェクトが作成されたら、以下のコマンドを順番に実行します。

作成されたプロジェクトディレクトリに移動します。
```
cd my-vue-app
```
プロジェクトに必要な依存関係をインストールします。
```
npm install
```
コードを Prettier で整形します。個人開発時だけで無く、チーム開発で開発者ごとの表記揺れを緩和するのにも役立ちます。
```
npm run format
```

次のコマンドを実行します。

npm run dev

ターミナルに以下のようなメッセージが表示されるはずです。

> [email protected] dev
> vite

  VITE v6.3.5  ready in 290 ms

  ➜  Local:   http://localhost:5173/  <-- ここをクリック !
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt+Shift+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

表示された http://localhost:5173/ の URL を Web ブラウザで開いてみてください。(ターミナル上でこの URL をクリックすると、自動的にブラウザが開くことが多いです。)

Vue のロゴと「You did it!」というメッセージが表示されたシンプルな Web ページが表示されれば、成功です！これは、Vite が提供する開発サーバーが起動し、あなたがつくった Vue アプリをブラウザで表示している状態です。

キーボードの Ctrl + c を同時押しすることで、サーバーを停止できます。ふたたび起動するには先ほどと同じ npm run dev を実行します。

この開発サーバーには ホットリロード機能 が備わっています。ありがたいことに、コードを修正するとブラウザの表示も自動的に更新されます。これによって効率的に開発を進めることができます。

おつかれさまでした ! これで、Vue.js 開発の準備は万端です。

次の章からは、いよいよ Vue.js のコードを書くための実践的なしくみを基本から学んでいきましょう。

作成したプロジェクトの src フォルダの中 で、既存ファイルを更新したり新規ファイルを追加したりすることで、実際に動かせますよ。(ただし、この学習セットの中でひとつひとつ詳細に「ここをこうしてください」と言及することはありません。) 適宜試しながら読み進めてください。

Vue 初めてのプロジェクト作成

Series

目次

プロジェクトの作成

プロジェクトテンプレートのオプション選択

プロジェクトのセットアップ

試運転とテスト

開発サーバーを起動

ブラウザで確認

ホットリロード

Series