Claude Codeの感想

Lab TECH

はじめに

Claude Codeは、Anthropic社が開発したターミナル上で動作するAIコーディング支援ツールです。使用者の指示に基づいて、自動でコードを生成したり、解説を行ったりします。

これだけ

  • 話すように指示するだけ

たとえば、こんな感じで指示を出すと

おしゃれなカフェのWebサイトをつくってください。

このとき、モードが3つ存在します(Shift+tabで切り替えします)

  1. for shortcuts とは　確認モード　実行しますか？と確認してくる　慎重
  2. 自動承認モード　　確認なしですぐ実行　　さくさく
  3. プランモード　　　実行前に「計画」を提示　計画

計画を提示してくれている

上記のように、カフェWebサイト作成のタスクを分割し、実装。

  • コードの解説なども頼むことができる
  • @filename で特定ファイルを指定可能
  • !を先頭につけると普通のコマンド操作!ls など
  • 改行は \+Enter (Shift+Enterで切り替えたいとき/terminal-setup)
  • 画像はドラッグ&ドロップで入力できる。(複数投入できる)
  • Git操作やPR作成も可能
  • プロジェクト全体を自動で把握してくれるため、全体構成を把握しながら修正・実装

💡　esc1回で中断 実行中の作業を即座に中断。
　　esc2回で前の指示に戻る。

同じく、esc2回で、セッション履歴ナビゲーション（過去メッセージ一覧）

💡　前回の作業状態を引き継いで再開するための便利なコマンドが用意されている

claude --continue
  • 会話履歴・ファイルの読み込み・変更状態などがそのまま復元されます
  • 例えば「昨日の続きをそのままやりたい」という場合に最適
  • claude 単体だと毎回新規セッションになるので注意です。Claude.mdがあればよいですが。
claude --resume

どのセッションに戻るかを選択肢付きで明示的に指定したい場合に、以前の会話を、選択して再開

そのほかわからないことは、直接聞いてしまえばいい。

料金プラン

Claude Codeを利用するにあたって、無料プランは存在せず、①Anthropic APIの従量課金 または ②Claude Max（月額定額）サブスクリプション のいずれかを契約することで利用できる。

中の人は

Claude CodeのProプランは、小規模なコードベースでの短めのコーディングスプリント（1～2時間程度）
に最適です。
Claude Codeを日常的に使いたいプロの開発者には、Maxプランが最適です。

/initコマンド

  • Claudeを起動して最初にやるべきコマンド

まずは /init コマンド
プロジェクトの基本情報をまとめた Claude.md を自動生成する。
※必須ではないが、やったほうがいいです。途中からでも作成可能

先ほどのカフェサイトを途中で/init コマンド した結果 
# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## 開発コマンド

### ローカル開発サーバー
```bash
# Python内蔵サーバーでサイトを起動
python3 -m http.server 8000
# ブラウザで http://localhost:8000 にアクセス
```

## アーキテクチャ概要

このプロジェクトは「Café Lumière」という架空のカフェのシングルページWebサイトです。

### ファイル構成
- `index.html` - メインのHTMLファイル（日本語コンテンツ）
- `style.css` - CSS変数を使用したモダンなスタイリング
- `script.js` - インタラクティブ機能とアニメーション

### デザインシステム
CSS変数で統一されたカラーパレット：
- `--primary-color: #8B4513` (ブラウン)
- `--secondary-color: #D2B48C` (ベージュ)  
- `--accent-color: #F5E6D3` (クリーム)
- `--text-dark: #2C1810` / `--text-light: #6B5B4F`

### 主要機能
1. **レスポンシブナビゲーション** - ハンバーガーメニュー、スムーススクロール
2. **メニューフィルター** - `data-filter` / `data-category` 属性でカテゴリ別表示
3. **アニメーション** - Intersection Observer API使用、CSS keyframes
4. **画像プレースホルダー** - 実際の画像なしでデザインを表現

### HTMLセクション構造
- Hero（ヒーロー）
- About（アバウト）  
- Menu（メニュー）- フィルター機能付き
- Contact（店舗情報）

### JavaScript機能詳細
- メニューフィルターは `data-filter="all|coffee|tea|dessert|food"` で動作
- スクロール時ヘッダー透明度変更
- タッチデバイス対応（スケールエフェクト）
- Intersection Observer で要素の表示アニメーション

