いつもreact-reduxとredux-toolkitを利用して開発しています。

しかし、とある案件でwebpackなどでのトランスパイル禁止という縛りを受けた上で、kintone UI Component利用した複雑なUI構築の必要が出ました。

せっかくなので知見をここでまとめてみようという試みです。

kintone UI Componet (=KUC)

kintone UI ComponentはkintoneライクなUIがつかえちゃう素敵なライブラリです。略してKUC。

ソースを見るとLitで作られているようですね。
コンポーネント内部では状態を管理していますが、複合したコンポーネントを統合管理する方法はなさそうです。（あるかも。教えてください！）

Redux

状態管理はいろんな方法がありますが、Reduxは一番使われるフレームワークだと思います。React開発では絶対使いますね。

ReduxであればFluxパターンを利用して安全に管理が行えると思います。

他にもVueのreactiveとかZustand,Overmindといったフレームワークがありますね。

Reactで開発する場合は、redux-toolkitを使っています。

ですが今回はCDNを利用するので、redux-toolkitは使えません。

つくるもの

👇のような動きをするUIを作ってみます。

kintoneと連動性が高いUIを実現したいです。

実践

ではカスタマイズをはじめましょう。

kintoneアプリ

kintoneのアプリをこのように作っておきます。

上部スペースのidはbuttonです。

ReduxとKUCのインストール

cdnを利用します。

Redux, Kucというグローバルプロパティが設定されます。

reduxは3.6.0であればブラウザで動作できるライブラリが提供されています。このバージョン以降はesmで読み込むしかなさそうですが、esmはkintoneではサポートされていないので、正攻法でkintoneから呼び出すのは難しそうです。

データの設計

コーディングの前に、どのようなデータ構造がUIに必要か考えてみましょう。
画面を眺めてみると、以下のようなデータが必要そうです。

{
    //ダイアログのタイトル
    title: string;
    
    //選べる値の選択肢
    selectItems: string[];

    //選択された値
    selected: null | string;

    //モーダルが閉じられた時間
    closedDate: null | Date;
}

このデータの更新によって、UIとkintoneを連動させれば良さそうです。

👆こんな感じの構造が作れればオッケー。

実際のコード

/**
 * 管理するデータの構造の定義
 * @typedef {{
 *      title: string;
 *      selectItems: string[];
 *      selected: null | string;
 *      closedDate : null | Date;
 * }} AppState　
 */
