木曜日, 8月 14, 2025
木曜日, 8月 14, 2025
- Advertisment -
ホームニューステックニュースClaude Codeでできることを一通りまとめてみた

Claude Codeでできることを一通りまとめてみた


KGモーターズ株式会社でエンジニアをしている中村です。
最近KGモーターズ内でもAIを活用するムードが高まっており、せっかくなのでエンジニアがよく使うツールたちをまとめて社内外に知ってもらうのはありなのではと思い、第一弾としてClaude Codeに関する記事を書くことにしました。

Anthropic社が開発するモデルのシリーズ名。Anthropic社は元々OpenAI社で働いていた従業員達が創業した会社です。

安全性を重視しており、またコーディング能力が高いのが特徴です。

Anthropicが提供しているCLIベースのAIコーディング用エージェントです。

プレビュー期間はありましたが、2025/05に一般公開されました。
この時期はCursorやClineなどコーディング支援ツールが人気でしたが、みなさんお馴染みのエディターであるVSCodeにClaude Codeが対応したことで話題となった気がします。

使い方などはアップデートも早いので、チュートリアルを見るのが確実です。

https://docs.anthropic.com/ja/docs/claude-code/tutorials

とはいってもどんな特徴なのか?というと…

  • 自然言語指示で高品質なコードを生成してくれる
  • 実行中にToDoリストを作成して、どこを作業してるのかの進捗報告をしてくれる
  • 途中で指示してもいい感じのタイミングで拾ってくれる
  • Githubとの連携もスムーズ
  • VS Codeから使える
  • MCPサーバーも使える
  • etc…

ざっとこのくらいは余裕でできてしまいます。

ということで、上記からいくつかピックアップして事例やTipsを紹介します。

その前に環境構築は終わらせておきましょう。

環境構築

公式ページの通りに進めてインストールをしましょう。
⚠️ 私は事前にProプランに入っております

https://docs.anthropic.com/ja/docs/claude-code/setup

  • 黙ってclaude-codeを入れましょう
$ npm install -g @anthropic-ai/claude-code
  • インストールできたかな?
$ claude --version
1.0.72 (Claude Code)
  • とりあえず起動する

初期設定でテーマを決めてと言われたり

Loginが必要だったり、注意書きがでたり…しますがよしなに捌いていただき、完了させてください。

始める前に前提知識

スラッシュコマンド

スラッシュコマンドは会話中に/で始まるコマンドを入力することで、特定の機能を素早く実行できる仕組みです。
スラッシュコマンドを使うことで開発作業を効率化することができます。

よく使うのはこの辺でしょうか…

コマンド できること
/login 別のアカウントに切り替る
/logout 現在のアカウントからログアウト
/bug AnthropicにBugレポートをする
/config Claude Codeの設定を表示または変更
/clear 会話履歴をクリアしコンテキストを空に
/compact 要約をコンテキストに維持し会話履歴をクリア
/init CLAUDE.mdを初期化
/ide IDE統合を管理&状態の表示

カスタムコマンド

カスタムコマンドを使うと、よく使う操作を自動化することができます。

指定の場所にマークダウンファイルを作成し、その中に指示を書くとテンプレート化できるということです。

置き場所1: .claude/commands

  • 実行時のプレフィックス
  • 使用シーン
    • チーム開発で共有するプロジェクト固有のコマンド
    • Gitなどで管理する
  • よくある使い方
    • コーディング規則のチェック
    • テスト手順書
    • プロジェクト固有の制約(ドキュメントを作成するなど)
  • 作成と使用方法
    • ちゃっかりオプションの引数を使っちゃったりできます
$ mkdir -p .claude/commands
$ echo "Issue #ARGUMENTS を以下の手順で確認して実装してください。手順: 1. 背景の理解 2. 対象コードの特定  3. 解決策の立案 4. 実装 5. テストの作成 6. PRの作成" > .claude/commands/feature-issue.md

/project:feature-issue 56

置き場所2: ~/.claude/commands/

  • 実行時のプレフィックス
  • 使用シーン
    • 個人開発ワークフローや全体的なタスク
    • 全てのPJで使用可能
  • よくある使い方
    • 自分でいつも行っているチェックリストの適用
    • よくある実装パターン
  • 作成と使用方法
    • 上とほぼ同じのため割愛します

claudeコマンド

Claude Codeをはじめる時にclaudeコマンドを使うと思いますが、並列で一気にコーディングしたい時、ファイル作成許可などを聞いてくるのが困るというケースもあると思います。
その他自律的に動いてほしい時に以下のコマンドで立ち上げる時もあります。

