一樹)Vue.jsは非常にシンプルなJavaScriptフレームワークで、kintoneと相性がよく、私自身kintoneのカスタマイズではVue.jsを使うことも多いです。先日、CybozuCDNにVue.jsが公開されましたので、kintoneとVue.jsについて少しまとめます。他のフレームワークとの比較まず、同じくCybozuCDNで公開されている、Angularなどのフレームワークと何が違うのか、ということですが、公式サイトに下記まとめられております。https://jp.vuejs.org/guide/comparison.html例えば、AngularJSはフルスタックなフレームワークで何でもできますが、その分学習コストが高いです。Vue.jsは双方向データバインディングに特化しており、単体での機能はAngularJSやKnockout.jsなどのフレームワークよりは少ないですが、その分シンプルで学習コストは低く、簡単なものであればVue.jsの方が書きやすいと思います。双方向データバインディングとは、わかりやすくいえば、データの変更があったらUIの変更を更新し、UIの変更があったらデータの更新をする処理を自動的に行う機能を指します。普通のJavaScript開発だとテキストボックスが変更されたイベントを検知して関数を実行させなければいけませんが、Vue.js内で管理するデータについてはそれが自動的に行われることになります。サンプル(データ表示、検索)実際にいくつかサンプルを作ってみます。今回は、顧客名簿をVue.jsを使って表示するのと、検索まで実装してみたいと思います。下記のアプリを作って、サンプルデータを入れておいてください。CDNからvue.jsのURLをコピーする。https://js.cybozu.com/vuejs/v2.6.10/vue.min.js※今回はバージョン2.6.10を使用する。Vue.jsの簡単な使い方まず、kintoneのデータは使わず、とりあえずkintone上でVue.jsを使ってみましょう。顧客企業名と、電話番号を表示するカスタマイズビューを作成してみます。括られた部分がVue.jsで利用される部分です。JavaScriptカスタマイズ下記のJavaScriptファイルを作成し、kintoneにアップロードしましょう。下記のように表示されます。kintoneのデータを読みこませる上記のカスタマイズビューとJavaScriptを再度編集して、今度はkintoneのレコードを表示させてみましょう。カスタマイズビューJavaScriptカスタマイズevent.recordsの配列をそのままVueのdataに利用することで、forも使わずに一覧を出すことが出来ました。すごくシンプルにかけますね。独自の検索フォームをつけてみましょう。簡単にインクリメンタルサーチが実装できます。カスタマイズビュー側に検索用のinput要素を追加し、JavaScript側にフィルターするための関数を定義します。カスタマイズビューJavaScriptカスタマイズJavaScriptカスタマイズで、computedの中にfilteredRecordという関数を定義し、カスタマイズビュー側でもfilteredRecordによってフィルターされた結果を表示する、というようになっています。算出プロパティを確認ください。)kintoneの検索の弱点として、1文字での検索が出来ない、英数字は単語単位でしか検索できないなどの制限がありますが、このインクリメンタルサーチを応用すれば、それらの弱点も克服することができます。まとめこれだけ簡単に、独自のカスタマイズビューを作ることができるのは魅力的ですよね。他にも、独自のフォームを作ったり、レコード詳細画面でスペースフォームと活用して表示をカスタマイズしたりなど、フルスクラッチで書いたり、jQuery単体でやるよりは楽にできると思います。算出プロパティやコンポーネントなどの機能も使いこなすとkintoneでやりにくい、かゆいところまで手が届きます。学習コストも比較的低いので、是非ためしてみてください。コミュニティをご活用ください。17:15お世話になります。event.recordsの配列とjavascriptの変数を同時にVue.jsに受け渡す方法を教えてください。08:33Vue.jsは複数のdataを保持できるので、別の変数も渡したい場合は、下記のようにすれば可能ですが、如何でしょうか。recordsに任意のデータを挿入する場合は、vueに渡す前に自前にそういうデータを作ってから渡してあげればいいと思います。});回答になってなければ教えて下さい。事務局が記事への不具合報告など、フィードバックを受け付けるための欄です。質問に著者が回答している場合もありますが、常に監視しているわけではありません。コミュニティをご活用いただければと思います。一覧画面を独自にカスタマイズするほか現状はありません。18:22お世話になります。こちらの記事の「kintoneのデータを読みこませる」を試しています。一覧画面での初期表示は問題無くレコード一覧を表示してくれるのですが、ページ遷移(一覧の2ページ目)した時の描画が出来ませんでした。ページ遷移時にvm.recordsをコンソール出力した所、vmインスタンス上問題無く更新されていました。(2ページ目に取得するレコードになっていました。)画面だけが初期表示(1ページ目)のままでした。そこでブラウザを更新してみると正しい表示になりました。09:43ご指摘ありがとうございます、下記のように先にインスタンスを作成し、events.onで動的に変更したほうがいいですね。05:38返信ありがとうございます。!予めインスタンス化しておいて、イベント時にセットすれば良いんですね!ただ、vm.$setでそのままrecords配列をセットする事ができなかったので、以下のように修正してみました。やりたい事が出来たのでOKです。Permalinkログインしてコメントを残してください。