【Cline解説】さぁ！今日から納期直前のアナタも定時帰り！

はじめに

AIでプログラミングをするサービスが多数登場しています。中でも、設計から実装まで一通りやりきってくれる「Cline」というAIツールが最近話題になっています。

日本の検索ボリュームを見てみると、Clineの検索数が急激に上昇しているのがわかります。（2025年1月14日時点）

非常に強い勢いが感じられますね。

作りたいものやエラー解消など、目的を指示したら人間の代わりに自動で処理してくれるのは大変魅力的ですよね。
寝ているだけで開発が完了してしまう世界線も近いのでしょうか...？

本記事では、Clineについての紹介と、実際の動作確認をハンズオン的に解説します。後半では実際にWebアプリ開発を完全自動で行なってもらう方法も解説しているので、手を動かしながら読んでいただけると幸いです。

対象読者

• AIを使って仕事をラクにしたい方
• 生成AIをきっかけにプログラミングに興味を持った方
• 自動でプログラミングをしてくれる次世代AIツールを試してみたい方

本編の構成

１｜Clineの概要
２｜インストール手順
３｜主な機能解説
４｜全自動アプリ開発を体験
５｜おまけ

Xアカウントではビジネスマンが生成AIを使いこなすヒントを発信しています。AIを使いこなせるようになりたい方はフォローをお願いします！
また、生成AIを使った仕事をラクにするプロダクト開発もしているので、AI時代を楽しみたい方はお待ちしています。

Clineハンズオン解説

１｜Clineの概要

１-１｜Clineとは

Clineはオープンソースのコーディングエージェントです。GitHub上で全てのコードが公開されています。
ユーザーの指示に従ってAIが自律的に目標達成のためにコーディングを行います。実装の提案だけでなく、ファイルの読み書きやコマンドラインの実行なども行うことができます。
そのため、設定によっては最初から最後まで一切手を加えずにClineが実装しきってしまうことも可能です。

また開発視点だと、コード数は2万行程度で一つのアプリケーション的にはそこまで大規模なものではありません。
開発言語は全てTypeScriptを使って開発されているので、コードリーディングもしやすいのが特徴です。
そのため、Clineをベースに派生サービスも複数登場している状況です。

１-２｜Clineの注目度

AIが自動で実装計画やコーディング、エラー修正まで行なってくれる体験はかなり新鮮です。
大規模な開発の改修ならまだしも、週末大工的な個人開発などであれば、そもそもの開発への取り組み方が変わりそうです。まずAIに作らせて、人間が修正指示を送る関係も想像できますね。

冒頭でも紹介した検索ボリュームを改めて見てみると、短期間で急激に検索ボリュームが伸びているのが分かります。
XでもClineに関するポストが見受けられ、「Clineを使って〇〇を開発できた！」のような投稿がされています。
私の周辺でも、「Cline使いやすくていいね」「Cline話題だし触ってみよう」と話している人が増えています。

一方で、世界的にみてみると真逆の状況です。世界全体でのClineの検索ボリュームを見てみましょう。
青色が世界全体で見た、Clineの検索状況です（Cursorとの相対比較）

日本だけ検索ボリュームが異常で、独特の盛り上がりを見せていることが伺えます。

エリア別で見ると非常に面白いです。
なんと、Clineは日本で世界一検索されています...！

ここまで日本だけ盛り上がっている理由は様々ありそうですが、世界と比較して日本が特に盛り上がっている点は把握しておくべきでしょう。

今後どのように変化していくのか注目したいです。

１-３｜Clineの特徴

Clineは全てのプログラムが公開されているのが大きな特徴です。比較的新しいアーキテクチャが搭載されていたり、コミュニティが活発で順次機能アップデートがされています。
ここでは代表的な特徴や機能をピックアップして、それぞれ解説 & 紹介します。

会話回数が激減

ChatGPTなどのAIツールと比較して、ソフトウェア開発をする時のチャットのやり取り回数が激減します。逐一コードをコピペしてChatGPTに質問や指示を送らなくてもある程度自動で開発を進めてくれるのは体験として非常に良いです。

作業の巻き戻しができる

個人的にかなり重宝しています。Clineが自分の想定外の方向に実装を進めてしまった場合や、途中で実装方針を一部変えたくなった時に少し前のステップに状態を戻して実行し直すことが可能です。
「ファイルの更新状態のみを戻す」場合と「タスクの状況を戻す場合」の両方を選択可能です。

自動化の程度を自身で制御可能

