Vue.js入門(Vue.jsの初心者は必ず読め‼︎)

# Vue.jsとは
***JavaScriptのフレームワーク***です。

# Vue.jsのメリット
- 学習コストが低い
- ライブラリやツールが豊富
- 速くて軽い(Vue.jsを使うと、ウェブページがとても速くて、サクサク動く)
- 何かが変わるとすぐにわかる( Vue.jsを使うと、何かが変わったら、自動的にその変化が表示される)
- いろんなパーツを組み立てられる
- HTML要素を部品化

# Reactと比べたらどうか？
現場で使っているならVue.jsやればいいですが、どちらもやっていないならReactがおすすめです。
ただ求人と給与を見てもReactもVue.jsはあまり大差ないみたいです。会社と個人によるかなと。

Reactの方が割と学習者が多いので、競合がReactより少ないVue.jsをやるのもありかと思います。
最終的は、どちらもできるといいと思います。

Vue.jsの3系になってから2系より難易度が上がっています。


# 環境構築しなくてもできる
普通にHTMLやCSSを使うのと同じ感覚でもVue.jsの環境は作れます。

```index.html
<html>
<head>
  <meta charset="utf-8" />
  <!---CDN(Vue.jsが用意してくれるサーバーから読み込み)-->
  <script src="https://unpkg.com/vue@next"></script>
  <!---ローカルにインストールしたい場合は、npm install vue@next -->
  </head>
  <body>
  </body>
</html>
```

<script src="https://unpkg.com/vue@next"></script>でVue.jsが読み込まれて
使えるようになります。

# 簡単な操作
簡単な操作をしていきます。Vue.jsのプログラムを書いていきます。以下のプログラムを参考にしてみてください。バージョンはVue.jsの3系です。

```index.html
<html>
<head>
  <meta charset="utf-8" />
  <!---CDN(Vue.jsが用意してくれるサーバーから読み込み)-->
  <script src="https://unpkg.com/vue@3.0.0"></script>
  <!---ローカルにインストールしたい場合は、npm install vue@next -->
</head>
<body>
  <div id="app1">
    app1: {{ message }} <!--Vueコンポーネントのデータを表示 -->
  </div>

  <div id="app2">
    app2: {{ message }} <!--Vueコンポーネントのデータを表示 -->
  </div>
  <script>
    const App1 = { //Vueコンポーネントを定義
      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言
        return {
          message : 'Hello Vue.js'
        }
      },
    }

    const App2 = { //Vueコンポーネントを定義
      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言
        return {
          message : 'Vue.js 面白い'
        }
      },
    }
    app1 = Vue.createApp(App1) //Vueアプリケーションを作成
    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント

    app2 = Vue.createApp(App2) //Vueアプリケーションを作成
    app2.mount('#app2') //VueアプリケーションをHTML要素にマウント
  </script>
</body>
</html>
```

![スクリーンショット 2024-03-29 0.56.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/71c65ebe-c3e1-f91b-9242-0806c99a7431.png)


# クリックイベント(v-on)
クリックイベントを書いていきます。クリックイベントの```v-on```を使ったりします。
incrementメソッドを使ったことでVueコンポーネントの中にmethodsメソッドを定義したりしています。

```index.html
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
  <div id="app1">
    <p>{{ count }}回クリックした</p>
    <button v-on:click="increment">+</button> <!--v-on:clickでクリックイベントを登録 -->
    <button v-on:click="decrement">-</button> <!--v-on:clickでクリックイベントを登録 -->
  </div>
  <script>
    const App1 = { //Vueコンポーネントを定義
      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言
        return {
          count: 0
        }
      },
      methods: { //methodsメソッドを定義
        increment() { //incrementメソッドを定義
          this.count+=1 //countをインクリメント
        },
        decrement(){
          this.count-=1 //countをデクリメント
        }
      }
    }
    app1 = Vue.createApp(App1) //Vueアプリケーションを作成
    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント
  </script>
</body>
</html>
```

![スクリーンショット 2024-03-29 1.19.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/78db5568-18d3-4f2d-14e9-95fb8eac5a0d.png)

