【全5回】初心者がVue.jsの公式ガイドで勉強 vol.1

はじめに

現在プログラミングの学習を始めて約3ヶ月となるへなちょこ学生がVue.jsの学習に挑戦してみました。学習の際に詰まった所をまとめ、自分にとっての備忘録にすると同時に同じく初心者の方がVue.jsってどんなもんだろと思った時に簡単に参考にしていただけたらと考えています。
諸先輩方につきましては誤りを見つけた際は躊躇なく指摘していただけたら嬉しいです。

なぜVue.jsを選んだかというと同じく勉強中のLaravelとの相性が良いと聞いて興味を持ったからです。

また、Javascriptの他のフレームワークと比較する際にこちらの記事を参考にさせていただきました。

引用記事

学習サイト

Vue.jsは公式サイトに日本語版があるので、こちらを利用しました。

引用サイト

他のフレームワークで日本語版の公式サイトがある場合は非常に少なく、英語版だと言葉の意味を調べるコストもかかってしまい勉強効率が悪くなってしまうので、非常にありがたかったです。

今回取り上げる範囲

Vue.jsの公式ガイドは量が多く、手厚いガイドであるため、何回かに分けて学習した範囲の復習をしたいと思います。
今回は 「はじめに」の部分を取り上げます。

そもそもVue.jsとは

Vue.jsについては公式サイトの説明を引用させていただくと、

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

とのことです。

正直初心者の私は全く理解できませんでしたが、気にせず進んでいきました。

まずはVue.jsを導入するために

html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

scriptタグを読み込みます。

宣言的レンダリング

html

<div id="app">
  {{ message }}
</div>

js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Hello vue!

こちらが最も基礎となるデータをDOMに描画するためのシンプルな構文です。

データとDOMが関連づけられているため、リアクティブになっています。
※リアクティブという言葉がしっくりこない方は、こちらの記事を参考にしてください。Excelの例えが非常に分かりやすかったです。
引用記事

リアクティブになっていることを分かりやすく示すと、

js

app.message = "Hello henatyoko!"

とした場合

Hello henatyoko!

と表記されます。データが変更されるとDOMも変更される様子からリアクティブという感覚を理解でしていただけたのではないでしょうか。

ディレクティブ

Vue.jsにはリアクティブディレクティブというDOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンが存在します。

ディレクティブはそれ自身を Vue インスタンスのプロパティやインスタンスの文脈の中で評価される表現にバインドすることができます。配下のプロパティや表現の値が変更されたら、それらのディレクティブの update() 関数が同期的に呼ばれます。

具体的には、以下のv-bind属性などを参照して学んでいきます。

v-bindディレクティブ

html

<span v-bind:title="message">
　　　　Hover your mouse over me for a few seconds
　　　　to see my dynamically bound title!
</span>

js

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

Hover your mouse over me for a few seconds to see my dynamically bound title!

この場合にv-bind属性が意味することは、「この要素の title 属性を Vue インスタンスの message プロパティによって更新して保存する」ということです。

ディレクティブに関しては様々な種類があるため、HTMLの属性のように一つ一つ理解していくべきなのかなと思いました。

この先でもディレクティブはいくつか出てきますが、まとめて紹介されているページがあるので参考にしてください。

引用ページ

条件分岐とループ

プログラミングでは避けては通れない条件分岐とループですが、こちらもv-ifディレクティブとv-forディレクティブを使って非常にシンプルに実装することができます。今回は条件分岐の方のみ紹介します。

html

<div id="app-3">
　　　　<span v-if="seen">Now you see me</span>
</div>

js

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Now you see me

また、表示させない場合は

js

app3.seen = false

このように非常にシンプルに実装することができます。

インタラクション実装

Javascriptの強みであるインタラクティブな実装ですが、Vue.jsではよりシンプルに実装するためにまたもやディレクティブが用意されています。v-onディレクティブやv-modelディレクティブなどがあるので、先ほどのディレクティブがまとめて紹介されているページで確認してみてください。

コンポーネントによる構成

最後にVue.jsで最も重要な概念といっても過言ではないコンポーネントシステムについて紹介します。コンポーネントシステムについては以前にReactをかじっていた時にも出てきて苦戦したので、今回はReactとの戦いとの際の経験値を活かして割とすんなり理解できました。

公式の解説では

コンポーネントシステムは Vue.js におけるもうひとつの重要な抽象概念です。「小さく、自己完結的で、（多くの場合）再利用可能なコンポーネント」を組み合わせることで、大規模アプリケーションを構築することが可能になります。アプリケーションのインターフェイスについて考えてみると、ほぼすべてのタイプのインターフェイスはコンポーネントツリーとして抽象化することができます。

と説明されています。

この説明で理解できなかった私はロジックツリーを思い浮かべるとすんなり理解できました。

ロジックツリーでは小分けにされた子要素はMECEであることが求められますが、Vue.jsにおけるコンポーネントシステムも同様であるためかなり似ているところが多いのではないのではないかと感じました。

html

<div id="app-7">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

js

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

1.Vegetables
2.Cheese
3.Whatever else humans are supposed to eat

若干コンポーネントシステムの核となる親要素と子要素の関係が見難いサンプルですが、このようにして実装することができます。

終わりに

今回はVue.jsの書き方をプログラミングで基礎となる条件分岐やループなどを通して学習しました。自分なりの理解の仕方などもあり、拙い文章ですがこのまとめが今後の自分の学習に活きたらいいなと思います。

vol.2以降では更に詳しく説明された概念を取り上げていきます。

よろしくお願いします！