「ファイルの読み取り」「書き込み」「書き込んだファイルの更新」「コマンドラインの操作（特定のプログラムの実行やmkdirなどのコマンド実行）」など、どの段階まで自動的に実行して良いかをユーザーが指定することができます。コマンドラインの操作などはリスキーなので、ご自身の許容範囲の中で実行を検討してください。
私はファイルの読み書きや安全なコマンドラインの操作に関しては自動で許可するようにしています。

１-４｜他のAIプログラミングツールとの比較

Xやネット記事ではClineとCursorというAIコーディングツールがよく比較されています。
どちらが良いというわけでもなく、併用して利用可能なツールなので完全な対立構造となっているかは疑問ですが、AIがコーディングを自動でしてくれる等の特徴は似ているので理解を深めるために比較するのは良い手段だと思います。

他にもGitHub Copilotなど様々なAIを活用したコーディング支援ツールは存在します。詳細な解説は下記の記事など参考になります。

Clineは「コーディングエージェント」として機能しており、コード補完機能やチャットアシスタントの機能は提供されていません（2025年1月時点）。そのため、Clineにはない機能を別のツールで補って使用するケースが多いです。
CursorやCopilotなどと併用するケースを耳にします。
Clineの概要や特徴が掴めたところで、実際にセットアップに入っていきましょう。

２｜インストール手順

２-１｜VSコード・Cursorの導入

ClineはVSCodeやCursorの拡張機能としてインストールすることで利用可能です。もしまだVSCodeやCursorのインストールがまだの方はこのセットアップから始めましょう。
VSCodeやCursorの解説やインストール手順を知りたい方は下記の記事のIDEの章などご覧ください。

２-２｜メニューからインストール

ご自身のエディタにClineをインストールします。
画面左側の四つのブロックが表示されたアイコンを押すと、拡張機能の検索が可能です。
検索バーに「Cline」と入力して、にこやかなロボットのアイコンの拡張機能を選択してください。（Cline（prev. Claude Dev）という名前です）

アイコンをクリックすると、Clineの拡張機能の詳細が表示されています。
「インストール」を押すと、拡張機能のインストールが始まります。

インストールが完了したら、画面左端にClineのアイコンが表示されているはずです。

これでClineのインストールが完了しました。
次に、Clineを動かすために必要なAPIキーの設定に移ります。

２-３｜Clineで使用するモデルを設定

Clineを実際に利用するにはOpenAIなどのAPIキーが必要です。様々なモデルが使用できますが、OpenAI、Claude（Anthropic）、Gemini、DeepSeekなどがよく使用される印象です。
OpenRouterなども使用できます。

特にコスト効率と入力可能なトークン数の関係から、DeepSeekを使用している方をよくXで目にします。
DeepSeekは性能の割にコストが異常に安いのが特徴です。

モデルを選択して対応するAPIキーを入力すると利用できるようになります。画像ではAnthropicのclaude-3-5-sonnet-20241022を選択しています。

OpenAIやDeepSeekなど他のモデルのAPIキー取得は、各公式サイトから取得しましょう。

３｜主な機能解説

■ タスクの指示

一番基本的な機能です。Clineのテキスト入力欄に指示を送ると、その指示に従って処理を実行してくれます。
ChatGPTのような使い方と似たような感覚です。

■ Auto-approve

タスク入力欄のすぐ上にある「Auto-approve: Read, ...」と記載されている部分をクリックすると、複数のチェックボック付きの画面が表示されると思います。
これは、Clineがどこまで自動でタスクを実行して良いのかを設定するための権限付与画面です。
「ファイルの読み書き」「コマンドラインの実行」など
デフォルトだと「ファイルを読み書きして良いですか？」「このコマンドをターミナルで実行しても良いですか？」と逐一質問してくるので人によっては煩わしく感じるかもしれません。

この設定を変更すると、変更度合いに応じてClineが自走してくれるようになります。例えば「Auto-approve」にチェックを入れた上で「Read files and directories」「Edit files」にチェックを入れると、Clineは自動でファイルやディレクトリ構成を確認したり、ファイルの変更をユーザーの許可を得ずに実行したりできるようになります。
逆に「Execute safe commands」にチェック入れていないので環境を破壊しないような安全なコマンド（pythonファイルを実行する等）は実行されません。ちなみに安全かどうかはAI側で判断しています。

▼ Max Requests

Clienが一つのタスクを実行するために使用できるAPI呼び出しの上限です。デフォルトだと20に設定されています。例えばClineが何かのエラー処理にハマってしまい、同じコマンドを実行し続けることがあります。API呼び出し回数の上限がないと無限にこのエラーを循環して、APIコストが膨らんでいくという危険性があります。

