Vueを使う準備

💡 npm とは？
npm は Node.js のパッケージ管理ツール だけど、Vue の開発でもよく使う。

✅ Vue CLI（Vue の開発環境を作る）
✅ Vue のパッケージ（ライブラリ）をインストールする
✅ ビルドやホットリロード（開発中に自動更新）をする

Vue を使うなら npm install でパッケージを入れたり、npm run serve でローカル開発をしたりするから、Vue を動かすためには npm が必要！

### **npm と yarn の違いを簡単に！** 🚀  

#### **npm（エヌピーエム）**  
Node.js に **最初からついてくる** パッケージ管理ツール。  
```sh
npm install
npm run serve
```
💡 **特徴**  
✅ 標準的で、ほぼすべてのプロジェクトで使える  
✅ Node.js を入れたらすぐ使える  
✅ 最近は速くなってきてる  

---

#### **yarn（ヤーン）**  
Facebook（Meta）が npm の遅さや不安定さを改善するために作ったツール。  
```sh
yarn install
yarn serve
```
💡 **特徴**  
✅ npm より速い（キャッシュが強力）  
✅ 依存関係の管理がしっかりしている  
✅ npm にない機能（`yarn.lock` でバージョン管理が強い）  

---

### **どっちを使うべき？** 🤔  
✅ **特にこだわりがなければ npm でOK！**  
✅ **速度を重視するなら yarn もアリ！**（大規模プロジェクト向け）  
✅ **プロジェクトで決まっているならそれに合わせる！**  

最近の npm はだいぶ改良されていて、**速度や安定性はほぼ yarn と同じくらい** になってるから、Vue の開発なら **npm で十分！** 🎉

### **npm と yarn の説明**

**npm** と **yarn** は、どちらも **パッケージ管理ツール** で、**JavaScript や Node.js のライブラリや依存関係を管理するため** に使われるツールです。

#### **npm（エヌピーエム）**
- **npm** は、Node.js に標準で付属している **パッケージ管理ツール**。
- **パッケージ**とは、他の人が作った便利なコード（ライブラリやツール）のこと。
- npm は、プロジェクトに必要なパッケージ（依存関係）を簡単にインストール、管理するために使います。

例えば、`npm install` コマンドを使うと、プロジェクトで必要なパッケージをインストールできます。

#### **yarn（ヤーン）**
- **yarn** は、Facebook（Meta）が npm の問題点を解決するために作った **パッケージ管理ツール**。
- yarn の目的は、**npm より速く、安定して** パッケージを管理できるようにすること。
- 速度や依存関係の管理の精度が高いため、大規模なプロジェクトでよく使われます。

yarn は、npm と似たコマンドを使いますが、**少し速く、より効率的に動作**します。例えば、`yarn install` と書けば、必要なパッケージがインストールされます。

---

### **npm と yarn の主な違い**

1. **速度**  
   - **yarn** は、インストール時のパフォーマンスを改善し、依存関係をキャッシュして速く動作します。  
   - **npm** も最近改善されており、速度差はほとんど無くなってきています。

2. **依存関係の管理**  
   - **yarn** は `yarn.lock` というファイルを使って、正確なバージョン管理を行い、チームでの開発時に一致したバージョンを使いやすくしています。  
   - **npm** も最近 `package-lock.json` を使うようになり、同じような管理ができるようになりました。

3. **インストールの方法**  
   - **npm** の場合、`npm install` でパッケージをインストールします。  
   - **yarn** の場合、`yarn install` でパッケージをインストールします。

---

### **どっちを使うべきか？**
- **npm** は Node.js と一緒にインストールされるので、特にこだわりがなければ **npm を使って問題ない**。
- **yarn** は速度や依存関係の管理が強力なので、**大規模なプロジェクトやチームでの開発には便利**です。

最近では **npm と yarn の機能差は縮まってきている**ので、どちらを使っても大きな問題はありません。どっちを使うかは、**プロジェクトやチームの方針**に合わせて選べばOKです！

### **パッケージ管理ツールって何？**

パッケージ管理ツールは、プログラムを作るときに便利な **ライブラリ** や **ツール** を簡単に使えるようにするための道具です。

---

### **🍔 例えてみると…**

