【Vue.js入門】基礎とディレクティブについて解説します

今日はJavaScriptのモダンフレームワークであるVue.jsのディレクティブについて解説したいと思います。

Vue.jsってどういうフレームワークなの？

という方や

ディレクティブって何？

という方など、Vue.jsを習得するに当たって基礎的な知識を身に付けたい方に是非読んで頂きたい記事となっています。

記事の信頼性

本記事は現役フロントエンドエンジニアとしてVue.jsを業務で使用しているしのが執筆いたします。

Vue.jsとは

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。

中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。
また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

出典：Vue,js公式ドキュメント

Vue.jsはEvan You(@youyuxi)という方が開発したJavaScriptのフレームワーク(プログラムを作成する上で利用する枠組みのこと)です。

UI/UXを高める機能(アニメーション)などがより少ないコードで簡単に実装できます。

アニメーションなどを使用しているサイトはバニラJSを使うとコードが複雑になりがちではあるのですが、Vue.jsのフレームワークを使う事でより簡単に実装する事が出来るようになりました。

※バニラJSとは:生のJavaScriptの事。何もトッピング、加工されていないJavaScriptということでバニラJSと呼ばれているようです。

Vue.jsの特徴

Vue.jsの特徴は以下となります

・学習コストが低い

・シングルページアプリケーション(SPA)の作成に長けている

・どちらかというと大規模よりも中規模の設計に向いている

・環境構築が容易で割と気軽に始められる

・双方向のデータバインディングが出来る

・個人開発向けだがチーム開発も可で汎用性が高い

・JavaScirptを使用しています(Angular.jsはTypeScriptを使用)

HTMLファイルを用意すればすぐにコードを書く事が出来ますし、パッケージ自体が小さいため画面への読み込みが早く、画面描画も最小限の更新で最適化される、という特徴もあります。

Vue.jsの導入方法

Vue.jsの導入方法はとても簡単です。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

上記のCDNコードをbody内に貼り付けるだけですぐに使う事が出来ます。

この実装の手軽さはどこかjQueryにも似ていますよね。

このように手軽に実装を開始できることもVue.jsの魅力といえます。

ただ、上記は開発用のもので、本番用のものは以下を使いましょう。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>

開発用と本番用の違い

開発用・・・開発中に使う

・警告出力とデバッグモード:◯

・スピード:　✕

本番用・・・本番環境で使う

・警告出力とデバッグモード: ✕

・スピード:◯　

開発バージョンは、警告出力とデバッグモードがありますが、反面スピードは遅くなります。
それに対して、本番バージョンは、警告出力とデバッグモードがない代わりに、スピードが速いです。用途によって使い分けるようにしましょう。

Vue.jsの基本的な書き方

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

//appというidをdivにつけます。このdiv内でVue.jsが機能します。
    <div id="app">

//{{}}の中にmessageを定義してVue.js側でテキストを入れることでテキストを動的に変える事ができます
      <p>{{ message }}</p>
    </div>

//Vue.jsのcdnを読み込ませます
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
var app = new Vue({
  el: "#app",
  data:{
    message: "Hello Vue.js!!"
  }
})

</script>
  </body>
</html>

Vue.jsで出来る事

以下のような動作をJavaScirptでは長いコードを書く必要がありましたが、簡潔に表現できます。

・入力フォームなどのチェック&バリデーション

・検索エリアにテキストを入力すれば予想検索を出してくれる機能

・ポップアップの表示

・様々なアニメーション

上記はほんの一例です。Vue.jsは簡単に色んな実装を出来る事が特徴といえます。

ディレクティブとは

ではディレクティブについて見ていきましょう。

・v-で始まるVue.jsならではの特別な属性のことです。

・directive(指令)という名前の通り、Vue.js何らかの指示を行う仕組みのことです。

ディレクターという職種がありますが、色んな人に指示をしたりする立場ですよね。そのニュアンスで覚えてもらえればと思います。

あまり難しく考えず、「Vue.jsを書く上での記述ルールなんだな」と思ってもらえればと。

代表的なディレクティブは以下のようになります。

代表的なディレクティブの例

・v-bind

・v-if

・v-show

・v-for

・v-on

・v-model

JavaScriptを勉強している方でしたら何となく実装のイメージもつくかもしれません。今回はこれらのディレクティブについて一つ一つ見ていくことにしましょう。

v-bind

v-bindとはHTMLの属性の値を動的に変える事が出来る機能の事です。

ここで言う属性というのは、hrefやvalueなど、HTMLでよく使う属性の事です。

See the Pen xxRWEBj by shino (@rytym0720) on CodePen.

上記ではリンク先、hrefの部分を動的に変えているわけですね。

v-bindは省略できる

ちなみに、v-bindでは以下のように省略して使う事が出来ます。

See the Pen bGBvwJV by shino (@rytym0720) on CodePen.

めっちゃ省略するじゃん！

