今回はVue.jsに関する内容です。私はこれまでVue.jsを使った開発を行ったことがありませんでしたが、今回初めて使用することになったため、Udemyを活用して学んだことを記録として残しつつ、ご紹介できればと思います。
この記事では、Vue.jsのインストールから、「Create Vue」によって作成されるプロジェクトの内容についてご紹介します。
- Vue.jsの開発を初めて行う前提で解説
- Vueプロジェクトの作成方法
- Create Vueで生成されるプロジェクト構成の紹介
- npm関連の知識の紹介
前提環境
Vue.jsを使用するにあたり、いくつかの前提条件をまず整えておきたいと思います。
- OS：Windows 11 Enterprise
- Node.js：v22.17.0
- 開発ツール：VSCode
Node.jsがインストールされていない場合は、以下の公式サイトからダウンロードしてインストールしてください。 nodejs.org
VSCodeがインストールされていない場合は、以下の公式サイトからダウンロードしてインストールしてください。 azure.microsoft.com
Vueの開発環境を作成する
Vue.jsの公式サイトに従ってVue.jsのアプリケーションを初期構築しようと思います。
npm create vue@latest
上記のコマンドを使って、Vue.jsアプリケーションを作成します。 作成前にアプリケーションを作成するフォルダに移動し、以下のコマンドを実行します。
npm create vue@latest
このコマンドは、create-vueというパッケージの最新バージョン（@latest）をインストールし、それを使ってプロジェクトを作成するものです。
コマンド実行後、プロジェクト名の入力が求められます。今回は「vue-hanatare」とします。
次に、オプション機能の選択が求められます。
以前はYes/Noの選択式でしたが、現在は利用したい機能にチェックを付ける形式に変更されています。
今回は、ESLintとPrettierを選択します。
以下に、それぞれのオプションの簡単な説明を記載しておきます。
- TypeScript：JavaScriptに型を付けた言語
- JSX Support：HTMLをJavaScriptのように書くための記法
- Router (SPA development)：Single Page Applicationのルーティングを管理するためのツール
- Pinia (state management)：状態管理のためのツール
- Vitest (unit testing)：単体テストを行うためのツール
- End-to-End Testing：E2Eテストを行うためのツール
- ESLint (error prevention)：コードの品質を保つための静的解析ツール
- Prettier (code formatting)：コードを自動整形するツール
次に、追加オプションの選択が求められます。
今回はどれも選択せずに進めます。
- Oxlint (experimental)：ESLintと同様にコード品質を保つツールで、ESLintより高速に動作する点が特徴
- rolldown-vite (experimental)：Viteリポジトリに統合予定で、Rolldown統合の安定化に向けたフィードバックを収集するためのツール
最終的に、以下のようにプロジェクトが指定したディレクトリ内に作成されます。
Create Vueによって作成されたプロジェクトの紹介
以下のようなディレクトリ構成のプロジェクトが作成されます。
.VSCodeディレクトリ
extentions.json
このファイルには、VSCodeでおすすめされる拡張機能が記載されています。
Vue.volar
VSCodeで.vueファイルを正しく認識するために必要な拡張機能です。Vue.jsの開発時には必須となります。
dbaeumer.vscode-eslint
npm run lintコマンドを実行しなくても、リアルタイムで静的解析を行う拡張機能です。
EditorConfig.EditorConfig
ditorConfig.EditorConfig （設定ファイルと連携する拡張機能。後述の .editorconfig に対応）
esbenp.prettier-vscode
PrettierをVSCodeのフォーマッターとして利用できるようになり、保存時に自動でコードを整形してくれます。
vite.config.js
ViteでVue.jsを使うための設定ファイルです。
package.json
プロジェクトの設定や依存関係を管理するファイルです。特に重要な要素について以下で紹介します。
scripts
以下のKeyは、npm run Keyの形式でコマンドを実行する際に指定する値です。
npm run 【Key】
たとえば、npm run devと入力すると、viteを起動して開発サーバが立ち上がります。他のコマンドについても以下に説明します。
build
開発完了後、本番環境用に圧縮されたファイルをdistディレクトリに出力します。
preview
distに出力された内容を使用してローカルサーバを起動します。リリース前の確認に使用されます。
lint
ESLintによる静的解析を実行します。プロジェクト作成時にESLintを選択したため、この設定が追加されています。
format
Prettierによってコードの整形を行います。これもPrettierを選択したため追加されました。
dependencies
本番環境でも使用されるパッケージやその依存関係を記述します。
devDependencies
開発・テスト時にのみ使用されるパッケージやその依存関係を記述します。本番環境には含まれません。
dependenciesとdevDependenciesについて
これらのパッケージは、プロジェクト作成時にはインストールされていません。以下のコマンドでインストールが必要です。
dependenciesのみをインストールする場合
npm install --omit=dev
dependenciesとdevDependenciesをすべてインストールする場合
npm install
インストール後の状態
node_modulesというディレクトリが作成され、依存関係を含めたパッケージが格納されます。
package-lock.json
npm installを実行した際に生成されるファイルで、インストールされたパッケージのバージョンと依存関係を厳密に管理します。 CI実行時や、git clone後の動作確認などでnpm ciを使う場合、このファイルを元にパッケージをインストールするため、Gitで管理することが推奨されます。
jsconfig.json
VSCode上でJavaScriptの補完やナビゲーションを向上させるための設定ファイルです。
.editorconfig
エディター設定の統一を図るための設定ファイルです。VSCode以外のエディターでも使用可能で、例えばインデント幅などを統一できます。
以下のEditor Config for VSCodeの拡張機能をインストールして利用する設定ファイルになります。
eslint.config.js
ESLintの設定ファイルです。
.prettierrc.json
Prettierの設定ファイルです。
srcディレクトリ
Vue.jsで開発する際の主要なコードを格納する場所です。Viteはこのディレクトリ内のコードを処理し、.vueファイルを.jsに変換したり、dist用に圧縮ファイルを作成したりします。
publicディレクトリ
Viteはこのディレクトリ内のファイルを加工せず、そのままdist直下にコピーします。
まとめ
今回は、Vue.jsを初めて触る方向けに、開発環境の構築からプロジェクト作成後の各種ファイルの概要までを紹介しました。
Vue CLIではなく、npm create vue@latestを使ってプロジェクトを作成することで、必要な機能を柔軟に選択しながらセットアップできます。また、Create Vueで生成されたプロジェクトには、開発に便利な設定や構成が最初から用意されており、初学者でも効率よく開発を始められるようになっています。
特に、ESLintやPrettierのような静的解析・整形ツール、各種設定ファイル（package.jsonやvite.config.jsなど）の役割を理解しておくことで、今後の開発やチームでの作業にも役立つ知識になると思います。
この記事が、Vue.jsの開発を始める際の参考になれば幸いです。
