Claude Code: 実践入門 - RanceLee Tutorials

最もエキサイティングな部分、つまりAIを使ってコードを書いてもらう方法に飛び込みましょう。

「コードなんて全然わからないけど、自分に関係あるの？」と思うかもしれません。

逆に、コードを知らないからこそ、このツールはあなたにぴったりです。

かつて5000円払ってWebページを作ってもらった友達を覚えていますか？Claude Codeを使えば、そんなことはもう二度とありません。あなたがやりたいことを普通の言葉でAIに伝えるだけで、完全なプログラムを書いてくれます。

今日紹介するのは、ターミナルで動作するAIプログラミングアシスタント「Claude Code」です。あなたがやりたいことを平易な言葉で伝えるだけで、プログラム全体を書いてくれます。

なぜIDEではなくターミナルツールを使うのか？

IDEとは？

IDE = 統合開発環境（Integrated Development Environment）

簡単に言うと、IDEとはプログラマーがコードを書くためのソフトウェアです。例えば：

VS Code
Cursor
PyCharm
WebStorm

これらのツールは複雑なインターフェースと強力な機能を持っていますが、コードを全く知らない人にとっては、むしろ負担になります。

ターミナルをおすすめする理由

理由1：シンプルなインターフェース

IDE：ボタン、メニュー、サイドバー、ステータスバーだらけで、一目見ただけで圧倒される
ターミナル：ただの黒い画面 – コマンドを入力し、結果を得る。クリーンでわかりやすい

理由2：コードを手動で編集する必要がない

コードがまったく理解できない場合、IDEに表示されるコードは暗号のように見えます。読めないし、どう変更すればいいかもわかりません。

すべてAIが書いてくれるのに、なぜコードを見る必要があるのでしょうか？

ターミナルのClaude Codeは以下のことを自動で行います：

ファイルの自動作成
コードの自動記述
コードの自動修正
テストの自動実行

あなたはやりたいことを伝えるだけで、あとはすべて処理してくれます。

理由3：軽量なソフトウェア

Cursor/VS Code：数百MBあり、さらに様々なプラグインをインストールする必要がある
ターミナル：システムに組み込まれており、追加インストール不要

まとめ：コーディング経験ゼロでAIにものづくりを手伝ってもらいたい人には、ターミナル＋Claude Codeが最もシンプルで直接的な組み合わせです。

ターミナルの基本：プロジェクトフォルダを開く方法

Claude Codeを使う前に、1つの基本操作を覚える必要があります：ターミナルでプロジェクトフォルダを開くことです。

Macユーザー向け

方法1：右クリックで開く（推奨）

Finderでプロジェクトフォルダを見つける
フォルダを右クリック（またはトラックパッドを2本指でタップ）
「フォルダに新しいターミナル」 を選択

方法2：Optionキーを押しながら右クリックでパスを取得

Finderでプロジェクトフォルダを見つける
Optionキーを押しながらフォルダを右クリック
「フォルダ名のパス名をコピー」 を選択
ターミナルを開く（Launchpadで「ターミナル」を検索）
cd と入力（cdの後にスペースを入れる）
Command + V でパスを貼り付け
Enterキーを押す

例：

cd /Users/yourname/Desktop/my-project

方法3：ドラッグ＆ドロップ

ターミナルを開く
cd と入力（スペースを忘れずに）
Finderからフォルダをターミナルウィンドウに直接ドラッグ
パスが自動入力されるので、Enterキーを押す

Windowsユーザー向け

エクスプローラーでプロジェクトフォルダを見つける
アドレスバーに cmd または powershell と入力してEnterキーを押す
そのフォルダでコマンドラインが直接開く

または：

フォルダを右クリック
「ターミナルで開く」 を選択（Windows 11）

Claude Codeとは？

一言で言うと

Claude Code = ターミナルで動作するAIプログラミングアシスタント

Anthropic（Claudeの開発元）が提供する公式コマンドラインツールです。ターミナルで対話しながら、以下のことができます：