claude --dangerously-skip-permissions

自然言語指示で高品質なコードが生成される

やること

ではまず手始めに簡単なWebサイトを作成してみましょう。
特に画像も与えず、KGモーターズの簡単な会社紹介のみをプロンプトに含めます。

今からKGモーターズ株式会社の簡単なホームページをNext.jsで作成してください。
以下が会社情報です。実際の車の画像はないですが、ワクワクし、おしゃれなデザインに仕上げてください。

======================

会社名:KGモーターズ株式会社
設立:2022年7月28日
事業内容:小型モビリティロボットの製造・販売・MaaS開発
代表取締役:楠 一成
資本金:9500万円
累計調達額​:20.2億円​(デット・エクイティ含む)
本社所在地:広島県東広島市西大沢2丁目2-9

Vision:
今日より明日がよくなる未来を創る
かつて日本には、「明日はきっと今より良くなる」という空気がありました。モノやサービスは今よりずっと不便でも、未来には“伸びしろ”があると信じられていたのです。
しかし、今の成熟した社会では、モノやサービスが良くなりすぎた結果、維持できなくなっているものがあり、希望が少しずつ失われつつあります。
その象徴が「移動」です。
移動の自由は、人間の生活や欲求に深く関わるもの。
そこに制限がかかると、日々の行動だけでなく、未来への期待そのものが閉ざされてしまいます。
だからこそ私たちは、移動のあり方を根本から見直し、“明日が楽しみになる感覚”を、もう一度社会に取り戻そうとしています。

Mission:
「小型モビリティロボットで
世界をワクワクさせる」​
これからの人口減少社会において必要なのは、大量輸送ではなく、ひとりを、最小のエネルギーとコストで運べる、新しい移動の選択肢です。
けれど、“我慢して選ぶ移動”では、社会に根づくことはありません。
「乗りたくて選んでいたら、結果的に持続可能な移動につながった」
そんな未来を実現するために、私たちはワクワクするモビリティづくりを目指します。

その他:
誰もが、安全で、快適で、自由に、
手頃な価格で移動できる社会を目指して
私たちは、小型モビリティロボットを通じて、移動の「楽しさ」と「持続可能性」を両立させることに挑んでいます。
たとえ維持コストや環境負荷がどれだけ低くても、我慢して乗る移動手段では、真の持続可能とは言えません。
“乗りたくて選んだら、それが持続可能につながっていた。”そんな未来こそ、私たちが目指す世界です。

実行後

こんな感じでTodoリストを勝手に作成してくれます。

⏺ KGモーターズ株式会社のホームページを作成します。ワクワクするおしゃれなデザインで仕上げましょう。

⏺ Update Todos
  ⎿ ☐ Next.jsプロジェクトのセットアップ                 
     ☐ ホームページのレイアウト設計と基本構造作成
     ☐ 会社情報セクション(会社概要、代表者情報等)の実装
     ☐ Vision・Missionセクションのデザインと実装
     ☐ レスポンシブデザインとスタイリングの調整
     ☐ アニメーションやインタラクションの追加

終わったそうです。

  開発サーバーが起動しています:http://localhost:3000

  ブラウザでアクセスすると、KGモーターズのワクワクする未来の移動をテーマにしたホームページをご覧いただけます!

この後少々手直ししましたが、こんな感じです。これがワクワクするのか?の定義は置いておいて、このくらいのクオリティのものが速攻でできてしまうということです。

Githubとの連携

github CLIを使うことでPull requestも勝手に出してくれます。
CLIが入ってない状態だとインストールは勝手にやってくれますが認証ができずエラーになりますので

ターミナルに出た数字をブラウザに打ち込んで認証ができます。

上記ができた前提でやっていきましょう。

PRの作成

カレントディレクトリがgit対象フォルダだとします。とりあえずまっさらなリポジトリを用意しました。
ここで以下のプロンプトを打ち込みます。

$ claude

今からテーブルデータのデータ分析をNotebookで行いたいので環境構築と必要なライブラリを用意してください。完了したらPull requestをだしてください。

実行したら以下のようにTodoリストを作って作業を始めてくれました。

⏺ データ分析用のNotebook環境を構築します。まずタスクを整理してから進めます。

⏺ Update Todos
  ⎿  ☐ プロジェクトの現状を確認                                              
     ☐ データ分析用Jupyter Notebook環境を構築
     ☐ 必要なライブラリをインストール(pandas, numpy, matplotlib, seaborn等)
     ☐ サンプルNotebookを作成
     ☐ 変更をコミット
     ☐ Pull requestを作成