っても思いますよね。

実際v-bindはディレクティブの中でも多用するので現場では省略記法は当たり前のように使われています。

リンク先を動的に変える作業というのは、WEBの現場でも頻繁にあります。なのでv-bindは凄く重宝していますね。

v-if

「if」といえば条件分岐ですよね。

プログラミングに触れた方ならピンと来ると思います。そうです、v-ifは条件分岐で使用するディレクティブです。

ここでは条件によってテキストの表示/非表示の切り替えを行ってみたいと思います。

See the Pen bGBvwPE by shino (@rytym0720) on CodePen.

上記はtoggleの値をtrueにしていますので「Hello Vue.js」というテキスト要素が表示されています。

See the Pen YzpeRVV by RyotaAoyama (@rytym0720) on CodePen.

上記はtoggleがfalseになっているので非表示になっていますね。

違う例も見てみましょう。

See the Pen zYoRMzG by RyotaAoyama (@rytym0720) on CodePen.

上記ではelse ifやelseも使用して条件分岐を行なっています。

HTMLタグに直接ディレクティブは書くのでscript内で書くことに慣れている方は最初は違和感があるかもでしれません。汗

色々な使い方が出来ますが、詰め込みすぎず、今回は基本を押さえて下さいね。

v-show

v-showは表示/非表示の切り替えに使えるディレクティブです。

「v-ifと何が違うの？」と思った方は鋭いです。

v-showはv-ifのようにDOMツリーから追加削除するのではなく、cssのdisplay:on/offの切り替えで要素の表示/非表示を切り替えるだけなのでv-ifに比べて描画コストを抑える事ができるのです。

v-showの方がより読み込みなどの点で早いわけですね。

なので頻繁に要素の表示/非表示を切り替える場合はv-showを使うようにしましょう。

See the Pen bGBLbOv by RyotaAoyama (@rytym0720) on CodePen.

上記はtoggleの値をfalseにしているので、「Hello Vue.js」というテキストが消えていますね。

See the Pen KKNQQgy by RyotaAoyama (@rytym0720) on CodePen.

こちらはtoggleの値をtrueにしているのでちゃんとHello Vue.jsというテキストが表示されています。

この場合、pタグがdispalyの"block"と"none"がVueによって動的に切り替えられているという事です。

v-for

オブジェクトの繰り返しを行えるディレクティブになります。

以下の例では、dataオプションに登録した配列の値(rice,bread,Udon)を、番号付きのリストで表示しています。

See the Pen gOLegaR by shino (@rytym0720) on CodePen.

v-forディレクティブの主な構文は以下となります。

<要素名 v-for ="バリュー　in　オブジェクト">
{{表示したいバリュー}}
</要素名>

foodsの配列をv-forの一文を加えるだけで繰り返しリストとして出力してくれている形ですね。

v-on

イベントの発火で使用するディレクティブです。

以下はボタンを押したら現在時刻を表示するプログラムです。

v-on:イベント名="メソッド名"という構文です。

See the Pen gOLewyV by shino (@rytym0720) on CodePen.

これはボタンを押したら現在の時刻を出力するプログラムです。

HTMLの{{now}}は空にしておき、onclickという関数で現在時刻を{{now}}の中に現在の時刻を出力している形です。

気づかれた方はもいるとは思いますが、methods：の後はバニラJSですよね。

このようにVue.jsであってもバニラJSの知識は必要となってきますので、Vue.jsに入る前にバニラJSについて学んでおく方がスムーズにVue.jsの事も理解出来ると思います。

v-model

双方向バインディングという実装を可能にするディレクティブです。

dataオブジェクトの値を変更→テンプレートの値が変更されるがv-bindでしたがテンプレートの値を変更したらdataオブジェクトの値を変更出来る点が双方向バインディングの特徴といえます。

双方向バインディングを簡単に使えることはVue.jsの大きなメリットといえますので、是非習得していきましょう。

See the Pen XWNEprQ by shino (@rytym0720) on CodePen.

下に入力したものが上にも表示されますが、これが双方向バインディングと言います。

片方ではなく、両方からデータの書き換えが動的に行えるという事ですね。

まとめ

いかがでしたでしょうか。

Vue.jsは手軽に始める事が出来る入門に最適なJavaScriptのフレームワークです。

長く書く必要があったコードも、Vue.jsを使うことで簡単に実装する事ができますし、覚える事がそれほど多くないのも特徴です。

Vue.jsは企業でも多数採用されており、LINE、Nintendo、DMM、Alibabaといった有名企業も採用しております。

WEBアプリだけではなく、WEB制作会社でも使われており、私も基本はVue.jsを使用しています。

ReactやAngularに比べて理解もしやすく直感的に動かす事が出来るので、是非この機会にVue.jsをはじめてみてはいかがでしょうか。

それでは本日はこのへんで。

いつもお読み頂きありがとうございます✨

リンク