新しいプロジェクトの作成
コードの記述
コードの修正
バグの修正
コードの説明
コマンドの実行

Web版Claudeとの違いは？

機能	Claude Web	Claude Code
使い方	ブラウザでチャット	ターミナルでコマンド入力
ファイル操作	不可、会話のみ	可能、ファイルの作成・修正が直接できる
コード実行	不可	可能、あなたのコンピュータ上でコードを実行できる
最適な用途	質問、記事作成	プロジェクト構築、プログラム作成

重要な違い：Web版は「話す」だけだが、Claude Codeは「実行する」ことができる。

Claude Codeのインストール方法

前提条件

Node.js：Claude CodeにはNode.jsが必要です
- ダウンロード：https://nodejs.org
- LTS（長期サポート）バージョンを選択
- インストール後、ターミナルで node -v と入力して確認

2. ネットワーク環境：ClaudeのAPIにアクセスできる必要があります（VPNが必要な場合あり）

インストール手順

ターミナルを開いて、以下を実行：

npm install -g @anthropic-ai/claude-code

インストールが完了するのを待ちます。次のような出力が表示されれば成功です：

added 1 package in 2s

インストールの確認：

claude --version

バージョン番号が表示されれば、インストール成功です。

いくつかの使用方法

Claude CodeはAI機能にアクセスするための複数の方法をサポートしています。自分に合ったものを選んでください。

方法1：Claudeメンバーシップを購入する

これが最もシンプルで直接的な方法です。

Claudeメンバーシップのプラン：

プラン	価格	Claude Codeの割り当て
Claude Pro	月額$20	制限あり、軽い使用に適する
Claude Max	月額$100	より多くの割り当て、ヘビーユーザー向け
Claude Max	月額$200	最大の割り当て、プロフェッショナル開発向け

設定：

Claudeメンバーシップを購入したら、ターミナルを開く
claude を実行して起動
指示に従ってClaudeアカウントにログイン
ログイン後、すぐに使用開始

方法2：他のモデルのAPIを使用する

Claudeメンバーシップを購入したくない場合は、他のモデルのAPIを使ってClaude Codeを駆動することもできます。

対応モデル：

DeepSeek
OpenAI GPTシリーズ
OpenAI形式に対応したその他のAPI

2.1 環境変数で設定（DeepSeekの例）

DeepSeekのAPIはAnthropic形式と互換性があり、直接置き換えて使用できます。

Mac/Linuxの設定：

ターミナルで以下のコマンドを実行（一時的 – ターミナルを閉じると消えます）：

export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic
export ANTHROPIC_AUTH_TOKEN=${DEEPSEEK_API_KEY}
export API_TIMEOUT_MS=600000
export ANTHROPIC_MODEL=deepseek-chat
export ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1

その後、claude を実行するだけで起動します。

Windowsの設定（PowerShell）：

$env:ANTHROPIC_BASE_URL="https://api.deepseek.com"
$env:ANTHROPIC_AUTH_TOKEN="Your DeepSeek API Key"

その後、claude を実行するだけで起動します。

注意： この方法は一時的で、ターミナルを閉じると設定が失われます。恒久的に設定するには、以下の settings.json の方法を使用してください。

参考： https://api-docs.deepseek.com/guides/anthropic_api

2.2 settings.jsonで設定（推奨）

この方法の方が便利で、一度設定すればClaude Codeを起動するたびに自動的にこれらの設定が使用されます。

設定手順：

Claude Codeの設定フォルダを見つける：
- Mac/Linux：~/.claude/
- Windows：%USERPROFILE%\.claude\
settings.json ファイルを作成または編集（例）：

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.deepseek.com",
    "ANTHROPIC_AUTH_TOKEN": "Your DeepSeek API Key"
  }
}

ファイルを保存し、Claude Codeを再起動

ヒント： .claude フォルダが存在しない場合は、claude コマンドを一度実行すると自動的に作成されます。

ターミナルでClaude Codeを起動する方法

