Go to Qiita Advent Calendar 2024 Top
LoginSignup
14
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Hashimoto-Noriaki(Noriaki Hashimoto)

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

Last updated at Posted at 2024-03-28

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>

スクリーンショット 2024-03-29 0.56.49.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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これがガイドです。

資料

14
15
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?