自社開発においては、既に整備された環境で作業を行うことが一般的ですが、ゼロからの開発を行う際には「外部ライブラリ」の理解が欠かせません。
また、「プロジェクトのファイル構成」の検討と、「ファイル構造の理解」も重要です。
コンポーネント間の構成や親子関係を見直すことはあっても、開発に必要な外部ライブラリ（依存関係）やプロジェクトのファイル構造にフォーカスする機会は少ないかもしれません。
そこで今回は、プロジェクト作成手順に沿って開発に必要な「外部ライブラリ」と「ファイル構造の役割」についてご説明します。
まずはじめに
Vue.js を使用して開発したい！ →Node.js をインストールします。
Vue.js と Node.js、似たような用語が出てきました。それぞれどんな役割があるのか、なぜNode.jsをインストールする必要があるのか について触れたいと思います。
| Vue.js | Node.js | |
|---|---|---|
| 動く場所 | ブラウザのみ | ブラウザの外（PCやサーバー） |
| 何をするか | UI（ユーザーインターフェース）を作るための仕組み | 開発ツール(ViteやWebpack など)や開発サーバーを動かす |
| 何を提供するか | コンポーネント、リアクティブ | Vite、npm、ビルド |
| つまり何なのか | UIフレームワーク | JavaScript の実行環境（ランタイム） |
Node.js は JavaScript を PC 上で動かすための実行環境 で、「フレームワークのVue.js」や「ライブラリのReact」 といったモダン開発には必須の環境となっています。
また、Node.js をインストールすると、Node.js に付属しているパッケージ管理ツール「npm」が自動で入ります。
そして、ここまでに「フレームワーク」「ライブラリ」「パッケージ」「npm」という用語が出てきました。
以下で簡単にご説明します。
- フレームワーク：開発に必要な仕組みを”枠組み”として用意されているもの。開発に必要な土台です。
- 例： Vue.js、Angular
- ライブラリ ：特定の機能を提供するもの。必要な機能だけを”選んで”利用します。
- 例：Vue Router（ページ遷移）、Axios（HTTP通信）、React（UI）
- パッケージ ：コード + 設定ファイル + メタ情報 をまとめたもの。パッケージは npm を通してインストールされます。
- 例：Vueなら「node_modules」
- パッケージ管理ツール ：パッケージを配布するために存在します。
- （パッケージマネージャー） 例：npm、Yarn、pnpm
Node.jsインストール後、何するの？
上記でもご説明しましたが、Node.js をインストールすると、Node.js に付属しているパッケージ管理ツール「npm」が自動で入ります。
つまり、Node.js を入れると「npm が使える」ようになり、 プロジェクトが作れるようになります。
ということで、プロジェクトを作成したい階層へ移動し、プロジェクトを作成しましょう！ と言いたいのですが、プロジェクト作成を行う前に、どちらの【プロジェクト作成ツール】を使用するかの検討が必要です。
- Vite（ヴィート）：超高速なフロントエンド開発・ビルドツール。Vue.js以外のフレームワークも対応しています。
- Vue公式が推奨している開発環境 です。
- Vue CLI ：Vue2 時代の標準開発・ビルドツール。Webpack※ を使って動く環境のこと。
- ※Webpack（別名：バンドラー）
- 依存関係を解析して、必要なファイルをまとめて最適化し、ブラウザで動く形に変換するツール。
どちらのプロジェクト作成ツールを使うか決まったら、おまじないのコマンド実行 でプロジェクトが出来上がります。
少しわかりにくいですが、Vite（ヴィート）には「Vue公式テンプレートとして扱うもの」と「汎用テンプレート（Vue以外でも使えるもの）」があるようです。以下の図をご覧ください。
| Vite（ヴィート） | Vue CLI | ||
|---|---|---|---|
| コマンド | npm create vue@latest プロジェクト名 cd プロジェクト名 プロジェクトへ移動 npm install |
npm create vite@latest プロジェクト名 cd プロジェクト名 プロジェクトへ移動 npm install |
npm install -g @vue/cli vue create mytest-app |
| 何を作るか | Vueプロジェクト | Vite プロジェクト | Vue 2 時代の標準ツール |
| ベースとなるもの | Vue公式テンプレート（Viteベース） | Viteの汎用テンプレート | Webpack ベース |
| ポイント | Vue以外のテンプレートも作成可能 | 現在は 非推奨寄り | |
npm install とは
それぞれの状態での違いは以下になりますので、しっかり押さえておきましょう。
- 「npm」が入る = パッケージ管理ツールが使える状態。 ←これだけでは動かない。
- npm install 実行 = プロジェクトを動かすために必要なパッケージを入れる。 ←初めて動かせる状態になる。
※①のnpmが入っている状態で、②で「必要なパッケージをインストールしてください！」とnpmにお願いしています。
今回はVite（ヴィート）の汎用テンプレート を選択し、mytestapp というプロジェクトを作成しました。
すると、以下のようなファイル構成で作成されました。ファイルの役割についても一緒に確認してみましょう。
mytestapp
├─── index.html → 開発サーバー実行時、ブラウザが一番最初に読み込むファイル。
├─── package.json → プロジェクトの説明書。
│ ビルドやツールの設定、依存パッケージ一覧 が記載されている。
├─── vite.config.js → プロジェクト作成ツールの動作をカスタマイズする設定ファイル。
├─── node_modules/ → npm install により、すべてのパッケージが入る場所。
├─── src/
│ ├── main.js → ブラウザでアプリを動かすためのスタート地点。
│ ├── App.vue → アプリ全体の最上位コンポーネント。 全コンポーネントがぶら下がる構造となっている。
│ │また、全ページ・全画面の“共通レイアウト”を置く場所。
│ ├── components/
│ ├── assets/
│ └── styles/
└─── .gitignore
さいごに
今後エラーやつまずきが発生した際にも「仕組みの土台をしっかり理解」していれば、どの部分が原因になっているかをより明確に特定でき、解決までの時間も短縮可能になります。
「よく使う部分だけ理解して開発する」のではなく、「考え方の土台をしっかり固めた上で開発する」ことは非常に大切ですね。
最後までお読みいただき、ありがとうございました。
