ウェブと食べ物と趣味のこと

ガジェットレビュー、格安SIMのこと、windows10、迷惑メールネタ、写真ネタなど。困った方の参考になる記事を心掛けます。

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

スポンサードリンク

f:id:photoblg:20180221211508p:plain

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

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

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

Vue.jsとは?

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

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

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

双方向データバインディングのサンプル

メッセージ: {{ message }}

 

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

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

gistf24815658c665f8175a192f255f27dfc

jqueryとの違い

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

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

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

ブログに使えそうな動的コンテンツ

インクリメンタルサーチ

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

  • {{ words }}

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

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

gisteceb64a2d01335e393966b1b529c13d5

APIからデータを取得して表示

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

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

  • {{ item.snippet.title }}

gistabb2f09e2dff2b00399ba8c67d4bef7b

最後に

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

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

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

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門