車いすなコーダーAbout小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。赤い電動車いすに乗って生活をしています。不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。AugJavaScriptVue.jsなんだか暑さの勢いが弱まった感じがしますが、もう8月なのですね。あぁ、、7月は一度も更新できずでした。本当に継続って難しい...。ここ最近は個人的な勉強としてJavaScriptのフレームワークである「Vue.js」を弄ってみてます。勉強しようと思った深い理由などがあったわけでもなく、「最近JavaScriptのフレームワークって流行ってるなぁ」という軽い気持ちで触れてみようと選んだのがVue.jsだったという感じです、はい。簡単ではありますが、概要や実際のサンプルを交えた内容を書いていきたいと思います。設計パターンについて、自分自身詳しくないのですが、Vue.jsにおいてはMVVMという設計パターンのようです。Model・View・ViewModelの3つで構成されている事を指すようです(すみません、詳しく語れないです...)。後は、双方向データバインディングというのをシンプルな記述で実現できるよう特化されています。双方向データバインディングとあるテキストフィールドに入力された値をどこかに表示するようなプログラムがあったとします。表示内容を反映というステップが必要になるかと思います。その辺りを特に意識することなく自動で変更される技術を「双方向データバインディング」と言います。コンテンツ一覧へ戻る双方向データバインディングのサンプル実際にコードを交えながら紹介したいと思います。以下のようなHTMLがあったとしましょう。反映されるという流れです。肝心のVue.jsは以下のような記述になります。こちらはdivのidを指定しています。こちらはテキストフィールドとpタグと紐付いてますね(初期値:テキストボックスの値)。これだけで、テキストフィールドに入力された値がリアルタイムで反映されるようになります。以下リンクより、実際のサンプルをご確認ください!サンプルを確認するコンテンツ一覧へ戻るその他サンプルまずは「インクリメンタルサーチ」のサンプルです。バッとリストがあり、テキストフィールドの内容によりリアルタイムで絞り込まれていくようなやつですね。以下サンプルをご覧いただけると、一番早いかと思います。サンプルを確認する続いては、「簡易的なTodoリスト」のサンプルです。テキストフィールドに内容を打ち込んでエンターが押されると、その時点のタイムスタンプと内容がリストの一番上に追加されるようなものです。サンプルを確認するコンテンツ一覧へ戻るはい、というわけで最近弄ってみているVue.jsについてでした。Posts2019.07.15「別のプログラムがこのフォルダーまたはファイルを開いているので、操作を完了できません。