なんだか暑さの勢いが弱まった感じがしますが、もう8月なのですね。
あぁ、、7月は一度も更新できずでした。。本当に継続って難しい…。
さて、ここ最近は個人的な勉強としてJavaScriptのフレームワークである「Vue.js」を弄ってみてます。
特に勉強しようと思った深い理由などがあったわけでもなく、「最近JavaScriptのフレームワークって流行ってるなぁ」という軽い気持ちで触れてみようと選んだのがVue.jsだったという感じです、はい。。
簡単ではありますが、概要や実際のサンプルを交えた内容を書いていきたいと思います。
コンテンツ一覧
Vue.jsの概要
設計パターンについて、自分自身詳しくないのですが、Vue.jsにおいてはMVVMという設計パターンのようです。
Model・View・ViewModelの3つで構成されている事を指すようです（すみません、詳しく語れないです…）。
後は、双方向データバインディングというのをシンプルな記述で実現できるよう特化されています。
双方向データバインディング
とあるテキストフィールドに入力された値をどこかに表示するようなプログラムがあったとします。
そのテキストフィールドの入力内容が変更され、再度その内容を表示させるという場合、内容の監視 → 変更されたタイミングで → 表示内容を反映というステップが必要になるかと思います。
その辺りを特に意識することなく自動で変更される技術を「双方向データバインディング」と言います。多分。。
双方向データバインディングのサンプル
実際にコードを交えながら紹介したいと思います。
例えば、以下のようなHTMLがあったとしましょう。
<div id="textdata">
<input v-model="message">
<p>{{ message }}</p>
</div>
Vue.jsの恩恵により、<input v-model="message"> の入力内容が <p>{{ message }}</p> に反映されるという流れです。
肝心のVue.jsは以下のような記述になります。
var textdata = new Vue({
el: '#textdata',
data: {
message: 'テキストボックスの値'
}
} );
el: '#textdata', こちらはdivのidを指定しています。 message: 'テキストボックスの値' こちらはテキストフィールドとpタグと紐付いてますね（初期値：テキストボックスの値）。
たったこれだけで、テキストフィールドに入力された値がリアルタイムで反映されるようになります。
以下リンクより、実際のサンプルをご確認ください！
その他サンプル
まずは「インクリメンタルサーチ」のサンプルです。バッとリストがあり、テキストフィールドの内容によりリアルタイムで絞り込まれていくようなやつですね。
以下サンプルをご覧いただけると、一番早いかと思います。
続いては、「簡易的なTodoリスト」のサンプルです。テキストフィールドに内容を打ち込んでエンターが押されると、その時点のタイムスタンプと内容がリストの一番上に追加されるようなものです。
以下サンプルです。
はい、というわけで最近弄ってみているVue.jsについてでした。他にもaxiosというのを利用しWordPressのREST APIからJSON読み込んでゴニョゴニョとかも出来たりと、使いようによっては色々面白いことができそうだなという印象でした！
また、更新します！
コメントする