（著者：kintone エバンジェリスト 村濱 一樹）
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を使って表示するのと、検索まで実装してみたいと思います。
前準備
下記のアプリを作って、サンプルデータを入れておいてください。
| フィールド名 | フィールドコード |
|---|---|
| 顧客名 | campanyName |
| 顧客電話番号 | tel |
Cybozu CDN
Cybozu CDNからvue.jsのURLをコピーする。
https://js.cybozu.com/vuejs/v2.6.10/vue.min.js
※今回はバージョン2.6.10を使用する。
Vue.jsの簡単な使い方
まず、kintoneのデータは使わず、とりあえずkintone上でVue.jsを使ってみましょう。
カスタマイズビューの作成
顧客企業名と、電話番号を表示するカスタマイズビューを作成してみます。
カスタマイズビューの作り方はこちら
v-for と記述されたところと、二重の波括弧 {{}} で括られた部分がVue.jsで利用される部分です。
JavaScriptカスタマイズ
下記のJavaScriptファイルを作成し、kintoneにアップロードしましょう。
下記のように表示されます。
kintoneのデータを読みこませる
上記のカスタマイズビューとJavaScriptを再度編集して、今度はkintoneのレコードを表示させてみましょう。
カスタマイズビュー
JavaScriptカスタマイズ
event.recordsの配列をそのままVueのdataに利用することで、forも使わずに一覧を出すことが出来ました。 すごくシンプルにかけますね。
レコード検索
独自の検索フォームをつけてみましょう。簡単にインクリメンタルサーチが実装できます。
カスタマイズビュー側に検索用のinput要素を追加し、JavaScript側にフィルターするための関数を定義します。
カスタマイズビュー
JavaScriptカスタマイズ
JavaScriptカスタマイズで、computedの中にfilteredRecordという関数を定義し、
カスタマイズビュー側でもfilteredRecordによってフィルターされた結果を表示する、というようになっています。
（詳しくは 算出プロパティを確認ください。）
kintoneの検索の弱点として、１文字での検索が出来ない、英数字は単語単位でしか検索できないなどの制限がありますが、このインクリメンタルサーチを応用すれば、それらの弱点も克服することができます。
まとめ
これだけ簡単に、独自のカスタマイズビューを作ることができるのは魅力的ですよね。
他にも、独自のフォームを作ったり、レコード詳細画面でスペースフォームと活用して表示をカスタマイズしたりなど、フルスクラッチで書いたり、jQuery単体でやるよりは楽にできると思います。
さらに算出プロパティやコンポーネントなどの機能も使いこなすとkintoneでやりにくい、かゆいところまで手が届きます。
学習コストも比較的低いので、是非ためしてみてください。
お世話になります。 はじめまして 森岡と申します。 event.recordsの配列とjavascriptの変数を同時にVue.jsに受け渡す方法を教えてください。
Vue.jsは複数のdataを保持できるので、別の変数も渡したい場合は、下記のようにすれば可能ですが、如何でしょうか。
もしくはrecordsに任意のデータを挿入する場合は、vueに渡す前に自前にそういうデータを作ってから渡してあげればいいと思います。
回答になってなければ教えて下さい。
アプリAにアプリBの関連レコード一覧を設置している場合に、
アプリAの一覧画面に、関連レコードの値を表示することも可能でしょうか？
kamewo様
こちらのコメント欄は、基本的に、cybozu developer 事務局が記事への不具合報告など、フィードバックを受け付けるための欄です。質問に著者が回答している場合もありますが、常に監視しているわけではありません。
このような質問については有志ユーザーが回答が可能なcybozu developer コミュニティをご活用いただければと思います。
kamewoさま
今回のような質問は記事と直接関係ないため、
運営チームの投稿にありますようにDeveloperコミュニティをつかっていただくほうがいいですが、回答しますと、
一覧画面に関連レコードの値を表示するのは不可 ですね。。
一覧画面を独自にカスタマイズするほか現状はありません。。
お世話になります。
こちらの記事の「kintoneのデータを読みこませる」を試しています。
一覧画面での初期表示は問題無くレコード一覧を表示してくれるのですが、
ページ遷移(一覧の2ページ目)した時の描画が出来ませんでした。
ページ遷移時にvm.recordsをコンソール出力した所、vmインスタンス上問題無く更新されていました。（2ページ目に取得するレコードになっていました。）
画面だけが初期表示(1ページ目)のままでした。
そこでブラウザを更新してみると正しい表示になりました。
2ページ目以降の遷移時にも正しい画面表示にするにはどうしたら良いでしょうか？
ご指摘ありがとうございます、下記のように先にインスタンスを作成し、events.onで動的に変更したほうがいいですね。
下記でためしてみてください！
(function() {
"use strict";
// 先にインスタンス作成
var vm = new Vue({
data: {
records: []
}
});
kintone.events.on("app.record.index.show", function(event) {
if(event.viewId !== 5520283) return event; // 作成したカスタマイズビューのIDを指定
var records = event.records;
// インスタンスに対して再マウントとデータセット
vm.$mount("#app");
vm.$set("records", records);
});
})();
返信ありがとうございます。
なるほど！予めインスタンス化しておいて、イベント時にセットすれば良いんですね！
ただ、vm.$setでそのままrecords配列をセットする事ができなかったので、以下のように
修正してみました。
でも、やりたい事が出来たのでOKです。
勉強になりました。ありがとうございます！
kintone.events.on("app.record.index.show", function (event) {
if (event.viewId !== 5524504) return event;
var records = event.records;
// インスタンスに対して再マウントとデータセット
vm.$mount("#app");
// vm.$set("records", records);
vm.records.splice(0);
for(let i = 0; i < records.length; i++){
vm.records.push(records[i]);
}
});
提示したコードはあくまでv1のものなのでそのせいかもしれませんね、目的をはたせたようでなによりです!