Max Requestsを設定しておくと、指定した回数以上のAPIの呼び出しを超えてAPIを呼び出されなくなるのでこのような事態を未然位防ぐことができます。
設定した数が少なすぎると通常のタスク実行中に途中で上限がきてタスクが打ち切られることもあるので、設定数はご自身が許容できる範囲内で設定しておくと良いでしょう。

もし途中でタスクが打ち切られたとしても、途中から再開する指示を送ることができます。前回の続きを読み込んでタスクを再開してくれるので、Max Requestsが少なくても全部最初からやり直しということにはなりません。

▼ Enable Notifications

Clineのタスク実行が完了すると、ユーザーにタスク完了を通知してくれる機能です。
デフォルトで実装はされてませんが、PC通知やSlack通知を飛ばしてくれるようになっているといつ作業が終わったのか分かるので嬉しいかもしれませね。

■ 作業の巻き戻し（History）

Ver3.0以降で追加された機能です。Clineが思った方向と違う処理をしてしまった場合や、開発の方向性を変更したくなった場合などに活躍します。この機能が登場するまではClineが自動でファイルを変更した内容が保存され、重要なファイルを破壊されてしまったという事故が発生していました（私も24年に経験しました...）。
自動実行の範囲の設定と合わせて使うと重大な事故はほとんど避けられると思います。

■ 外部サービスやデータとの連携（MCP Servers）

MCP（Model Context Protocol）とは、LLMが外部のデータやツールと連携するための共通プロトコルのことです。例えばLINEやSlackのAPIと連携して通知を送信したり、Notion APIと連携してデータベースの情報を自動で取得するような操作を行えるようになります。Claudeを開発しているAnthropic社が提供しています。

ClineにMCPサーバーに独自のツールを作ってもらうように指示することも可能です。
下記のデモではSpotifyとのAPI連携を行い、Clineに自動で音楽を流してもらう機能の追加を行なっています。

Edit MCP Settingsというボタンを押して開かれるファイル（cline_mcp_settings.json）を直接編集することでも機能追加可能です。

■ 設定機能（Settings）

使用するLLMの設定や独自ルールを追加することができます。

▼ モデルの設定

セットアップでも紹介した部分です。API Providerで使用するLLMを設定することができます。

▼ Custom Instructions

独自の指示（カスタム指示）をClineに適用することができます。ここに設定した内容は常にClineに送信する指示の最後に追加されます。例えば、「日本語で記述して」という指示を書いておくと、毎回日本語で解答をしてくれるようになります。モデルによってはデフォルトだと英語で返事をする場合があるので設定しておくと便利です。
※ Clineのシステムプロンプトなどは全て英語で指示されているので、デフォルトだとそれに引っ張られているイメージです。

■ .clinerules

Cline全てに指示を適用したい時は「Custom Instruction」の設定を使いますが、プロジェクト単位での指示を設定したい時は、.clinerulesを使うと良いです。
Cursorを普段使用されている方は.cursorulesのCline版だと理解いただけると思います。

.clinerulesは、Clineがタスクを行うときの設計書のようなもので、プロジェクト独自のルールを追加することができます。
例えば、「GitHubにコミットするときの手順は/docs内部のfoo.mdを参照すること」のようにプロジェクト特有の指示を書いておくと、ClineがGitHubにコミットしようとしたときにファイルを参照してそこに書かれている指示に従ってくれるようになります。

他にも、Webアプリ開発時に生成AIのAPIを定義する時は、常にgpt-4o-miniを設定するように指示しておくことも可能です。（特に支持しない場合gpt-4oが設定されることが多い印象で、個人的にはよく使っています）

基本的な機能の解説は以上です。
次の章では、これらの機能を使って実際にタスクを実行してもらいましょう。

４｜実際にタスクをこなしてもらおう

2025年にXでバズったAI曼荼羅チャートの簡易版を作ってもらいましょう。ちなみにXでバズっていた投稿はこちらです。

今回は比較のため、以下の3つのパターンでアプリ開発してもらいましょう。Clineの使用感を確かめるため、セキュリティなどガン無視でローカル実行用の目的でコードを記載している点にご留意ください。
もしサービスを外部公開をすることがあれば、安全性などに十分注意した上で自己責任にてお願いします。

フレームワーク等も使わずに、HTML、CSS、JavaScriptのみで開発します。
アプリ上で使用するAIモデルはなんでも良いですが、ここではDeepSeekを使うように指示しています。他のモデルを使用したい場合は、Clineに「gpt-4o-miniを使って実行できるようにしたい」のように指示をすると動いてくれます。

