T-CREATOR

Cline セットアップ完全版（macOS）：Homebrew・VSCode 拡張・権限設定

Cline セットアップ完全版（macOS）：Homebrew・VSCode 拡張・権限設定

macOS で Cline を使い始めるとき、「どこから手をつければいいのか」「権限エラーが出て動かない」といった悩みに直面することがあります。本記事では、Homebrew を使った環境構築から VSCode 拡張機能のインストール、macOS 特有の権限設定まで、初心者の方でも迷わず進められるよう段階的に解説します。この記事を読めば、Cline を使った AI 駆動の開発環境を確実に構築できるでしょう。

事前準備

システム要件の確認

Cline を macOS で快適に利用するには、以下のシステム要件を満たしている必要があります。

#項目要件
1OS バージョンmacOS 10.15 (Catalina) 以降
2ストレージ最低 5GB の空き容量
3メモリ8GB 以上推奨
4インターネット接続必須（API 通信のため）

まずは現在の macOS バージョンを確認しましょう。画面左上のアップルメニューから「この Mac について」を選択すると、バージョン情報が表示されます。

bash# ターミナルでも確認できます
sw_vers

このコマンドを実行すると、ProductName、ProductVersion、BuildVersion が表示されます。ProductVersion が 10.15 以上であれば問題ありません。

必要なツールの概要

Cline のセットアップには、以下のツールが必要です。

以下の図は、セットアップに必要な各コンポーネントの関係性を示しています。

mermaidflowchart TB
    mac["macOS システム"]
    brew["Homebrew<br/>パッケージマネージャー"]
    vscode["VSCode<br/>エディタ"]
    cline["Cline 拡張機能"]
    api["AI API<br/>(Anthropic Claude など)"]

    mac -->|インストール| brew
    brew -->|管理・導入| vscode
    vscode -->|拡張機能として追加| cline
    cline -->|API 通信| api

各コンポーネントの役割は次のとおりです。

#ツール名役割必須度
1HomebrewmacOS 用パッケージマネージャー必須
2VSCodeコードエディタ本体必須
3Cline 拡張機能AI コーディングアシスタント必須
4AI API キーClaude などの AI モデルへのアクセス必須

Homebrew を使うことで、VSCode のインストールやバージョン管理が簡単になります。次のセクションから、実際のインストール手順を見ていきましょう。

Homebrew のインストールと設定

Homebrew とは

Homebrew は macOS 向けのパッケージマネージャーで、コマンドライン一つでさまざまなソフトウェアをインストール・管理できるツールです。「Mac の App Store のコマンドライン版」と考えるとわかりやすいでしょう。

Homebrew を使うメリットは以下のとおりです。

#メリット説明
1簡単なインストールコマンド一つでソフトウェアを導入可能
2バージョン管理アップデートや削除も簡単
3依存関係の自動解決必要なライブラリを自動でインストール
4開発者コミュニティ豊富なパッケージと情報

Homebrew のインストール手順

Homebrew のインストールは、公式サイトのスクリプトを実行するだけで完了します。

まず、ターミナルを開きます。Finder から「アプリケーション」→「ユーティリティ」→「ターミナル」の順に選択してください。

bash# Homebrew インストールコマンド
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

このコマンドは、公式の Homebrew インストールスクリプトをダウンロードして実行します。インストール中にパスワードの入力を求められたら、Mac のログインパスワードを入力してください。

インストールが完了すると、以下のようなメッセージが表示される場合があります。

bash# Apple Silicon Mac (M1/M2/M3) の場合
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

このコマンドは、Homebrew のパスを環境変数に追加するものです。Apple Silicon Mac では ​/​opt​/​homebrew に、Intel Mac では ​/​usr​/​local にインストールされます。

bash# Intel Mac の場合
echo 'eval "$(/usr/local/bin/brew shellenv)"' >> ~/.bash_profile
eval "$(/usr/local/bin/brew shellenv)"

表示されたコマンドをそのままコピーして実行しましょう。これにより、次回以降ターミナルを開いたときに自動的に Homebrew が使えるようになります。

インストール確認とトラブルシューティング

Homebrew が正しくインストールされたか確認します。

bash# Homebrew のバージョン確認
brew --version

バージョン番号（例：Homebrew 4.2.0）が表示されれば、インストール成功です。

bash# Homebrew の健全性チェック
brew doctor

brew doctor コマンドは、Homebrew の設定に問題がないかチェックします。「Your system is ready to brew.」と表示されれば完璧です。

よくあるエラーとその対処法を以下にまとめます。

#エラー内容原因解決方法
1command not found: brewPATH が通っていないshellenv コマンドを実行、またはターミナルを再起動
2Permission denied管理者権限がないsudo をつけずに実行（Homebrew は sudo 不要）
3Xcode Command Line Tools not installed開発ツール未インストールxcode-select --install を実行

特に Xcode Command Line Tools のインストールエラーは頻出します。以下のコマンドで手動インストールできます。

bash# Xcode Command Line Tools のインストール
xcode-select --install

ダイアログが表示されたら「インストール」をクリックし、完了後に再度 Homebrew のインストールを試してください。

VSCode のセットアップ

VSCode のインストール（Homebrew 経由）

Homebrew を使えば、VSCode も簡単にインストールできます。

bash# VSCode のインストール
brew install --cask visual-studio-code

--cask オプションは、GUI アプリケーションをインストールする際に使用します。インストールには数分かかる場合があります。

インストールが完了すると、アプリケーションフォルダに VSCode が追加されます。Spotlight 検索（Command + Space）で「Visual Studio Code」と入力すれば起動できます。

bash# コマンドラインから VSCode を起動
code .

code コマンドでカレントディレクトリを VSCode で開けるようにするには、VSCode を起動後、以下の手順を実行します。

  1. VSCode を起動
  2. Command + Shift + P でコマンドパレットを開く
  3. 「Shell Command: Install 'code' command in PATH」を選択

これで、ターミナルから code コマンドが使えるようになります。

VSCode の基本設定

VSCode を初めて起動すると、Welcome 画面が表示されます。ここでは Cline を快適に使うための基本設定を行いましょう。

json{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

設定ファイル（settings.json）を編集するには、以下の手順で進めます。

  1. Command + , で設定画面を開く
  2. 右上の「{}」アイコンをクリックして JSON 形式で編集
  3. 上記の設定をコピー＆ペースト

各設定項目の意味は以下のとおりです。

#設定項目説明推奨値
1editor.fontSizeエディタのフォントサイズ14
2editor.tabSizeタブのスペース数2
3editor.formatOnSave保存時に自動フォーマットtrue
4files.autoSave自動保存の有効化afterDelay
5files.autoSaveDelay自動保存までの遅延時間（ミリ秒）1000

これらの設定により、コーディング中のストレスが大幅に軽減されます。

Cline 拡張機能のインストール

VSCode Marketplace からのインストール

Cline は VSCode の拡張機能として提供されています。インストール方法は非常にシンプルです。

以下の図は、Cline 拡張機能のインストールから API 接続までの流れを示しています。

mermaidflowchart LR
    marketplace["VSCode<br/>Marketplace"]
    install["拡張機能<br/>インストール"]
    config["初期設定"]
    apikey["API キー<br/>設定"]
    ready["利用開始"]

    marketplace -->|検索・選択| install
    install -->|完了後| config
    config -->|キー入力| apikey
    apikey -->|接続確認| ready

VSCode で以下の手順を実行します。

  1. 左側のアクティビティバーから拡張機能アイコン（四角が 4 つ並んだアイコン）をクリック
  2. 検索バーに「Cline」と入力
  3. 「Cline」（作者: saoudrizwan）を選択
  4. 「インストール」ボタンをクリック
bash# コマンドラインからインストールすることも可能
code --install-extension saoudrizwan.claude-dev

このコマンドを使えば、ターミナルから直接インストールできます。複数の環境で同じ拡張機能をセットアップする際に便利です。

拡張機能の有効化と初期設定

インストールが完了すると、VSCode の左側に Cline のアイコンが追加されます。

初回起動時には、いくつかの設定を求められます。

  1. Cline アイコンをクリック
  2. Welcome メッセージが表示される
  3. 「Get Started」をクリック
json{
  "cline.modelProvider": "anthropic",
  "cline.apiEndpoint": "https://api.anthropic.com",
  "cline.maxTokens": 4096,
  "cline.temperature": 0.7
}

これらは Cline の基本設定です。settings.json に追加することで、より詳細なカスタマイズが可能になります。

各設定項目の詳細は以下のとおりです。

#設定項目説明デフォルト値
1modelProvider使用する AI プロバイダーanthropic
2apiEndpointAPI のエンドポイント URLhttps://api.anthropic.com
3maxTokens最大トークン数4096
4temperature応答のランダム性（0-1）0.7

API キーの設定

Cline を実際に使うには、AI モデルへアクセスするための API キーが必要です。

typescript// API キーの設定場所（settings.json）
{
  "cline.apiKey": "your-api-key-here"
}

ただし、API キーを settings.json に直接記述するのはセキュリティ上推奨されません。環境変数を使う方が安全です。

bash# 環境変数で API キーを設定（~/.zshrc または ~/.bash_profile に追加）
export ANTHROPIC_API_KEY="your-api-key-here"

環境変数を設定した後は、ターミナルを再起動するか、以下のコマンドで設定を反映させます。

bash# zsh の場合
source ~/.zshrc

# bash の場合
source ~/.bash_profile

API キーの取得手順は以下のとおりです。

  1. Anthropic の公式サイト（https://www.anthropic.com）にアクセス
  2. アカウントを作成またはログイン
  3. Console にアクセス
  4. API Keys セクションから新しいキーを生成
  5. 生成されたキーをコピー

コピーしたキーは、VSCode の Cline サイドバーから設定できます。

  1. Cline アイコンをクリック
  2. 設定アイコン（歯車マーク）をクリック
  3. 「API Key」フィールドにペースト
  4. 「Save」をクリック

これで Cline が AI モデルと通信できるようになります。

権限設定の構成

macOS のセキュリティ設定

macOS は強固なセキュリティモデルを採用しているため、Cline が正常に動作するには適切な権限設定が必要です。

以下の図は、Cline が必要とする macOS の権限と、それぞれの役割を示しています。

mermaidflowchart TB
    cline["Cline 拡張機能"]
    terminal["ターミナル<br/>アクセス権限"]
    folder["フォルダ<br/>アクセス権限"]
    full["フルディスク<br/>アクセス権限"]
    access["アクセシビリティ<br/>権限"]

    cline -->|コマンド実行| terminal
    cline -->|ファイル操作| folder
    cline -->|システム全体| full
    cline -->|UI 操作| access

システム環境設定から権限を管理する手順を見ていきましょう。

  1. アップルメニューから「システム設定」（または「システム環境設定」）を開く
  2. 「プライバシーとセキュリティ」を選択

macOS Ventura 以降では「プライバシーとセキュリティ」、それ以前のバージョンでは「セキュリティとプライバシー」という名称になっています。

ターミナルアクセス権限の付与

Cline はコマンドを実行するため、ターミナルへのアクセス権限が必要です。

bash# ターミナルから権限の状態を確認
tccutil list | grep kTCCServiceSystemPolicyAllFiles

このコマンドで現在の権限状態を確認できます。ただし、権限の付与自体は GUI から行う必要があります。

権限を付与する手順は以下のとおりです。

  1. 「プライバシーとセキュリティ」→「フルディスクアクセス」を選択
  2. 鍵アイコンをクリックして設定をロック解除（パスワード入力が必要）
  3. 「+」ボタンをクリック
  4. アプリケーションフォルダから「ターミナル」を選択
  5. チェックボックスがオンになったことを確認
bash# 権限付与後、ターミナルを再起動
# Command + Q でターミナルを完全終了してから再度起動

ターミナルの再起動は重要です。権限の変更は、アプリケーションの再起動後に反映されます。

VSCode のフォルダアクセス権限

VSCode と Cline がプロジェクトフォルダにアクセスするには、適切な権限設定が必要です。

以下の権限を VSCode に付与しましょう。

#権限の種類必要性設定場所
1フルディスクアクセス高プライバシーとセキュリティ
2ファイルとフォルダ高プライバシーとセキュリティ
3アクセシビリティ中プライバシーとセキュリティ

VSCode にフルディスクアクセスを付与する手順は次のとおりです。

  1. 「プライバシーとセキュリティ」→「フルディスクアクセス」を選択
  2. 鍵アイコンをクリックして設定をロック解除
  3. 「+」ボタンをクリック
  4. アプリケーションフォルダから「Visual Studio Code」を選択
  5. チェックボックスがオンになったことを確認
bash# VSCode を完全に再起動
# Command + Q で終了後、再度起動
code .

VSCode の再起動も、ターミナルと同様に必須です。権限変更後は必ず再起動してください。

アクセシビリティ権限も同様の手順で付与します。

  1. 「プライバシーとセキュリティ」→「アクセシビリティ」を選択
  2. 鍵アイコンをクリックして設定をロック解除
  3. 「+」ボタンをクリック
  4. 「Visual Studio Code」を選択
  5. チェックボックスがオンになったことを確認

権限エラーのトラブルシューティング

権限関連のエラーは、Cline の利用において最も頻繁に遭遇する問題です。

よくあるエラーメッセージと対処法を以下にまとめます。

#エラーメッセージ原因解決方法
1Operation not permittedファイルアクセス権限不足VSCode にフルディスクアクセスを付与
2Permission deniedフォルダの読み書き権限なし対象フォルダの権限を確認・変更
3Command failedターミナル権限不足ターミナルにフルディスクアクセスを付与
bash# フォルダの権限を確認
ls -la /path/to/your/project

# 権限を変更（必要な場合のみ）
chmod -R 755 /path/to/your/project

chmod コマンドは、ファイルやフォルダの読み書き実行権限を変更します。755 は、所有者に全権限、グループとその他のユーザーに読み取りと実行権限を付与する設定です。

権限エラーが解決しない場合の最終手段として、以下の方法を試してください。

bash# VSCode の設定をリセット
rm -rf ~/Library/Application\ Support/Code/User/settings.json

# Cline の設定をリセット
rm -rf ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev

これらのコマンドは、VSCode と Cline の設定を完全に削除します。実行前に必ずバックアップを取ってください。

システムの整合性保護（System Integrity Protection: SIP）が原因で権限が付与できない場合もあります。

bash# SIP の状態を確認
csrutil status

System Integrity Protection status: enabled. と表示された場合、SIP が有効です。セキュリティ上、SIP を無効化することは推奨されませんが、どうしても必要な場合は以下の手順で実行できます。

  1. Mac を再起動し、起動時に Command + R を長押し
  2. リカバリーモードで起動
  3. ユーティリティメニューから「ターミナル」を起動
  4. csrutil disable を実行
  5. 再起動

ただし、セキュリティリスクが高まるため、作業完了後は必ず csrutil enable で再度有効化してください。

動作確認

初回起動とテスト

すべての設定が完了したら、実際に Cline を起動してみましょう。

bash# VSCode を起動
code ~/Desktop/cline-test

このコマンドで、デスクトップに cline-test という新しいフォルダを作成し、VSCode で開きます。

VSCode が起動したら、以下の手順で Cline をテストします。

  1. 左側のアクティビティバーから Cline アイコンをクリック
  2. チャット入力欄に簡単な質問を入力（例：「Hello, can you help me?」）
  3. Enter キーを押して送信

正常に動作していれば、数秒以内に AI からの応答が表示されます。

typescript// テスト用のシンプルなコード生成を依頼
// Cline のチャットに以下のように入力
'Create a simple TypeScript function that adds two numbers';

Cline が以下のようなコードを生成すれば、正常に動作しています。

typescript// Cline が生成するコード例
function add(a: number, b: number): number {
  return a + b;
}

// 使用例
const result = add(5, 3);
console.log(result); // 8

サンプルプロジェクトでの動作確認

より実践的なテストとして、簡単な Web アプリケーションを作成してみましょう。

bash# Node.js プロジェクトの初期化
mkdir cline-sample-project
cd cline-sample-project
yarn init -y

Yarn を使ってプロジェクトを初期化します。package.json が自動生成されます。

bash# TypeScript と必要なパッケージをインストール
yarn add -D typescript @types/node
yarn add express
yarn add -D @types/express

これらのコマンドで、TypeScript と Express（Web フレームワーク）をインストールします。

VSCode でこのフォルダを開き、Cline に以下のようなプロンプトを入力してみましょう。

typescript// Cline へのプロンプト例
"Create a simple Express server in TypeScript that responds with 'Hello, Cline!' on port 3000";

Cline が以下のようなコードを生成してくれます。

typescript// src/index.ts
import express, { Request, Response } from 'express';

const app = express();
const PORT = 3000;

// ルートエンドポイント
app.get('/', (req: Request, res: Response) => {
  res.send('Hello, Cline!');
});

// サーバー起動
app.listen(PORT, () => {
  console.log(
    `Server is running on http://localhost:${PORT}`
  );
});

生成されたコードを実行してみましょう。

bash# TypeScript をコンパイル
yarn tsc src/index.ts --outDir dist

# サーバー起動
node dist/index.js

ブラウザで http:​/​​/​localhost:3000 にアクセスし、「Hello, Cline!」と表示されれば成功です。

以下の図は、サンプルプロジェクトでの動作確認フローを示しています。

mermaidsequenceDiagram
    participant User as ユーザー
    participant Cline as Cline
    participant VSCode as VSCode
    participant Node as Node.js

    User->>Cline: コード生成を依頼
    Cline->>VSCode: コードを生成
    VSCode->>User: コードを表示
    User->>Node: サーバー起動
    Node->>User: 動作確認完了

これで Cline が正しく機能していることが確認できました。

まとめ

本記事では、macOS で Cline をセットアップする手順を段階的に解説しました。

セットアップの主要なステップをおさらいしましょう。

#ステップ重要度所要時間
1システム要件の確認高5 分
2Homebrew のインストール高10 分
3VSCode のインストールと設定高15 分
4Cline 拡張機能のインストール高5 分
5API キーの設定高10 分
6権限設定の構成高15 分
7動作確認中10 分

合計で約 1 時間程度でセットアップが完了します。

特に重要なポイントは、macOS の権限設定です。フルディスクアクセス、ターミナルアクセス、フォルダアクセスの 3 つを正しく設定しないと、Cline は正常に動作しません。エラーが発生した場合は、まず権限設定を確認してください。

Cline を使えば、コードの自動生成、バグ修正、リファクタリングなど、さまざまな開発タスクを AI がサポートしてくれます。本記事の手順に従ってセットアップすれば、あなたも AI 駆動の開発環境をすぐに始められるでしょう。

セットアップ後は、実際のプロジェクトで Cline を活用し、その便利さを体験してみてください。AI との協働によって、開発効率が飛躍的に向上することを実感できるはずです。

関連リンク

Clineの記事Cline

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る