ChatGPTでkintoneのJavaScriptを作ってもらって初めて思う通りのコードを書いてもらえた話！

仕事でkintone構築をしているのですが、多くのことはノーコードの範囲内で構築できたり、kintoneで運用できるように業務フローを変更してもらったりしているのですが、たまにこれはJavaScript使ってやったほうがいいな～ということに当たります。

これをJavaScriptを使える人に依頼していたのですが、本番運用に乗るか分からなかったので、誰かの手を借りてまではな～と思ったので、ChatGPTに頼ってみました。

実はChatGPTに頼ったのはこれが初めてではなく、何度か挑戦していたのですが、プロンプトが悪かったのか、思ったように動くコードは書けずにいました。

でもそろそろChatGPTにお願いしてコードを作ってもらえるコツをつかんでおかないと！と思ったので、お昼休憩中の夫を捕まえてコツ・・・というかどういう指示をだせばいいのか、一言一句教えてもらいました。

コンサルママが思うノマドパパの心の声

（全部きかないで自分で考えろよ～）

すると・・・思った通りに動くコードを書いてもらえました。すごいよChatGPT、すごいよノマドパパ！

ということで、私のように生成AIでコードかいてもらいたいのにうまく書いてもらえない、、、という方もいらっしゃるんじゃないかな～と思って、私のChatGPTとのやり取りを見てコツをつかんで皆さんも思い通りのコードを書いてもらってください！

私の備忘録としても・・・！

JavaScriptを使ってやりたかったこと

やりたいことは、サブテーブルの進捗が「完了」になったら、サブテーブルの外のところに、現在の作業工程名と現在の工程担当部署に次の工程名、担当部署を入れるです。

実際のkintone画面はこちら

条件をオレンジ。反映させてもらいたいところは赤で囲ってます。

ChatGPTとのやり取り

コンサルママ

●前提
kintoneのあるアプリに、以下の項目があります。
・文字列一行で「現在の作業工程名」「現在の作業」
・サブテーブルで、「工程テーブル」
サブテーブルには以下の項目があります。
・ラジオボタンで「進捗」、選択肢は「未」と「完了」
・文字列一列で「工程名」サブテーブルには
・作業工程が順番に並んでいます

●依頼内容
進捗が「未」のうち、一番上にある工程名を「現在の作業工程名」にいれるjsを作ってください。

ChatGPT

以下は、kintoneのアプリにおいて「進捗」が「未」のうち、一番上にある「工程名」を「現在の作業工程名」に設定するJavaScriptのサンプルです。

(function() {
    'use strict';

    // レコードの詳細画面を表示する際のイベント
    kintone.events.on('app.record.detail.show', function(event) {
        // 現在の作業工程名フィールドのコード
        const currentProcessFieldCode = '現在の作業工程名'; // 正確なフィールドコードに置き換えてください

        // サブテーブルのフィールドコード
        const subTableFieldCode = '工程テーブル'; // 正確なフィールドコードに置き換えてください
        const subTableRecords = event.record[subTableFieldCode].value;

        // 最初の「未」進捗の工程名を探す
        let currentProcessName = '';

        for (let i = 0; i < subTableRecords.length; i++) {
            const progress = subTableRecords[i].value['進捗'].value; // 正確なフィールドコードに置き換えてください
            const processName = subTableRecords[i].value['工程名'].value; // 正確なフィールドコードに置き換えてください

            if (progress === '未') {
                currentProcessName = processName;
                break; // 一番上の「未」を見つけたらループを抜ける
            }
        }

        // 現在の作業工程名を設定
        if (currentProcessName) {
            event.record[currentProcessFieldCode].value = currentProcessName;
        }

        return event;
    });
})();

ChatGPT

●説明

app.record.detail.showイベントを使用して、レコードの詳細画面が表示されたときに実行される関数を定義します。
サブテーブルのレコードを取得し、その中で進捗が「未」の工程名を探します。
一番上にある「未」を見つけた場合、その工程名を「現在の作業工程名」に設定します。

●注意

現在の作業工程名や工程テーブルのフィールドコードは、実際のアプリに合わせて正確に置き換えてください。
これは基本的なサンプルなので、環境や条件に応じて適切にカスタマイズしてください。

コンサルママ

レコードの詳細画面を表示する際のイベントではなく、レコード保存時に変更してください。

ChatGPT

レコード保存時に、進捗が「未」の一番上にある工程名を「現在の作業工程名」に設定するJavaScriptのサンプルは以下の通りです。