### 開発時の注意点
- Google Fonts（Poppins、Crimson Text）を使用
- プレースホルダー画像は `.placeholder-image` クラスで統一
- モバイルファーストのレスポンシブデザイン
- 日本語コンテンツのため `lang="ja"` 設定
  • Claudeがプロジェクトの背景を毎回聞かなくて済む
  • 会話の「初速」が速い、誤解が減る
  • 問答や提案が文脈に合わせられる
  • 複数人での利用に有用

プロジェクトの構成や機能、開発にあたっての注意点が記録される

もし、すでにClaude.mdがある場合に、/init コマンド した場合は分析して改善提案してくる。

先にMarkdown形式でプロジェクトの概要を詰めておき、プロジェクトルートに配置し、読みこんでもらって/init コマンドでもいい。

Markdownがありがたいらしい。

テンプレート 
# [プロジェクト名] - [アプリの簡潔な説明]

## プロジェクト概要
<!-- アプリの目的と主要機能を2-3行で説明 -->

## 技術スタック
- <!-- 使用言語/フレームワーク -->
- <!-- アーキテクチャパターン -->
- <!-- データ永続化方法 -->
- <!-- その他の技術要件 -->

## アプリ構造

### 1. 初期フロー
#### 初回起動時
1. **[画面名]** → <!-- 画面の役割 -->
2. **[画面名]** → <!-- 画面の役割 -->
3. **[画面名]** → <!-- 画面の役割 -->

### 2. メイン画面構造（[タブ/画面]数）

#### [タブ/画面]1: [名前]（[ViewName]）
- **機能**
  - <!-- 機能1 -->
  - <!-- 機能2 -->
- **データ構造**
  - <!-- プロパティ1: 説明 -->
  - <!-- プロパティ2: 説明 -->

#### [タブ/画面]2: [名前]（[ViewName]）
<!-- 同様に記述 -->

### 3. サブ機能

#### [機能名]（[ViewName]）
- <!-- 機能説明 -->
- <!-- 動作説明 -->

## データモデル

### [モデル名]
```swift
struct [モデル名]: [プロトコル] {
    // プロパティ定義
}
```

## UI/UXガイドライン

### カラーパレット
- メインカラー：`Color(red: , green: , blue: )`
- 背景色：`Color(red: , green: , blue: )`
- <!-- その他の色定義 -->

### デザイン原則
- 角丸：<!-- サイズ -->
- シャドウ：`opacity: , radius: , x: , y: `
- フォント：<!-- フォント指定 -->
- アイコン：<!-- アイコンセット -->

## 実装時の注意事項

### 必須要件
1. **[要件名]**：<!-- 説明 -->
2. **[要件名]**：<!-- 説明 -->

### 開発フロー
1. <!-- ステップ1 -->
2. <!-- ステップ2 -->

### ファイル構造
```
[プロジェクト名]/
├── Models/
│   └── <!-- モデルファイル -->
├── ViewModels/
│   └── <!-- ViewModelファイル -->
├── Views/
│   ├── <!-- メインビュー -->
│   └── [カテゴリ]/
│       └── <!-- サブビュー -->
└── <!-- その他必要なファイル -->
```

## プロトタイプ実装の優先順位
1. **最優先**：<!-- 内容 -->
2. **高**：<!-- 内容 -->
3. **中**：<!-- 内容 -->
4. **低**：<!-- 内容 -->

## テストデータ
- <!-- テストユーザー情報 -->
- <!-- サンプルデータ -->
- <!-- その他のテストデータ -->

## 制約事項
- プロトタイプの場合：<!-- 省略する機能 -->
- 必須機能：<!-- 必ず実装する機能 -->
- 省略可能：<!-- 後回しにできる機能 -->

## その他の要件
<!-- 追加の要件や注意事項 -->

そのほかコマンド

/model　モデルの切り替え
/memory、#でClaude.mdへの追加指示
/theme　ライトモード、ダークモードといったテーマの切り替え
/cost　このセッションの使用料
/compact 　コンテキスト縮小
/exit　終了
/terminal-setup 改行方法を「\を使う形式」⇄「Shift+Enter形式」に切り替え
/help　コマンドの説明
/permissions　~/.claude/settings.json(?)に実行許可リストや拒否リストの設定可能