また、Clineが使用するAIモデルはDeepSeekを指定しています。OpenAIのモデルなど必要に応じて変更を行なってください。
※ 下記のそれぞれのケースではAUto-approveに「Read files and directories」「Edit files」「Execute safe commands」の3つを許可しています。どこまで許可して使用するかは、ご自身の判断にお任せいたします。

４-１｜セットアップ

2つのデモを行います。それぞれ別のディレクトリで作業をするので下記のように「cline_demo_1」「cline_demo_2」というフォルダを作成します。
任意の場所で、Clineに下記の指示を送ってみましょう。

「cline_demo_1」「cline_demo_2」という2つのディレクトリを現在のディレクトリ配下に作ってほしい。

下記のようなフォルダ構成になっているとOKです。

/your/path/to/directory（ここは個々人で異なります）
├── cline_demo_1/
├── cline_demo_2/

この前提で、下記の2つのケースについてデモを進めていきます。
※ 必ずしもこの構成でなくてもOKです。

４-２｜Case１：目的だけ入力してみる

まずは作りたいアプリの概要だけ伝えて実装させてみます。

cline_demo_1というディレクトリで、下記のプロンプトをClineに入力して実行をしましょう。

▼ プロンプト

HTML, CSS, JavaScriptでAI曼荼羅チャートのwebアプリを作りたい。
3*3の正方形を1ブロックの真ん中にワードを入力すると、それに関連するワードが周囲に表示される仕様です（AIが生成する）。生成AIのAPIはDeepSeekのAPIを活用して。

下記、Clineの応答と作成されたコードを順番に追っていきます。

タスクの実行

1. 実行計画とHTMLファイルの作成

タスクを指示すると、下記のように実行計画を立ててくれました。

まず、プロジェクトのディレクトリ構造を作成する必要があります。HTML、CSS、JavaScriptファイルを作成します。
DeepSeek APIを使用するため、APIキーが必要です。ユーザーにAPIキーを提供してもらう必要があります。
3x3のグリッドレイアウトを作成し、中央のセルにワードを入力できるようにします。
入力されたワードを基に、DeepSeek APIを使用して関連ワードを生成し、周囲のセルに表示する機能を実装します。
まずはプロジェクトの基本構造を作成し、その後API連携部分を実装します。

そして、index.htmlというファイルを作成して下記のプログラムを実装してくれています。

▼ index.htmlのコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI曼荼羅チャート</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="grid">
      <div class="cell" id="cell1"></div>
      <div class="cell" id="cell2"></div>
      <div class="cell" id="cell3"></div>
      <div class="cell" id="cell4"></div>
      <div class="cell input-cell" id="cell5">
        <input type="text" id="mainInput" placeholder="中心ワードを入力">
      </div>
      <div class="cell" id="cell6"></div>
      <div class="cell" id="cell7"></div>
      <div class="cell" id="cell8"></div>
      <div class="cell" id="cell9"></div>
    </div>
    <button id="generateBtn">関連ワードを生成</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. cssファイルの作成

その後、下記のように説明があった後にstyles.cssというファイルを作成して実装してくれました。

次に、スタイルシート（styles.css）を作成します。3x3のグリッドレイアウトと基本的なスタイルを定義します。

▼ styles.cssのコード：

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.cell {
  background-color: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #333;
}

.input-cell {
  background-color: #f0f0f0;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
}

#generateBtn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#generateBtn:hover {
  background-color: #45a049;
}

JavaScriptファイル作成のための準備

次に、JavaScriptで生成AIの処理を含んだコードを実装してもらうのですが、その際にAPIキーとエンドポイントの設定方法説明を求められました。DeepSeek APIを使うための方法を尋ねられています。

次に、JavaScriptファイル（script.js）を作成します。まずは基本的な構造を作成し、後でDeepSeek APIとの連携部分を追加します。APIキーが必要になるため、ユーザーに確認を取ります。

Cline has a question:
DeepSeek APIを使用するため、APIキーが必要です。APIキーを提供していただけますか？また、APIのエンドポイントURLも教えていただけると助かります。

ここでテキスト入力欄に設定方法を共有します。
下記のYOUR_DEEPSEEK_API_KEYはご自身のAPIキーで置き換えて入力してください。エンドポイントに関する説明は、DeepSeek公式ドキュメントの内容をそのままコピペしています。

引用元（DeepSeek公式ドキュメント）：
https://api-docs.deepseek.com/

▼ Clineのテキスト入力欄にコピペ（APIキーは適宜置き換える）：

- APIキー：`YOUR_DEEPSEEK_API_KEY`
エンドポイントは下記の情報を参考にして：
Your First API Call
The DeepSeek API uses an API format compatible with OpenAI. By modifying the configuration, you can use the OpenAI SDK or softwares compatible with the OpenAI API to access the DeepSeek API.

