HTML

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プログラミング入門

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

Vue JS入門決定版!jQueryを使わないWeb開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ

この記事が気に入ったら
いいね ! しよう

Twitter で
  • この記事を書いた人
  • 最新記事

ケー

IT業界歴17年の兼業アフィリエイター。 ガジェットレビュー、格安SIM、迷惑メールネタ、写真ネタなどの記事が多いです。困った方の参考になる記事を心掛けています。

-HTML

Copyright© ウェブと食べ物と趣味のこと , 2018 All Rights Reserved.