2.5.2Vue.jsサイトの「グリッドコンポーネントの例」は、コンポーネントの使い方を知るのによい作例です。6)の構文でつくってみます(サンプル001)。データのコレクション(リスト)は、Arrayクラスの新しいメソッドとアロー関数式で扱うようにしました。Vue.jsについては、すでに入門ノートを何本か書いています。これらノートやVue公式サイトの情報は必要に応じて本文に引用しましたので、詳しく知りたい場合にはそちらをお読みください。グリッドコンポーネントで静的な表組みをつくるVue.jsはCDNでつぎのように<script>要素に読み込みます。src="https://cdn.jsdelivr.net/npm/vue"></script>アプリケーション(demo)は、Vue()コンストラクタに以下のようにdataを定めます。ふたつの配列が含まれていて、それぞれキーになる列タイトルになるフィールド(gridColumns)と行単位のレコード(gridData)です(「フィールド/レコード」参照)。<body>要素では、あとでつくるコンポーネントのカスタムタグ(demo-grid)に、ふたつの配列データをコンポーネントのプロパティ(dataとcolumns)としてv-bindディレクティブ(省略記法:)により関連づけ(バインディング)しました。項目の追加と削除および残り項目数表示」02「アプリケーションに定めた項目のデータをTodoリストに表示する」参照)。メソッドはDOMContentLoadedイベントで、アロー関数式のリスナーから呼び出しました。アプリケーションをコンポーネントに分ける」参照)。テンプレートは後掲のようにtype属性にtext/x-templateを与えた<script>要素に定めました。propsプロパティはオブジェクトベースの構文にして、型チェックを加えてあります。コンポーネントの応用とデータのチェック」04「プロパティの型を定める」)。データから動的にリストをつくる」01「項目のデータを複数にする」)。これでグリッドの静的な表組みができあがります(図001)。CSSは前出「グリッドコンポーネントの例」からそっくりコピーして<style>要素に定めました(後掲コード001)。columns">{{entry[key]}}</td></tr></tbody></table></script>図001■グリッドの静的な表組みのレイアウトフィールドとなるデータ(コンポーネントプロパティcolumns)の値は、レコードの並べ替えや検索のキーに使うため、小文字の識別子にしました。グリッドの列タイトルとして用いるときは、頭が大文字の方がよさそうです。データをローカルに保存する」03「フィルタを使う」)。フィルタのメソッド(capitalize())は、つぎのようにVue.component()メソッドに渡すオプションオブジェクトのfiltersに定めます。str.slice(1);}}});テンプレートでフィルタは、バインディングした変数(key)のあとにパイプ|を添えて加えます。すると、変数値がフィルタのメソッド(capitalize())に渡されて、戻り値が用いられるのです。これで、グリッドの列タイトルは頭が大文字になります(図002)。データからグリッドの静的な表組みをつくるここまでのコードは、以下にまとめました(コード001)。レコードを並べ替えるグリッドの列タイトルがクリックされたら、レコードをそのフィールドの順序(アルファベットあるいは数値順)で並べ替えるようにしましょう。Vue.component()メソッドに渡すオプションオブジェクトのdataにはキーのフィールド識別子を納めるプロパティ(sortKey)、そしてmethodsにクリックで呼び出されるメソッド(sortBy())を以下のように定めます。メソッドが受け取るのは、ソートのキーの識別子です。コンポーネントに加えるdataは関数でなければならないことにお気をつけください。項目を数えて表示する」03「算出プロパティを使う」)。ソートするキーのフィールド(sortKey)とレコード(data)の値を取り出したら、Array.sort()メソッドで並べ替えます。引数に渡すのは、キーに応じた値から順序を決める比較関数です。ソートする前に引数なしで呼び出したArray.slice()メソッドは配列を複製するので、もとのレコードには手が加わりません。フィールドに入力したテキストを動的に項目として加える」02「入力フィールドの項目をデータに加える」)。引数に渡すのがクリックしたフィールドの識別子(key)です。レコードを取り出す要素(<tr>)のv-forディレクティブは、もとにするデータを算出プロパティ(filteredData())に差し替えました。これでレコードがソートされた順に差し込まれるのです。ふたつの要素にCSSのクラスを加えました。要素のclass属性を動的に変える」03「バインディングでクラス属性を動的に変える」)。クリックで選ばれたキー(sortKey)の要素に、スタイル(active)が与えられます。ひとつは、列タイトルに含めた要素(<span>)で、右横に△印を表示するためのクラス(asc)です。これで、グリッドの表組みは、クリックしたフィールドでレコードがソートされるようになりました(図003)。filteredData"></tr></tbody></table>図003■クリックしたフィールドでレコードがソートされるさらに、クリックするたびに、並びを昇順/降順切り替えましょう。整数で昇順が1、降順は-1と決め、つぎのように各キーに初期値1をオブジェクト(sortOrders)に定めたうえで、Vue.component()メソッドのオプションオブジェクトにdataとして加えます。グリッドの列タイトルがクリックされたときのリスナーメソッド(sortBy())でキーの整数値を切り替え、ソートの算出プロパティ(filteredData())が用いる比較関数の戻り値に乗じればよいのです。-1;}}});列タイトルに添えた印の要素(<span>)も、昇順/降順で△/▽と上下が変わるように、つぎのテンプレートのとおりクラスをバインディングで差し替えます。これで、フィールドをクリックするたびにソートされるレコードの昇順/降順が変わります(図004)。レコードを検索するつぎは、テキスト入力フィールドに打ち込む文字列で、レコードを検索できるようにします。<body>要素にはつぎのように<input>要素を加えて、v-modelディレクティブでデータバインディングします(「フォーム入力バインディング」)。バインディングした変数(searchQuery)は、コンポーネントのカスタムタグ(demo-grid)にディレクティブv-bind(省略記法:)で属性(filter-key)としてバインドしました。この値はコンポーネントプロパティから参照します。v-model="searchQuery"></form><demo-grid:filter-key="searchQuery"></demo-grid>v-modelディレクティブでバインドした変数(searchQuery)は、以下のようにアプリケーションのdataに定めます。コンポーネントのカスタムタグにv-bindディレクティブでバインドしたプロパティは、Vue.component()メソッドに渡すオプションオブジェクトのpropsに加えます。このとき、タグには属性のかたちでハイフン(-)つなぎで定めたプロパティ名は、ハイフン(-)は除いて頭を大文字でつなぐ(filterKey)ことにお気をつけください。<input>要素に打ち込まれたテキストを検索するのは、算出プロパティのメソッド(filteredData())です。console.log()メソッドでバインディングを確かめておきましょう。検索するテキストはString.toLowerCase()メソッドで小文字に統一します。テキストフィールドに入力したアルファベットは、すべて小文字でコンソールに出力されるはずです。5.1で備わった3つのメソッドにより検索語が含まれるレコードを選び出します。Array.filter()メソッドは、引数に渡した関数の戻り値が、ブール値でtrueと評価される要素からなる新たな配列を返します。この戻り値の配列(data)が、検索語を含むレコードです。つぎに、Object.keys()が、レコードごとの要素(row)からキーを配列として取り出します。その配列に対してArray.some()メソッドを呼び出せば、その中に少なくともひとつ条件に当てはまる要素が含まれるかどうかブール値が返ります。引数に渡した関数は、レコードの要素からキーごとの値を取り出して、検索語が含まれるかどうか調べるという手順です。2015の新しいメソッドで、引数の文字列が含まれるかどうかを返します。data;}},});これで、入力フィールドに打ち込んだテキストで検索されたレコードが選ばれてグリッドに表示されます(図005)。ソースのJavaScriptと<body>要素のHTMLの記述を以下のコード003にまとめました。<script>要素に定めたコンポーネントのテンプレートは、前掲コード002のまま変わりません。実際の動きは、CodePenに掲げた冒頭のサンプル001でお確かめください。6の構文に書き替える」で、新しい構文にするときのポイントをご紹介しています。サンプルをCodePenに改め、本文とコードにも少し修正を加えた。6の構文に書き替える」を引用。