PARAM	VALUE
base_url *       	https://api.deepseek.com
api_key	apply for an API key
* To be compatible with OpenAI, you can also use https://api.deepseek.com/v1 as the base_url. But note that the v1 here has NO relationship with the model's version.

* The deepseek-chat model has been upgraded to DeepSeek-V3. The API remains unchanged. You can invoke DeepSeek-V3 by specifying model='deepseek-chat'.

Invoke The Chat API
Once you have obtained an API key, you can access the DeepSeek API using the following example scripts. This is a non-stream example, you can set the stream parameter to true to get stream response.

curl
python
nodejs
// Please install OpenAI SDK first: `npm install openai`

import OpenAI from "openai";

const openai = new OpenAI({
        baseURL: 'https://api.deepseek.com',
        apiKey: '<DeepSeek API Key>'
});

async function main() {
  const completion = await openai.chat.completions.create({
    messages: [{ role: "system", content: "You are a helpful assistant." }],
    model: "deepseek-chat",
  });

  console.log(completion.choices[0].message.content);
}

main();

script.jsの実装

上記の返事を送信すると、それに従ってJavaScriptのコードを書いてくれました。Clineからの返答は下記です（APIキーはマスクして表示しています）

APIキーとエンドポイント情報を取得しました。以下の情報を基にJavaScriptファイルを作成します：

APIキー: `YOUR_DEEPSEEK_API_KEY`
エンドポイント: https://api.deepseek.com
モデル: deepseek-chat
script.jsファイルを作成し、以下の機能を実装します：

入力フォームとボタンのイベントリスナー設定
DeepSeek APIとの通信処理
レスポンスの処理と表示

これによりClineが作成したファイルは下記です。

▼ script.js

const apiKey = `YOUR_DEEPSEEK_API_KEY`
const apiUrl = 'https://api.deepseek.com/v1/chat/completions';

const cells = {
  cell1: document.getElementById('cell1'),
  cell2: document.getElementById('cell2'),
  cell3: document.getElementById('cell3'),
  cell4: document.getElementById('cell4'),
  cell6: document.getElementById('cell6'),
  cell7: document.getElementById('cell7'),
  cell8: document.getElementById('cell8'),
  cell9: document.getElementById('cell9')
};

const mainInput = document.getElementById('mainInput');
const generateBtn = document.getElementById('generateBtn');

// 関連ワード生成関数
async function generateRelatedWords() {
  const mainWord = mainInput.value.trim();
  if (!mainWord) {
    alert('中心ワードを入力してください');
    return;
  }

  // ローディング表示
  Object.values(cells).forEach(cell => {
    cell.textContent = '...';
  });

  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: 'deepseek-chat',
        messages: [{
          role: 'user',
          content: `「${mainWord}」に関連する8つの単語を、1単語ずつ箇条書きで挙げてください。`
        }],
        temperature: 0.7
      })
    });

    const data = await response.json();
    const relatedWords = data.choices[0].message.content
      .split('\n')
      .map(line => line.replace(/^\s*[-*]\s*/, ''))
      .filter(word => word.trim());

    // 結果をセルに表示
    Object.values(cells).forEach((cell, index) => {
      cell.textContent = relatedWords[index] || '';
    });
  } catch (error) {
    console.error('Error:', error);
    alert('関連ワードの生成に失敗しました');
  }
}

// イベントリスナー設定
generateBtn.addEventListener('click', generateRelatedWords);
mainInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    generateRelatedWords();
  }
});

タスク完了の通知

その後、タスクが完了した旨がClineから表示されました。実際にアプリが開けるか確認してみましょう。

Task Completed
AI曼荼羅チャートのWebアプリが完成しました。以下の機能を実装しています：

1. 3x3のグリッドレイアウト
2. 中心セルへのワード入力
3. DeepSeek APIを使用した関連ワードの自動生成
4. 生成結果の周囲セルへの表示
動作確認のために、以下のコマンドを実行してアプリを開いてください：

Cline wants to execute this command:
open index.html

結果の確認

ご自身でアプリの確認をするには、open index.htmlをターミナルで実行するとOKです。
Clineにここもやらせたい場合は下記の指示を書くと良いです。

今作成されたアプリを実行してブラウザで開いてほしいです。

すると、アプリが起動して下記のようにアプリを動かすことができました。
一発で動くものを作ってくれるのは嬉しい体験ですね。

UIや動作は人によって若干異なると思います。もしエラーが発生している場合は、エラーの内容をClineに指示するとエラー解決に向けて処理を進めてくれます。

