はじめに
こんにちは、最近育休から復帰したyagです。数ヶ月ほどPCをほとんど触らない生活をしていて、育児から仕事という生活のギャップに体がついていけず、目の疲れが全然取れません。
さて、育休で休んでいる間に世間はすっかり生成AIをコーディングに活用する時代に突入しており、私は浦島太郎状態です。CursorやClineといったAIがサポートする機能を全面に打ち出したEditorや、Devinといった自動で実装してPull Requestを作成してくれるAI Agentが出現しています。これらを使いこなせるエンジニアかどうかで、生産性が格段に違うといった世界になったのだと実感します。一方で自分のような古い人間は、いかにターミナルで効率よくCLI操作できるかや、ランチャーを使いこなすかといった効率化ばかりを気にしてしまう性分です。趣味は休日のdotfiles盆栽の手入れです。
そこで試しにAI AgentによるVibe Codingで前々から欲しかった便利ツールを作ってみたところ、コードを一行も書くことなく、子どもの寝かしつけ後のわずかな時間で、社内開発環境に特化したRaycast Extensionを開発することができました。私自身これほどまで手放しで実装できるとは予想しておらず、改めて生成AIによるコーディングの威力に驚いています。そこでこの記事では、実際に開発したツールの概要と、その開発方法について解説します。
作ったもの
社内のdbtレポジトリのテーブルを高速に検索し、ブラウザでドキュメントを開いたり、テーブル名をBigQueryのフォーマットに変換する操作ができるExtensionを作成しました。
テーブル一覧から検索クエリで検索できる機能の他に、選択したテーブルで以下の操作ができるようにしています。
- テーブル名をクリップボードにコピー
- テーブル名を、BigQueryで使えるフォーマットでクリップボードにコピー (
`project.dataset.table`) - 社内でホストしているdbt docsを開く
- テーブルに対応するドキュメントのmarkdownファイルをRaycast上で開く
- SQLファイルをエディタで開く
- プロジェクト名で検索対象を限定する
Raycast Extensionの配布にあたっては、社内プロジェクト用に作っていることから外部に公開することができません。しかし、レポジトリをコピーして一度npm install && npm run devすればRaycastのディレクトリ(~/.config/raycast/extensions)に必要なファイルがコピーされるため、エンジニアであれば特段インストールに困るということはありません。本来であればzipファイルで固めた上でRaycast側から読み込むみたいな操作ができると嬉しいですけどね。
作成方法
さて、Raycast Extension作成にあたっては、CursorのAgentを使用し、私は一切コードを書かずに完成させることができました。ExtensionのコードはReactで書かれているので私は多少読むことができるものの、私がやった操作としては、
- Raycastから
Create Extension commandを叩いて初期ファイル作成を行う - UIで使用するIconを、API Referenceのページから探す (このページ)
- 作成されたREADMEの手直し
- 実装された成果物を都度触って使い勝手を確かめ、次に指示する課題を見つける
- ある程度のところで随時保険のためにgit commitしておく (これも指示すればよかったかなと後々思います)
だけで、あとはひたすら自然言語でCursorのAgentに指示を出していました。Cursorの使用モデルはAutoで設定していたので何を使っていたか不明ですが、おそらくclaude-3.7-sonnetあたりだと思います。実装時にAIが躓くことは何度かありましたが自力で復旧し、指示を出した結果としてコードが実行不可になるようなことはありませんでした。
個人的な所感としては、ここまでうまくいった理由として以下が考えられます。
- RaycastのUIに沿ってListやDetailといったコンポーネントを使用すればよいため、デザインに関心を払わなくて良い
- 外部APIを叩くなどネットワークを考える必要なく、Cacheなどの仕組みはLocal Storageを使用することができたため、コンパクトな実装に抑えられた
- Raycast StoreがGitHub上で管理されており、Extensionの多くのコードが公開されているため、LLMのモデル学習に利用されていた(可能性がある)
まとめ
今回はRaycast Extensionを生成AIの力を借りてサクッと実装することができた事例を紹介しました。こうやって自分で手を動かすことで生成AIを活用し生産性向上ができるということをエンジニアとして身をもって体感することができ、エンジニアの開発体験のフェーズが一つ進んだような印象を持ちました。もしかすると、こうした細々した操作自体もAIに教え込ませて全部やってもらったほうがトータルで速い未来がくるかもしれないですが、それまではこうして自分の手の延長たる道具を磨くこともしていきたいと思っています。
Discussion