見出し画像

kintoneのJSカスタマイズをClaude Codeに書かせるプロンプト

M橋D輔

※タイトル画像はnoteタイトル画像メーカーで作りました

こんにちは、キン担ラボの本橋です。

本橋です

Claude Code使ってますか？　いわゆるエージェント型のLLMで、会話をしながらプロジェクト全体を構築してくれるAIです。今月から仕事に導入しているのですが、もうClaude Code無しには仕事が進められないくらい依存しています。

先週はこんな記事を書きました。

このときは「はーすげぇなー」くらいの感想でしたが、あれからだいぶ慣れてきました。いまでは食器洗浄機やロボット掃除機と同じような便利さを感じています。

Claude Code = 食洗器 ?

その辺の便利家電と同じようにある程度お膳立てしてあげることでClaude Codeはほとんど手放しに仕事を進めてくれるのです。食洗器であればお皿をセットしてあげます。ルンバなら部屋を片付けて掃除しやすくします。そのあたりが人間の仕事です。

これをClaude Codeで考えてみると、全体設計のうちAIが実装しやすいユニットを設計から取り出して『ここを実装してね』とプロンプトして渡すことでコードを書いてくれます。設計とタスクの切り出しが人間の仕事として残りました。

いずれAIが実装できる単位も大きくなっていくことでしょう。そうすると人間の仕事は『何を作るか』まで抽象化されていくことになります。考えたものがじゃんじゃん現実のソフトウェアとして動くようになる世界と考えるとワクワクしますね。

今回はそんなClaude CodeにkintoneのJavaScriptカスタマイズを書いてもらう実験をしました。


プロンプト

必要なファイルはCLAUDE.md と kintone.md の２つです。リンク先のgithub から取得してください。

適当に開発用ディレクトリを作成して、CLAUDE.mdとkintone.mdを配置します。kintone.mdの中身はこんな感じ。kintoneカスタマイズに関するプロンプトを記入してあります。CLAUDE.mdにはプロジェクト全体についてのプロンプトです。

# kintoneカスタマイズ実装状況

## 実装完了機能
- "app.record.edit.show"イベントで全編集可能フィールドを有効化
- 編集不可状態の検出は不可能なため、すべての編集可能フィールドに`disabled = false`を一律設定
- 16種類の編集可能フィールドタイプに対応

## 実装アーキテクチャ

### 主要クラス
- **FieldController**: フィールド制御ロジック
  - 編集可能フィールドの判定と有効化
- **RecordEditHandler**: イベントハンドラー  
  - `app.record.edit.show`イベント処理

### 対応フィールドタイプ
編集可能として扱うフィールドタイプ：
- 文字列（単一行、複数行、リッチエディタ）
- 数値、計算
- 選択肢（ラジオボタン、チェックボックス、ドロップダウン、複数選択）
- 日付、時刻、日時
- リンク、ファイル
- ユーザー選択、組織選択、グループ選択

## デプロイ状況
- ✅ ビルド完了: `dist/main.iife.js` (kintone対応IIFE形式)
- ✅ テスト通過: 9つのテストケースすべて成功  
- ✅ 型チェック通過: TypeScript型安全性確保済み

## 動作ログ例
レコード編集画面でのフィールド処理：
```
[RecordEditHandler] Found 3 editable fields out of 5 total fields
[FieldController] Set field to enabled: textField (type: SINGLE_LINE_TEXT)
[FieldController] Set field to enabled: numberField (type: NUMBER) 
[FieldController] Set field to enabled: dropdownField (type: DROP_DOWN)
[FieldController] Processed 5 fields, set 3 fields to enabled
```

## 使用方法
1. `dist/main.iife.js`をkintoneアプリにアップロード
2. レコード編集画面で自動的に全編集可能フィールドが有効化される

## 参考資料
- [フィールドの編集可／編集不可を切り替えてみよう](https://cybozu.dev/ja/tutorials/hello-kinapi/field-control-editable/) - cybozu developer network

CLAUDE.mdはいじっているうちに英語になってしまいました。まぁ英語の方がLLMは得意だろうということでそのまま使ってます。

できたもの

うえの2つのプロンプトをclaude codeに渡してから、「計画して」⇨「実装して」と話しかけて出てきたコードがこちらです。

distディレクトリもリポジトリに加えてあります。試してみたい方はビルド済みのJSカスタマイズ自体もどうぞ。

動作確認

適当なサンプルアプリで試してみました。編集画面に入るとルックアップ先のフィールドも編集可能となっています。

編集して保存すればもちろん書き換えることも可能です。ということで、Claude Code版の『プロンプト一発でJSカスタマイズ』はプロンプトファイルを配置することで出来上がりました。

発展形

今回はプロンプト1発で実装させよう！という実験でしたので、とてもシンプルなカスタマイズでした。Claude Codeは何回でも会話を繰り返しながらプログラムをブラッシュアップしていくことができます。自分の使い方でいえば、kintoneプラグインもClaude Code環境で開発しています。

最初に例えた便利さが『食洗器』『ルンバ』でした。どちらも1日でも使えなくなったら非常に困ると思います。

Claude Codeもすでにその立ち位置となりました。後戻りできない感じがあります。

過去の実験

さて、過去のnote記事を見返してみるとChatGPTのGPTsが登場した当時（2023年11月）にも似たようなことをやってました。

この記事が1年半前です。もっと大規模なプロジェクトにClaude Codeは対応できるようになり、いまではGPTsなんて使っていられないくらいです。

AIの進化はますます加速してLLM時代は自然言語がプログラミング言語の役割を果たすようになりました。自然言語とはいっても、結局は話し相手であるコンピューターが分かるように伝えなければプログラミングは成立しません。

LLMによってプログラミングができる人は格段に増えましたが、プログラマーの仕事が無くなるのはまだまだ先になりそうです。


いいなと思ったら応援しよう！