(function() {
    'use strict';

    // レコードの保存時のイベント
    kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) {
        // 現在の作業工程名フィールドのコード
        const currentProcessFieldCode = '現在の作業工程名'; // 正確なフィールドコードに置き換えてください

        // サブテーブルのフィールドコード
        const subTableFieldCode = '工程テーブル'; // 正確なフィールドコードに置き換えてください
        const subTableRecords = event.record[subTableFieldCode].value;

        // 最初の「未」進捗の工程名を探す
        let currentProcessName = '';

        for (let i = 0; i < subTableRecords.length; i++) {
            const progress = subTableRecords[i].value['進捗'].value; // 正確なフィールドコードに置き換えてください
            const processName = subTableRecords[i].value['工程名'].value; // 正確なフィールドコードに置き換えてください

            if (progress === '未') {
                currentProcessName = processName;
                break; // 一番上の「未」を見つけたらループを抜ける
            }
        }

        // 現在の作業工程名を設定
        if (currentProcessName) {
            event.record[currentProcessFieldCode].value = currentProcessName;
        }

        return event;
    });
})();

ChatGPT

●説明

app.record.detail.showイベントを使用して、レコードの詳細画面が表示されたときに実行される関数を定義します。
サブテーブルのレコードを取得し、その中で進捗が「未」の工程名を探します。
一番上にある「未」を見つけた場合、その工程名を「現在の作業工程名」に設定します。

●注意

フィールドコードは実際の環境に合わせて正確に置き換えてください。
必要に応じてエラーハンドリングや追加のバリデーションを実装してください。

コンサルママ

モバイルで動作したときにも同様の動きをするようにしてほしいです。

ChatGPT

モバイルでも動作するように、レコード保存時のイベントを調整するためには、app.record.create.submit.mobile と app.record.edit.submit.mobile のイベントも追加する必要があります。以下のコードは、モバイルでも対応したバージョンです。

(function() {
    'use strict';

    // レコードの保存時のイベント
    kintone.events.on(['app.record.create.submit', 'app.record.edit.submit', 'app.record.create.submit.mobile', 'app.record.edit.submit.mobile'], function(event) {
        // 現在の作業工程名フィールドのコード
        const currentProcessFieldCode = '現在の作業工程名'; // 正確なフィールドコードに置き換えてください

        // サブテーブルのフィールドコード
        const subTableFieldCode = '工程テーブル'; // 正確なフィールドコードに置き換えてください
        const subTableRecords = event.record[subTableFieldCode].value;

        // 最初の「未」進捗の工程名を探す
        let currentProcessName = '';

        for (let i = 0; i < subTableRecords.length; i++) {
            const progress = subTableRecords[i].value['進捗'].value; // 正確なフィールドコードに置き換えてください
            const processName = subTableRecords[i].value['工程名'].value; // 正確なフィールドコードに置き換えてください

            if (progress === '未') {
                currentProcessName = processName;
                break; // 一番上の「未」を見つけたらループを抜ける
            }
        }

        // 現在の作業工程名を設定
        if (currentProcessName) {
            event.record[currentProcessFieldCode].value = currentProcessName;
        }

        return event;
    });
})();

ChatGPT

●説明

モバイルでのレコード作成と編集時のイベント app.record.create.submit.mobile および app.record.edit.submit.mobile を追加しました。
それ以外は、先ほどと同様に進捗が「未」の工程名を設定します。

●注意

使用するフィールドコードは、実際のアプリケーションに合わせて正確に置き換えてください。
モバイルでの動作を確認する際は、環境における動作テストも行ってください。

コンサルママ

●追加条件
工程テーブルに文字列一行で「作業担当部署」を追加し、
サブテーブル外フィールドに文字列一行で「現在の工程担当部署」を追加しました。

●追加依頼内容
進捗が「未」のうち、一番上にある作業担当部署を「現在の工程担当部署」にいれてください。

ChatGPT

以下は、「進捗」が「未」の一番上にある「作業担当部署」を「現在の工程担当部署」に設定するために、先ほどのコードに追加の条件を盛り込んだJavaScriptのサンプルです。

(function() {
    'use strict';

    // レコードの保存時のイベント
    kintone.events.on(['app.record.create.submit', 'app.record.edit.submit', 'app.record.create.submit.mobile', 'app.record.edit.submit.mobile'], function(event) {
        // 現在の工事担当部署フィールドのコード
        const currentDepartmentFieldCode = '現在の工程担当部署'; // 正確なフィールドコードに置き換えてください

        // サブテーブルのフィールドコード
        const subTableFieldCode = '工程テーブル'; // 正確なフィールドコードに置き換えてください
        const subTableRecords = event.record[subTableFieldCode].value;

        // 最初の「未」進捗の作業担当部署を探す
        let currentDepartmentName = '';

        for (let i = 0; i < subTableRecords.length; i++) {
            const progress = subTableRecords[i].value['進捗'].value; // 正確なフィールドコードに置き換えてください
            const departmentName = subTableRecords[i].value['作業担当部署'].value; // 正確なフィールドコードに置き換えてください

            if (progress === '未') {
                currentDepartmentName = departmentName;
                break; // 一番上の「未」を見つけたらループを抜ける
            }
        }

        // 現在の工程担当部署を設定
        if (currentDepartmentName) {
            event.record[currentDepartmentFieldCode].value = currentDepartmentName;
        }

        return event;
    });
})();

ChatGPT

●説明