ちょこちょこ承認を求められるのですが、進め方に問題はなさそうです(強いていうならライブラリ管理がrequirements.txtかーくらいですが許容範囲です)。

そして無事Pull Requestができていました。サンプルの分析Notebookまで作ってくれていました。

該当Issueを実施する

上記ではプロンプトでTaskを与えてPull Requestを出しましたが、通常開発ではIssueにタスクが書かれており、そのIssueを実施してPull Requestを出すと思います。
このFlowを模擬してみます。

以下のIssueを作成しました。実際にはこんなTaskを誰かに渡したら「分類したいクラスはなんだ?」「カラム名には何があるか?」など要件を普通に聞かれますが、一旦雑に出してみます。

ではいきましょう

> Issue 2のTaskを実施し、Pull Requestを作成してください。

実行後…ちゃんとIssueを拾っていることがわかります。

⏺ Issue 2のタスクを確認するため、GitHubのIssueを取得します。

⏺ Bash(gh issue list)
  ⎿  2  OPEN    2クラス分類の雛形コードの作成           2025-08-10T16:29Z

さてPull Requestが出てきました。
コードもざっとみましたが、しっかりできてそうです。こんな感じでIssueも拾って開発が進められます。

Githubとの連携(Claude Code GitHub Actions)

さっきはClaude CodeからGithubを呼び出して(厳密にはCLI経由で)自律的に開発を行っていましたが、Claude Code GitHub ActionsではGithub上からCluade Codeが使えるようになります。

で、何がいいの?おいしいの?という感じかもしれませんが、これは本当にすごいと思いました。
Github上で@cluadeとメンションをつけるとタスクリストを含むコメントが返ってきて実装を終わらせてくれます。


Claude Code Actionをさっそくレビューしてみた!より抜粋

以下の記事の最後でも触れられているのですが、これはスマホから開発が行えるという可能性があるということです。(スマホでGithubにコメントしてClaudeがタスクを終わらせてくれる)。

https://qiita.com/kyuko/items/ad894bac5ba516683387

一方でマージ前の検証をどう担保するか?は課題としてあるので、プロジェクトの性質に合わせて自動検証の仕組みを入れておくとうまく回る気がしています。まさにAIに合わせて業務フローを再度考えるということですね。

では早速使ってみましょう。

セットアップ

以下のQuick Startを見ながらやっています。

https://github.com/anthropics/claude-code-action

claudeで対話セッションモードになったら以下を実行します

おそらくGit管理されたディレクトリで実行すれば、current repositoryに対象のリポジトリがでてくると思います。

Install GitHub App
Select GitHub repository

> Use current repository: {owner name}/{Repository name}
  Enter a different repository 

するとブラウザに飛び色々と確認されるので、claude code github actionsを入れたいリポジトリを選びInstallします。

次にClaude Code発動タイミングの選択がありますが、メンションをつけた時だけでいいので上を選択…

Select GitHub workflows to install
We'll create a workflow file in your repository for each one you select.

✓  @Claude Code                                                              
   Tag @claude in issues and PR comments
✓  Claude Code Review
   Automated code review on new PRs

この後API Keyを入れるよう求められますが、持っていない方は以下から作成しましょう。
Claudeのアカウントとは別にアカウント登録が必要なようです。

https://console.anthropic.com/login?selectAccount=true&returnTo=%2Fdashboard%3F

アカウント登録が終わったら、Get API Keyから作成します。API Keyは右ポケットにこっそりしまっておきましょう。

⚠️最初は$5くらい付いていたきがするので、お試しで触る方はこのままいきましょう

セットアップが完了するとブラウザが立ち上がりPull Requestの画面になります。Create Pull Requestで次に進みましょう。

Github Actionsのworkflowができていますね。

これをマージしてセットアップ完了です。

動かしてみる

例えばこういうIssueを作ってみましょう。

ではいってらっしゃい。

きたきた…

進捗もちゃんとみれます。誰にこんな丁寧なホウレンソウを教わったんでしょうか。

終わったようです。

作成されたブランチからPull Requestを出して終わり、ということです。
めっちゃ簡単で怖い…

MCP

MCPはModel Context Protocolの略です。
要はAIとAIが使うツールが通信してAI自身が色々なツールを使えるようにすることです。