無事動作したでしょうか？
簡単にアプリの概要を伝えるだけでも要望に沿ったアプリを作ってくれました。
次はケースでは、3×3の曼荼羅チャートを題材にもう少し設計を細かくしながら、デザインも洗練させることに挑戦してみます。
単なる実装だけでなく、要件定義や実装計画の段階からClineに一緒に頑張ってもらいます。

４-３｜Case２：指示書を先に作成させる

先ほどの3×3の曼荼羅チャートよりも進化したアプリを作成しましょう。
いきなりアプリの概要を全て伝えても良いのですが、より着実に実行してもらうために、

1. 要件定義のyamlファイルを作ってもらう
2. 実装計画のyamlファイルを作ってもらう
3. それらのファイルを参照しながら実装してもらう

という手順で実装まで進めていきます。

実装開始

cline_demo_2に移動してそこでClineに下記の指示をしましょう。

▼ Clineへの指示文

HTML, CSS, JavaScriptでAI曼荼羅チャートのwebアプリを作りたい。
3*3の正方形を1ブロックの真ん中にワードを入力すると、それに関連するワードが周囲に表示される仕様です（AIが生成する）。生成AIのAPIはDeepSeekのAPIを活用して。

## 実装手順：
1. 要件定義のyamlファイルを作成する
    - 要件定義ファイルを作成したら、ユーザーに要件を確認する。
    - ユーザーがOKと返事したら次に進む
2. 実装計画のyamlファイルを作成する
    - 実装計画ファイルを作成したら、ユーザーに要件を確認する。
    - ユーザーがOKと返事したら次に進む
3. それらのファイルを参照しながら順番に実装する
4. 実装が全て完了したら、アプリをブラウザで起動する（opneコマンドで実行する）

## 注意点
- 今回はデモなので、レスポンシブデザインやテストは必要なく、シンプルな形にしてください。

シンプルな実装にしたかったので、APIキーをjsファイルに直接記載している点はCase1と同様に注意です。
Clineと対話しながら要件定義や実装計画をすり合わせて、アプリの実装をしてもらいました。
最終的に出力してくれたファイルと実行画面を記載します。

要件定義と実装計画

上記の指示を送ると、下記のように新しくアプリの要件定義ファイルを作成してくれます。

▼ requirement.yaml

project_name: AI曼荼羅チャート
version: 1.0.0
description: |
  中央のワードを入力すると、AIが関連する8つのワードを生成し、
  3x3のマンダラチャート形式で表示するWebアプリケーション

features:
  - name: メイン入力
    description: 中央に表示するメインワードを入力するテキストボックス
    requirements:
      - 400px幅の大きな入力欄
      - ガラス風の半透明デザイン
      - フォーカス時に光るエフェクト

  - name: 生成ボタン
    description: 関連ワードを生成するボタン
    requirements:
      - 大きなクリック領域
      - グラデーションデザイン
      - ホバー時のアニメーション

  - name: マンダラ表示
    description: 3x3のグリッドにワードを表示
    requirements:
      - 中央にメインワード
      - 周囲8マスに関連ワード
      - ホバー時の浮き上がり効果

  - name: デザイン
    description: 全体的なビジュアルデザイン
    requirements:
      - 虹色のアニメーション背景
      - モダンでミニマルなUI
      - 視認性の高いフォント

dependencies:
  - DeepSeek API
  - HTML5
  - CSS3
  - JavaScript

実装計画のファイルも同様に作成してくれます。
日時（date）が2023年となっていますが、AI側が勝手に出力しています（執筆は2025年1月）
▼ implementation_plan.yaml

project_name: AI曼荼羅チャート
version: 1.0.0
phases:
  - phase: 初期設定
    tasks:
      - プロジェクトディレクトリ作成
      - 基本ファイル構成のセットアップ
      - DeepSeek APIキーの設定

  - phase: UI開発
    tasks:
      - 虹色アニメーション背景の実装
      - ガラス風テキスト入力欄の作成
      - グラデーションボタンの実装
      - 3x3マンダラグリッドのレイアウト作成
      - ホバーエフェクトの追加

  - phase: 機能開発
    tasks:
      - DeepSeek API連携の実装
      - ワード生成ロジックの作成
      - ローディング表示の実装
      - エラーハンドリングの追加

  - phase: デザイン調整
    tasks:
      - フォントサイズと色の最適化
      - レスポンシブデザインの適用
      - アニメーションタイミングの調整
      - ユーザビリティテスト

milestones:
  - date: 2023-11-15
    description: 基本UIの完成
  - date: 2023-11-20
    description: API連携の実装完了
  - date: 2023-11-25
    description: デザイン調整完了
  - date: 2023-11-30
    description: リリース準備完了