これでボタンを押すと数字が変わるようになりました。

### v-onの省略形＠

```v-on:click```とありますが、これは省略形で書くと```@click```となります。
```
<button @click="increment">+</button>
<button @click="decrement">-</button>
```

# v-if(if文)
次はif文です。条件分岐を書くこともできます。
ex) この条件の時は表示、この条件の時は表示しない　みたいな


```index.html
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
  <div id="app1">
    <span v-if="seen">ルフィ</span>
  </div>
  <script>
    const App1 = { //Vueコンポーネントを定義
      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言
        return {
          seen: true　//seenがtrueなら表示、falseなら非表示
        }
      },
    }
    app1 = Vue.createApp(App1) //Vueアプリケーションを作成
    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント
  </script>
</body>
</html>
```

![スクリーンショット 2024-03-29 1.29.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/bc61b80e-63ac-bc9c-e377-e4d2e49c41e0.png)


ボタンもつけていきます。今度はボタンをクリックしたら非表示になるようにします。
```index.html
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
  <div id="app1">
    <span v-if="seen">ルフィ</span>
    <button v-on:click="off">非表示</button> <!--ボタンをクリックするとoffメソッドが実行される-->
  </div>
  <script>
    const App1 = { //Vueコンポーネントを定義
      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言
        return {
          seen: true　//seenがtrueなら表示、falseなら非表示
        }
      },
      methods: {
        off: function(){
          this.seen = false //seenをfalseにする offメソッドが実行されると、seenがfalseになり、ルフィが非表示になる
        }
      }
    }

    app1 = Vue.createApp(App1) //Vueアプリケーションを作成
    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント
  </script>
</body>
</html>
```

# v-bind(属性の設定)
***Vue.js でHTMLの属性や要素の値を動的に更新するためのディレクティブ***で、
HTMLの属性や要素の値をVue.jsのデータと結びつけたい時に、Vue.jsのデータの変更に応じて、HTMLの属性や要素の値が自動的に更新されます。

```index.html
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
<!--CSSのスタイルを記述-->
<style> 
  .lightblue {
    color:lightblue;
  }

  .orange {
    color: orange;
  }
</style>

  <div id="app1">
    <!--HTML属性は展開されないので、v-bindを使う-->
    <p v-bind:class="class1">水色</p>
    <!--省略した書き方-->
    <p :class="class2">オレンジ</p>
  </div>

  <script>
    const App1 = { //Vueコンポーネントを定義
      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言
        return {
          class1: 'lightblue',
          class2: 'orange'
        }
      },
    }

    app1 = Vue.createApp(App1) //Vueアプリケーションを作成
    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント
  </script>
</body>
</html>
```
![スクリーンショット 2024-03-29 2.38.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/cb15c28b-9bd3-e85f-8a46-f0a62e03d289.png)

# v-for
***v-forはVue.jsでのループ処理***です。

```index.html
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
  <div id="app1">
    <ul>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ul>
  </div>

  <script>
    const App1 = { //Vueコンポーネントを定義
      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言
        return {
          todos: [
            { text: 'Laravel' },
            { text: 'Next.js' },
            { text: 'Ruby on Rails'},
          ]
        }
      },
    }

    app1 = Vue.createApp(App1) //Vueアプリケーションを作成
    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント
  </script>
</body>
</html>
```

![スクリーンショット 2024-03-29 2.39.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/9133b585-38c6-e671-3a26-eb42854a4e10.png)


# 部品化(components)
HTML要素を部品化して、再利用できるようにしたものです。

```index.html
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
  <div id="app1">
    <ul>
      <template1></template1>
    </ul>
  </div>

  <script>
    const App1 = {} //Vueコンポーネントを定義
    const app = Vue.createApp(App1) //Vueアプリケーションを作成

    app.component('template1',{ //Vueコンポーネントを定義
      template:`
      <button>ボタン</button>
      <br>
      `
    })

    app.mount('#app1') //VueアプリケーションをHTML要素にマウント
  </script>
</body>
</html>
```