元々は2024年末にAnthropic社が提案しました。
このプロトコルに則っていればAIが複数のツールを使うことができ、より便利さが加速するというわけです。

Anthropic社が提案して広がったというより、2025年の春先にOpenAIが「GPTにもMCP使えるようにする」と言ったことで一気に加速したイメージです。

MCPを活用した事例としては

  • ローカルPCと接続してブラウザ操作
    • puppeteer MCP
    • 受け入れテストなどのWebサイトのテストが自動化できたりする
  • デザインに沿ったアプリ開発
    • figma MCP
    • こちらを見るとよくわかります(figmaも有料プランでないとダメなのがつらい)

などがありますが、一番上のpuppeteerを使ってみましょう。

ローカルPCと連携

Puppeteer MCPサーバーのインストール

$ npm install -g @modelcontextprotocol/server-puppeteer

設定ファイルの準備

~/.claude/settings.jsonに以下を記載

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-puppeteer"]
    }
  },
  "toolPermissions": {
    "mcp__puppeteer": "session",
    "mcp__puppeteer__puppeteer_navigate": "allow",
    "mcp__puppeteer__puppeteer_screenshot": "allow",
    "mcp__puppeteer__puppeteer_click": "session",
    "mcp__puppeteer__puppeteer_type": "session",
    "mcp__puppeteer__puppeteer_evaluate": "session"
  }
}

ちなみに権限の意味は以下です。

  • allow: 確認なしで自動実行
  • session: セッションごとに確認
  • never: 実行負荷

MCPサーバーの追加

$ claude mcp add puppeteer npx @modelcontextprotocol/server-puppeteer

確かに追加されています。

$ claude mcp list
Checking MCP server health...

puppeteer: npx @modelcontextprotocol/server-puppeteer - ✓ Connected

使ってみた

以下のショート動画を使って大事なシーンをカットして解説書を作ってもらいます。

https://www.youtube.com/shorts/Dv0k_lgEfxQ

https://www.youtube.com/shorts/Dv0k_lgEfxQ 
このショート動画で大事なシーンのスクショを取り、何を言っているか解説メモをのこしてください。

出てきたメモはこれです。趣旨やまとめはバッチリなのではないでしょうか。

# KGモーターズ YouTube Shorts 動画解説メモ

## 動画概要
- チャンネル: @KG_motors
- タイトル: 「数万回開けても繰り返してる」
- 説明: YouTubeから始まった、EVメーカー 2万回達成!mibot、ドアの開閉テストの様子

## 重要シーン解説

### シーン1(初期画面)
![スクリーンショット1](youtube_shorts_initial)
- KGモーターズの工場内で、mibotという超小型EVの前に立つエンジニア
- 字幕: 「数万回開けても繰り返してる」
- 工場の緑色の柱と明るい照明が見える

### シーン2(テスト説明)
![スクリーンショット2](youtube_shorts_playing_1)
- 同じエンジニアがmibotのドアテストについて説明
- 字幕: 「人がやった方が早いと今回は」
- ドアの耐久性テストに関する話をしている様子

### シーン3(テスト実施中)
![スクリーンショット3](youtube_shorts_playing_2)
- 実際にmibotのドアを開閉している様子
- 字幕: 「気でもおかしくなったんですが。」
- 右下に小さく別の人物(おそらく社長やマネージャー)が映っている
- 繰り返し作業の大変さを表現

### シーン4(感想・まとめ)
![スクリーンショット4](youtube_shorts_playing_3)
- 眼鏡をかけた別の人物(おそらく責任者)が登場
- 字幕: 「感想を一言お願いします」
- 工場の明るい環境で、テストに関するインタビューを受けている

## 動画の主旨
- KGモーターズのmibot(超小型EV)の品質管理について
- ドアの開閉テストを数万回実施していることをアピール
- 手作業での耐久テストの様子を紹介
- 製品の信頼性に対する取り組みを示す広報コンテンツ

## 技術的ポイント
- 物理的な耐久テストの重要性
- 品質保証プロセスの透明性
- 小規模メーカーならではの丁寧な検証作業

バージョンアップが頻繁にされるのでここをみておくと良いです。

https://github.com/jakenuts/claude-dev/blob/main/CHANGELOG.md

あとはClaude CodeのHooks機能を使うと、決まったタイミングで何か処理を自動化することもできたりします。

KGモーターズでは開発エンジニアを募集しております!
mibotのソフトウェア開発に興味のある方はぜひお気軽にご連絡ください!

https://kg-m.jp/recruit



Source link

Views: 0

RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -