Clineを使ってWebtimerを作ってみた
社内環境でもClineが利用可能なので、実際にWebタイマーアプリケーションのプロトタイプを作成し、
その開発体験を通じてClineの活用イメージを検証しました。
本記事では、開発の流れや得られた知見、活用時の注意点についてご紹介します。
はじめに
本記事の目的は、以下の2点です。
- 社内開発においてClineを用いた実装が可能であることの確認
- 実際に利用した際の有効性や注意点の整理・共有
プロトタイプとして「Webタイマー」をテーマに、React + Vite によるアプリケーション開発を行いました。
事前準備
事前に、APIキーの発行が必要です。
やってみる
それでは早速やっていきます。
プロジェクト作成
今回はReact + Viteの構成で進めました。初期設定は手動で行います。
yarn create vite webtimer-cline --template react-ts
cd webtimer-cline
yarn
code .
上記でプロジェクトの雛形が作成され、Clineによる開発の準備を整えることができました。
開発プロセス
Clineの開発スタイルは、「Planモード」による構想設計と、「Actモード」による自動実装の2ステップで進行します。
Planモード
最初に、「Webタイマー（カウントダウン機能）」の実装を依頼しました。
Planモードでは、必要な構成や手順が自動的に提示されます。今回はシンプルに「カウントダウンタイマーを作る」と入力しました。
提案内容を確認し、問題なければ次のステップに進みます。
Actモード
右下の「Act」ボタンを押すと、提示された内容に基づきコードが生成されます。
初期の基本機能は5分程度で構築され、その後の微調整も自然言語で指示することが可能です。
例えば、以下のような機能追加も簡単に実装できます。
- 「分と秒の増減ボタンを追加して」→分・秒の増減ボタンの追加
- 「スタート、ストップ、リセットボタンを実装して」→ボタンの実装
完成したアプリは以下のUIです。シンプルで良いですね。
利用してみての所感・知見
実際にClineを利用して感じたこと、得られた学びを以下に整理します。
利用上のポイント
- Git管理は必須
- 一部の操作では想定外のファイル削除が発生する場合があるため、バージョン管理ツール（Git）の活用は必須です。Cline自体にもGit操作を指示可能です。
- 破壊的変更に注意
- たとえば「不要なファイルを削除して」と指示すると、実際に不要なファイルのほかにindex.htmlのような必要なファイルまで削除される提案がされることがあります。
- 必ず事前にPlanモードで変更内容を確認し、不必要な削除を防止しましょう。
- ステップバイステップで進める
- 一度に複数の指示を出すと、対応が部分的になる傾向があります。1機能ずつ小さく依頼することで、精度と安定性が高まります。また、料金面でも効率的です。
- リファクタリングとテストの意識
- Clineが生成したコードは基本的に動作しますが、保守性や拡張性を考慮するとリファクタリングやテストの導入が欠かせません。Clineに対してもテストコードの生成などを積極的に指示することをおすすめします。
- clineruleファイルの活用
- Clineの挙動やルールを定義できるclineruleファイルは、開発品質の安定に有効です。
- 今回も、Yarnのプロジェクトであるにもかかわらずnpmを利用しているシーンがありました。
- このときはPlanの段階でしたので修正指示をしましたが、毎回yarnを指定するのも手間がかかります。
- このような場合は、clineruleを利用するべきだと感じました。
- 社内用テンプレートの整備を検討してみる価値があると思います。
総括・感想
今回はClineを用いて開発しましたが、フロントエンドの初期構築やUI実装において大きな生産性向上を実感できました。
一方で、Clineはあくまで補助的なツールであり、開発者自身の設計力・技術力が前提となる場面も多々あります。
特に、TDD、ドメイン設計、要素技術（ReactやTypeScriptなど）についての理解を深めることが、Clineを最大限活用するための鍵になると再認識しました。
おわりに
今後、Clineを使った社内開発はさらに増えていくことが予想されます。本記事が、導入や活用を検討されている方々の一助になれば幸いです。
当社ではこのように生成AI活用が活発に行われております。
自ら手を動かしながらシステム開発を行っており、一緒に開発をしていくメンバーを募集しています。
興味を持たれた方は是非ご連絡ください！お待ちしております。
注意点
なお、掲載したソースコードはサンプルになります。本ソースコードを使用することで発生するいかなる損害や不利益について、当社は一切の責任を負いませんので自己の責任においてご利用ください。
Discussion