基本的な起動

ターミナルを開く
cd コマンドでプロジェクトフォルダに移動
claude と入力してEnterキーを押す

cd /path/to/your/project
claude

Claude Codeが起動し、インタラクティブなインターフェースが表示されます。そこでリクエストを入力し始めることができます。

よく使うコマンドと概念

Claude Codeのよく使うコマンド

コマンド	動作
`/help`	ヘルプ情報を表示
`/clear`	現在の会話をクリア
`/exit` または `Ctrl+C`	Claude Codeを終了
`/compact`	会話履歴を圧縮してトークンを節約
`/init`	プロジェクトを初期化し、CLAUDE.mdファイルを作成

プランモード

プランモード = まずClaudeに計画させてから実行させる

デフォルトでは、Claudeはすぐにコードを書き始めます。しかし、実行前に考えを整理してほしい場合もあります。そのときにプランモードを有効にします。

切り替え方法：

Shift + Tab を押して、3つのモードを切り替えます：

モード	説明
通常	通常モード、Claudeが直接実行
計画	プランモード、Claudeは計画のみで実行せず、確認を待つ
自動	自動モード、Claudeがすべての操作を確認なしで自動実行

プランモードを使うべき時：

プロジェクトが複雑で、Claudeにまずアプローチを明確にしてほしい場合
Claudeがどのように変更するか確信がなく、計画を見たい場合
Claudeの動作をより正確に制御したい場合

編集の承認

編集の承認 = Claudeの変更を自動的に承認するかどうか

Claudeがファイルを作成または変更しようとするとき、通常は確認を求めます。

切り替え方法：

Shift + Tab でモードを変更すると、次のように表示されます：

編集の承認：オフ – 変更のたびに手動で確認が必要
編集の承認：オン – すべての変更が自動的に承認され、確認なし

推奨：

初心者はオフのままにして、Claudeが各ステップで何をしているかを確認できるようにする
慣れてきたらオンにして、よりスムーズなワークフローを実現

`resume` とは？

resume = 以前の会話を再開する

ターミナルを閉じたりClaude Codeを終了した後、次回 --resume フラグを使って以前の会話を続けることができます：

claude --resume

Claudeは以前の会話を覚えているので、最初からやり直す必要はありません。

resumeを使うべき時：

昨日プロジェクトに取り組んでいて、今日も続けたい場合
コンピュータが予期せずシャットダウンし、進行状況を復元したい場合
Claudeに中断したところから続けてもらいたい場合

CLAUDE.md とは？

CLAUDE.md = プロジェクト説明ファイル

これはプロジェクトのルートディレクトリに配置するMarkdownファイルです。Claudeにプロジェクトの背景を伝えます。

作成方法：

まず claude を実行してClaude Codeを起動し、次に /init と入力します。

claude

Claude Code内で、次のように入力します：

/init

Claudeが自動的にプロジェクトを分析し、CLAUDE.mdファイルを生成します。

何に使うのか？

Claude Codeが起動すると、このファイルを読み込んで以下を理解します：

プロジェクトの目的
使用している技術スタック
特別な要件
コードスタイルの好み

CLAUDE.mdの例：

# Project Description

This is a personal translation tool webpage.

## Tech Stack
- Pure HTML/CSS/JavaScript
- No frameworks

## Requirements
- Code comments in English
- Clean and modern interface
- Support dark mode

このファイルがあれば、Claude Codeを起動するたびにプロジェクトの背景を説明する必要がありません。

スキル

スキル = Claude Codeのショートカットコマンド

スキルは、Claudeに特定のタスクを素早く実行させるためのプリセットコマンドです。

よく使う組み込みスキル：

コマンド	動作
`/commit`	gitコミットメッセージを自動生成し、コードをコミット
`/review`	コードをレビューし、問題を発見
`/fix`	コードのエラーを修正

使い方：

Claude Code内でスラッシュコマンドを入力するだけです。例：

/commit

Claudeが自動的にコードの変更を分析し、適切なコミットメッセージを生成します。

