カテゴリーアーカイブ Vue

著者:杉浦

【Vue.js】VueとCSSアニメーションを組み合わせる

　Vue.jsは便利です。テンプレートエンジン同然の動的なDOM操作が簡潔に記述できます。例えばv-ifの様な条件付レンダリングです。
条件付きレンダリング — Vue.js

　デモの様に10行に満たないテンプレートHTMLとVueインスタンス定義で切り替えが実現できます。これは本当に簡潔な記述で、他の記述が紛れる余地がありません。このためDOM操作の際の細やかアニメーションを自らの手で付けようとしてしまいますが（少なくとも自分はそうしました）、実はVue.js自身にアニメーションをサポートする機能がついています。
Enter/Leave とトランジション一覧 — Vue.js
transition – CSS： カスケーディングスタイルシート ｜ MDN
　VueのEnter/Leave とトランジション一覧に記述されている機能は主にCSSのtransitionにDOM操作アニメーションを明け渡すための機能です。発展形としてJavaScriptによる処理を描画中に挟む、データの変化をアニメーションにする、といったものもあります。詳しくはVue公式ガイドのトランジションとアニメーション関連を参照です。
　具体的には

<transition name="fade">
    <p v-if="show">hello</p>
</transition>

　の様にv-ifの様な条件付レンダリング要素をtransitionタグで括ることが第一歩です。transitionタグはVue組み込みのコンポーネントのタグです。このように括るとtransitionタグ内部のv-if属性付きのタグにアニメーションをつけるための要素が適宜定義されます。定義は次の画像にまとまっています。
　
　Enter/Leave とトランジション一覧 — Vue.js#トランジションクラスより引用
　この画像のvの部分にtransitionタグのname属性の値が当てはまり、その文字列のクラスがv-ifの様な表示、描画操作対象タグにつきます。具体的には次の様に使えます。

　CSSのtransitionらしく起点、終点、起点から終点への移動の仕方、のアニメーションを指定します。それぞれ無印、to、activeが当てはまります。デモのslideならばmax-heightの値を0.5秒で0から5em、5emから0へ線形的に変形させています。

著者:杉浦

【Vue】propsで渡ってきたObjectをキーについてバリデーションする

　扱う値があまりに煩雑になってくると系統だった値をまとめてオブジェクト化して扱う様になります。Vue.jsではpropsという仕組みで値をコンポーネント間でやりとりします。基本は次の様に受け渡されるコンポーネント側で型を検査することによって致命的エラーを防ぎます。

  props: {
    memberId: {
      type: Number,
      required: true,
    },
    pageInfo: {
      type: Object,
      required: true,
    },
  },

　この方法を用いた場合、Object型の通過ルールはあまりに緩すぎます。必要なプロパティがそろっていない空のObjectでも通ってしまいます。バリデーションを用いることでこれを防げます。
　プロパティ — Vue.js
　リンク先のカスタムバリデーションがそれです。これはvalidator関数の返す値の真偽によってバリデーションの結果を判定する仕組みです。次のvalidator関数の例は必要なkeyが全てあるかないかの判断になります。

  props: {
    pageInfo: {
      type: Object,
      required: true,
      validator(value) {
        const valueKeys = Object.keys(value);
        let isIncludeAllNeedKey = true;
        ['currentPage', 'from', 'to', 'total', 'lastPage'].forEach((needKey)=>{
          isIncludeAllNeedKey = isIncludeAllNeedKey && valueKeys.includes(needKey);
        });
        return isIncludeAllNeedKey;
      },
    },
  },

　与えられた値valueのキーを配列化、必要なキーについて一つ一つincludes関数で存在の有無を確かめます。どこかで無いとわかった時、isIncludeAllNeedKey = isIncludeAllNeedKey && falseとなり、isIncludeAllNeedKey===falseの状態となり、isIncludeAllNeedKey = false && valueKeys.includes(needKey);が実行されるようになります。これでオブジェクトのキーの有無を確かめるための簡単なバリデータを作れます。

著者:杉浦

【Vue.js】Vue.jsに関する色々が置かれているリポジトリawesome-vue

vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js
　awesome-vueはVue.jsに関する様々なモノのリストが置かれたリポジトリです。ライブラリはもちろん、教材やVue.jsが使用されたプロジェクトもあります。
　awesome-vueのオーナーは開発の元締めであるvuejsそのものです。そのためか現在もとても活発にリストが更新されており、その多くが有用です。（草の根ライブラリやスニペットを探すと無視できないバグを持っていることがままあります）

