VSCodeにCline組み合わせると、Laravelのアプリも全て自動で作成してくれるらしい。
とりあえずやってみたら、本当に指示出ししてから３０分程でアプリが完成した、驚き。
なので、その手順の備忘録。
１．開発環境の前提条件
下記の環境が整っている前提です。
- PHP & Composer: ローカル環境で Laravel を動かす環境。
- VS Code: メインのコードエディタとして使用します。
２．VS Code 拡張機能「Cline」の導入
- VS Code の拡張機能マーケットプレイスで「Cline」を検索してインストールします。
- Cline の設定画面を開き、利用する AI モデルの API キー（Anthropic や OpenAI、Gemini など）を設定します。
３．Cline を使ったアプリケーション構築手順
環境が整ったら、Cline のチャット画面を開き、AI に指示を出してアプリを形にしていきます。
Step 1: プロジェクトの初期化
まずは Cline に Laravel のクリーンインストールを指示します。
Cline へのプロンプト例: 「Windows のローカル環境です。現在のディレクトリに
TwitterModokiという名前で最新の Laravel プロジェクトを新規作成してください。」
Cline がターミナルを自動で操作し、composer create-project laravel/laravel TwitterModoki を実行してくれます。
Step 2: データベースとモデルの自動生成
ツイート（投稿）データを保存するためのテーブルと、それを操作するモデルを作成します。
Cline へのプロンプト例: 「ツイート投稿機能を作りたいです。投稿内容（
content）を保存するpostsテーブルのマイグレーションファイルと、Postモデル、そしてPostControllerを一括で作成してください。」
Cline は必要なファイルを検知し、不足しているコードを自動で書き込んでくれます。
Step 3: ルーティングとビュー（画面）の実装
タイムライン画面の表示と、投稿を受け付けるためのルーティングを設定し、見た目（UI）を作り込みます。今回は Blade テンプレートを使用してスタイリッシュなデザインに仕上げました。
Cline へのプロンプト例: 「
routes/web.phpに、タイムライン表示（GET）とツイート投稿（POST）のルーティングを追加してください。 また、resources/views/posts/index.blade.phpを新規作成し、Tailwind CSS を使ってシンプルでモダンな Twitter 風のタイムライン画面を作ってください。投稿フォームとタイムラインを1画面に収める構成にしてください。」
Step 4: コントローラーのロジック実装
画面から送られてきた投稿データをデータベースに保存し、タイムラインに新着順で表示する処理をコントローラーに書かせます。
Cline へのプロンプト例: 「
PostControllerを実装してください。indexメソッドでは最新の投稿を20件取得してビューに渡し、storeメソッドでは投稿内容のバリデーション（空チェック、140文字制限など）を行ってデータベースに保存後、トップページにリダイレクトする処理にしてください。」
3. ローカル環境での動作確認
一通りの実装が Cline によって完了したら、ローカルでテストを行います。
# プロジェクトフォルダに移動
[root@almalinux ~]# cd TwitterModoki
# ローカル開発サーバーの起動
[root@almalinux ~]# php artisan serveブラウザで http://127.0.0.1:8000 にアクセスし、デザインが崩れていないか、実際にテキストを入力して「投稿」ボタンを押したときにタイムラインに即座に反映されるかを確認します。
コメント