resources:
  - HTML5
  - CSS3
  - JavaScript
  - DeepSeek API

実装コード群

これらの要件・実装計画をもとにindex.html、styles.css、script.jsを実装してくれました。

▼ index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI曼荼羅チャート</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="app-title">AI曼荼羅チャート</h1>
  <div class="input-container">
    <input type="text" id="main-input" placeholder="キーワードを入力">
    <button id="generate-btn">生成開始</button>
  </div>
  <div class="grid-container">
    <div class="cell" id="cell1"></div>
    <div class="cell" id="cell2"></div>
    <div class="cell" id="cell3"></div>
    <div class="cell" id="cell4"></div>
    <div class="cell" id="cell5">
      <div id="center-text"></div>
      <div id="loading" class="hidden">生成中...</div>
    </div>
    <div class="cell" id="cell6"></div>
    <div class="cell" id="cell7"></div>
    <div class="cell" id="cell8"></div>
    <div class="cell" id="cell9"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

▼ styles.css

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(
    135deg,
    #ff9a9e,
    #fad0c4,
    #fbc2eb,
    #a6c1ee,
    #84fab0,
    #8fd3f4
  );
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.input-container {
  display: flex;
  gap: 10px;
  margin-bottom: 2rem;
}

#main-input {
  width: 400px;
  padding: 20px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 15px;
  font-size: 1.2rem;
  outline: none;
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(5px);
}

#main-input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

#main-input::placeholder {
  color: rgba(0,0,0,0.5);
}

#generate-btn {
  padding: 20px 40px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

#generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

#generate-btn:hover {
  background-color: #2980b9;
}

.hidden {
  display: none;
}

#loading {
  position: absolute;
  color: #2c3e50;
  font-size: 1.2rem;
  font-weight: bold;
}

.app-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(3, 150px);
  gap: 10px;
  background: rgba(255,255,255,0.9);
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 15px;
  font-size: 1rem;
  color: #2c3e50;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
}

.cell:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#main-input {
  width: 300px;
  padding: 15px;
  margin-top: 2rem;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

#main-input:focus {
  border-color: #3498db;
}

#main-input::placeholder {
  color: #bdc3c7;
}

▼ script.js

const apiKey = 'YOUR_DEEPSEEK_API_KEY'; // 自身のDeepSeek APIキー
const mainInput = document.getElementById('main-input');
const generateBtn = document.getElementById('generate-btn');
const centerText = document.getElementById('center-text');
const loading = document.getElementById('loading');
const cells = [
  document.getElementById('cell1'),
  document.getElementById('cell2'),
  document.getElementById('cell3'),
  document.getElementById('cell4'),
  document.getElementById('cell6'),
  document.getElementById('cell7'),
  document.getElementById('cell8'),
  document.getElementById('cell9')
];

generateBtn.addEventListener('click', async () => {
  const keyword = mainInput.value.trim();
  if (keyword.length < 2) {
    alert('2文字以上のキーワードを入力してください');
    return;
  }

  try {
    // ローディング表示
    loading.classList.remove('hidden');
    centerText.textContent = keyword;
    clearCells();

    const relatedKeywords = await getRelatedKeywords(keyword);
    updateCells(relatedKeywords);
  } catch (error) {
    console.error('Error:', error);
    alert('キーワードの取得に失敗しました');
  } finally {
    // ローディング非表示
    loading.classList.add('hidden');
  }
});

async function getRelatedKeywords(keyword) {
  const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "deepseek-chat",
      messages: [
        {
          role: "user",
          content: `「${keyword}」に関連する8つのキーワードを日本語で列挙してください。以下のルールに従ってください：
1. 単語のみを出力する
2. 1行に1単語
3. 番号や記号は付けない
4. 8単語厳守`
        }
      ]
    })
  });

  if (!response.ok) {
    throw new Error(`API Error: ${response.status}`);
  }

  const data = await response.json();
  const keywords = data.choices[0].message.content
    .split('\n')
    .map(line => line.trim())
    .filter(line => line !== '')
    .slice(0, 8);
  
  return keywords;
}

function updateCells(keywords) {
  cells.forEach((cell, index) => {
    cell.textContent = keywords[index] || '';
  });
}

function clearCells() {
  cells.forEach(cell => {
    cell.textContent = '';
  });
}

実装結果を確認

Clineが実装してくれたコードを確認してみましょう。下記のようにブラウザでアプリを表示することができました。

実装をする前に要件定義や実装計画をClineと擦り合わせておくと、想定に近い方向で実装をしてくれます。また修正の時も要件定義ファイルを参照させることで思わぬエラーを回避できたりします。
AI駆動型で実装をする時は要件定義や実装計画を事前に設計することはおすすめです。