　リンクと概要のみを大雑把な分け方で1ページにずらっと並べているの探すのは気持ち手間ですがリンク先は2000を優に超えており、とりあえず何か探したい時に見てみる場所として満足に使えます。

著者:杉浦

【Vue.js】デフォルト値による簡易な引数で呼び出せる柔軟なコンポーネント

　Vue.jsではしばしばカスタムHTMLタグとも言える程、小さな部品を作りたくなります。例えばform中の入力欄です。簡易に作るのであれば次の様にlabelとinputに必須属性とユーザ向けの多少の文言をつけるのみです。

<label for="login_username">ユーザ名</label>
<input
  id="login_username"
  type="text"
  name="username">

　実際にはこれにデザインが加わります。

<div class="row">
  <div class="col-md-12">
    <div class="form-group row">
      <label
        class="col-md-3 col-form-label text-md-right"
        for="login_username">ユーザ名</label>
      <input
        id="login_username"
        type="text"
        class="col-md-9 custom-control-input"
        name="username">
    </div>
  </div>
</div>

　Vue.jsを用いるならば、inputタグのvalueと何かしらの変数を同期させたくなるでしょう。動的なバリデーション、警告を追加もするでしょう。

<div class="row">
  <div class="col-md-12">
    <div class="form-group row">
      <label
        class="col-md-3 col-form-label text-md-right"
        for="login_username">ユーザ名</label>
      <div class="col-md-9">
        <input
          id="login_username"
          v-model="vModelValue"
          type="text"
          class="custom-control-input"
          name="username"
          @input="validation()">
       <div
          v-show="isValidationErr"
          class="text-black-50">{{ localValidationErrMsg }}</div>
      </div>
    </div>
  </div>
</div>

　シンプルなtype=”text”でこれです。inputタグの属性に凝ると更にvalue、placeholder、required、typeがnumberならばstep、max、minなどが増えます。これはたかだか一つの入力欄でありフォーム全体を考えた場合、inputタグセットが十個近く並んだりもします。素のHTMLコードのままその様なものを記述した場合、可読性が落ちてしまい開発も保守もやり難くなってしまいます。Vue.jsでコンポーネントとしてまとめることでとりあえずの解決を図ります。

　上のJSFiddleでコンポーネントを用いているHTMLコードは18行程です。実際はコンポーネント定義をHTMLコードと別の1ファイルにまとめるため、コンポーネント定義部はカウントしていません。上述した20行程のinputタグ周りを重ねて書くよりよっぽど楽になりました。
　コンポーネントを用いることで記述は楽になりましたが、全てtype=”text”で様々な属性が全くないinputタグセットでしかなく、柔軟性が犠牲になっています。属性を指定するための引数を増やすことによってもっと柔軟なコンポーネントにします。柔軟にするうえで気を付けることに、呼び出し側で不要なコードが増えない様することがあります。コンポーネントを呼び出すための引数にデフォルト値を与えることによってこれを実現します。

　inputタグの効果が多彩になりました。メールアドレスは\や日本語の様なメールアドレスに含まれることのない文字を打つと、その文字を消して警告を表示します。コードのHTMLを見て頂けばわかる通り引数がinputタグの属性の大部分をカバーする様になっています。それだけ大量の引数が用意されているにもかかわらず、コンポーネント呼び出しが短くまとまっているのがデフォルト値の効果です。

<input
 :value="value"
>
/** 省略 */
props:{
  value: {type: String, default: null},
}

の様に記述するとコンポーネント呼び出し時に引数valueを指定しない場合、value=nullとなりHTMLコード上でもvalue属性は指定されなかったことになります。これと同じ様ことを他の属性にも適用することで大量の引数を用意しつつも、呼び出しを簡単にしています。
　実際のコーディングではンポーネントの定義を1ファイルにまとめる単一ファイルコンポーネントの仕組みを用います。これにより、JSFiddleで表示しているなかなかリッチな画面を作るHTMLコードは次の様にまとまります。

<div id="app">
  <form-input
    label="ユーザ名"
    id="edit_username"
    name="username"
    placeholder="例：浜松 太郎"></form-input>
  <form-input
    label="メールアドレス"
    id="edit_mail"
    name="mail"
    type="mail"
    validation-template="mail"></form-input>
  <form-input
    label="番号"
    id="edit_number"
    name="number"
    type="number"
    value="0.53"
    max="1" min="0" step="0.01"></form-input>
  <form-input
    label="色"
    id="edit_color"
    name="color"
    type="color"
    value="#F0115F"></form-input>
</div>