About

小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。

赤い電動車いすに乗って生活をしています。色々と不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。

好き:食べる/スロープ/エレベーター
嫌い:食事制限/段差/階段
※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。

気づけばグルメブログになってしまわぬよう、しっかり更新頑張ります!

Links

ここ最近Vue.js弄ってます

ここ最近Vue.js弄ってます

なんだか暑さの勢いが弱まった感じがしますが、もう8月なのですね。
あぁ、、7月は一度も更新できずでした。。本当に継続って難しい…。

さて、ここ最近は個人的な勉強としてJavaScriptのフレームワークである「Vue.js」を弄ってみてます。
特に勉強しようと思った深い理由などがあったわけでもなく、「最近JavaScriptのフレームワークって流行ってるなぁ」という軽い気持ちで触れてみようと選んだのがVue.jsだったという感じです、はい。。

簡単ではありますが、概要や実際のサンプルを交えた内容を書いていきたいと思います。

コンテンツ一覧

    Vue.jsの概要

    設計パターンについて、自分自身詳しくないのですが、Vue.jsにおいてはMVVMという設計パターンのようです。
    ModelViewViewModelの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読み込んでゴニョゴニョとかも出来たりと、使いようによっては色々面白いことができそうだなという印象でした!

    また、更新します!

    コメントする

    トップへ戻る