![スクリーンショット 2024-03-29 2.53.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/fa18344b-d065-07b6-d461-771af0dee796.png)

# props
***親コンポーネントから子コンポーネントにデータを渡すためのもの***で、
親コンポーネントで定義されたデータや属性を子コンポーネントに渡すことができます。

ここでは静的な文字で表示させます。
```index.html
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
  <div id="app1">
    <ul>
      <template1 prop1 = "次へ"></template1>
      <template1 prop1 = "前へ"></template1>
    </ul>
  </div>

  <script>
    const App1 = {

    } //Vueコンポーネントを定義
    const app = Vue.createApp(App1) //Vueアプリケーションを作成

    app.component('template1',{ //Vueコンポーネントを定義
      props: ['prop1'],
      template:`
        <button>{{prop1}}</button>
        <br>
      `
    })

    app.mount('#app1') //VueアプリケーションをHTML要素にマウント
</script>
</body>
</html>
```


![スクリーンショット 2024-03-29 3.09.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/434df195-960a-c8b0-dca6-ca841fbd0acb.png)

次は、動的な文字で作成します。

```index.html
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
  <div id="app1">
    <ul>
      <template1 prop1 = "次へ"></template1>
      <!-- 動的 :propはv-bindの省略形-->
      <template1 :prop1 = "varString"></template1>
    </ul>
  </div>

  <script>
    const App1 = {
      data() {
        return{
          varString: '前へ'
        }
      },

    } //Vueコンポーネントを定義
    const app = Vue.createApp(App1) //Vueアプリケーションを作成

    app.component('template1',{ //Vueコンポーネントを定義
      props: ['prop1'],
      template:`
        <button>{{prop1}}</button>
        <br>
      `
    })

    app.mount('#app1') //VueアプリケーションをHTML要素にマウント
</script>
</body>
</html>
```

![スクリーンショット 2024-03-29 3.14.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/298b06aa-16bd-47f9-6bd2-630ded3d7c55.png)

そしてcomponentはループ処理をさせることができます。

```index.html
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
  <div id="app1">
    <template1 
            v-for= "item in itemList"
            :prop1 = "item"
            prop2 = "だ"
    ></template1>
  </div>

  <script>
    const App1 = {
      data() {
        return {
          itemList: [
            {id: 0, text: '0番'},
            {id: 1, name: '1番'},
            {id: 2, name: '2番'}
          ]
        }
      }
    } //Vueコンポーネントを定義
    const app = Vue.createApp(App1) //Vueアプリケーションを作成

    app.component('template1',{ //Vueコンポーネントを定義
      props: ['prop1','prop2'],
      template:`
      <li>{{ prop1.id }}は{{ prop1.text }}{{prop2}}</li>`
    })

    app.mount('#app1') //VueアプリケーションをHTML要素にマウント
</script>
</body>
</html>
```

![スクリーンショット 2024-03-29 3.34.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/7fc6f473-e186-594c-07eb-e048a205196d.png)



# Vue.jsとの組み合わせ(Vue-router、Vuex、Nuxt.js)
Vue.jsは単体で使うことはあまりないです。他のものと組み合わせて使います。

- ***Vue-router***
ルーティングのことです。

- ***Vuex***
データの状態管理のことです。

- ***Nuxt.js***
Vue.jsのフレームワークのことです。


# Vue.jsのチュートリアルとガイド（公式ドキュメント）
Vue.js の公式ドキュメントにはチュートリアルがあり、環境構築無しでブラウザ上で学べます。

https://ja.vuejs.org/tutorial/#step-1

ここにやり方が載っています。

https://zenn.dev/comm_vue_nuxt/articles/start-to-learn-vue-2024#%F0%9F%A4%94-vue.js-%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%8B%E3%82%89%E5%8B%89%E5%BC%B7%E3%81%99%E3%82%8C%E3%81%B0%E8%89%AF%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F

これがガイドです。

https://ja.vuejs.org/guide/introduction.html

# 資料



https://www.youtube.com/watch?v=wlCwyouRbtE