※ 要件定義や実装計画（基本設計や詳細設計なども）はさらに作り込むことができます。興味のある方は使いながら研究をしてみることをお勧めします。

ここまでのまとめ

Case1、Case2共に上手く動作できたでしょうか？

もしエラーが発生している場合は、エラーの内容は状態をClineに指示して解決してもらいましょう。
どうしても解決できない時は、ChatGPTのo1など性能が高いモデルにエラー内容や現状を伝えると解決策を教えてくれることがあります。

AIエージェントによる自動プログラミングは、100%上手くいく訳ではないので、どこまで実装がうまくいっているのかを自分の目でも定期的に確認しながら着実に開発を進めていくのが使いこなす肝でと思います。

使いながら段々と要領をつかんでいくことが重要です。

５｜おまけ

本編のClineの解説と実際の開発例の紹介は以上です。

本章では、Clineを使うときの注意点やうまく使うポイントなどを紹介します。
現時点で上手くいくなと思ったポイントを記載しているので、今後アップデートされる可能性があります。
また、別のやり方の方が上手くいってるよ！という方法があればぜひ教えていただけますと幸いです。

①：自動化に任せすぎない

AIがファイル操作やコマンド操作など自動で良い感じにスイスイ進めてくれる様子を見るのは爽快ですが、書き込み作業を行なっている以上、当然リスクもあります。
操作によっては既存のコードが破壊されてしまう危険性もあります。

History機能が実装されたので、最悪の事態は避けられそうですが、こまめにコミットする等リスクヘッジはしておきましょう。壊れてしまってからではもう遅いです。
※ こまめにコミットするのはチーム開発などでも同じですね。AIとのチーム開発のようなものなので、その心持ちで臨むと良いです。

②：一定のタスク単位に切り分けて指示をする

（超主観的ですが）イメージは、30分程度で開発が済むようなタスク単位に切り分けて指示を作っておくとちょうどいい気がしています。
2025年1月時点でのgpt-4oモデルだと、3ドル程度のAPI利用料に収まるタスクだと問題なく処理してくれる印象です。この点は基盤モデルの性能向上などによって変動するので、実際に使いながら最適なタスク単位を探していくのが重要です。

③：ツールの使い方よりも仕組み・思想に目を向ける

この記事自体使い方の解説がメインなので自分で書いておいて...という部分はありますが、ツールそのものを使いこなすことよりも、『なぜそのツールが開発されたのか、どういう思想で仕組みが作られているのか』を理解することに注力することをお勧めします。

俗に言う「本質を理解する」というものに近いかもしれません。

他にもトレンドに上がるAIツールは今後も多数登場するはずです。
それぞれのツールの使い方をマスターするのもいいですが、根本的な部分を押さえにいくというムーブは生成AIの波を乗りこなす上で重要な考え方だと思います。

たまに飛び地のような進化をする場合もありますが、基本的には従来の仕組みの一部を改良したものが多いです。基本的な部分を理解することで、新しいツールが出た時も「ここが新しくなったのかな？」と目星をつけることができ、結果としても習得や理解が早まります。生成AIの時代も、やはり基本は大事です。
私もまだまだ勉強中の身ですので、みなさんと一緒にキャッチアップできていければ幸いです。

終わりに

いかがだったでしょうか。
今回の記事では話題のClineの概要と使い方の整理、Clienを使った具体的なアプリ開発の事例を紹介しました。

自身の環境を直接自動操作するリスキーな要素も含まれますが、ほぼ手放しで自動で開発、エラー解決もしてくれる体験は中々面白いです。こういったツールの登場でプログラミングへの障壁が下がり、多くの方がAI開発に取り組むきっかけとなっていけば良いなと思います。
そのきっかけの一つにこの記事が慣れれば、筆者としてはこの上ない幸せです。

Clineを実際に利用するときは、これらのリスクを考慮した上で自身が許容できる範囲内で利用することをお勧めします！

Xアカウントではビジネスマンが生成AIを使いこなすヒントを発信しています。AIを使いこなせるようになりたい方はフォローをお願いします！
また、生成AIを使った仕事をラクにするプロダクト開発もしているので、AI時代を楽しみたい方はお待ちしています。

【おすすめ記事】
最後にお勧め記事も掲載しておきます！

▼ Difyなど自動化に興味があるビジネスマン向け：

▼ 生成AIを幅広く学びたい人向け：

▼ ブラウザ操作の自動化に興味がある人向け：

※ 間違いやアップデートで古い情報になっている情報を見つけた場合は、お手数ですがご教示いただけますと幸いです。