カスタムスキルについては、後の章で詳しく説明します。

MCP（Model Context Protocol）

MCP = Claudeを外部ツールやデータソースに接続する

MCPは、Claude Codeをさまざまな外部サービスに接続できるようにするプロトコルです。例えば：

データベース
ファイルシステム
Webサービス
その他のAIツール

考え方としては： MCPはClaudeに「プラグイン」を追加するようなもので、より多くのことができるようになります。

例：

Obsidianに接続して、Claudeがノートを直接読み書きできるようにする
ブラウザに接続して、ClaudeがWebページを自動操作できるようにする
データベースに接続して、Claudeがデータをクエリ・分析できるようにする

MCPの設定と使用方法については、後の章で詳しく説明します。

実践：Claudeに翻訳Webページを作らせてみよう

さて、ここまでたくさん学んできました。実際にやってみましょう！

ローカルで動作する翻訳Webページを作成します。Gemini APIを使って翻訳を行います。

ステップ1：プロジェクトフォルダを作成

デスクトップ（または好きな場所）に新しいフォルダを作成します。例えば demo という名前
先ほど学んだ方法で、このフォルダをターミナルで開く

ステップ2：Claude Codeを起動

claude

ステップ3：リクエストを入力

Claude Codeに次のように入力します（コピーして構いません）：

Create a translation webpage tool with the following requirements:

1. Features:
   - Left input box for the source text, right side shows the translation result
   - Support Chinese-English translation
   - A "Translate" button
   - A "Clear" button
   - A "Copy Result" button

2. Interface:
   - Clean and modern design
   - Support dark/light mode toggle
   - Responsive design, works on mobile

3. Technical requirements:
   - Use only HTML, CSS, JavaScript, no frameworks
   - All code in a single HTML file
   - Call the Gemini API for translation

4. Settings (important):
   - A "Settings" button on the page
   - Clicking it opens a settings panel where you can configure:
     - API Key
     - API URL
     - Model Name
   - Save settings to the browser's localStorage, auto-load next time
   - The settings panel should have "Save" and "Cancel" buttons

5. Translation logic:
   - Auto-detect the input language
   - If Chinese, translate to English
   - If English, translate to Chinese

Please create this HTML file directly.

ステップ4：Claudeが完了するのを待つ

Claudeは自動的に：

HTMLファイルを作成
すべてのコードを記述
ファイルの場所を教えてくれる
実行後、ファイル作成に同意するかどうかを尋ねてくるので、1または2を選択

ステップ5：実行とAPIの設定

生成されたHTMLファイルをダブルクリックしてブラウザで開く
ページ上の「設定」ボタン（通常は歯車アイコン）をクリック
表示された設定パネルに以下を入力：
- APIキー：AI Studioから取得したAPIキー
- API URL：https://generativelanguage.googleapis.com/v1beta
- モデル名：gemini-3-flash-preview
「保存」をクリック

設定はブラウザに自動保存されるので、次回から再入力する必要はありません。

ステップ6：使い始める

これで以下のことができるようになります：

左側の入力ボックスに中国語または英語を入力
「翻訳」ボタンをクリック
翻訳結果が右側に表示される
「結果をコピー」をクリックして翻訳テキストをコピー

まとめ

今日学んだこと：

なぜIDEではなくターミナルを使うのか：コードを知らない人にとって、ターミナルの方がシンプルで直接的
ターミナルでプロジェクトを開く方法：右クリック、ドラッグ＆ドロップ、または cd コマンド
Claude Codeとは：ターミナルで動作するAIプログラミングアシスタントで、ファイルを直接操作できる
インストールと設定方法：npmでインストール、公式メンバーシップまたはサードパーティAPIに対応
よく使うコマンド：resume で会話を再開、CLAUDE.md でプロジェクト説明
実践：Claudeに翻訳Webページを作らせてみる

核となる考え方：コードの書き方を知っている必要はありません。必要なのは、やりたいことを説明できることだけです。