Yoii Tech BlogPublicationへの投稿
📖

Claude Codeを使ってみた：社内システムにGoogleソーシャルログイン認証を導入

Task Ohmori
に公開
Go
SOPS
Claude Code
tech

こんにちは！株式会社YoiiのCTO、大森 亮（おおもり たすく）です。

現在、YoiiではAIコーディングツールとしてCursor Proを契約しており（GitHub Copilotも選択可能です）、日々の開発に活用しています。今回は、新たな選択肢として注目されているClaude Codeを試してみました。まずは月額$20のProプランで、どの程度使えるのかを検証してみたので、その結果を共有します。

今回のテーマは、IPアドレス制限のみで保護されている社内システムに、Googleのソーシャルログイン認証を導入することです。Claude Codeがこのタスクにどのように対応できるのか、実際の使用感を交えてお伝えします。

Claude Codeとは?

Claude Codeは、Anthropic社が提供するAIコーディングアシスタントCLIです。
2025年5月22日に正式リリースされ、「プロジェクト全体を理解し自律的にコードを生成・修正できるAIエージェントCLI」として話題となっています。
主な特徴として

  • CLI単体で動作し、インタラクティブでもワンショット実行で素早く指示を出せる
  • 新規ファイル生成・既存コード修正・テスト生成・レビュー・PR作成まで一貫して対応
    という点が挙げられます。

弊社でも普段用いているCursorのAgent機能に近いですが、Claude Codeは「CLI特有の軽量さと、マウス操作の少なさ」「コードベースへのより深いインデックス理解」という点が特に優れていると感じました。

ただ、エージェントの性能というよりも、Claude自体のモデルのコーディング性能の高さが大きいと思います。実際、Cursor Agentでモデル選択にclaude-4-sonnetを使っている時のコード生成精度が非常に高いと日々感じています。

セットアップ

インストール

npmを用いて以下のようにインストールします

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

CLIから

claude

でREPL(インタラクティブ)モードが呼び出せます。

IDEとの連携

Claude Codeは、CLI単体で動かすこともできますがIDEと連携して用いることもできます。現状、Visual Studio Code(Cursor, Windsurf等のフォーク含む)や、JetBrains IDE(PyCharm, WebStorm, IntelliJ, GoLandを含む)がサポートされています。

Claude Code 拡張機能

弊社はCursorを使っていますが、Cursorのターミナル内でclaudeを実行することで自動的にインストールされるようです。
あるいは確実に連携するために、claudeのREPLモードの中で/ide コマンドを実行します、

拡張機能インストールが完了すると、Cmd+EscのショートカットでClaude Codeを起動したり、タブから起動することが可能になります。

(ちなみになぜか私の環境ではCmd+Escのショートカットが作動しないので、解決策知ってる方いたらこっそり教えてください。Karabiner Elements使っていることが関係あるのかもしれません…。)

また、コード変更内容をIDE上でプレビューできるようになります。これはCLI単体よりも圧倒的に見やすいですね！

Claude Initによるコードコンテキストのドキュメント化

コードベースをClaudeに認識させるため、initコマンドでインデックスを生成し、CLAUDE.mdに書き込みます。

claude init

これにより、Claudeはディレクトリ構造・ファイル内容・依存関係を理解し、以降のプロンプトに応じて最適な変更提案やファイル生成が可能になります。

テストプロジェクト：社内システムにGoogleソーシャルログイン認証を導入

では、実際に社内のシステム(IPアドレスによる保護済み)にGoogleソーシャルログインを導入してみましょう。まずは、claude initを実行後、レポジトリの内容をSummaryしてもらいます。

> このレポジトリの技術選定と主要仕様を要約して

  技術スタック

  フロントエンド

  - React 19 + TypeScript + Vite - モダンSPAフレームワーク
  - Tailwind CSS - ユーティリティファーストCSS
  - pnpm - パッケージマネージャー

  バックエンド

  - Go 1.22 - API サーバー
  - Chi Router - HTTP ルーティング
  - SQLX - データベース操作

  データベース

  - MySQL (ポート4000) - 本番・開発環境

  インフラ

  - AWS - クラウドプラットフォーム
  - Terraform - IaC
  - S3 + CloudFront - フロントエンド配信
  - ECS Fargate + ALB - バックエンド実行環境
  - SOPS + AWS KMS - 暗号化設定管理

  主要ライブラリ

  フロントエンド

  - FullCalendar - 勤怠カレンダー
  - TanStack Table - データテーブル
  - Recharts - 統計グラフ
  - Headless UI - アクセシブルコンポーネント
  - Vitest + React Testing Library - テスト

  バックエンド

  - go-chi/chi/v5 - HTTP ルーター
  - jmoiron/sqlx - SQL拡張
  - go.mozilla.org/sops/v3 - 暗号化設定

  アーキテクチャ

  モノレポ構成

  ├── packages/frontend/    # React SPA
  ├── packages/backend/     # Go API
  ├── infrastructure/       # Terraform
  └── config/              # SOPS暗号化設定

  主要機能

  実装済み

  - ユーザー管理: 従業員情報の検索・フィルタリング
  - データ同期: リアルタイム同期状況API
  - IP制限: CloudFront・ALB両方にWAF v2実装

  未実装

  - 認証: Google ログイン（計画中）

  セキュリティ

  - SOPS: 全機密情報をAWS KMSで暗号化
  - IP制限: CloudFront WAF v2 + ALB WAF v2で実装済み

  開発環境

  1. MySQL起動 (mysql.server start)
  2. マイグレーション (dbmate up)
  3. バックエンド起動 (go run cmd/server/main.go)
  4. フロントエンド起動 (pnpm dev)

とのことです。

「Googleによるソーシャルログインを実装して。IDaaSは用いずに、自前で実装する」のようなコマンドで以下のようにプランを立ててもらい、順番に進めてもらいます。

以下、進めながら感じたことや便利機能を紹介していきます。

  • 便利ポイント：実行するコマンドのプランを示した後に、1つずつ許可をとってくれます。また、許可するコマンドのホワイトリスト化が可能です。許可したコマンドは.claude/settings.local.jsonに書き込まれます。

  • 便利ポイント：Ctrl + V (Command + Vではない)で画像を貼り付け可能。

    • Windowsだとコマンドが変わると思いますが、MacだとCommand + Shift + Option + 4で画像を画面からコピーしつつ、Ctrl + VでClaude Code上に貼り付けることができます。Command + Vではないので注意してください。
      画像を貼り付けて読み込ませることも可能。

  • Shift + Tabで、ファイル編集のauto apply Modeのオン・オフが切り替え可能。

変更が増えてきました。 この辺りでcommitしていきましょう。

  • 便利ポイント：定型指示のコマンド化
    「Commit & Pushし、PRを作成して。PRのDescriptionは英語で」と自然言語で指示することもできるのですが、定型ですることが多い作業はコマンド化することも可能です。.claude/commands/commit-push.mdに、例えば以下のように書き込みましょう。
@var base=main # default value

1. git checkout -b {{new_branch_name}}
2. git add -A
3. git commit -m "{{commit_message}}"
4. git push -u origin {{new_branch_name}}
5. claude pr create -t "{{commit_message}}" -b {{base}}

Write PR description in English.
Output is only the execution log and PR URL

このようにすることで、claudeの中のコマンド/commit-pushとして呼び出すことが可能になります。

PR作成まで、自動で行ってくれます。

それこれしてるうちに、$20プランのリミットに達しました。Upgradeしちゃいましょう！

このあと色々格闘しまして、(クッキーをブラウザで管理するかバックエンド管理するかの仕様の、フロントエンド・バックエンド実装間での食い違いなど)、何とか実装が完了しました。

Claude Codeを活用していくために

Claude Codeは単一リポジトリ（monorepo）で一番パフォーマンスが出るツールです。claude init が読める範囲が基本 1 repo だからですね。
とはいえ、

「AIを入れたいから今日はみんな monorepo に移行しよう！」

は順序が逆かもしれません。monorepo 化にはCI/CD の作り替え・権限設計・レビューフローまで影響が出ます。

  • monorepoのメリット

    • Claude Code が “全部入り” の状態を一撃でインデックス
    • 共通ライブラリや型の変更が楽
    • 生成コードの差分が1PRにまとまりやすい

  • monorepoのデメリット

    • デプロイ単位が大きくなり、CD が重たくなる
    • レビュー範囲が広がり、担当オーナーが曖昧に
    • モジュール間の意図しない依存が増えがち

ただし、Claude CodeをはじめとするAI Agenetのアップデートにより、今後クロスレポジトリでの開発がしやすくなる可能性はあります。

ちなみに弊社は2024年の5月にYoii Fuel(Webアプリケーション部分)はモノレポ化を行い、フロントエンド・バックエンド・インフラのCI/CD管理が一元化されてスモールチームに向く運用になったと感じています。

ドキュメントを Git で持つ意味

Claude Code は README や設計ドキュメントも丸ごと読んでくれます。仕様がリポジトリに置いてあれば、そのまま前提を共有したコードを生成してくれるので精度が上がります。

ただし、ドキュメントが腐っていると古い前提でコードを吐く＝バグ量産になるので要注意です。
仕様の変更があった際にREADME.mdやCLAUDE.mdを自動で変更すること自体も、Claude Codeのルールとして設定するのが良さそうですね。

最後に

Claude Codeを少し使ってみましたが、使いやすさと賢さを兼ね備えた
今後、全社導入や使い方の周知・ルール整備等を進めていきます。
また、更なる高度な運用上の工夫を記事にしていきたいと思っております。

お読みいただきありがとうございました！

参考文献

https://www.anthropic.com/news/claude-4
https://docs.anthropic.com/claude/docs/claude-code

Yoii Tech Blog
Yoii Tech BlogPublication

株式会社Yoiiは、Revenue-Based Financing (RBF)を通じて、起業家や企業の成長を支援する会社です。資産の流動性を高めることで、柔軟でリスクを抑えた資金調達を提供し、次世代のビジネスをサポートしています。

Discussion