ゼロから始める Vue.js 環境構築 (共通項目編)

Vue.js の環境構築方法について紹介します。
Vue.js でアプリケーション開発を始める方法についてはいくつかありますが、今回はその中でも「どんな方法にせよ、必要な項目」について説明します。

作業スペースを作る

これは必須ではありませんが、推奨項目です。

これから 練習なり、本番なり、いろんなプロジェクトを作成していくことになるのでその作業場所は整理しておきたいところです。

あちらこちらにプロジェクトが作られてしまっては管理が大変です。

「Vue のプロジェクトはここに集めておく！」と言う場所を決めておきましょう。

筆者の場合は、

home
  |- projects
  |   |- personal // 個人用
  |   |   |- vue
  |   |   |   |- project1
  |   |   |   |- project2
  |   |   |   |- ...
  |   |   |- typescript
  |   |   |- rust
  |   |   |- ...
  |   |
  |   |- work // 仕事用
  |   |- oss // oss 用

のような構成にしています。(イメージ)

home は、ユーザーのホームディレクトリです。
macOS でいえば、/Users/ユーザー名 になります。

project1 や project2 は、それぞれのプロジェクト名です。(例: my-vue-practice, todo-app など)

Node.js のインストール

Node.js をインストールしましょう。

ほかにも、Bun や Deno などを使う方法もありますが、これらは必要に応じて使っていくことにして、
とりあえず手始めとしては Node.js を選択しておけば問題ないでしょう。

なぜ Node.js が必要なのか？

これは、快適に開発を行うためです。
実は、Vue.js は Node.js を使わずに使用することもできますが、「Vue.js を使ったアプリケーション開発を学び始める」にはとりあえず構築しておいて損はないです。
必ずどこかで構築することになるでしょう。

Node.js は JavaScript の実行環境です。
JavaScript の実行環境というと真っ先にブラウザが思い浮かびますが、Node.js はブラウザではありません。
ざっくり「あなたの PC で JavaScript を動かすためのもの (ブラウザとは違う)」と思ってもらえれば OK です。

フロントエンドの開発において、ブラウザ環境と Node.js 環境ではそれぞれ何が動いているのかということをざっくりお伝えすると、

ブラウザ: あなたが作ったアプリケーション (成果物)
Node.js: あなたが書いたソースコードから、アプリケーション(成果物)を生成・開発するためのコード

という感じです。

多くの場合、あなたが書いたソースコードはそのままではブラウザでは動きません。
必要なものをインストールしてきたり、それらをまとめあげてブラウザ上で動く形に変換したり、開発用のサーバーを建てたりする必要があります。^[1]

パッケージマネージャ

先ほど、Node.js の説明で 「必要なものをインストールしてきたり」という説明が登場しましたが、これを行うためのツールがパッケージマネージャです。

アプリケーションを開発する際は、誰かが作成したものを併用することが多いです。
何から何まで全て自分の手で作っていてはとても効率が悪いですし、何よりも時間がかかります。(物によっては技術的に高度で、自分の手で作るには難易度が高すぎるものもあります)

そこで、誰かが作ったものをインターネット上から引っ張ってくるためのツールが必要です。

パッケージマネージャはいくつかあります。

• npm
• Yarn
• pnpm
• Bun (パッケージマネージャ以外の機能もあります)

とりあえず、最初は npm を選んでおけば間違い無いです。

なれてきたら他のものを使ってみて好きなものを選びましょう。(ちなみに筆者は pnpm が好きです。)

エディタ ・ Vue.js の言語ツール

エディタはソースコードを書くためのものです。
お好きなものを選んでください。

とりあえず迷っているなら VSCode を選んでおけば間違い無いです。

エディタは好きなものでいいのですが、Vue.js の開発をするにあたって必ず使って欲しいものがあります。

それが Vue.js Language Tools です。
https://github.com/vuejs/language-tools

これが使えないエディタはとりあえず避けておくべきでしょう。
Vue.js に慣れてくれば工夫次第で選択の余地があるかもしれませんが、特別な理由がない限りは必ず使いましょう。

VSCode であれば Vue Language Features (Volar) という拡張機能を入れることで利用できます。

他のエディタに関してはこちらに乗っています。

なぜ Language Tools が必要なのか？

Vue.js は Single File Component (.vue という拡張子のファイル) という独自の形式で機能を実装します。

これをよりよく扱うためにはツールが必要です。

具体的には、エディタの補完機能や、構文チェック、型チェック、リファクタリング機能などです。

Vue Language Features (Volar) を使うことで、これらの機能を使うことができます。

イメージ 👇

git / Git Hub を使えるようにしておく

こちらも必須と言って差し支えないでしょう。

git に関しては、clone, push, pull add, commit くらいは最低限使えるようになっておきましょう。

GitHub のアカウントも作成し、リポジトリの作り方については把握しておきましょう。

「git 入門」「Git Hub 使い方」などで検索すると、たくさんの情報が出てくるので、それを参考にしてみてください。

まとめ

今回はここまでです。次回は実際にこれらの環境のもとで Vue.js のプロジェクトを作成していきます。

Vue.js のプロジェクトを開始して、実際にコードを書いていくところまでやっていきましょう！

脚注

1. 必ずしもそうではありませんが、アプリケーションを作成する際は多くの場合こういった作業を必要とします。