「現在の工程担当部署」フィールドを設定するための変数 currentDepartmentFieldCode を追加しました。
サブテーブル内の「作業担当部署」のフィールドコードを使って、進捗が「未」の時にその部署名を取得します。
一番上にある「未」の作業担当部署を「現在の工程担当部署」に設定します。

●注意

各フィールドコードは実際のアプリケーションに合わせて正確に置き換えてください。
動作確認を行い、必要に応じてエラーハンドリングや追加のバリデーションを実装してください。

コンサルママ

工程名を現在の作業工程名に入れるコードがなくなっているよ。

ChatGPT

失礼いたしました。「現在の作業工程名」と「現在の工程担当部署」の両方を設定するコードに修正しました。以下がそのコードです。

(function() {
    'use strict';

    // レコードの保存時のイベント
    kintone.events.on(['app.record.create.submit', 'app.record.edit.submit', 'app.record.create.submit.mobile', 'app.record.edit.submit.mobile'], function(event) {
        // 現在の作業工程名フィールドのコード
        const currentProcessFieldCode = '現在の作業工程名'; // 正確なフィールドコードに置き換えてください
        // 現在の工事担当部署フィールドのコード
        const currentDepartmentFieldCode = '現在の工程担当部署'; // 正確なフィールドコードに置き換えてください

        // サブテーブルのフィールドコード
        const subTableFieldCode = '工程テーブル'; // 正確なフィールドコードに置き換えてください
        const subTableRecords = event.record[subTableFieldCode].value;

        // 最初の「未」進捗の作業工程名と作業担当部署を探す
        let currentProcessName = '';
        let currentDepartmentName = '';

        for (let i = 0; i < subTableRecords.length; i++) {
            const progress = subTableRecords[i].value['進捗'].value; // 正確なフィールドコードに置き換えてください
            const processName = subTableRecords[i].value['工程名'].value; // 正確なフィールドコードに置き換えてください
            const departmentName = subTableRecords[i].value['作業担当部署'].value; // 正確なフィールドコードに置き換えてください

            if (progress === '未') {
                currentProcessName = processName;
                currentDepartmentName = departmentName;
                break; // 一番上の「未」を見つけたらループを抜ける
            }
        }

        // 現在の作業工程名を設定
        if (currentProcessName) {
            event.record[currentProcessFieldCode].value = currentProcessName;
        }

        // 現在の工程担当部署を設定
        if (currentDepartmentName) {
            event.record[currentDepartmentFieldCode].value = currentDepartmentName;
        }

        return event;
    });
})();

ChatGPT

●説明

「現在の作業工程名」と「現在の工程担当部署」の両方を設定する変数を用意しました。
サブテーブル内の進捗が「未」の工程名と作業担当部署をそれぞれ取得します。
最初に見つかったそれぞれの項目をイベントの record にセットします。

●注意

各フィールドコードは実際のアプリケーションに合わせて正確に置き換えてください。
動作確認を行い、必要に応じてエラーハンドリングや追加のバリデーションを検討してください。

コンサルママ

ごめん！作業担当部署じゃなくて、工程担当部署だった！

ChatGPT

了解しました。「作業担当部署」を「工程担当部署」に修正したコードを以下に示します。

(function() {
    'use strict';

    // レコードの保存時のイベント
    kintone.events.on(['app.record.create.submit', 'app.record.edit.submit', 'app.record.create.submit.mobile', 'app.record.edit.submit.mobile'], function(event) {
        // 現在の作業工程名フィールドのコード
        const currentProcessFieldCode = '現在の作業工程名'; // 正確なフィールドコードに置き換えてください
        // 現在の工程担当部署フィールドのコード
        const currentDepartmentFieldCode = '現在の工程担当部署'; // 正確なフィールドコードに置き換えてください

        // サブテーブルのフィールドコード
        const subTableFieldCode = '工程テーブル'; // 正確なフィールドコードに置き換えてください
        const subTableRecords = event.record[subTableFieldCode].value;

        // 最初の「未」進捗の工程名と工程担当部署を探す
        let currentProcessName = '';
        let currentDepartmentName = '';

        for (let i = 0; i < subTableRecords.length; i++) {
            const progress = subTableRecords[i].value['進捗'].value; // 正確なフィールドコードに置き換えてください
            const processName = subTableRecords[i].value['工程名'].value; // 正確なフィールドコードに置き換えてください
            const departmentName = subTableRecords[i].value['工程担当部署'].value; // 正確なフィールドコードに置き換えてください

            if (progress === '未') {
                currentProcessName = processName;
                currentDepartmentName = departmentName;
                break; // 一番上の「未」を見つけたらループを抜ける
            }
        }

        // 現在の作業工程名を設定
        if (currentProcessName) {
            event.record[currentProcessFieldCode].value = currentProcessName;
        }

        // 現在の工程担当部署を設定
        if (currentDepartmentName) {
            event.record[currentDepartmentFieldCode].value = currentDepartmentName;
        }

        return event;
    });
})();

ChatGPT

●修正内容