目次
はじめに
VSCodeの拡張機能 Cline を導入してみました。
ClineはAIがコーディングを手伝ってくれる拡張機能くらいのざっくりした理解しかなかったのですが、実際に触ってみるとGitやコマンド操作を代わりに提案・実行してくれる強力なアシスタントでした。
「GitHub PagesにHELLO WORLDを出す」までを実際にやってみた記録を紹介します。
この記事でわかること
・Clineの導入から実際に使用するまでの流れ
・Gitやコマンド操作が苦手でもGitHub Pagesへ公開できる手順がイメージできる
想定読者
・GitやGitHubにまだ慣れていない初心者の方
・AIを使った開発体験を知りたい人
1.Clineとは
Clineは Visual Studio Code（VSCode）で使えるAIアシスタント拡張機能です。
ChatGPTのように会話形式で指示を出すと、Clineが「計画（Plan）」を立てて提示してくれて、ユーザーが承認すると実際にコマンドやファイル操作を行ってくれます。
特徴をざっくり挙げると：
・AIと会話しながらコーディングできる
・Gitの操作やファイル作成も提案してくれる
・暴走防止に承認待ちで進められる
2.Clineの設定
まずはClineをインストールしてAPIキーを設定します。
今回はGoogle Geminiを使う設定にしました。
※「gemini-2.5-flash」は無料で使用可能
3.Planモードで指示を出す
Planモードとは？
Clineには大きく分けて 「Planモード」と「Actモード」 の2つの動き方があります。
今回の記事では安全に進めるため最初にPlanモードで計画を立ててから、Actモードを利用する流れで進めていきます。
○Planモード
Clineが「これからこういう手順で進めます」と計画を提示してくれるモードです。
すぐにコマンドを実行するのではなく、まずは「何をするか」をユーザーに見せてくれるため、初心者でも安心して確認できます。
○Actモード
Clineが直接コマンドやファイル操作を実行していくモードです。
記事用に新規作成したフォルダをVSCodeでワークスペースとして開き、Clineに最初の指示を出します。
3. Clineが作業プランを提示
Clineはこちらの指示を元に「これからこう進めます」と計画を出してくれます。
このあとステップごとに「承認」して進める仕組みです。
全自動でないのが安心感ありますね。
4.タスク完了時
計画したタスク完了時のメッセージです。
コーディングやコマンドを打つことなく、一連の作業を行うことができました。
リポジトリにプッシュされ、コミットメッセージも自動で生成してくれています。
5. GitHub Pagesで公開
想定通りに「HELLO WORLD」ページが表示されました。
さいごに
実際に触ってみて、「AIに任せつつ、承認しながら進める安心感」 がとても良かったです。
今回は最小限の構成でしたが、もっと複雑なサイト構成にも挑戦してみたいです。
