Vue.jsで手軽にブログに動きのあるコンテンツを入れる

2019年6月6日

最近個人的に気に入っているのが、JavaScriptのフレームワーク Vue.js（ビュージェイエス）です。

JavaScriptの処理といえばjqueryメインだったわたしにとってかなり便利な存在です。

ブログでも手軽に導入できると思いますのでサンプルも紹介したいと思います。

Vue.jsとは？

Vue.jsはウェブアプリケーションのUI開発に使えるオープンソースのJavaScriptフレームワーク。

双方向データバインディングが簡単に使えること、HTMLベースのテンプレート構文を使った記述がわかりやすいところが特徴（かなり簡単に説明してます）。

双方向データバインディングについては実際に動作しているところを見たほうが早いのでサンプルを紹介します。

メッセージ: {{ message }}

入力ボックスに文字を入れると、ページ遷移せずに上部のテキストが更新されます。文字を削除した場合も同様に結果が表示されます。

この動作自体は全く珍しくはないのですが、ほんの数行のコードで実装できることと動作が高速なところが魅力です。

jqueryはセレクタ（HTML要素の場所を指定する）処理が手軽にでき非常に便利です。ただHTML構造が複雑になってくると煩雑になりがち。

Vue.jsではHTMLが表示されている部分と変更されるデータを結びつけておき、データの変更に応じて更新（データバインディング）すること、仮想DOMという概念を使用して描画・再構築しています。

何やら小難しい感じですが、メンテナンス性が高くインタラクティブなことがやりやすいのです。

created by Rinker

インクリメンタルサーチは文字を入力すると即時に候補が出るものです。平仮名、カタカナは区別していますのでカタカナで入力してみてください。

サンプルを作っている時、CDアルバムの抽出で作っていましたので上の例とは若干違いますが要領は同じです。

dataにリストを作成、算出プロパティであるcomputedでinputタグで入力した文字と一致した列を返すというもの。

次のサンプルはYoutube Data APIでYoutubeのプレイリストを表示するサンプルです。Google関連のAPIを利用する方法については今回割愛しますが、各自
Google API ConsoleからAPIキーを取得すれば使えます。

ここでは画像とタイトルの一覧だけですが、実際に使うなら動画のリンクをつけるかiframeを埋め込む感じにすると良いかもしれないですね。

今回はVue.jsについて紹介しました。もう少しサンプルを入れようと思ったのですが、データ連携が必要になるとどうしてもサーバーが必要になってくるので今回は除きました。

学習には動画コンテンツがわかりやすいです。無料でもドットインストールなどで多少勉強できますので興味が有る方はチェックしてみてください。

UdemyにもVue.jsのコンテンツが含む入門講座がいくつかありましたのでこちらも是非。

こちらは７時間を超える動画時間の決定版。