(() => {
    /**
     * 最初のstoreの値を作る
     * @returns {AppState}
     */
    function createInit() {
        return {
            title: '',
            selectItems: ["あ", "い", "う"],
            selected: null,
            closedDate: null,
        }
    }

    /**
     * 更新するだけのシンプルなreducer
     * dispatch信号を受けて、状態を変更する。
     */
    function reducer(state = createInit(), action) {
        switch (action.type) {
            case 'update':
                return {
                    ...state,
                    ...action.payload
                }
            default:
                return state
        }
    }
    /**
     * 更新のためのdispatch信号を作る（よく使うから関数にしている）
     * @param {Partial<AppState>} next 
     * @returns 
     */
    function updateAction(next) {
        return {
            type: 'update',
            payload: next
        }
    }

    /**
     * reducerから状態管理機構(store)を構築する。
     */
    function createAppStore() {
        return Redux.createStore(reducer);
    }

    /**
     * UIを管理するクラス
     */
    class UserInterface {
        //ダイアログ
        $$dialog = new Kuc.Dialog();

        //ボタン
        $$kucButton = new Kuc.Button({
            text: 'open',
            id: 'qiita-button'
        });

        //ダイアログの親になるdiv。中央ぞろえしたいので。準備だけしておく。
        $$dropdownContainer = document.createElement('div');

        //ダイアログの中のドロップダウン。選択肢はstoreによって決まります。
        $$dropdown = new Kuc.Dropdown({
            label: '選べる値',
            value: '',
            items: [],
        })
        //データ（状態）の管理機構
        store = createAppStore();

        //storeとkintoneの接続を切るかどうか
        store2kintoneConnection = true;

        constructor() {
            this.$$dropdownContainer.style.height = `50vh`;
            this.$$dropdownContainer.style.width = `50vh`;
            this.$$dropdownContainer.style.display = 'flex';
            this.$$dropdownContainer.style.flexDirection = 'row';
            this.$$dropdownContainer.style.justifyContent = 'center';
            this.$$dropdownContainer.style.alignItems = 'start';
        }

        /**
         * storeの値にかかわらず再利用できるKUCオブジェクトの作成と設置
         * @param {HTMLDivElement} $$button
         */
        mount($$button) {
            //mount
            if (document.getElementById(this.$$kucButton.id) == null) {
                $$button.appendChild(this.$$kucButton);
            }

            //dialogないのコンテンツを作る
            this.$$dialog.content = this.$$dropdownContainer;
            this.$$dropdownContainer.appendChild(this.$$dropdown);

            //dialogは自動でマウントされる
        }


        /**
         * storeの値をUIに反映する。通常はrenderのような名前を付けます。
         */
        store2UI() {
            /**@type {AppState} */
            const state = this.store.getState();

            this.$$dialog.title = state.title;

            this.$$dropdown.items = state.selectItems.map(value => ({
                label: value,
                value: value
            }));

            this.$$dropdown.value = state.selected;

            /* 各コンポーネントの動きをいれる。*/
            this.__ui2store();
        }

        /**
         * UIの値をstoreに反映する。
         * 普通はrenderされたときに動きが決まるので、
         * 分けないないことが多いです。
         */
        __ui2store() {
            this.$$dropdown.onchange = (ev) => {
                this.store.dispatch(updateAction({
                    selected: ev.target.value
                }))
            };

            this.$$dialog.onclose = () => {
                this.store.dispatch(updateAction({
                    closedDate: new Date()
                }))
            }
            this.$$dialog.onopen = () => {
                this.store.dispatch(updateAction({
                    closedDate: null
                }))
            }

            this.$$kucButton.onclick = () => {
                this.$$dialog.open();
            }
        }

        /**
         * storeの値をkintoneに反映する
         */
        store2kintone() {
            /**@type {AppState} */
            const state = this.store.getState();

            const rec = kintone.app.record.get();

            rec.record.モーダルのタイトル.value = state.title;
            rec.record.選べる値.value = state.selected;
            rec.record.モーダルを閉じた日時.value = state.closedDate?.toISOString();

            kintone.app.record.set(rec);
        }

        /**
         * 
         * @param {Record< string, {value : any}>} record 
         */
        kintone2store(record) {
            //storeとkintoneの接続を切る
            this.store2kintoneConnection = false;

            this.store.dispatch(updateAction({
                title: record.モーダルのタイトル.value,
                selected: record.選べる値.value,
                closedDate: null == record.モーダルを閉じた日時.value ? null : new Date(record.モーダルを閉じた日時.value)
            }));
        }


        connectKintone() {
            this.store.subscribe(() => {
                if (this.store2kintoneConnection) {
                    this.store2kintone();
                } else {
                    //つけなおす
                    this.store2kintoneConnection = true;
                }
            })
        }

        connectUI(){
            this.store.subscribe(() => {
                this.store2UI();
            });
        }

    }

    ///////////////ここから後続処理///////////////////

    const ui = new UserInterface();

    //接続on
    ui.connectKintone();
    ui.connectUI();

    //kintoneの画面が表示されたときの処理
    kintone.events.on(['app.record.create.show', 'app.record.edit.show'], async (ev) => {
        //上部のボタン用スペース
        const $$button = kintone.app.record.getSpaceElement('button');

        //マウント（UIをつくる）
        ui.mount($$button);

        ui.store.subscribe(() => console.log(ui.store.getState()));


        //初期値を反映する。
        ui.kintone2store(ev.record);

        return ev;
    });

    //kintone側のデータの変更をstoreに反映する。
    kintone.events.on([
        'app.record.create.change.モーダルのタイトル',
        'app.record.edit.change.モーダルのタイトル',
        'app.record.create.change.選べる値',
        'app.record.edit.change.選べる値',
    ], (ev) => {

        //kintoneのデータの初期値をstoreに反映
        ui.kintone2store(ev.record);

        return ev;
    });
})();