~/.claude/settings.json
これはグローバル設定ファイルであり、どのプロジェクトにも共通して適用されるデフォルトのパーミッション設定です。
もし .claude/settings.local.json がそのプロジェクト内にあれば、ローカル設定が優先されて使用される。

安全性を担保するためのパーミッション管理を行っており、ツールの種類ごとに許可が必要

  • 読み取り専用ツール（ファイル読み取り、LS、Grep）：承認不要
  • Bashコマンド（シェル実行）：承認必要
  • ファイル変更（編集/書き込み）：承認必要
例 
{
  "permissions": {
    "allow": [
      "Bash(xcodebuild:*)",
      "Bash(mkdir:*)",
      "Bash(ls:*)",
      "Bash(flutter pub:*)",
      "Bash(flutter test:*)",
      "Bash(flutter analyze:*)",
      "Bash(git add:*)",
      "Bash(git commit:*)"
    ],
    "deny": []
  }
}

Claude.mdファイルの種類

  1. 前述まではプロジェクトルートに配置する(./CLAUDE.md）プロジェクトメモリ
  2. ホームディレクトリに配置するユーザーの（~/.claude/CLAUDE.md）　ユーザーメモリ
    個人の好みを学習させる。
テンプレート 
# コーディング方針

- Swift では camelCase を使います。snake_case はNGです。
- コードコメントは「なぜそうするか」を優先して書きます。使い方の説明は不要。
- SwiftUIではViewをなるべく小さく分けてください。

# プロジェクトの進め方

- 私は段階的に理解したいので、最初に全体像を簡潔に説明してから、STEPごとに教えてください。
- 「とりあえず全部貼る」ではなく、「少しずつ進める」スタイルが好みです。

# 書式ポリシー

- CLAUDE.mdなどの自動生成は**日本語**でお願いします。
- 説明文やテンプレートも必ず日本語でお願いします。
- 長文のときは、見出しや箇条書きを入れて読みやすくしてください。
- ビルドできることを必ず確認してください。できない場合は修正してください

# 学習スタイル

- 私は背景知識よりも「今やるべきこと」を重視するタイプです。
- 前提を飛ばさず、簡潔に手順ベースで教えてください。
- Git操作やエラー対応は「なぜそうなるか」より「まず直す」ことを優先します。

# 会話スタイル

- 丁寧すぎるより、フレンドリーで直球な方が好みです。
- 曖昧なときは「多分」「〜かもしれません」ではなく、「〜です。理由：〜」と断言してください。

直接、XXするルールをClaude.mdに追記してくださいもいいですが、
/memory、#でClaude.mdへの追加指示できるので

# 毎回指示が終わるたびに、Claude.mdを更新してください

でClaude.mdファイルに追記される。(複数種類があるので、どこのClaude.mdに記録させるか求められる。)
Claude.mdって更新してくださいって言わないと、古いままの可能性あり
→どんどんずれてくる。コンテキスト減る前に定期的にClaude.mdは更新する

# 日本語話者なので、作成するファイルはすべて日本語でお願いします。

参照するだけ?らしいので、理由を書いたり、最重要事項みたいに強調して書いたりしないと適用されないことも。

他に（./CLAUDE.local.md）がある。非推奨。現在、Claude.mdでインポートさせる。

import: claude-private.md　
# claude-private.md（個人設定ファイル）

## テスト用URL
https://sandbox.example.com/timer-test

## テストアカウント
メール: testuser@dev.local
パスワード: Test1234!

参考

▼ 公式チュートリアルもあります

あわせて読みたい
あわせて読みたい
Claude
Claude can now connect to your world | Claude by Anthropic Claude can now connect to your apps and tools through Integrations, while advanced Research searches across the web, Google Workspace, and connected services to...
Zenn
GitHub WorkflowにClaude Codeを統合するとレビューもPRもよしなにやってくれる良い話🎉
あわせて読みたい
Claude Code の設定 - Claude Code Docs Claude Code をグローバル設定とプロジェクトレベルの設定、および環境変数で構成します。
Lab TECH

関連記事