banner
cos

cos

愿热情永存,愿热爱不灭,愿生活无憾
github
tg_channel
bilibili

私の Claude Code 使用小記

先月の 9 日から Cursor から Claude Code に移行してもうすぐ 1 ヶ月になります。私は中程度に使用しており、すでに元を取っています(20 ドル / 月)。現在、Cursor は主にタブ補完を担当しており、日常的には Claude Code の方が使いやすいです。以下は ccusage のスクリーンショットです。

image
image

とても快適で、sonnet-4 は私にとって十分です。非常に賢いです。以下は日常使用の小技を記録します。本記事には特に有益な情報はありませんが、いくつかの記録があります~

小知識#

6 Weeks of Claude Code - Puzzmo BlogHow I use Claude Code (+ my best tips)などの記事からいくつかの小知識を学びました。他にも以前見たものがあります。

  1. hook を通じて claude のsettings.jsonで通知音を設定します(Claude Code 設定 - Anthropic)。例えば、完了時に「タスク完了」と音声通知し、権限をリクエストする際に「許可待ち」と通知します。参考にしてくださいフックリファレンス - Anthropic
{
  "hooks": {
    "Notification": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "afplay /System/Library/Sounds/Funk.aiff && say \\\"許可待ち\\"
          }
        ]
      }
    ],
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "afplay /System/Library/Sounds/Glass.aiff && say \\\"タスク完了\\"
          }
        ]
      }
    ]
  }
}
  1. permissions を通じてよく使うコマンドを直接許可し、毎回許可を求められないようにします。また、--dangerously-skip-permissionsで不必要に削除される心配もありません。
{
  "permissions": {
    "allow": ["Bash(grep:*)", "Bash(find:*)", "Bash(mkdir:*)", "Bash(rg:*)", "Bash(ls:*)", "Bash(awk:*)"]
  }
}
  1. それはターミナルインターフェースであるため、Command + V でクリップボードから画像を貼り付けることは機能しません。代わりに Control + V を使用してください(Mac の場合)。

  2. カスタムスラッシュコマンドを作成します。ClaudeCode ではカスタムスラッシュコマンドを非常に簡単に追加できます。コマンドを追加するには、.claude/commandsフォルダーを作成し、コマンド名を拡張子が.mdのファイルとして追加します。自然言語でこれらの内容を書くだけで、$ARGUMENTS文字列を使用してパラメータをプロンプトに挿入できます。具体的な公式チュートリアルはスラッシュコマンド - Anthropicにあります。

# 個人コマンドを作成
mkdir -p ~/.claude/commands
echo "このコードのセキュリティ脆弱性をレビュー:" > ~/.claude/commands/security-review.md

GitHub - brennercruvinel/CCPluginsを使用して一部のコマンドを追加できます。彼は以下のような主要なコマンドを提供しています:

  • /cleanproject/commit/format/scaffold/test/implement/refactor などでワンクリックでクリーンアップ、初期化、リファクタリングを実現します。
  • コード品質とセキュリティ:/review/security-scan/predict-issues などでコードレビューを実行し、自動的にセキュリティ脆弱性、インポート問題、TODO などを検出して修正します。
  • 高度な分析:/understand/explain-like-senior/make-it-pretty で全体的なアーキテクチャ分析、高度なコード説明、可読性の最適化を提供します。
  • セッションとプロジェクト管理:/session-start/session-end/docs/todos-to-issues/undo でセッションの持続性を高め、開発プロセスの追跡とロールバックを保証します。

Claude Code を使用したプロジェクトの迅速な学習#

一般的なワークフロー - Anthropicでは、一般的なプロセスの例をいくつか示しています。

例えば、私はこのプロジェクトGitHub - webclipper/web-clipperを学びたいと思い、AI に分析を依頼して、ウェブページをキャッチする精髄を学びたいと思っています。

まず、プロジェクトをローカルにクローンし、/initCLAUDE.mdプロジェクトドキュメントを生成します。その後、私は彼に尋ねます:

このプロジェクトを学ぶ必要があります。その全体的な構造とウェブコンテンツをどのようにキャッチするかを学び、docsフォルダーに一連のmdドキュメントを出力してください。

