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>

で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>

クリックイベント(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>

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

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>

ボタンもつけていきます。今度はボタンをクリックしたら非表示になるようにします。

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>

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>

部品化(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>

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>

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

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>

そして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>

Vue.jsとの組み合わせ(Vue-router、Vuex、Nuxt.js)

Vue.jsは単体で使うことはあまりないです。他のものと組み合わせて使います。

Vue-router
ルーティングのことです。
Vuex
データの状態管理のことです。
Nuxt.js
Vue.jsのフレームワークのことです。

Vue.jsのチュートリアルとガイド（公式ドキュメント）

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

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

これがガイドです。

Vue.jsとは

Vue.jsのメリット

Reactと比べたらどうか？

環境構築しなくてもできる

簡単な操作

クリックイベント(v-on)

v-onの省略形＠

v-if(if文)

v-bind(属性の設定)

v-for

部品化(components)

props

Vue.jsとの組み合わせ(Vue-router、Vuex、Nuxt.js)

Vue.jsのチュートリアルとガイド（公式ドキュメント）

資料