#### **パッケージ管理ツール = コンビニ**
パッケージ管理ツールは、プログラムを作るために必要な **便利な食材**（ライブラリやツール）を、 **コンビニで簡単に買える** みたいなイメージです。

1. **コンビニ（パッケージ管理ツール）** に行くと、**食材（ライブラリ）** が並んでいます。
2. 必要なもの（ライブラリ）を **すぐに手に入れることができる**。
3. 使いたい食材（ツール）があれば、コンビニで買うだけです。

---

### **📌 ライブラリとは？**
ライブラリは **他の人が作った便利なコード** のことです。たとえば、Webサイトを作るときに使う **Vue.js** や **React** はライブラリです。これを自分で一から作るのは大変なので、 **コンビニ（パッケージ管理ツール）で買ってきて使う** 感じです。

---

### **npm と yarn は何をするのか？**

- **npm** と **yarn** は **コンビニのような存在**。
- **npm** や **yarn** を使うことで、必要なライブラリ（食材）を **簡単にインストールできる**。
- 一度インストールしておけば、プロジェクトに必要な **ライブラリやツール** がすぐに使えるようになります。

---

### **🎯 どう使うの？**

例えば、React というライブラリを使いたいとき：

1. `npm install react` や `yarn add react` を打つと、
2. すぐに **React** がプロジェクトに追加されます。

これで **React** を使ったプログラムが書けるようになります！

---

### **まとめ**
- **パッケージ管理ツール** は、プログラムに必要なライブラリやツールを **簡単に手に入れるための便利な道具**。
- **npm** や **yarn** は、主に **JavaScript や Node.js のライブラリを管理**するツール。
- **コンビニ**みたいに、必要なものを **すぐに買える** という感じです。

**npm** と **yarn** は、基本的には **JavaScript や Node.js のプロジェクト**で使うパッケージ管理ツールです。他のプログラミング言語では基本的に使いません。

### **npm と yarn は JavaScript のためのツール**
- **npm** と **yarn** は主に **JavaScript** や **Node.js** 用のツールで、これらのパッケージやライブラリを管理します。
- JavaScript や Node.js で開発しているときに、**必要なパッケージ（例えば、Vue.js や React などのライブラリ）をインストール**したり、**依存関係の管理**をしたりするのに使います。

### **他のプログラミング言語には他のツール**
他のプログラミング言語では、それぞれ専用のパッケージ管理ツールがあります。例えば：

- **Python**: `pip`（Python のパッケージ管理ツール）
- **Ruby**: `gem`（Ruby のパッケージ管理ツール）
- **Java**: `Maven` や `Gradle`（Java のパッケージ管理ツール）
- **PHP**: `Composer`（PHP のパッケージ管理ツール）

### **まとめ**
- **npm と yarn** は **JavaScript や Node.js** のプロジェクトで使います。
- 他の言語には、各言語専用のパッケージ管理ツールがあるので、npm や yarn は **他の言語では使用しません**。

### **Vue 2 の環境構築手順（初心者向け）**
Vue 2 のプロジェクトを作る方法はいくつかあるけど、ここでは **Vue CLI** を使う方法を紹介するよ！

---


## **✅ １. Vue CLI のインストール**
Vue CLI は Vue プロジェクトを作成・管理するツール。  
以下のコマンドでインストールできる。

```sh
npm install -g @vue/cli
```

インストール後、バージョン確認：
```sh
vue --version
```
バージョンが表示されればOK！（例：`@vue/cli 4.5.0`）

---

## **✅ ２. Vue 2 プロジェクトの作成**
Vue 3 がデフォルトになっているので、Vue 2 を選択するには次のコマンドを使う。

```sh
vue create my-vue-app
```
すると、インストール方法を選ぶ画面が出るので：
- `Manually select features`（手動で機能を選択）を選ぶ
- `Vue 2` を選択する（`Vue 3` ではなく `Vue 2` を選ぶ）

📌 **プロジェクトが作成されたら、以下のコマンドで移動**
```sh
cd my-vue-app
```

---

## **✅ 4. 開発サーバーの起動**
```sh
npm run serve
```
これで `http://localhost:8080/` にアクセスすると、Vue のアプリが動いているはず！

---