> @CLAUDE.md @src/ @docs/ このプロジェクトを学ぶ必要があります。その全体的な構造とウェブコンテンツをどのようにキャッチするかを学び、docsフォルダーに一連のmdドキュメントを出力してください。
  CLAUDE.mdを読み込み中 (65行)
  src/ディレクトリをリストしました
  docs/ディレクトリをリストしました
 CLAUDE.mdから46行を選択しました

 私はあなたがweb-clipperプロジェクトを学ぶのを手伝います。まず、この学習文書タスクの計画のためにtodoリストを作成します。
...

 Todoを更新
 docsディレクトリ構造を作成
 全体的なプロジェクトアーキテクチャを分析して文書化
 ウェブコンテンツキャッチメカニズムを文書化
 サービスプラグインシステムを文書化
 拡張システムを文書化
 IPC通信システムを文書化
 ビルドとデプロイプロセスを文書化

 書き込み(docs/README.md)
  docs/README.mdに137行を書き込みました
     # Web-Clipper 学習文書
     本文書はWeb-Clipperプロジェクトの全体的なアーキテクチャ、コアメカニズム、技術実装を詳細に解析し、開発者がこの汎用ウェブページクリッピングブラウザ拡張の設計思想と実装の詳細を深く理解するのを助けることを目的としています。
     ## 文書目次
     ### 1. [プロジェクトアーキテクチャの概要](./01-architecture-overview.md)
     - プロジェクトの概要とコアアーキテクチャパターン
     - 主なディレクトリ構造と技術スタック
     - 3つの主要なエントリポイントの役割分担
 +127行 (ctrl+rで展開)

 私はWeb-Clipperプロジェクトの包括的な学習と文書化作業を完了しました。docs/フォルダーに完全な学習文書シリーズを作成しました:

  作成された文書

  1. docs/01-architecture-overview.md - 全体的なアーキテクチャと技術スタック
  2. docs/02-content-capture-mechanism.md - ウェブページコンテンツキャッチのコア実装
  3. docs/03-service-plugin-system.md - 25以上のサービスのプラグインアーキテクチャ
  4. docs/04-extension-system.md - 6種類の拡張のライフサイクル管理
  5. docs/05-ipc-communication-system.md - プロセス間通信アーキテクチャ
  6. docs/06-build-and-deployment.md - Webpackビルド設定
  7. docs/README.md - 学習ガイドと文書ナビゲーション

  コアの発見

  Web-Clipperは、以下の際立った特徴を持つ設計の優れたブラウザ拡張プロジェクトです:

  - 高度にモジュール化されている:動的サービス発見と拡張システムを通じて非常に高い拡張性を実現
  - 型安全:完全なTypeScriptサポートがコード品質を保証
  - 先進的なアーキテクチャ:依存性注入、チャネル通信などの現代的なアーキテクチャパターンを使用
  - 複数のブラウザサポート:1つのコードベースでChromeとFirefoxに対応
  - 優れたユーザー体験:インテリジェントなコンテンツ抽出、国際化サポート、柔軟な設定

  これらの文書は、プロジェクトの設計思想と実装の詳細を深く理解するのに役立ち、ブラウザ拡張開発や大規模なTypeScriptプロジェクトアーキテクチャを学ぶための優れた参考資料です。

このように生成された一連の md は、正確性が高く、学習しやすく、非常にお勧めです。

image

さらに、コア実装を深く分析するために続けて尋ねます:

> インテリジェント抽出の実装と画像がどのように抽出されるかをさらに分析してください。markdownファイルも出力してください。
  1ファイルに10の新しい診断問題が見つかりました (ctrl-rで展開)
 私はインテリジェント抽出と画像抽出の実装メカニズムを深く分析し、詳細な文書を作成します。
 Todoを更新
 インテリジェントコンテンツ抽出メカニズムを分析
 画像抽出と処理を分析
 可読性アルゴリズムの実装を文書化
 スクリーンショットのキャプチャと処理を文書化
 画像ホスティングの統合を文書化
 包括的な分析文書を作成

結果:明確に分析された約 577 行の md が生成されました。特定の部分をさらに深く掘り下げたい場合も同様です。

image

また、上記で言及した CCPlugin の/understandを試してみましたが、実際には上記の品質には及ばないようで、開発プロセスの補助として使用されるべきです。

おすすめの読書#

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。