createInit, reducer, updateAction, createAppStore

これらはReduxの基本的な書き方です。

store.dispatchにActionオブジェクトを信号として渡すと、状態が変わるというイメージです。updateActionはActionオブジェクトを簡単に作成するための関数です。

mount

これは画面上で状態にかかわらず作成されるコンポーネントを構築する関数です。
ボタンやダイアログは使い捨てではなく、何度も使うので、ここで構築します。

store2UI, __ui2store

storeとUIとを相互に反映させる処理です。

storeが保持しているstateの値を取得するにはstore.getState()を利用します。

store2kintone,kintone2store

storeとkintoneとを相互に反映させる処理です。

気をつけなければいけないのはkintone.app.record.get/setを利用していることです。これはイベントハンドラ内では利用できないので、時々接続を切ってあげる必要があります。

接続を切るのは、kintone2storeの役割です。

connectKintone, connectUI

storeの変更はstore.subscribeで監視することにより実現できます。これで、kintoneからのデータの変更やUIの操作による変更を契機に処理を走らせることができます。

なぜstoreを利用するか

store2UI関数を見てください。

/**
 * storeの値をUIに反映する。通常はrenderのような名前を付けます。
 */
store2UI() {
    /**@type {AppState} */
    const state = this.store.getState();

    this.$$dialog.title = state.title;

    this.$$dropdown.items = state.selectItems.map(value => ({
        label: value,
        value: value
    }));

    this.$$dropdown.value = state.selected;

    /* 各コンポーネントの動きをいれる。*/
    this.__ui2store();
}

この関数はkintoneとは関係がないですよね。

同様にreduxに関連する、createInit, reducer, updateAction, createAppStoreもkintoneと関係がありません。mout関数も大丈夫です。

ということは、kintoneなしでも動作ができるということです。

kintoneなしでも動作できるなら、普通のHTMLコードに乗せればテストコードが書けます。

テストされた部分は信頼性が上がるので、結合テスト中はこの部分がエラーになることはほぼありませんから、欠陥を見つけ出す速度が上がるわけです。

まとめ

以下にポイントをまとめてみました。

kintone UI Componentは単独では状態管理機構がない
Reduxは3.6.0であればCDN経由で扱える
Reduxは状態管理を行うライブラリ
- store.getState()でリアルタイムの値を取得できる
- store.subscribe(listener)で値の変更を監視できる
kintoneとの状態の同期は少し工夫が必要

kintoneのカスタマイズとUIの関係

kintoneでカスタマイズをする意義というのは特定の領域に限られます。現状関連サービスやプラグインでほぼ賄えてしまえるし、カスタマインという素晴らしいサービスやいろいろなプラグインがあるからです。

その領域の一つに「独自のUIを実装する」というものがあります。これは業務の性質に合わせて、kintoneのUIでは供給できない入出力機能を提供する目的で実施されます。

では「kintoneで供給できないUI」とはどんなものかというと、おそらく"状態管理が必要になるほど複雑な動きをするもの"じゃないかなと思っています。今回はとても簡単な例でしたが、入力値によって選択肢をフィルターしたり、色を変えたり、それを即時反映したりといったものが考えられます。

kintoneUIComponentは優れたライブラリですが、状態管理を行わなければ、kintoneで利用する意味はあまりないかなと思っています。kintoneのデフォルトのUIで作っちゃえばいいですからね。

そういったわけでReduxと組み合わせてみました。

やってみた感想

kintoneデータとstoreの同期がやっぱり難しいなと思いました。ループしちゃうので。

この記事は以上です。ありがとうございます。

kintoneのプラグイン開発や研修などを行っています。
お仕事のお話はこちらまで。