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 の説明で 「必要なものをインストールしてきたり」という説明が登場しましたが、これを行うためのツールがパッケージマネージャです。
アプリケーションを開発する際は、誰かが作成したものを併用することが多いです。
何から何まで全て自分の手で作っていてはとても効率が悪いですし、何よりも時間がかかります。(物によっては技術的に高度で、自分の手で作るには難易度が高すぎるものもあります)
そこで、誰かが作ったものをインターネット上から引っ張ってくるためのツールが必要です。
パッケージマネージャはいくつかあります。
とりあえず、最初は npm を選んでおけば間違い無いです。
なれてきたら他のものを使ってみて好きなものを選びましょう。(ちなみに筆者は pnpm が好きです。)
エディタ ・ Vue.js の言語ツール
エディタはソースコードを書くためのものです。
お好きなものを選んでください。
とりあえず迷っているなら VSCode を選んでおけば間違い無いです。
エディタは好きなものでいいのですが、Vue.js の開発をするにあたって必ず使って欲しいものがあります。
それが Vue.js Language Tools です。
これが使えないエディタはとりあえず避けておくべきでしょう。
Vue.js に慣れてくれば工夫次第で選択の余地があるかもしれませんが、特別な理由がない限りは必ず使いましょう。
VSCode であれば Vue Language Features (Volar) という拡張機能を入れることで利用できます。
他のエディタに関してはこちらに乗っています。
git / Git Hub を使えるようにしておく
こちらも必須と言って差し支えないでしょう。
git に関しては、clone, push, pull add, commit くらいは最低限使えるようになっておきましょう。
GitHub のアカウントも作成し、リポジトリの作り方については把握しておきましょう。
「git 入門」「Git Hub 使い方」などで検索すると、たくさんの情報が出てくるので、それを参考にしてみてください。
まとめ
今回はここまでです。次回は実際にこれらの環境のもとで Vue.js のプロジェクトを作成していきます。
Vue.js のプロジェクトを開始して、実際にコードを書いていくところまでやっていきましょう！
-
必ずしもそうではありませんが、アプリケーションを作成する際は多くの場合こういった作業を必要とします。 ↩︎
Discussion