├── docs ├── Marp.md ├── Next.js.md ├── ai │ ├── Gemini │ │ ├── Gemini-Gem.md │ │ ├── Gemini-CLI-GitHubActions.md │ │ └── Gemini-CLI.md │ ├── jules.md │ ├── img │ │ ├── mcp.docker.png │ │ └── MCP-Gateway-blog-Fig.avif │ ├── Codex │ │ ├── Codex-Sdk.md │ │ └── Codex-CLI.md │ ├── GithubCopilot │ │ └── GitHubCopilot-CLI.md │ ├── Kiro.md │ ├── ClaudeCode │ │ ├── ClaudeCode-Serena.md │ │ └── ClaudeCode.md │ └── mcp.md ├── Firebase.md ├── Docker.md ├── slidev.md ├── Batch.md ├── terraform.md ├── default-clipper.json └── Obsidian.md ├── .obsidian ├── appearance.json ├── app.json ├── graph.json └── core-plugins.json ├── slide ├── marp │ ├── Makefile │ ├── package.json │ └── test.md └── slidev │ ├── .npmrc │ ├── .gitignore │ ├── Makefile │ ├── vercel.json │ ├── netlify.toml │ ├── README.md │ ├── snippets │ └── external.ts │ ├── package.json │ ├── pages │ └── imported-slides.md │ └── components │ └── Counter.vue ├── .gemini └── settings.json ├── .gitignore ├── README.md ├── bookmark ├── mcp │ ├── プレビュー AWS Knowledge MCP Serverを使ってみた DevelopersIO.md │ ├── AWS Knowledge MCP Server が GA されたので試しに設定してみたメモ✍.md │ └── MCPの認証と認可の現在と未来 hi120ki.md ├── react │ ├── React 19の新機能まるわかり.md │ ├── Webフロントエンドの難しさと面白さ 2025.md │ ├── React-Reduxのconnect()関数についてまとめ.md │ ├── Next.jsのtutorialをやるDockerの環境が欲しい.md │ └── TypeScriptReactNext.jsおすすめ学習資料のご紹介.md ├── claude │ ├── Claude Codeでn8nワークフロー作るのが楽すぎて、もう手動で作る気が起きない件.md │ ├── Claude Code入門 - AI駆動開発の基礎を1日で身につけよう.md │ ├── 🚀 Claude Code × Serena MCP：もうバージョンダウンしなくても良いのか...?.md │ ├── Claude Code の学習モードで自分の手でコードを書く練習をしよう.md │ ├── Claude Sonnet 4.5 発表関連情報まとめ.md │ ├── SuperClaude とは？Claude Codeのコード品質を30%改善できた神ツールの完全ガイド！.md │ └── Anthropicが公開しているClaude Codeのベストプラクティスを初心者向けに解説.md ├── ai │ ├── AGENTS.md │ ├── どうして開発チームはClaude Codeをうまく活用できないのか｜すてぃお.md │ └── 【コピペOK】技術的負債を作らないためのルールを設定しよう（Claude Code, Codex, Cursor対応）.md ├── codex │ ├── 我々はCodexとどう向き合うべきなのか.md │ └── Codex CLIを使いこなすための機能・設定まとめ.md ├── aws │ ├── Step Functions を利用して感じた Airflow との比較.md │ ├── Visual Studio Code上で AWS Step Functions のワークフローをより簡単に構築.md │ ├── AWSの安価でスケーラブルなウェブアプリ構成 2025年度版.md │ ├── 【AWS】 代表的なクラウドデザインパターン紹介.md │ └── TerraformでAmazon ECSを構築するサンプルコードを書いてみた.md └── playwright │ └── テスト自動化フレームワーク「Playwright」にAIエージェント機能。自動的にテスト計画とテストコードの生成、テストコードのデバッグなど.md └── CLAUDE.md /docs/Marp.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/Next.js.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.obsidian/appearance.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /docs/ai/Gemini/Gemini-Gem.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/ai/jules.md: -------------------------------------------------------------------------------- 1 | 2 | https://jules.google.com/task -------------------------------------------------------------------------------- /.obsidian/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "alwaysUpdateLinks": true 3 | } -------------------------------------------------------------------------------- /slide/marp/Makefile: -------------------------------------------------------------------------------- 1 | install: 2 | npm install -g @marp-team/marp-cli 3 | -------------------------------------------------------------------------------- /.gemini/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "contextFileName": ["CLAUDE.md","GEMINI.md"] 3 | } 4 | -------------------------------------------------------------------------------- /slide/slidev/.npmrc: -------------------------------------------------------------------------------- 1 | # for pnpm 2 | shamefully-hoist=true 3 | auto-install-peers=true 4 | -------------------------------------------------------------------------------- /docs/ai/img/mcp.docker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taka512/memo/HEAD/docs/ai/img/mcp.docker.png -------------------------------------------------------------------------------- /slide/marp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "@marp-team/marp-cli": "^4.2.3" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/ai/img/MCP-Gateway-blog-Fig.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taka512/memo/HEAD/docs/ai/img/MCP-Gateway-blog-Fig.avif -------------------------------------------------------------------------------- /docs/Firebase.md: -------------------------------------------------------------------------------- 1 | 2 | [Firebaseを1から100まで全て理解する](https://zenn.dev/nnishi425/books/firebase-complete-guide) 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/Docker.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## link 4 | 5 | [初心者がDockerfileを書くときに身につけたい5つの習慣](https://qiita.com/shota0616/items/8adad18c983f4e8301c0) -------------------------------------------------------------------------------- /slide/slidev/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | *.local 5 | .vite-inspect 6 | .remote-assets 7 | components.d.ts 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | auto-generated/ 2 | .obsidian/workspace.json 3 | .obsidian/community-plugins.json 4 | .obsidian/plugins/ 5 | node_modules 6 | -------------------------------------------------------------------------------- /docs/slidev.md: -------------------------------------------------------------------------------- 1 | マークダウンからslideを作成してくれるツール 2 | https://sli.dev/guide/ 3 | 4 | ## インストール 5 | 6 | ``` 7 | npm init slidev@latest 8 | ``` 9 | 10 | -------------------------------------------------------------------------------- /slide/slidev/Makefile: -------------------------------------------------------------------------------- 1 | FILE:= slides.md 2 | 3 | install: 4 | npm init slidev@latest 5 | 6 | # http://localhost:3030/ 7 | run: 8 | npm run dev -- $(FILE) 9 | -------------------------------------------------------------------------------- /slide/marp/test.md: -------------------------------------------------------------------------------- 1 | --- 2 | marp: true 3 | --- 4 | # タイトル 5 | 6 | --- 7 | # スライド1 8 | 9 | テスト 10 | 11 | --- 12 | # スライド2 13 | 14 | テスト 15 | 16 | --- 17 | -------------------------------------------------------------------------------- /slide/slidev/vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [ 3 | { "source": "/(.*)", "destination": "/index.html" } 4 | ], 5 | "buildCommand": "npm run build", 6 | "outputDirectory": "dist" 7 | } 8 | -------------------------------------------------------------------------------- /docs/ai/Gemini/Gemini-CLI-GitHubActions.md: -------------------------------------------------------------------------------- 1 | ## CLI への GitHub 連携 2 | 3 | ``` 4 | gemini /setup-github # 初回だけ実行 5 | ``` 6 | 7 | 8 | - [【最新】GitHub ActionsでGemini CLIを活用してみよう](https://zenn.dev/makumaaku/articles/15f56ac617a3af) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # overviews 2 | 3 | メモ保存用のリポジトリ 4 | 過去はwikiにメモを保存していたが、今後はwikiを更新せずにobidianでメモをレポジトリ保存する 5 | 6 | # 構成 7 | 8 | ``` 9 | bookmark/ ブックマーク 10 | docs/ 手動でまとめたメモ 11 | slide/ スライド作成領域 12 | ``` 13 | 14 | # 過去のメモ(wiki) 15 | 16 | https://github.com/taka512/memo/wiki 17 | -------------------------------------------------------------------------------- /docs/Batch.md: -------------------------------------------------------------------------------- 1 | 2 | バッチ処理について色々メモ 3 | 4 | 5 | ## link 6 | 7 | [バッチ設計ガイドライン](https://future-architect.github.io/arch-guidelines/documents/forBatch/batch_guidelines.html) 8 | [AWS Step Functionsでバッチ処理を並列化した話](https://tech.high-link.co.jp/entry/step-funtions-batch-proces-parallelization) -------------------------------------------------------------------------------- /slide/slidev/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "dist" 3 | command = "npm run build" 4 | 5 | [build.environment] 6 | NODE_VERSION = "20" 7 | 8 | [[redirects]] 9 | from = "/.well-known/*" 10 | to = "/.well-known/:splat" 11 | status = 200 12 | 13 | [[redirects]] 14 | from = "/*" 15 | to = "/index.html" 16 | status = 200 17 | -------------------------------------------------------------------------------- /slide/slidev/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to [Slidev](https://github.com/slidevjs/slidev)! 2 | 3 | To start the slide show: 4 | 5 | - `pnpm install` 6 | - `pnpm dev` 7 | - visit 8 | 9 | Edit the [slides.md](./slides.md) to see the changes. 10 | 11 | Learn more about Slidev at the [documentation](https://sli.dev/). 12 | -------------------------------------------------------------------------------- /docs/ai/Codex/Codex-Sdk.md: -------------------------------------------------------------------------------- 1 | 2 | https://developers.openai.com/codex/sdk 3 | 4 | 5 | Agent Builder 6 | エージェンティックワークフローを構築、デプロイ、最適化するためのツール。 7 | チャット UI をカスタマイズして埋め込む ChatKit、WYSIWYG のワークフロークリエイターの Agent Builder 8 | 安全性のために入出力をフィルタリングする Guardrails、 9 | データセットやスコアリング、プロンプト最適化のための Evals の四つの機能からなる。 10 | https://platform.openai.com/agent-builder/edit -------------------------------------------------------------------------------- /slide/slidev/snippets/external.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | // #region snippet 4 | // Inside ./snippets/external.ts 5 | export function emptyArray(length: number) { 6 | return Array.from({ length }) 7 | } 8 | // #endregion snippet 9 | 10 | export function sayHello() { 11 | console.log('Hello from snippets/external.ts') 12 | } 13 | -------------------------------------------------------------------------------- /slide/slidev/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slidev", 3 | "type": "module", 4 | "private": true, 5 | "scripts": { 6 | "build": "slidev build", 7 | "dev": "slidev --open", 8 | "export": "slidev export" 9 | }, 10 | "dependencies": { 11 | "@slidev/cli": "^52.1.0", 12 | "@slidev/theme-default": "latest", 13 | "@slidev/theme-seriph": "latest", 14 | "vue": "^3.5.18" 15 | } 16 | } -------------------------------------------------------------------------------- /docs/terraform.md: -------------------------------------------------------------------------------- 1 | 2 | - [一般的なスタイルと構造に関するベスト プラクティス](https://cloud.google.com/docs/terraform/best-practices/general-style-structure?hl=ja) 3 | - [モジュールとは](https://www.ntt-tx.co.jp/column/iac/231204/) 4 | - [Module creation - recommended pattern](https://developer.hashicorp.com/terraform/tutorials/modules/pattern-module-creation) 5 | - [Standard Module Structure](https://developer.hashicorp.com/terraform/language/modules/develop/structure) -------------------------------------------------------------------------------- /docs/ai/GithubCopilot/GitHubCopilot-CLI.md: -------------------------------------------------------------------------------- 1 | 2 | ## install 3 | 4 | ``` 5 | npm install -g @github/copilot 6 | ``` 7 | 8 | ## 設定 9 | 10 | ``` 11 | 1. Visit https://github.com/settings/personal-access-tokens/new 12 | 2. Under "Permissions," click "add permissions" and select "Copilot Requests" 13 | 3. Generate your token 14 | 4. Add the token to your environment via the environment variable `GH_TOKEN` or `GITHUB_TOKEN` (in order of precedence) 15 | ``` 16 | 17 | 18 | ## 実行 19 | 20 | copilot 21 | -------------------------------------------------------------------------------- /slide/slidev/pages/imported-slides.md: -------------------------------------------------------------------------------- 1 | # Imported Slides 2 | 3 | You can split your slides.md into multiple files and organize them as you want using the `src` attribute. 4 | 5 | #### `slides.md` 6 | 7 | ```markdown 8 | # Page 1 9 | 10 | Page 2 from main entry. 11 | 12 | --- 13 | 14 | ## src: ./subpage.md 15 | ``` 16 | 17 |
18 | 19 | #### `subpage.md` 20 | 21 | ```markdown 22 | # Page 2 23 | 24 | Page 2 from another file. 25 | ``` 26 | 27 | [Learn more](https://sli.dev/guide/syntax.html#importing-slides) 28 | -------------------------------------------------------------------------------- /.obsidian/graph.json: -------------------------------------------------------------------------------- 1 | { 2 | "collapse-filter": true, 3 | "search": "", 4 | "showTags": false, 5 | "showAttachments": false, 6 | "hideUnresolved": false, 7 | "showOrphans": true, 8 | "collapse-color-groups": true, 9 | "colorGroups": [], 10 | "collapse-display": true, 11 | "showArrow": false, 12 | "textFadeMultiplier": 0, 13 | "nodeSizeMultiplier": 1, 14 | "lineSizeMultiplier": 1, 15 | "collapse-forces": true, 16 | "centerStrength": 0.518713248970312, 17 | "repelStrength": 10, 18 | "linkStrength": 1, 19 | "linkDistance": 250, 20 | "scale": 1, 21 | "close": true 22 | } -------------------------------------------------------------------------------- /bookmark/mcp/プレビュー AWS Knowledge MCP Serverを使ってみた DevelopersIO.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "[プレビュー] AWS Knowledge MCP Serverを使ってみた | DevelopersIO" 3 | source: "https://dev.classmethod.jp/articles/aws-knowledge-mcp-server-available-preview/" 4 | author: 5 | - "[[のんピ]]" 6 | published: 2025-07-18 7 | created: 2025-10-14 8 | description: "AWSが絡む操作では必須で使用する形になりそうな予感" 9 | tags: 10 | - "clippings" 11 | image: "https://images.ctfassets.net/ct0aopd36mqt/4AJd3M26yescaNaY21CYmQ/9730e95c53a7b3049c6da6d4c0b1dec9/mcp.png" 12 | --- 13 | claude mcp add \\ awslabs.aws-knowledge-mcp-server \\ \-s user \\ -- npx mcp-remote https://knowledge-mcp.global.api.aws -------------------------------------------------------------------------------- /bookmark/react/React 19の新機能まるわかり.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "React 19の新機能まるわかり" 3 | source: "https://zenn.dev/uhyo/books/react-19-new" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2024-05-29 7 | created: 2025-10-15 8 | description: "2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。" 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--GJ4y66ZQ--/g_center%2Ch_280%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci9iYzU0MTk0MDFlLmpwZw==%2Cw_200/v1627283836/default/og-base-book_yz4z02.jpg?_a=BACAGSGT" 12 | --- 13 | [![uhyo](https://storage.googleapis.com/zenn-user-upload/avatar/5cb1e02e4d.jpeg) uhyo](https://zenn.dev/uhyo) 14 | 15 | [¥0 今すぐ読む](https://zenn.dev/uhyo/books/react-19-new/viewer/actions) 16 | 17 | 1221 -------------------------------------------------------------------------------- /slide/slidev/components/Counter.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 38 | -------------------------------------------------------------------------------- /.obsidian/core-plugins.json: -------------------------------------------------------------------------------- 1 | { 2 | "file-explorer": true, 3 | "global-search": true, 4 | "switcher": true, 5 | "graph": true, 6 | "backlink": true, 7 | "canvas": true, 8 | "outgoing-link": true, 9 | "tag-pane": true, 10 | "properties": false, 11 | "page-preview": true, 12 | "daily-notes": true, 13 | "templates": true, 14 | "note-composer": true, 15 | "command-palette": true, 16 | "slash-command": false, 17 | "editor-status": true, 18 | "bookmarks": true, 19 | "markdown-importer": false, 20 | "zk-prefixer": false, 21 | "random-note": false, 22 | "outline": true, 23 | "word-count": true, 24 | "slides": false, 25 | "audio-recorder": false, 26 | "workspaces": false, 27 | "file-recovery": true, 28 | "publish": false, 29 | "sync": true, 30 | "webviewer": false, 31 | "footnotes": false, 32 | "bases": true 33 | } -------------------------------------------------------------------------------- /bookmark/react/Webフロントエンドの難しさと面白さ 2025.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Webフロントエンドの難しさと面白さ 2025" 3 | source: "https://zenn.dev/ka2jun8/books/web-frontend-2025" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-05-16 7 | created: 2025-10-15 8 | description: "Webフロントエンドエンジニアの役割は、見た目を作る仕事からUX全体をデザインする仕事へと進化しています。必要なスキルの広さや設計のリアル、面白さややりがいまで、今のフロントエンドの全体像を等身大でまとめました。" 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--4jBuwvdF--/g_center%2Ch_280%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci81MjE3MGEwNTUwLmpwZWc=%2Cw_200/v1627283836/default/og-base-book_yz4z02.jpg?_a=BACAGSGT" 12 | --- 13 | [![J](https://lh3.googleusercontent.com/a/AATXAJzVRSmBlAsu71KxffzDzcUkTSodaTVP5mbnzmYw=s96-c) J](https://zenn.dev/ka2jun8) 14 | 15 | [¥0 今すぐ読む](https://zenn.dev/ka2jun8/books/web-frontend-2025/viewer/introduction) 16 | 17 | 222 -------------------------------------------------------------------------------- /docs/default-clipper.json: -------------------------------------------------------------------------------- 1 | { 2 | "schemaVersion": "0.1.0", 3 | "name": "デフォルト", 4 | "behavior": "create", 5 | "noteContentFormat": "{{content}}", 6 | "properties": [ 7 | { 8 | "name": "title", 9 | "value": "{{title}}", 10 | "type": "text" 11 | }, 12 | { 13 | "name": "source", 14 | "value": "{{url}}", 15 | "type": "text" 16 | }, 17 | { 18 | "name": "author", 19 | "value": "{{author|split:\\\", \\\"|wikilink|join}}", 20 | "type": "multitext" 21 | }, 22 | { 23 | "name": "published", 24 | "value": "{{published}}", 25 | "type": "date" 26 | }, 27 | { 28 | "name": "created", 29 | "value": "{{date}}", 30 | "type": "date" 31 | }, 32 | { 33 | "name": "description", 34 | "value": "{{description}}", 35 | "type": "text" 36 | }, 37 | { 38 | "name": "tags", 39 | "value": "clippings", 40 | "type": "multitext" 41 | }, 42 | { 43 | "name": "image", 44 | "value": "{{image}}", 45 | "type": "text" 46 | } 47 | ], 48 | "triggers": [], 49 | "noteNameFormat": "{{title}}", 50 | "path": "bookmark" 51 | } -------------------------------------------------------------------------------- /docs/Obsidian.md: -------------------------------------------------------------------------------- 1 | メモツールのObsidianのあれこれ 2 | ## Obsidian Bases 3 | 4 | obsidian Basesとは既存のObsidianノートをまとめてデータベースのように扱う事ができるプラグイン by [Obsidian Bases 入門](https://note.com/shotovim/n/n20d31913131b) 5 | テーブル形式とかカード形式で表示してくれる 6 | 7 | ## Web Clipper 8 | 9 | obsidianに開いているWebページの概要をブックマーク保存する by [Obsidianに記事メモをためる Web Clipper](https://zenn.dev/sh11235/articles/07bb24f98b93e7) 10 | OPTION + SHIFT + Oでブラウザからブックマーク可能 11 | 12 | 設定からインポートする設定の例 13 | ![[docs/default-clipper.json]] 14 | 15 | ## Obsidian MCP 16 | 17 | obsidianにMCP経由でLLMからアクセス可能にする 18 | 19 | 設定 -> コミュニティプラグインで「MCP tools」「Local REST API」をインストール 20 | ちなみにプラグインはvalue設定ごとにインストールが必要となる 21 | 22 | 設定 -> コミュニティプラグイン「MCP tools」を選択してMCPサーバーをインストール 23 | ClaudeDesktopであれば「claude_desktop_config.json」に以下の設定を行う 24 | ``` 25 | stakahashi$ cat ~/Library/Application\ Support/Claude/claude_desktop_config.json 26 | { 27 | "mcpServers": { 28 | "obsidian-mcp": { 29 | "command": ".obsidian/plugins/mcp-tools/bin/mcp-server", 30 | "env": { 31 | "OBSIDIAN_API_KEY": "xxxx" 32 | } 33 | }, 34 | ``` 35 | ※ OBSIDIAN_API_KEYの値はLocal REST APIから取得 36 | -------------------------------------------------------------------------------- /docs/ai/Kiro.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## kiroの設定 4 | 5 | 6 | - ワークスペース 7 | - 現在のプロジェクト／ワークスペース固有 8 | - .kiro/settings/mcp.json に保存 9 | - ユーザー 10 | - 全プロジェクト／ワークスペースに適用 11 | - ホームディレクトリ（~/.kiro/settings/mcp.json）に保存 12 | 13 | 14 | ## ドキュメント 15 | 16 | - requirements.md 17 | - EARS（Easy Approach to Requirements Syntax）形式での要件定義 18 | - design.md 19 | - 技術スタックとアーキテクチャの記述 方式レベルの設計資料 20 | - tasks.md 21 | - 実装からデプロイまでの詳細な手順 方式設計書をもとに実際に構築を進めるための作業手順書 22 | 23 | ## MCP 24 | 25 | docker MCPへの接続設定 26 | 27 | ``` 28 | cat ~/.kiro/settings/mcp.json 29 | { 30 | "mcpServers": { 31 | "MCP_DOCKER": { 32 | "type": "stdio", 33 | "command": "docker", 34 | "args": ["mcp", "gateway", "run"], 35 | "env": {} 36 | } 37 | } 38 | } 39 | ``` 40 | 41 | 42 | 43 | ## link 44 | 45 | - [AWS Kiro のインストールと MCP サーバーへの接続（Docker MCP Toolkit）完全ガイド](https://note.com/create_ash/n/nf10348b8f3b6) 46 | - [インフラ屋さんはAIコーディングエージェントとどう生きるか ~ Kiroを使ったWebシステムなアーキテクチャ構築をしてハマった話](https://tech.nri-net.com/entry/building_a_web_system_architecture_using_kiro) 47 | - [Kiro と Model Context Protocol (MCP) で開発生産性を解き放つ](https://aws.amazon.com/jp/blogs/news/unlock-your-development-productivity-with-kiro-and-mcp/) 48 | 49 | -------------------------------------------------------------------------------- /bookmark/claude/Claude Codeでn8nワークフロー作るのが楽すぎて、もう手動で作る気が起きない件.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Claude Codeでn8nワークフロー作るのが楽すぎて、もう手動で作る気が起きない件" 3 | source: "https://zenn.dev/ryorn/articles/a6dc96dc425669" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-08-02 7 | created: 2025-10-14 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--dEbtYGC7--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Claude%2520Code%25E3%2581%25A7n8n%25E3%2583%25AF%25E3%2583%25BC%25E3%2582%25AF%25E3%2583%2595%25E3%2583%25AD%25E3%2583%25BC%25E4%25BD%259C%25E3%2582%258B%25E3%2581%25AE%25E3%2581%258C%25E6%25A5%25BD%25E3%2581%2599%25E3%2581%258E%25E3%2581%25A6%25E3%2580%2581%25E3%2582%2582%25E3%2581%2586%25E6%2589%258B%25E5%258B%2595%25E3%2581%25A7%25E4%25BD%259C%25E3%2582%258B%25E6%25B0%2597%25E3%2581%258C%25E8%25B5%25B7%25E3%2581%258D%25E3%2581%25AA%25E3%2581%2584%25E4%25BB%25B6%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:ryooo%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzFjZTMzNTdiMjYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | -------------------------------------------------------------------------------- /docs/ai/ClaudeCode/ClaudeCode-Serena.md: -------------------------------------------------------------------------------- 1 | 2 | [コーディングエージェントの能力を拡張する Serena を試してみた](https://azukiazusa.dev/blog/serena-coding-agent/)を参考に設定 3 | 4 | serenaをローカルで起動 5 | 6 | ``` 7 | uvx --from git+https://github.com/oraios/serena serena start-mcp-server 8 | ``` 9 | 10 | claude codeにMCP設定を追加 11 | 12 | ``` 13 | claude mcp add serena -s project -- uvx --from git+https://github.com/oraios/serena serena start-mcp-server --context ide-assistant --project $(pwd) 14 | ``` 15 | 16 | claude desktopにMCP設定を追加 17 | 18 | ``` 19 | { 20 | "mcpServers": { 21 | "serena": { 22 | "type": "stdio", 23 | "command": "uvx", 24 | "args": [ 25 | "--from", 26 | "git+https://github.com/oraios/serena", 27 | "serena", 28 | "start-mcp-server", 29 | "--context", 30 | "ide-assistant", 31 | "--project", 32 | "/Users/xxx/sapper-blog-app" 33 | ], 34 | "env": {} 35 | }, 36 | } 37 | } 38 | ``` 39 | 40 | 41 | ## プロジェクトで最初にやる事 42 | 43 | オンボーディング 44 | 45 | ``` 46 | 「Serena のオンボーディングを開始してください」プロンプトに入力 47 | オンボーディング完了後に「/clear」 48 | ``` 49 | 50 | 51 | プロジェクトの設定ファイル 52 | 53 | ``` 54 | .serena/project.yml 55 | ``` 56 | 57 | -------------------------------------------------------------------------------- /docs/ai/mcp.md: -------------------------------------------------------------------------------- 1 | 2 | MCPはPCに直接設定する方法をDocker MCP Gatewayを利用してDocker経由でMCPを利用する方法がある 3 | ローカル環境はなるべく汚したくないのでDocker MCP Gatewayを採用 4 | 5 | ![[MCP-Gateway-blog-Fig.avif]] 6 | 7 | ## Docker MCP Toolkit 8 | 9 | インストール 10 | 11 | ``` 12 | ## リリース一覧から最新バージョンを取得 13 | ## https://github.com/docker/mcp-gateway/releases 14 | $ wget https://github.com/docker/mcp-gateway/releases/download/v0.13.0/docker-mcp-linux-amd64.tar.gz 15 | $ tar xvfz docker-mcp-linux-amd64.tar.gz 16 | $ mkdir -p ~/.docker/cli-plugins 17 | $ mv docker-mcp ~/.docker/cli-plugins 18 | $ chmod +x ~/.docker/cli-plugins/docker-mcp 19 | ``` 20 | 21 | MCPの設定はダッシュボードから有効化するのが良さそう（認証もそこでできる） 22 | 23 | ![[mcp.docker.png]] 24 | 25 | カタログ一覧 26 | ``` 27 | docker mcp catalog show 28 | ``` 29 | MCP有効化 30 | ``` 31 | docker mcp server enable fetch 32 | ``` 33 | MCP無効化 34 | ``` 35 | docker mcp server disable slack 36 | ``` 37 | 一覧 38 | ``` 39 | docker mcp server list 40 | ``` 41 | 42 | ## MCP server 43 | 44 | [MCP Servers for agent mode](https://code.visualstudio.com/mcp) 45 | 46 | 利用するMCP server 47 | 48 | - Playwright MCP 49 | - ブラウザテストを行う。スクショ撮ってくれる 50 | - GitHub MCP Server 51 | - githubの操作 52 | - Fetch MCP Server 53 | - Webページを取得して、その内容をMarkdownに変換する 54 | - terraform 55 | - terraformの知見を授けてくれるっぽい 56 | - AWS Documentation 57 | - AWSの知見を授けてくれる 58 | - AWS Terraform 59 | - AWS terraformでのbest practiceを授けてくれる 60 | 61 | ## GitHub MCP Registry 62 | 63 | https://www.publickey1.jp/blog/25/githubmcpgithub_mcp_registry.html 64 | 65 | ## AWS Knowledge MCP Server 66 | 67 | 設定例 68 | 69 | ``` 70 | { 71 | "mcpServers": { 72 | "aws-knowledge-mcp-server": { 73 | "url": "https://knowledge-mcp.global.api.aws" 74 | } 75 | } 76 | } 77 | ``` 78 | 79 | 80 | ## link 81 | 82 | - [MCPとは何か 〜AIエージェントの為の標準プロトコル〜](https://blog.cloudnative.co.jp/27994/) 83 | - [Model Context Protocol（MCP）とは？生成 AI の可能性を広げる新しい標準](https://zenn.dev/cloud_ace/articles/model-context-protocol) 84 | - [Obsidian MCPサーバーをClaude Desktopで使ってみた](https://dev.classmethod.jp/articles/obsidian-mcp-claude-desktop-integration-hands-on/) 85 | - [o3 MCPでClaude Codeが最強の検索力を手に入れた](https://zenn.dev/yoshiko/articles/claude-code-with-o3) 86 | - [Docker MCP Gatewayがすんばらしい](https://qiita.com/moritalous/items/8789a37b7db451cc1dba) 87 | - [Docker MCP Gateway日本語](https://www.docker.com/ja-jp/blog/docker-mcp-gateway-secure-infrastructure-for-agentic-ai/) 88 | - [Docker MCP Gateway公式](https://docs.docker.com/ai/mcp-gateway/) 89 | - [MCPの認証と認可 - MCP Meetup Tokyo 2025](https://speakerdeck.com/hi120ki/mcp-authorization) 90 | 91 | -------------------------------------------------------------------------------- /docs/ai/Codex/Codex-CLI.md: -------------------------------------------------------------------------------- 1 | OpenAIのCLIインタフェースのAIエージェント 2 | 3 | ## 料金プラン 4 | 5 | https://openai.com/ja-JP/chatgpt/pricing/ 6 | 7 | ``` 8 | Free: Explore how AI can help with everyday tasks $0 9 | Plus: Level up productivity and creativity with expanded access $20 10 | Pro: Get the best of OpenAI with the highest level of access $200 11 | ``` 12 | 13 | ## インストール 14 | 15 | ``` 16 | npm install -g @openai/codex 17 | ``` 18 | 19 | 20 | ## 認証 21 | 22 | ``` 23 | codex login 24 | ``` 25 | 　※PRO plan以上でFreeはAPIのTOKENをOPENAI_API_KEYでexportする必要がある 26 | 27 | ## スラッシュコマンド 28 | 29 | ``` 30 | /init create an AGENTS.md file with instructions for Codex 31 | 現在のプロジェクトに対するAGENTS.mdテンプレートを生成 32 | 33 | /status show current session configuration and token usage 34 | 現在のセッション設定やトークン使用状況を表示 35 | 36 | /new start a new chat during a conversation 37 | 新しいチャットスレッドを開始し現在の対話履歴や一時メモリをリセット 38 | 39 | /mode 40 | 動作モードを切り替え。Codex CLIには後述する**「提案モード」「自動編集モード」「全自動モード」**の3形態があり、/modeコマンドで対話中にこれらを変更 41 | 42 | /compact summarize conversation to prevent hitting the context limit コンテキストの要約（圧縮）。対話履歴が長くなりモデルのコンテキスト上限に近づいた際、現在までの会話を要約して改めて会話を続けるためのコマンドです。 43 | Codex CLIは提案文や履歴を逐次保持しますが、長くなるとトークン制限に抵触するため、このコマンドで過去を短い要約に置き換えてコンテキストウィンドウを節約できます。 44 | 45 | 46 | /diff show git diff (including untracked files) 47 | 48 | 49 | /prompts show example prompts 50 | 51 | 52 | /logout log out of Codex 53 | /quit exit Codex 54 | ``` 55 | 56 | 57 | ## AGENTS.md 58 | 59 | Cluade CodeのCLAUDE.mdに相当する指示ファイル 60 | 61 | 62 | ## 設定ファイル 63 | 64 | 「~/.codex/config.toml」に記載 65 | 66 | ``` 67 | # approval mode 68 | approval_policy = "untrusted" 69 | sandbox_mode = "read-only" 70 | 71 | # full-auto mode 72 | approval_policy = "on-request" 73 | sandbox_mode = "workspace-write" 74 | 75 | # Optional: allow network in workspace-write mode 76 | [sandbox_workspace_write] 77 | network_access = true 78 | ``` 79 | 80 | ## 実行 81 | 82 | 読み取り/書き込みで実行 83 | 84 | ``` 85 | codex --sandbox workspace-write --ask-for-approval on-request 86 | 87 | Codex は、承認なしにワークスペース内でコマンドを実行したり、ファイルに書き込んだりできます。 88 | 他のフォルダへのファイルの書き込み、ネットワークへのアクセス、git の更新、その他サンドボックスで保護された操作を実行するには、Codex に許可が必要 89 | デフォルトでは、ワークスペースにはカレントディレクトリと /tmp などの一時ディレクトリが含まれます。ワークスペース内のディレクトリは、/status コマンドで確認可能 90 | ``` 91 | 92 | 読み取り専用で実行 93 | 94 | ``` 95 | codex --sandbox read-only --ask-for-approval on-request 96 | 97 | Codex は、承認なしに読み取り専用コマンドを実行できます。 98 | ファイルの編集、ネットワークへのアクセス、その他サンドボックスで保護された操作を実行するには、Codex に許可が必要です。 99 | バージョン管理されていないフォルダの推奨デフォルトです。 100 | ``` 101 | 102 | 質問なしで実行 103 | 104 | ``` 105 | codex --ask-for-approval never --sandbox read-only 106 | 107 | 同じワークスペースで複数のエージェントを並行して実行し、質問に回答させる場合 108 | ``` 109 | GPT-5で実行 110 | ``` 111 | codex --model gpt-5 --full-auto "Build a simple photobooth application with camera access in a single HTML file" 112 | ``` 113 | 114 | ## link 115 | 116 | - [OpenAI developer platform](https://platform.openai.com/docs/overview) 117 | - [CodeX(Github)](https://github.com/openai/codex) 118 | - [新Codex CLIの使い方](https://blog.lai.so/codex-rs-intro/) 119 | 120 | -------------------------------------------------------------------------------- /bookmark/claude/Claude Code入門 - AI駆動開発の基礎を1日で身につけよう.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Claude Code入門 - AI駆動開発の基礎を1日で身につけよう" 3 | source: "https://zenn.dev/tmasuyama1114/books/claude_code_basic" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-10-07 7 | created: 2025-10-14 8 | description: "こんにちは、とまだです。「Claude Codeって何？」「AIで本当にコードが書けるの？」と思ったことはありませんか？この本では Claued Code を使ったAI駆動開発の基本を 1日で身につけることができます。【こんな方におすすめ】・AI開発ツールに興味はあ" 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--u2HndVWx--/g_center%2Ch_280%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci9iMzZiMjNhODk3LnBuZw==%2Cw_200/v1627283836/default/og-base-book_yz4z02.jpg?_a=BACAGSGT" 12 | --- 13 | Chapters 14 | 15 | Claude Code とは？ 16 | 17 | Chapter 01 18 | 19 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/introduction_claude_code_overview)Claude Code のインストールと初期設定 20 | 21 | Chapter 02 22 | 23 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/introduction_installation_and_first_steps)Claude Code のオプションを使いこなそう 24 | 25 | Chapter 03 26 | 27 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/setup_and_basic_operations_claude_code_options)インタラクティブモードの操作を覚えよう 28 | 29 | Chapter 04 30 | 31 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/setup_and_basic_operations_interactive_mode)スラッシュコマンドを攻略しよう 32 | 33 | Chapter 05 34 | 35 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/setup_and_basic_operations_slash_commands)ターミナル設定を最適化しよう 36 | 37 | Chapter 06 38 | 39 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/setup_and_basic_operations_terminal_settings)CLAUDE.md によるメモリ管理を習得しよう 40 | 41 | Chapter 07 42 | 43 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/memory_and_settings_claude_md_memory)効率的なメモリ管理のコツ 44 | 45 | Chapter 08 46 | 47 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/memory_and_settings_memory_tips)settings.json で Claude Code を制御しよう 48 | 49 | Chapter 09 50 | 51 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/memory_and_settings_settings_json)カスタムコマンドを作成・活用しよう 52 | 53 | Chapter 10 54 | 55 | [View original](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/memory_and_settings_custom_commands) 56 | 57 | Author 58 | 59 | [![とまだ@AI 駆動開発教育者](https://storage.googleapis.com/zenn-user-upload/avatar/62591c0d46.jpeg)](https://zenn.dev/tmasuyama1114) 60 | 61 | [とまだ@AI 駆動開発教育者](https://zenn.dev/tmasuyama1114) 62 | 63 | AI駆動開発フリーランスエンジニア｜Youtube・コミュニティ「Vibe Coding Studio」運営 | カナダ在住 | Udemyベストセラー講師｜AI 駆動開発導入の支援 | Claude Code / Codex / Cursor / 64 | 65 | Topics 66 | 67 | [¥0 今すぐ読む](https://zenn.dev/tmasuyama1114/books/claude_code_basic/viewer/introduction_claude_code_overview) 68 | 69 | 公開 70 | 71 | NEW 72 | 73 | 本文更新 74 | 75 | NEW 76 | 77 | 文章量 78 | 79 | 約39,106字 80 | 81 | 価格 82 | 83 | 0円 84 | 85 | 193 86 | 87 | [ポスト](https://twitter.com/intent/tweet?url=https://zenn.dev/tmasuyama1114/books/claude_code_basic&text=Claude%20Code%E5%85%A5%E9%96%80%20-%20AI%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA%E3%81%AE%E5%9F%BA%E7%A4%8E%E3%82%921%E6%97%A5%E3%81%A7%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%91%E3%82%88%E3%81%86%EF%BD%9C%E3%81%A8%E3%81%BE%E3%81%A0%40%20AI%20%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA%E6%95%99%E8%82%B2%E8%80%85&hashtags=zenn) 88 | 89 | Claude Code入門 - AI駆動開発の基礎を1日で身につけよう -------------------------------------------------------------------------------- /docs/ai/ClaudeCode/ClaudeCode.md: -------------------------------------------------------------------------------- 1 | 2 | ## 料金 3 | 4 | https://claude.ai/upgrade 5 | 6 | ``` 7 | Free: $0 8 | Pro: $20 9 | Max: $100 10 | Max: $200 11 | ``` 12 | 13 | ## install 14 | 15 | ``` 16 | npm install -g @anthropic-ai/claude-code 17 | ``` 18 | 19 | 認証 20 | 21 | ``` 22 | /login 23 | ``` 24 | 25 | [利用料のページ](https://claude.ai/settings/usage) 26 | ## MCP 27 | 28 | **Claude Desktopでのmcpの設定** 29 | 30 | 「設定」→「開発者」→「設定」から編集可能 31 | 32 | ``` 33 | cat ~/Library/Application\ Support/Claude/claude_desktop_config.json 34 | { 35 | "mcpServers": { 36 | "aws-knowledge-mcp-server": { 37 | "command": "uvx", 38 | "args": [ 39 | "fastmcp", 40 | "run", 41 | "https://knowledge-mcp.global.api.aws" 42 | ] 43 | }, 44 | "MCP_DOCKER": { 45 | "command": "docker", 46 | "args": ["mcp", "gateway", "run"] 47 | } 48 | } 49 | } 50 | ``` 51 | 52 | **Claude Code での設定** 53 | 54 | ``` 55 | ## aws knowledge 56 | claude mcp add aws-knowledge-mcp-server -s user -- npx mcp-remote https://knowledge-mcp.global.api.aws 57 | 58 | ## MCP gateway 59 | claude mcp add -s user mcp-docker docker mcp gateway run 60 | ``` 61 | 62 | mcpの設定がエラーの場合はログに出力 63 | 64 | ``` 65 | tail -n 20 -F ~/Library/Logs/Claude/mcp*.log 66 | ``` 67 | ## command option 68 | 69 | ``` 70 | # Claude Codeの起動 71 | claude 72 | 73 | # 特定のディレクトリで起動 74 | claude /path/to/project 75 | 76 | # 最新版への更新 77 | claude update 78 | 79 | # 前回の会話を継続 80 | claude -c 81 | 82 | # 会話履歴を参照して起動 83 | claude -r 84 | 85 | # バージョン確認 86 | claude --version 87 | 88 | # 一回限りのタスクを実行 89 | claude "fix the build error" 90 | 91 | # 一回限りのクエリを実行して終了 92 | claude -p "explain this function" 93 | 94 | # Gitコミットを作成 95 | claude commit 96 | 97 | ``` 98 | ## slash command 99 | 100 | ``` 101 | コマンドで効率化 102 | claudeコマンドを実行すると、Claude Codeが起動し、プロンプトを入力できるようになりますが、先頭に/をつけると、Claude Codeの便利ツールが使えます。 103 | 104 | # ディレクトリ初期化 105 | /init 106 | 107 | # モデルの切り替え（Sonnet/Opus） 108 | > /model 109 | 110 | # コンテキストに別フォルダを追加 111 | > /add-dir 112 | 113 | # 会話履歴をクリア 114 | > /clear 115 | 116 | # コマンド確認 117 | /help 118 | 119 | # 今読み込んでいるメモリーを確認 120 | /memory 121 | ``` 122 | 123 | ## Sub agents 124 | 125 | - [Claude CodeのSub agentsでコンテキスト枯渇問題をサクッと解決できたはなし](https://zenn.dev/tacoms/articles/552140c84aaefa) 126 | - [Claude Code Sub Agents 実践ガイド：自動委任機能の効果的な活用法！](https://zenn.dev/asuene/articles/d05c8b70da8365) 127 | - [Claude Code でカスタムサブエージェントを作成する](https://azukiazusa.dev/blog/create-custom-sub-agent-in-claude-code/) 128 | 129 | ## SuperClaude 130 | 131 | - [Claude Codeに専門家チームを追加！開発効率を向上させるSuperClaudeを試してみた](https://dev.classmethod.jp/articles/claude-code-superclaude/) 132 | 133 | ## link 134 | 135 | 136 | - [Claude Code を初めて使う人向けの実践ガイド](https://zenn.dev/hokuto_tech/articles/86d1edb33da61a) 137 | - [Claude Code ベストプラクティス](https://zenn.dev/farstep/articles/claude-code-best-practices) 138 | - [Claude Codeを徹底解説してみた（前編）](https://dev.classmethod.jp/articles/get-started-claude-code-1/) 139 | - [Claude Codeを徹底解説してみた（後編）](https://dev.classmethod.jp/articles/get-started-claude-code-2nd/) 140 | - [Claude Codeに保守しやすいコードを書いてもらうための事前準備やガードレール](https://www.memory-lovers.blog/entry/2025/06/12/074355) 141 | - [Claude Code Actions を試した！！ && Devin のようにSlackから話しかけたい！！！](https://www.ikkitang1211.site/entry/2025/05/27/232943) 142 | - [Claude Codeをサンドボックス上で実行する(Mac編)](https://zenn.dev/todesking/articles/claude-code-with-sandbox-exec) 143 | - [# Claude Code × HCP Terraformでセキュアなインフラ自動構築を実現する](https://dev.classmethod.jp/articles/claude-code-hcp-tf-authentication-information-management/) 144 | -------------------------------------------------------------------------------- /bookmark/react/React-Reduxのconnect()関数についてまとめ.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "React-Reduxのconnect()関数についてまとめ" 3 | source: "https://zenn.dev/tk4/articles/820b0baeb41ee3fdaddf" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2020-10-20 7 | created: 2025-10-15 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--wgZsdVEw--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:React-Redux%25E3%2581%25AEconnect%2528%2529%25E9%2596%25A2%25E6%2595%25B0%25E3%2581%25AB%25E3%2581%25A4%25E3%2581%2584%25E3%2581%25A6%25E3%2581%25BE%25E3%2581%25A8%25E3%2582%2581%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:Takeru%2520Iino%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzQwNWQ0ZGZlZTIuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | 13[tech](https://zenn.dev/tech-or-idea) 14 | 15 | 今回は、現在勉強中のReact-Reduxで使用するconnect関数について書きたいと思います。 16 | 17 | ``` 18 | そもそもReduxとは何か？ 19 | ``` 20 | 21 | Reactでは、各コンポーネントでstateを管理します。 22 | Reduxとは、Reactとは別の場所であるstoreという場所で、このstateを一括管理できるライブラリーの名称です。 23 | 24 | ``` 25 | connect関数とは？ 26 | ``` 27 | 28 | 上記で述べた通り、stateを一括管理しているReduxのstoreは、Reactとは別の場所にあるので、Componentとstoreを繋げる必要があり、そのためにconnect関数を使います。 29 | 30 | ``` 31 | 具体的なconnect関数の役割 32 | ``` 33 | 34 | 1. storeからcomponentに必要なstateを取得する。 35 | 2. storeのstateを書き換えられるようにする 36 | 37 | 実際に構文をみてみると以下のようになります。 38 | 39 | ``` 40 | connect(mapStateToProps,mapDispatchToProps)(component) 41 | ``` 42 | 43 | 1. mapStateToProps 44 | stateを取得するための関数。connect関数の第一引数に渡す。 45 | 2. mapDispatchToProps 46 | stateを書き換えるための関数。 47 | connect関数の第二引数に渡す。 48 | 49 | mapStateToPropsの例 50 | 51 | ``` 52 | const mapStateToProps = state => ({ 53 | count: state.value 54 | }) 55 | ``` 56 | 57 | この場合、オブジェクトである{ count: state.value }が、storeにあるstateであり、componentで取得することができます。componentではthis.props.countといった形でpropsからstateの値を参照できます。 58 | 59 | ``` 60 | const mapDispatchToProps = dispatch => ({ 61 | increment: () => dispatch(increment()) 62 | }) 63 | ``` 64 | 65 | dispatch()の引数にactionを渡すことで、reducerからstateの変更を行うことが可能になります。この場合actionは、actionそのものではなく、actionを発行するactionCreatorを渡します。 66 | 67 | actionとactionCreator 68 | 69 | ``` 70 | const increment = () => ({ 71 | type: "INCREMENT" 72 | }) 73 | ``` 74 | 75 | actionは、{type: "INCREMENT"}であり、オブジェクトです。 76 | actionCreatorは、increment（）であり、actionを返す関数です。 77 | mapStateToPropsと同様に、componentではthis.props.increment()といった形でdispatchを行い、typeに応じたstateの変更処理がreducerで行われます。 78 | 79 | componentの全体像はこんな感じです。 80 | 81 | ``` 82 | class App extends Component { 83 | render() { 84 | const { 85 | handleIncrement, 86 | handleDecrement, 87 | value 88 | } = this.props; 89 | return ( 90 |
91 |
value: {value}
92 | 93 | 94 |
95 | ); 96 | } 97 | } 98 | const mapStateToProps = (state) => { 99 | return { value: state.count.value };　 100 | }; 101 | const mapDispatchToProps = (dispatch) => { 102 | return { 103 | handleIncrement: () => dispatch(increment()), 104 | handleDecrement: () => dispatch(decrement()) 105 | }; 106 | }; 107 | export default connect(mapStateToProps, mapDispatchToProps)(App); 108 | ``` 109 | 110 | 以上、かなり簡単にですが、自分が勉強した事のアウトプットも兼ねて、まとめさせて頂きました。 111 | もし何か解釈が間違っている所などがありましたら、ぜひコメントよろしくお願い致します。 112 | 113 | 少しでもお役に立てたら幸いです。 114 | 115 | 13 116 | 117 | ### Discussion 118 | 119 | ![](https://static.zenn.studio/images/drawing/discussion.png) 120 | 121 | ログインするとコメントできます -------------------------------------------------------------------------------- /docs/ai/Gemini/Gemini-CLI.md: -------------------------------------------------------------------------------- 1 | 2 | GooleのCLIインタフェースのAIエージェント 3 | 4 | ## 料金プラン 5 | 6 | https://gemini.google/subscriptions/ 7 | 8 | ``` 9 | free ￥0 10 | Pro: ￥2,900 11 | Ultra: ￥36,400 12 | ``` 13 | 14 | 15 | ## インストール 16 | 17 | ``` 18 | sudo npm install -g @google/gemini-cli 19 | ``` 20 | 21 | ## 実行 22 | 23 | インタラティブモードで実行 24 | 25 | ``` 26 | gemini 27 | ``` 28 | 29 | コマンドプロンプトから実行 30 | 31 | ``` 32 | gemini --prompt "1から10までの素数をリストアップして" 33 | ``` 34 | 35 | ## 書式 36 | 37 | 接頭辞 38 | ``` 39 | - `@<ファイルパス>` または `@<ディレクトリパス>` 40 | 指定されたファイルまたはディレクトリの内容を読み込み、プロンプトのコンテキストに含めます。`.gitignore` を尊重するため、不要なファイル（`node_modules` など）は自動的に除外されます。 41 | 例: `@src/utils.ts この関数のテストを書いてください。` 42 | 43 | - `!<シェルコマンド>` 44 | 指定されたコマンドを直接シェルで実行し、結果を表示します。 45 | 例: `!git diff --staged` 46 | 47 | - `!` (単体) 48 | シェルモードのオン/オフを切り替えます。シェルモード中は、すべての入力がシェルコマンドとして扱われます。 49 | ``` 50 | 51 | スラッシュコマンド 52 | 53 | ``` 54 | /quit または /exit 55 | Gemini CLIを終了します。 56 | 57 | /clear 58 | ターミナルの表示をクリアします。（ショートカット: Ctrl+L） 59 | 60 | /chat 61 | 会話の履歴を管理します。 62 | 63 | /chat save <タグ名>: 現在の会話に名前（タグ）を付けて保存します。 64 | /chat resume <タグ名>: 保存した会話を呼び出します。 65 | /chat list: 保存した会話のタグリストを表示します。 66 | /memory 67 | GEMINI.md ファイルによって読み込まれたAIの記憶（コンテキスト）を管理します。 68 | 69 | /memory show: 現在AIが記憶しているコンテキストの全内容を表示します。 70 | /memory refresh: GEMINI.md ファイルをすべて再読み込みします。 71 | /memory add <記憶させたいテキスト>: 現在のセッションに限り、一時的な記憶を追加します。 72 | /tools 73 | 現在利用可能なツールの一覧を表示します。 74 | 75 | /tools desc: 各ツールの詳細な説明を表示します。 76 | /mcp 77 | 接続されているMCP（Model Context Protocol）サーバーと、そこから提供されるツールの一覧を表示します。 78 | 79 | /restore [tool_call_id] 80 | --checkpointing が有効な場合、ツール実行前の状態にプロジェクトファイルを復元します。IDを指定しない場合は、復元可能なチェックポイントの一覧を表示します。 81 | 82 | /compress 83 | それまでの会話履歴をAIに要約させ、その要約でコンテキストを置き換えます。トークンを節約したい長い会話の途中で便利です。 84 | 85 | /stats 86 | 現在のセッションにおけるトークン使用量、API呼び出し回数、時間などの統計情報を表示します。 87 | 88 | /theme 89 | CLIの見た目のテーマを選択するダイアログを開きます。 90 | 91 | /auth 92 | 認証方法を変更するためのダイアログを開きます。 93 | 94 | /editor 95 | 差分表示などに使用するエディタを選択するダイアログを開きます。 96 | 97 | ``` 98 | 99 | ## コンテキストファイル 100 | 101 | 基本はGEMINI.mdだが以下の設定でCLAUDE.mdを優先設定可能 102 | ``` 103 | .gemini/settings.json 104 | { 105 | "contextFileName": ["CLAUDE.md","GEMINI.md"] 106 | } 107 | ``` 108 | 109 | ## サンドボックスモード 110 | 111 | ``` 112 | サンドボックスモードでの実行(-sをつける) 113 | gemini -s -p "hoge削除" 114 | ``` 115 | 116 | サンドボックスが守ってくれるもの 117 | 118 | ``` 119 | - ファイルシステムの保護 120 | 121 | ブロックされる操作: ホームディレクトリ直下の重要な設定ファイル（例: ~/.ssh/, ~/.gitconfig）や、ドキュメントフォルダ（例: ~/Documents/）など、指定された場所以外への書き込みが禁止されます。 122 | 許可される操作: 現在作業しているプロジェクトディレクトリ内でのファイル操作や、一時ディレクトリへの書き込みは許可されます。 123 | 124 | - ネットワークの制御 125 | 126 | 意図しない外部への通信を防ぐため、ネットワークアクセスを完全に遮断したり、特定のプロキシ経由の通信のみを許可したりといった制御が可能です。（詳細は後述のプロファイルで解説します） 127 | 128 | - プロセスの隔離 129 | 130 | サンドボックス内での操作は、ホストOSから隔離された環境で実行されます。これにより、システム全体に影響を及ぼすようなコマンドの実行が制限され、安全性が保たれます。 131 | ``` 132 | 133 | ## Gemini at MCP 134 | 135 | 個別のMCPの設定をする場合 136 | 137 | .gemini/settings.json 138 | ``` 139 | { 140 | "theme": "Xcode", 141 | "selectedAuthType": "oauth-personal", 142 | "mcpServers": { 143 | "qiita-mcp": { 144 | "command": "node", 145 | "args": [ 146 | "/Users/n0bisuke/ds/3_project/mcp/qiita-mcp/fetch-server.js" 147 | ], 148 | "env": { 149 | "QIITA_TOKEN": "XXXXXXXXXXXXXXXXXXX" 150 | } 151 | }, 152 | } 153 | } 154 | ``` 155 | 156 | ### Docker MCPの追加 157 | 158 | Docker MCPを経由する場合は個別のサーバーの設定はせずにDocker MCP serverの設定 159 | 160 | ``` 161 | ~/.gemini/settings.json 162 | { 163 | "mcpServers": { 164 | "MCP_DOCKER": { 165 | "command": "docker", 166 | "args": ["mcp", "gateway", "run"], 167 | "env": {} 168 | } 169 | } 170 | } 171 | ``` 172 | 173 | インストールの確認 174 | 175 | 176 | ``` 177 | $ gemini 178 | 179 | > /mcp 180 | 181 | ℹ Configured MCP servers: 182 | 183 | 🟢 MCP_DOCKER - Ready (1 tools) 184 | - fetch 185 | ``` 186 | 187 | ## Gemini Code Assist 188 | 189 | IDEのコーディングアシスタント 190 | 191 | ### .gemini/styleguide.md 192 | 193 | リポジトリ内に.gemini/styleguide.mdを作成するとgeminiの動作のカスタマイズが行える 194 | https://developers.google.com/gemini-code-assist/docs/customize-gemini-behavior-github?hl=ja 195 | 196 | ## link 197 | 198 | - [Gemini CLIの全社利用を支える技術](https://techblog.zozo.com/entry/technologies-supporting-company-wide-use-of-gemini-cli) 199 | - [Gemini CLI の簡単チュートリアル](https://zenn.dev/schroneko/articles/gemini-cli-tutorial) 200 | - [Gemini CLI のサンドボックス機能とは](https://tech.algomatic.jp/entry/2025/06/26/055948) -------------------------------------------------------------------------------- /CLAUDE.md: -------------------------------------------------------------------------------- 1 | # 標準ドキュメント構成 構築プロンプト 2 | 3 | ## 目的 4 | プロジェクトのドキュメントを、人間とAIの両方にとって分かりやすく、メンテナンス性の高い標準構成に再構築します。特に、[Diátaxisフレームワーク](https://diataxis.fr/)の考え方を全面的に採用し、ドキュメントをその目的に応じて明確に分類します。 5 | 6 | ## 指示 7 | 以下の手順に従って、プロジェクトのドキュメントを **日本語で** 再構築してください。 8 | 9 | --- 10 | 11 | ### フェーズ1: 現状分析と情報整理 12 | 13 | 1. **既存ドキュメントの分析**: 14 | 現在の `README.md` や、その他存在するすべてのドキュメントを読み込み、内容を完全に把握してください。 15 | 16 | 2. **情報の分類 (Diátaxis)**: 17 | 分析した内容を、Diátaxisフレームワークの4つのカテゴリに分類・整理してください。 18 | - **チュートリアル (Tutorials)**: プロジェクトのセットアップ手順など、学習者を手引きするレッスン。 19 | - **ハウツーガイド (How-to guides)**: コマンド実行、デバッグ、リリース手順など、特定の目標を達成するための具体的な手順。 20 | - **解説 (Explanation)**: アーキテクチャ、設計思想、技術選定の理由、過去の経緯など、背景や文脈を理解するための説明。 21 | - **リファレンス (Reference)**: API仕様、重要なログ、技術的に正確で網羅的な情報。 22 | 23 | --- 24 | 25 | ### フェーズ2: 新しいドキュメント構造の構築 26 | 27 | 1. **知識ベース用ディレクトリの作成**: 28 | プロジェクトのルートに `auto-generated` という名前のディレクトリを作成し、その中にDiátaxisのカテゴリに対応するサブディレクトリを作成します。 29 | ```bash 30 | mkdir -p auto-generated/tutorials auto-generated/how-to-guides auto-generated/explanation auto-generated/reference 31 | ``` 32 | 33 | 2. **知識ベースの作成**: 34 | 分類した情報を基に、対応するディレクトリ内にファイルを日本語で作成・記述してください。 35 | - `auto-generated/how-to-guides/cookbook.md`: **ハウツーガイド**を集約します。 36 | - `auto-generated/explanation/knowledge.md`: **解説**（アーキテクチャや設計思想）を集約します。 37 | - `auto-generated/explanation/history.md`: **解説**（プロジェクトの歴史と変遷）を集約します。 38 | - `auto-generated/reference/debug-log.md`: **リファレンス**（重要なデバッグログなど）を集約します。 39 | 40 | 3. **マスタードキュメントの作成 (`CLAUDE.md`)**: 41 | - プロジェクトのルートに `CLAUDE.md` というファイル名で、日本語で作成します。 42 | - このファイルには、プロジェクト概要と、Diátaxisフレームワークに基づいた新しいナレッジベースへの案内を記述します。以下のテンプレートを参考にしてください。 43 | ```markdown 44 | ## ナレッジベース (Diátaxisフレームワーク準拠) 45 | 46 | このプロジェクトの知識は、Diátaxisフレームワークに基づき、`auto-generated/` ディレクトリ内で目的別に分類・管理されています。 47 | 48 | - **[解説 (Explanation)](./auto-generated/explanation/)**: なぜそうなっているのか、背景や設計思想を理解するためのドキュメントです。 49 | - **[ハウツーガイド (How-to guides)](./auto-generated/how-to-guides/)**: 特定のタスクを達成するための具体的な手順を示します。 50 | - **[リファレンス (Reference)](./auto-generated/reference/)**: 技術的に正確で網羅的な情報です。 51 | - **チュートリアル (Tutorials)**: この役割は主に `README.md` が担っています。 52 | ``` 53 | - プロジェクトのコンテキストやアーキテクチャの概要もここに含めます。 54 | 55 | 4. **人間向け `README.md` の再構築**: 56 | - `README.md` を、Diátaxisにおける**チュートリアル**として再定義します。 57 | - 内容は、プロジェクトのセットアップと基本的な操作に限定し、シンプルに保ちます。 58 | - 冒頭に、より詳細な情報への入口として `CLAUDE.md` へのリンクを目立つように配置します。 59 | 60 | --- 61 | 62 | ### フェーズ3: 仕上げ 63 | 64 | 1. **ドキュメント構成図の作成と追記**: 65 | - 以下のDiátaxisベースのMermaid図を、「ドキュメント構成」セクションとして `README.md` と `CLAUDE.md` の両方の末尾に追記します。 66 | ```mermaid 67 | --- 68 | title: ドキュメント構成図 (Diátaxis準拠) 69 | --- 70 | graph TD 71 | subgraph "アクター" 72 | direction LR 73 | A["開発者 (人間)"] 74 | B["Claude"] 75 | C["Gemini"] 76 | D["GitHub Copilot"] 77 | end 78 | 79 | subgraph "入口となるドキュメント" 80 | direction LR 81 | README("README.md
[チュートリアル]") 82 | CLAUDE_MD("CLAUDE.md
[マスター文書]") 83 | GEMINI_MD("GEMINI.md") 84 | COPILOT_MD(".github/copilot-instructions.md") 85 | end 86 | 87 | subgraph "知識ベース (auto-generated/)" 88 | direction TB 89 | subgraph "解説 (Explanation)" 90 | KNOWLEDGE("knowledge.md") 91 | HISTORY("history.md") 92 | end 93 | subgraph "ハウツー (How-to)" 94 | COOKBOOK("cookbook.md") 95 | end 96 | subgraph "リファレンス (Reference)" 97 | DEBUG("debug-log.md") 98 | end 99 | end 100 | 101 | A -- "参照" --> README 102 | README -- "詳細はこちら" --> CLAUDE_MD 103 | B -- "参照" --> CLAUDE_MD 104 | C -- "参照" --> GEMINI_MD 105 | D -- "参照" --> COPILOT_MD 106 | 107 | GEMINI_MD -.-> |シンボリックリンク| CLAUDE_MD 108 | COPILOT_MD -.-> |シンボリックリンク| CLAUDE_MD 109 | 110 | CLAUDE_MD -- "参照" --> KNOWLEDGE & HISTORY & COOKBOOK & DEBUG 111 | 112 | style README fill:#cde4ff,stroke:#333,stroke-width:2px 113 | style CLAUDE_MD fill:#e1f7d5,stroke:#333,stroke-width:2px 114 | ``` 115 | 116 | 2. **最終確認**: 117 | - 作成した新しいファイル構造と、更新された `README.md` および `CLAUDE.md` の内容を提示し、最終的な承認を求めてください。 118 | -------------------------------------------------------------------------------- /bookmark/ai/AGENTS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "AGENTS.md" 3 | source: "https://agents.md/" 4 | author: 5 | published: 6 | created: 2025-10-15 7 | description: "AGENTS.md is a simple, open format for guiding coding agents, used by over 20k open-source projects. Think of it as a README for agents." 8 | tags: 9 | - "clippings" 10 | image: "https://agents.md/og.png" 11 | --- 12 | ## Why AGENTS.md? 13 | 14 | README.md files are for humans: quick starts, project descriptions, and contribution guidelines. 15 | 16 | AGENTS.md complements this by containing the extra, sometimes detailed context coding agents need: build steps, tests, and conventions that might clutter a README or aren’t relevant to human contributors. 17 | 18 | We intentionally kept it separate to: 19 | 20 | Give agents a clear, predictable place for instructions. 21 | 22 | Keep READMEs concise and focused on human contributors. 23 | 24 | Provide precise, agent-focused guidance that complements existing README and docs. 25 | 26 | Rather than introducing another proprietary file, we chose a name and format that could work for anyone. If you’re building or using coding agents and find this helpful, feel free to adopt it. 27 | 28 | ## One AGENTS.md works across many agents 29 | 30 | Your agent definitions are compatible with a growing ecosystem of AI coding agents and tools: 31 | 32 | ## Examples 33 | 34 | ``` 35 | # Sample AGENTS.md file ## Dev environment tips- Use \`pnpm dlx turbo run where \` to jump to a package instead of scanning with \`ls\`.- Run \`pnpm install --filter \` to add the package to your workspace so Vite, ESLint, and TypeScript can see it.- Use \`pnpm create vite@latest -- --template react-ts\` to spin up a new React + Vite package with TypeScript checks ready.- Check the name field inside each package's package.json to confirm the right name—skip the top-level one. ## Testing instructions- Find the CI plan in the .github/workflows folder.- Run \`pnpm turbo run test --filter \` to run every check defined for that package.- From the package root you can just call \`pnpm test\`. The commit should pass all tests before you merge.- To focus on one step, add the Vitest pattern: \`pnpm vitest run -t ""\`.- Fix any test or type errors until the whole suite is green.- After moving files or changing imports, run \`pnpm lint --filter \` to be sure ESLint and TypeScript rules still pass.- Add or update tests for the code you change, even if nobody asked. ## PR instructions- Title format: [] - Always run \`pnpm lint\` and \`pnpm test\` before committing. 36 | ```### [openai/codex](https://github.com/openai/codex/blob/-/AGENTS.md) 37 | 38 | [ 39 | 40 | General-purpose CLI tooling for AI coding agents. 41 | 42 | Rust 43 | 44 | \+ 179 45 | 46 | ](https://github.com/openai/codex/blob/-/AGENTS.md)apache/airflow 47 | 48 | Platform to programmatically author, schedule, and monitor workflows. 49 | 50 | Python 51 | 52 | \+ 3926 53 | 54 | [View original](https://github.com/apache/airflow/blob/-/AGENTS.md)temporalio/sdk-java 55 | 56 | Java SDK for Temporal, workflow orchestration defined in code. 57 | 58 | Java 59 | 60 | \+ 109 61 | 62 | [View original](https://github.com/temporalio/sdk-java/blob/-/AGENTS.md)PlutoLang/Pluto 63 | 64 | A superset of Lua 5.4 with a focus on general-purpose programming. 65 | 66 | C++ 67 | 68 | \+ 8 69 | 70 | [View original](https://github.com/PlutoLang/Pluto/blob/-/AGENTS.md) 71 | 72 | [View 20k+ examples on GitHub](https://github.com/search?q=path%3AAGENTS.md&type=code) 73 | 74 | ## How to use AGENTS.md? 75 | 76 | ### 1\. Add AGENTS.md 77 | 78 | Create an AGENTS.md file at the root of the repository. Most coding agents can even scaffold one for you if you ask nicely. 79 | 80 | ### 3\. Add extra instructions 81 | 82 | Commit messages or pull request guidelines, security gotchas, large datasets, deployment steps: anything you’d tell a new teammate belongs here too. 83 | 84 | ### 4\. Large monorepo? Use nested AGENTS.md files for subprojects 85 | 86 | Place another AGENTS.md inside each package. Agents automatically read the nearest file in the directory tree, so the closest one takes precedence and every subproject can ship tailored instructions. For example, at time of writing the main OpenAI repo has 88 AGENTS.md files. 87 | 88 | ## About 89 | 90 | AGENTS.md emerged from collaborative efforts across the AI software development ecosystem, including [OpenAI Codex](https://openai.com/codex/),[Amp](https://ampcode.com/),[Jules from Google](https://jules.google/),[Cursor](https://cursor.com/), and [Factory](https://factory.ai/). 91 | 92 | We’re committed to helping maintain and evolve this as an open format that benefits the entire developer community, regardless of which coding agent you use. -------------------------------------------------------------------------------- /bookmark/mcp/AWS Knowledge MCP Server が GA されたので試しに設定してみたメモ✍.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "AWS Knowledge MCP Server が GA されたので試しに設定してみたメモ✍" 3 | source: "https://sadayoshi-tada.hatenablog.com/entry/2025/10/05/145509" 4 | author: 5 | - "[[taddy (id:sadayoshi_tada)]]" 6 | published: 2025-10-05 7 | created: 2025-10-14 8 | description: "タダです. AWS Knowledge MCP Server というのが GA されました.この MCP サーバーではドキュメント,ブログ記事,新機能の発表,Well-Architectedのベストプラクティスなどのデータにアクセスできるようなので普段の開発で AWS に触れる時に最新の情報を入手するのに役立ちそうなので設定してみます. aws.amazon.com awslabs.github.io AWS Knowledge MCP Server 概要 AWS Knowledge MCP Server の設定 Claude Desktop での設定 Claude Code での設定 試しに…" 9 | tags: 10 | - "clippings" 11 | image: "https://ogimage.blog.st-hatena.com/6435988827676416561/6802888565274811407/1760176724" 12 | --- 13 | この記事は約6分で読めます。 14 | 15 | タダです. 16 | 17 | [AWS](https://d.hatena.ne.jp/keyword/AWS) Knowledge [MCP](https://d.hatena.ne.jp/keyword/MCP) Server というのが GA されました.この [MCP](https://d.hatena.ne.jp/keyword/MCP) サーバーではドキュメント,ブログ記事,新機能の発表,Well-Architectedのベストプ [ラク](https://d.hatena.ne.jp/keyword/%A5%E9%A5%AF) ティスなどのデータにアクセスできるようなので普段の開発で [AWS](https://d.hatena.ne.jp/keyword/AWS) に触れる時に最新の情報を入手するのに役立ちそうなので設定してみます. 18 | 19 | [aws.amazon.com](https://aws.amazon.com/jp/about-aws/whats-new/2025/10/aws-knowledge-mcp-server-generally-available/) 20 | 21 | [awslabs.github.io](https://awslabs.github.io/mcp/servers/aws-knowledge-mcp-server) 22 | 23 | ## AWS Knowledge MCP Server 概要 24 | 25 | [AWS](https://d.hatena.ne.jp/keyword/AWS) Knowledge [MCP](https://d.hatena.ne.jp/keyword/MCP) Server はGA されましたが,主な機能として以下があります. 26 | 27 | - [AWS](https://d.hatena.ne.jp/keyword/AWS) ドキュメント/ブログ/What's New/Well-Architectedベストプ [ラク](https://d.hatena.ne.jp/keyword/%A5%E9%A5%AF) ティスへのアクセス 28 | - リージョンごとの [AWS](https://d.hatena.ne.jp/keyword/AWS) サービス利用可能状況の確認機能 29 | - 無料かつ認証なしで利用可能(レートリミットあり) 30 | - [AWS](https://d.hatena.ne.jp/keyword/AWS) アカウント不要 31 | 32 | [MCP](https://d.hatena.ne.jp/keyword/MCP) サーバーで利用可能なツールは次の通りです. 33 | 34 | - search\_documentation: [AWS](https://d.hatena.ne.jp/keyword/AWS) 全体のドキュメント検索 35 | - read\_documentation: ドキュメントの [Markdown](https://d.hatena.ne.jp/keyword/Markdown) 変換 36 | - recommend: 関連コンテンツの推奨 37 | - get\_regional\_availability(Experimental): リージョン別サービス利用可否確認 38 | - list\_regions(Experimental): 全 [AWS](https://d.hatena.ne.jp/keyword/AWS) リージョン一覧取得 39 | 40 | ## AWS Knowledge MCP Server の設定 41 | 42 | この記事では普段使用している Cluade Desktop と Claude Code で試してみます. 43 | 44 | ### Claude Desktop での設定 45 | 46 | 以下のように設定して動作しました. 47 | 48 | ```json 49 | { 50 | "mcpServers": { 51 | "aws-knowledge-mcp-server": { 52 | "command": "uvx", 53 | "args": [ 54 | "fastmcp", 55 | "run", 56 | "https://knowledge-mcp.global.api.aws" 57 | ] 58 | } 59 | } 60 | } 61 | ``` 62 | 63 | ### Claude Code での設定 64 | 65 | 以下のように設定して動作しました. 66 | 67 | ```sh 68 | claude mcp add \ 69 | awslabs.aws-knowledge-mcp-server \ 70 | -- uvx fastmcp run https://knowledge-mcp.global.api.aws 71 | ``` 72 | 73 | ## 試しに最近のリリースについて質問してみる 74 | 75 | [AWS](https://d.hatena.ne.jp/keyword/AWS) Knowledge [MCP](https://d.hatena.ne.jp/keyword/MCP) Server GA と同じ日に [AWS API MCP Server v1.0.0](https://aws.amazon.com/jp/about-aws/whats-new/2025/10/aws-api-mcp-server-v1-0-0-release/) がリリースされています.このことについて質問してみます.すると参照記事もあっており良さそうです. 76 | 77 | ```markdown 78 | Q. AWS API MCP Server v1.0.0のリリース概要を教えて下さい 79 | 80 | A. AWS API MCP Server v1.0.0のリリース概要をお伝えします。 81 | 82 | ## リリース概要 83 | 84 | 2025年10月、AWSはAWS API Model Context Protocol (MCP) Server v1.0.0を発表しました。このリリースにより、基盤モデル（FM）が自然言語を通じて任意のAWS APIとやり取りできるようになり、構文的に正しいCLIコマンドの作成と実行が可能になりました。 85 | 86 | ## 主な機能強化 87 | 88 | ### パフォーマンスと依存関係の改善 89 | v1.0.0では、suggest_aws_commandツールをローカルインストールに依存するのではなくリモートサービスに変換することで、起動時間を短縮し、いくつかの依存関係を削除しました。 90 | 91 | ### セキュリティの強化 92 | - 改善されたセキュアファイルシステムコントロール 93 | - より良い入力検証機能 94 | - 変更を伴うアクションに対して人間の監視と同意を要求するオプション設定 95 | 96 | ### 可観測性の向上 97 | AWS CloudWatchエージェントを使用している顧客は、改善された可観測性のためにAPI MCP Serverからログを収集できるようになりました。 98 | 99 | ### 通信とホスティングオプションの拡張 100 | より多くのホスティングと構成オプションをサポートするため、AWS API MCP Serverは既存のstdioに加えて、ストリーミング可能なHTTPトランスポートを提供するようになりました。 101 | 102 | ### 人間参加型ワークフローの改善 103 | 反復的な入力を必要とする人間参加型ワークフローをより信頼性の高いものにするため、サポートされているMCPクライアントでのエリシテーション（対話的な入力取得）機能が含まれました。 104 | 105 | ### 実験的機能 106 | 一般的なAWSタスクのための規範的なワークフローを提供する新しい実験的ツール「get_execution_plan」が追加されました。このツールはEXPERIMENTAL_AGENT_SCRIPTSフラグをtrueに設定することで有効にできます。 107 | 108 | ## 利用可能性 109 | 110 | AWS API MCP Serverはオープンソースとして提供されており、AWS Labs GitHubリポジトリからソースコードの閲覧とダウンロードが可能です。また、Amazon ECR Public Galleryでコンテナとしてパッケージ化されたバージョンも利用可能です。 111 | 112 | 顧客は、いくつかの人気のあるMCPレジストリから、MCPと互換性のあるクライアントで使用するためのAWS API MCP Serverを構成できます。 113 | 114 | このv1.0.0リリースは、AWS APIとの自然言語インタラクションを大幅に改善し、より使いやすく、安全で、柔軟なツールとなっています。 115 | ``` 116 | 117 | ## まとめ 118 | 119 | [AWS](https://d.hatena.ne.jp/keyword/AWS) Knowledge [MCP](https://d.hatena.ne.jp/keyword/MCP) Server の設定を試して実際に [AWS](https://d.hatena.ne.jp/keyword/AWS) 情報を検索してみました.今後 re:Invent もありますし情報をまとめたりサマリーするのにも役立ちそうな [MCP](https://d.hatena.ne.jp/keyword/MCP) サーバーだと感じました. 120 | 121 | [« AWS API MCP Server v1.0.0 がリリースさ…](https://sadayoshi-tada.hatenablog.com/entry/2025/10/11/192241) [Bedrock Knowledge Base のベクトルストア… »](https://sadayoshi-tada.hatenablog.com/entry/2025/09/27/202726) -------------------------------------------------------------------------------- /bookmark/react/Next.jsのtutorialをやるDockerの環境が欲しい.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Next.jsのtutorialをやるDockerの環境が欲しい" 3 | source: "https://qiita.com/ryo_one/items/b50bc5a4c9aa25a0943a" 4 | author: 5 | - "[[ryo_one]]" 6 | published: 2024-07-21 7 | created: 2025-10-15 8 | description: "やりたいこと これを始めようと思ったけど、とにかく自分のパソコン（以下ホストマシン）でnodeやらnpm i などやら実行するのが嫌なので、Dockerでコンテナを立てるまでの記録です。 めちゃくちゃ簡易に作成したものなので色々不足はありますが最低限の構築として。 ..." 9 | tags: 10 | - "clippings" 11 | image: "https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY1MDU3NjglMkZkNTVkYjkwYjIyNjNhZWI5NjBjZDA2Yzg1MmQ2NDU4MjMwZjQ3MGY3JTJGeF9sYXJnZS5wbmclM0YxNTk4MDk4MDg4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1mOTBiOGFiYjZmODVmNDIyODJiMWRiOWM0YjUxZWVhOA%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D8515521012e530e94b341d1c0f9a6296?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9TmV4dC5qcyVFMyU4MSVBRXR1dG9yaWFsJUUzJTgyJTkyJUUzJTgyJTg0JUUzJTgyJThCRG9ja2VyJUUzJTgxJUFFJUU3JTkyJUIwJUU1JUEyJTgzJUUzJTgxJThDJUU2JUFDJUIyJUUzJTgxJTk3JUUzJTgxJTg0JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NzIzZTJkZWEwMTlmM2FlMGI0YzRmODY0MDhjZThmNTA&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDByeW9fb25lJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9OWU4MzJiOGQ2ZTVhOGM4ZDdjN2E0N2RjMzkzN2JiZTg&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=062a0ea8d7e401ab1cba12a1ef77d739" 12 | --- 13 | ![](https://relay-dsp.ad-m.asia/dmp/sync/bizmatrix?pid=c3ed207b574cf11376&d=x18o8hduaj&uid=) 14 | 15 | ## Qiita Conference 2025 Autumn 16 | 17 | ![](https://cdn.qiita.com/assets/public/client-resources/image-karaage0703-971edc712fc1bce7-971edc712fc1bce7.png) 18 | 19 | からあげ 20 | 21 | 生成AI時代のテックブログの始め方 22 | 23 | [特設サイトで詳細をチェック](https://qiita.com/official-campaigns/conference/2025-autumn) 24 | 25 | この記事は最終更新日から1年以上が経過しています。 26 | 27 | [@ryo\_one (リョウイチ)](https://qiita.com/ryo_one) 28 | 29 | ## Next.jsのtutorialをやるDockerの環境が欲しい 30 | 31 | 投稿日 32 | 33 | ## やりたいこと 34 | 35 | これを始めようと思ったけど、とにかく自分のパソコン（以下ホストマシン）でnodeやらnpm i などやら実行するのが嫌なので、Dockerでコンテナを立てるまでの記録です。 36 | めちゃくちゃ簡易に作成したものなので色々不足はありますが最低限の構築として。 37 | 38 | ## 目標 39 | 40 | Getting Startedの以下のコマンドをコンテナ内で実行する 41 | 42 | ```text 43 | npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm 44 | ``` 45 | 46 | ## 手順 47 | 48 | ### 構成の準備 49 | 50 | ```text 51 | nextjs-dashboard 52 | ├── Dockerfile 53 | └── docker-compose.yml 54 | ``` 55 | 56 | Dockerfile 57 | 58 | ```dockerfile 59 | FROM node:18.17.1 60 | 61 | WORKDIR /app 62 | ``` 63 | 64 | docker-compose.yaml 65 | 66 | ```yaml 67 | version: '3' 68 | services: 69 | app: 70 | build: 71 | context: . 72 | volumes: 73 | - .:/app 74 | tty: true 75 | ports: 76 | - "3000:3000" 77 | ``` 78 | 79 | このtty: true が肝なんですよね。今回run devとかしないでコンテナ内で色々やりたいので、これを書かないと起動した瞬間終了してしまいます。 80 | 初めて使うけど、本来の用途なのかは不明です。とりあえず「コンテナ内で仮想ターミナルを有効にして、コンテナが終了しないようにする設定」という認識でいいと思います。 81 | 82 | ### コマンド 83 | 84 | こちらの記事を参考にさせていただきました。 85 | 86 | ```text 87 | docker-compose build 88 | docker-compose run --rm app sh 89 | ``` 90 | 91 | これは「一時的にコンテナを起動して、shシェルを実行し、終了後にそのコンテナを自動的に削除するよ」という事です。 92 | シェルに入ると思うので、その中で以下実行します。 93 | 94 | ```text 95 | npm install -g pnpm 96 | npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm 97 | ``` 98 | 99 | 以上で完了です。 100 | 101 | ## まとめ 102 | 103 | ホストマシンに何も入れたくない自分みたいな人間は割とよくやる事になりそうな手順でしたので、備忘録までに投稿しました。 104 | tty: true くんはこの後どうなるのでしょうか。そして彼の行方を知る者はどこにも居ませんでした。 105 | 106 | [0](https://qiita.com/ryo_one/items/#comments) 107 | 108 | コメント一覧へ移動 109 | 110 | X（Twitter）でシェアする 111 | 112 | Facebookでシェアする 113 | 114 | はてなブックマークに追加する 115 | 116 | 新規登録して、もっと便利にQiitaを使ってみよう 117 | 118 | 1. あなたにマッチした記事をお届けします 119 | 2. 便利な情報をあとで効率的に読み返せます 120 | 3. ダークテーマを利用できます 121 | [ログインすると使える機能について](https://help.qiita.com/ja/articles/qiita-login-user) 122 | 123 | [新規登録](https://qiita.com/signup?callback_action=login_or_signup&redirect_to=%2Fryo_one%2Fitems%2Fb50bc5a4c9aa25a0943a&realm=qiita) [ログイン](https://qiita.com/login?callback_action=login_or_signup&redirect_to=%2Fryo_one%2Fitems%2Fb50bc5a4c9aa25a0943a&realm=qiita) 124 | 125 | ## Qiita Conference 2025 Autumn 11月5日(水)~7日(金)開催！ 126 | 127 | ![](https://cdn.qiita.com/assets/public/official_campaigns/qiita_conference_2025_autumn/image-conference_2025_autumn_ogp-7cf3021de31b9ab76a7b3bbaf2909bb5.png) 128 | 129 | Qiita Conferenceは、AI時代のエンジニアに贈るQiita最大規模のテックカンファレンスです！ 130 | 131 | 基調講演ゲスト(敬称略) 132 | 133 | piacere、牛尾 剛、Esteban Suarez、和田 卓人、seya、ミノ駆動、市谷 聡啓、からあげ、岩瀬 義昌、まつもとゆきひろ、みのるん and more… 134 | 135 | [イベント詳細を見る](https://qiita.com/official-campaigns/conference/2025-autumn) 136 | 137 | [0](https://qiita.com/ryo_one/items/b50bc5a4c9aa25a0943a/likers) 138 | 139 | いいねしたユーザー一覧へ移動 140 | 141 | 0 -------------------------------------------------------------------------------- /bookmark/codex/我々はCodexとどう向き合うべきなのか.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "我々はCodexとどう向き合うべきなのか" 3 | source: "https://zenn.dev/aki_think/articles/5fb93a15a6257a" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-10-10 7 | created: 2025-10-14 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--8TXQIgEM--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E6%2588%2591%25E3%2580%2585%25E3%2581%25AFCodex%25E3%2581%25A8%25E3%2581%25A9%25E3%2581%2586%25E5%2590%2591%25E3%2581%258D%25E5%2590%2588%25E3%2581%2586%25E3%2581%25B9%25E3%2581%258D%25E3%2581%25AA%25E3%2581%25AE%25E3%2581%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:aki%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YwNTA2YTc1ZWEuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | 281 14 | 15 | 95[idea](https://zenn.dev/tech-or-idea) 16 | 17 | この記事は、すでにCodexやClaudeCodeなどのAIコーディングツールを実際に使い始めているエンジニアに向けて書いている。「期待ほど効率が上がらない」と感じている人や、運用の型を模索している個人開発者を想定している。導入方法や基礎理論は扱わない。ひとりのエンジニアが数ヶ月間Codexと向き合って得た、実践的な運用知見を語る。 18 | 19 | ## 数ヶ月で変わったこと 20 | 21 | まず、ここ数ヶ月でAIコーディングツールの使い方が大きく変わったという話からしたい。 22 | 23 | 数ヶ月前のClaudeCodeガードレール戦略全盛期と比べると、隔世の感がある。あの頃は、AIが暴走しないように制御する、余計なことをさせないようにガードレールを張り巡らせることに頭を悩ませていた。Kiroが登場したときも、その延長線上にあった。 24 | 25 | しかしGPT-5-Codexの登場で、その流れが変わった。 26 | 27 | ## コンテキスト詰め込み時代の終わり 28 | 29 | 何が変わったのか。一言で言えば、コンテキストの扱い方だ。 30 | 31 | 従来のAI駆動開発では、コンテキストをどう詰め込むかが重要だった。コードの前提、背景、制約条件、守るべきルール――これらを詳細にプロンプトに盛り込むことが王道とされていた。 32 | 33 | しかしGPT-5-Codexは、この方向性とは違うアプローチを取る。コンテキストは詰め込まなくていい。仕様はAIがコードから読み取ってくれる。 34 | 35 | 公式のプロンプティングガイドには、こう記載されている。 36 | 37 | > このモデルは、大きく異なるプロンプトを必要とするため、GPT-5の代替品にはなりません。 38 | 39 | OpenAIは"not a drop-in replacement for GPT-5"（同じプロンプト設計のまま置換は不可）と明記している。開発者メッセージもGPT-5比で約40%のトークン量、つまり約60%削減されている。ガイド自体もシンプルで、「長い前置きや余計な誘導は品質を下げうる」という方向性だ。 40 | 41 | 従来のツールでは、プロンプトの最初に長い前置き（背景説明や制約条件）を書くことが推奨されていた。しかしGPT-5-Codexは、この前置きを受け付けない。むしろ長々と説明すると途中で停止することさえある。なぜなら、Codexはコードそのものから文脈を読み取る設計になっているからだ。言葉で説明するより、コードを見せた方が正確に理解する。 42 | 43 | より詳しく知りたい方は、公式のガイドをぜひ見てほしい。 44 | 45 | ## アンチプロンプティング 46 | 47 | では、具体的にどうプロンプトを書けばいいのか。ここで登場するのが「アンチプロンプティング」という新しい考え方だ。 48 | 49 | 公式ガイドにも記載があるが、Codexでは「アンチプロンプティング」という発想が重要になる。これは、前処理（仕様・設計）は外部化し、入力は極小にするという方針だ。 50 | 51 | 従来のプロンプティングは、いかに多くの情報を正確に伝えるかに焦点があった。しかしアンチプロンプティングは真逆だ。いかに情報を削ぎ落とすか。いかに最小限の指示で済ませるか。 52 | 53 | Codexはピンポイントに最低限の情報を渡すだけで、良い仕事をしてくれる。むしろ情報を与えすぎると、無駄なコンテキストを消費して精度が下がる。プロジェクト概要、守ってほしいルール、機能の詳細仕様、修正内容、これさえドキュメントにまとめて渡せば、後は勝手に判断して実装してくれる。 54 | 55 | Codexの機能自体もシンプルだ。ClaudeCodeに比べると、サブエージェントのような仕組みもない。でも、それでも十分な性能を発揮する。プロンプトも機能も少なくていい、それでいてパワフル。この「Less is More」の発想が、Codexの特徴だ。 56 | 57 | ## 入念な実装プロセス 58 | 59 | アンチプロンプティングの思想は、プロンプトだけでなく、Codexの実装プロセスにも表れている。 60 | 61 | Codexが優れているのは、その実装プロセスの丁寧さだ。 62 | 63 | 従来のツールも実装前に確認はしていた。しかしCodexは執拗なまでに確認する。実装前に入念にチェックし、影響範囲を洗い出し、既存の実装を確認し、どこをどう変更すべきかを慎重に判断する。そして実装完了後も、影響範囲を見ながら問題が起きていないかを確認してくれる。とにかく既存の実装を無闇に変更しないので、手戻りが少ない。 64 | 65 | ここまで安心してAIにリファクタを任せられるようになったのは、Codexが初めてだ。別画面の似たようなUIコンポーネントを共通化するリファクタリングで、1000行程度をワンショットで書かせたことがあるが、リファクタによる新しい不具合も見られなかった。 66 | 67 | 実装内容によっては自律的にマイグレーション対応を提案してくることもある。システムのアップデートによって旧バージョンのユーザーへの影響を考え、その影響が最小限にとどまるように実装してくる。 68 | 69 | ## レビューでの議論 70 | 71 | 実装だけではない。Codexはレビューでも際立った特徴を見せる。 72 | 73 | 公式ガイドにも「コードレビューが得意」と明記されている。GPT-5-Codexは従来のモデルと比べて強情で細かい。 74 | 75 | CodexからのPRレビューで一見微妙そうな提案があったとき、私はツッコミを入れるようにしている。「その提案はよくないのでは？」と反論すると、Codexは論理的に反論してくる。そして、話せば話すほど、結局GPT-5-Codexが正しいケースが多い。 76 | 77 | むしろ議論していると、何故それが正しいか見えてくるし、Codexがちゃんと実装を理解してるのが伝わってくる。人間だと思って接した方が、うまく行く。良い意味で、人間のレビュアーとして扱うのがコツだ。 78 | 79 | ## /compactこそが重要 80 | 81 | ここまで聞くと、Codexは完璧に思えるかもしれない。しかし、そうではない。Codexにも明確な弱点がある。 82 | 83 | Codexの弱点は、コンテキスト管理だ。単一スレッドで履歴が肥大すると、性能が下がる。Codexが優秀な分、この劣化が目立つ。 84 | 85 | だから、Codex CLIの `/compact` で履歴圧縮を適宜実施することが重要だ。最近は自動で走らないケースも報告されているため、手動での実行を意識する方が、Codexの能力を引き出せる。どうプロンプトを作り込むかよりも、いつ `/compact` を意識するかの方が重要と言ってもいい。 86 | 87 | 公式ガイドでは、タスク自体は長時間の自律実行に耐える設計とされているが、実際の使用においては会話履歴の管理が鍵になる。ちょっと使ってすぐ新しいセッションを始める使い方になりがちだ。 88 | 89 | 私が実践しているのは、計画・影響範囲の洗い出しまでを一つのセッションで行い、それをドキュメント化しておいて、新規スレッドからそれを元に実装させる手法だ。 90 | 91 | タスクを小さく分割し、短時間で完結させる。定期的に `/compact` で圧縮する。新しいタスクは新しいセッションで。これが、Codex運用の基本だ。 92 | 93 | ## ツール間の使い分け 94 | 95 | Codexの弱点を補う方法として、他のツールとの併用も有効だ。 96 | 97 | 私は普段からClaudeCodeとCodexを併用している。フロントエンドのUI改修は基本ClaudeCodeに任せて、Codexでレビュー&レビュー対応という使い分けだ。UI改修までCodexだと開発速度が遅くなりがちだし、雑な指示によるデザイン改善だけは、ClaudeSonnet4.5が上だと感じている。 98 | 99 | PRの本文作成もClaudeに任せた方が良い。CodexのPRは人間があとから読んでも、なんの実装なのかわかりにくい。Codexは機械目線でのコード管理には強いが、人間向けのドキュメント生成はClaudeの方が得意だ。 100 | 101 | ## 弱点と課題 102 | 103 | 運用面での工夫以外にも、Codex自体の課題はある。 104 | 105 | 推論努力（reasoning\_effort）の設定がわかりづらい。Codexではminimal、low、medium、highから選択できるが、効果は課題依存で一概には言えない。以下は私の実装時における観測に基づくが、highを選んでおけば正解というわけでもないように思う。highよりmediumの方が実行時間が長いケースもあったりして、わかりづらい。 106 | 107 | ここ最近はmediumの良さ安定して際立ってきていて、highと遜色ない性能で速いレスポンス速度を実現してきている。highからmediumに変えたら、かなりCodexが速くなった。 108 | 109 | この辺りは、ClaudeSonnetやOpusモデルのように、用途が違うことがわかるモデル分けの方が良かったように思う。 110 | 111 | ## Codexの未来への期待 112 | 113 | 最後に、Codexの未来について少し語りたい。 114 | 最近、個人開発が減っているという話をSNSでよく見かける。vibe coderが開発を諦めているという意見もある。そんな人たちにこそ、Codexはおすすめしたい。 115 | 116 | 誤解しないでほしいのは、Codexは魔法ではないということだ。すぐにシステムが出来上がるわけではない。しかし、以前のAI駆動開発に比べて着実に進歩している。1歩ずつ進めていけば、しっかりと完成を目指せるところまで来ている。 117 | 118 | もちろん個人開発者だけではない。大規模システムを作っているチームでも、Codexは十分実用に耐えられると思っている。 119 | 120 | 今後、Codexがどう進化するかはわからない。機能が増えて、今のシンプルさが失われる可能性もある。それでも、このツールが示した方向性、アンチプロンプティング、コードからの文脈理解、入念な実装プロセスは、AI駆動開発の一つの答えだと思う。 121 | 122 | Codexとどう向き合うべきか。結局のところ、試して、理解して、信頼することだ。完璧なツールではない。弱点もある。でも、ちゃんと向き合えば、確実に前に進める。 123 | この時代にエンジニアでいられることに、改めて感謝している。 124 | 125 | 281 126 | 127 | 95 128 | 129 | ### Discussion 130 | 131 | Hidden comment 132 | 133 | ログインするとコメントできます -------------------------------------------------------------------------------- /bookmark/claude/🚀 Claude Code × Serena MCP：もうバージョンダウンしなくても良いのか...?.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "🚀 Claude Code × Serena MCP：もうバージョンダウンしなくても良いのか...?" 3 | source: "https://zenn.dev/studio/articles/431afa748fbed1" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-07-31 7 | created: 2025-10-15 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--7MIe7p_---/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%2520%2520Claude%2520Code%2520%25C3%2597%2520Serena%2520MCP%25EF%25BC%259A%25E3%2582%2582%25E3%2581%2586%25E3%2583%2590%25E3%2583%25BC%25E3%2582%25B8%25E3%2583%25A7%25E3%2583%25B3%25E3%2583%2580%25E3%2582%25A6%25E3%2583%25B3%25E3%2581%2597%25E3%2581%25AA%25E3%2581%258F%25E3%2581%25A6%25E3%2582%2582%25E8%2589%25AF%25E3%2581%2584%25E3%2581%25AE%25E3%2581%258B...%253F%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:wadakatu%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2UwYmNhNWZkODEuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:Studio%2520Tech%2520Blog%2Cx_220%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzFkYWY3MjZjMWQuanBlZw==%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | 310 14 | 15 | 101 16 | 17 | ## 📖 はじめに - Claude Codeのパフォーマンス低下問題 18 | 19 | 最近、X(Twitter)でClaude Codeのパフォーマンスに関する以下のような投稿を多く見かけます。 20 | 21 | - Claude Codeの応答精度が低下している 22 | - Claude Codeの出力品質に不満がある 23 | - 最近のClaude Codeの動作が期待に沿わない 24 | 25 | GitHubでも以下のようなissueが立てられて、Claude Codeのバージョンダウンしようみたいな風潮があります。 26 | 27 | 実際に使用していると、CLAUDE.mdに記載された指示の見落としや、プロジェクト構造の把握精度の低下を感じることがあります。 28 | しかし、バージョンダウンすると最新機能の `/agents` や `plan mode` が使用できなくなるため、最新版を使いながらパフォーマンスを向上させる方法を模索していました。 29 | 30 | **そこで見つけたのが「Serena MCP」です。** 31 | 32 | ## 🎯 Serena MCPとは？ 33 | 34 | Semantic Retrieval & Editing noetic agentの略で「Serena」です。 35 | 日本語訳すると「セマンティック検索・編集型の知的エージェント」みたいな感じです。 36 | ライブラリの名前ってオシャレなの多いですよね〜 37 | 38 | Serenaは、プロジェクトのコンテキストを効率的に管理し、Claude Codeの理解力を向上させるMCP（Model Context Protocol）サーバーです。 39 | プロジェクト構造をセマンティックに分析し、必要な情報を適切にClaude Codeに提供することで、より正確な出力を実現するそうです。 40 | 41 | Serena自体の詳しい説明についてはGitHubリポジトリのREADMEを参照してください 42 | 43 | ## 🛠 Mac環境での環境構築 44 | 45 | Serenaには複数のインストール方法があります。あなたの環境に合わせて選択してください。 46 | 47 | ### 📋 前提条件 48 | 49 | - macOS（Intel/Apple Silicon対応） 50 | - Claude Code がインストール済み 51 | - Homebrew がインストール済み 52 | 53 | ### 方法1: uvxを使った直接実行（推奨） 54 | 55 | 最も簡単な方法です。事前のインストールが不要で、常に最新版を使用できます。 56 | 自分もこの方法を使っています。手頃で良い感じです。 57 | 58 | #### Step 1: uvのインストール 59 | 60 | ```bash 61 | # Homebrewでuvをインストール 62 | brew install uv 63 | ``` 64 | 65 | #### Step 2: Claude Codeへの登録 66 | 67 | プロジェクトディレクトリで以下を実行： 68 | 69 | ```bash 70 | claude mcp add serena -- uvx --from git+https://github.com/oraios/serena serena-mcp-server --context ide-assistant --project $(pwd) 71 | ``` 72 | 73 | ### 方法2: ローカルインストール 74 | 75 | より細かい制御が必要な場合や、オフライン環境で使用する場合に適しています。 76 | 77 | #### Step 1: Serenaのクローンとインストール 78 | 79 | ```bash 80 | # 作業ディレクトリを作成 81 | mkdir -p ~/Developer/mcp && cd ~/Developer/mcp 82 | 83 | # Serenaをクローン 84 | git clone https://github.com/oraios/serena 85 | cd serena 86 | 87 | # mcpサーバー起動 88 | uv run serena-mcp-server 89 | ``` 90 | 91 | #### Step 2: Claude Codeへの登録 92 | 93 | ```bash 94 | # プロジェクトディレクトリで実行 95 | claude mcp add serena -- uv run --directory ~/Developer/mcp/serena serena-mcp-server --project $(pwd) 96 | ``` 97 | 98 | ### 方法3: Docker(⚠️) 99 | 100 | 隔離された環境で実行したい場合はDockerを使いましょう 101 | **注意**: Docker版はまだ本番Readyではなく、いくつかの制限があるそうです。 102 | 103 | ```bash 104 | # Dockerイメージを使用 105 | docker run --rm -i --network host \ 106 | -v ~/Projects:/workspaces/projects \ 107 | ghcr.io/oraios/serena:latest \ 108 | serena-mcp-server --transport stdio 109 | ``` 110 | 111 | ### 方法4: SSEモード（トラブルシューティング用） 112 | 113 | 標準のstdio通信で問題が発生する場合： 114 | 115 | ```bash 116 | # SSEモードでサーバーを起動 117 | uv run --directory ~/Developer/mcp/serena serena-mcp-server --transport sse --port 9121 118 | 119 | # Claude Codeの設定でSSE接続を設定 120 | # http://localhost:9121/sse を指定 121 | \`\`\`動 122 | uv run --directory ~/Developer/mcp/serena serena-mcp-server --transport sse --port 9121 123 | ``` 124 | 125 | ### ✅ 動作確認 126 | 127 | ```bash 128 | # MCPサーバーの状態確認 129 | claude mcp list 130 | 131 | # 出力例： 132 | # Available MCP servers: 133 | # - serena (connected) ✅ 134 | ``` 135 | 136 | Serena MCPが起動すると、ブラウザで `http://localhost:24282/dashboard/index.html` が自動で開くはずです。 137 | 138 | ## 🎮 実際の使い方 139 | 140 | ### 1️⃣ プロジェクトの初期化 141 | 142 | 新しいプロジェクトでSerenaを使い始める際： 143 | 144 | ```bash 145 | # プロジェクトディレクトリで 146 | cd /path/to/your/project 147 | 148 | # Claude Codeを起動 149 | claude 150 | ``` 151 | 152 | --- 153 | 154 | Claude Code上で、 `/mcp` を入力して、Serena MCPの起動状況を確認 155 | 156 | 以下のような表示なればOK 157 | ![](https://storage.googleapis.com/zenn-user-upload/e37bdeb4188d-20250731.png) 158 | 159 | --- 160 | 161 | Claude Codeのチャットで以下のコマンドを実行： 162 | 163 | ``` 164 | /mcp__serena__initial_instructions 165 | ``` 166 | 167 | または自然言語で： 168 | 169 | ``` 170 | read Serena's initial instructions 171 | ``` 172 | 173 | --- 174 | 175 | これにより、Serenaがプロジェクトをスキャンし、コードの構造を理解します。 176 | このスキャンは１回走ると、.serenaディレクトリを新規作成します 177 | そのディレクトリの中に、project構造などのmemoryをmd形式で複数作成してくれます。（CLAUDE.mdみたいな感じかなと思ってます） 178 | 179 | ## 🔧 設定のカスタマイズ 180 | 181 | ### グローバル設定 182 | 183 | `~/.serena/serena_config.yml` でグローバルな設定が可能： 184 | 185 | ### プロジェクト固有の設定 186 | 187 | プロジェクトディレクトリに `.serena/project.yml` を作成： 188 | 189 | ## 🚀 さらなる活用 190 | 191 | ### 他のツールとの連携 192 | 193 | SerenaはClaude Code以外にも様々なMCPクライアントと連携できるので、Claude Code以外に恩恵を得られるはずです。 194 | 195 | - **IDE統合**: VSCode, Cursor, IntelliJ 196 | - **CLI ツール**: Cline, Roo Code, Goose 197 | - **その他**: Windsurf, Agno 198 | 199 | ### コミュニティとサポート 200 | 201 | - [GitHub Repository](https://github.com/oraios/serena) 202 | - [Changelog](https://github.com/oraios/serena/blob/main/CHANGELOG.md) 203 | - [Roadmap](https://github.com/oraios/serena/blob/main/ROADMAP.md) 204 | 205 | ## 🎯 まとめ 206 | 207 | Serenaを使ってまだ3日くらいですが、かなりClaude Codeの出力精度が上がっている気がして、実装中の不満が格段に減りました。（個人の感想です。） 208 | AI系のツールって最初の数回使って期待値を下回ったらすぐ使わなくなって、次のツールに移るみたいなことが多いんですが、Serenaは期待値を上回る結果でこれからも使い続ける予定です！ 209 | 210 | 現状のClaude Codeに満足していない方、Serenaを導入してみませんか？ 211 | 他にも良いツールあれば教えてください！ 212 | 213 | Serenaに興味が出てきた方は、次はこの記事を読んでみるのおすすめです！ 214 | より実践的にSerenaを使う方法が書いてあり、勉強になりました！ 215 | 216 | 310 217 | 218 | 101 -------------------------------------------------------------------------------- /bookmark/aws/Step Functions を利用して感じた Airflow との比較.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Step Functions を利用して感じた Airflow との比較" 3 | source: "https://future-architect.github.io/articles/20220111a/" 4 | author: 5 | - "[[多賀聡一朗]]" 6 | published: 2022-01-11 7 | created: 2025-10-14 8 | description: "概要TIG 所属の多賀です。 AWS 上でのワークフロー構築のため、Step Functions を直近で導入しました。 筆者は Airflow (MWAA) の経験が長く、いくつかブログも書いています。 (過去ブログ一覧)。今回、両サービスを利用してみた上での比較を整理したく記事化しました。 前提として、どちらも素晴らしいサービスで、ユースケースに合わせて選定していくことが大事かと思います。 サ" 9 | tags: 10 | - "clippings" 11 | image: "https://future-architect.github.io/images/2022/20220111a/image.png" 12 | --- 13 | ## 概要 14 | 15 | TIG 所属の多賀です。 16 | 17 | AWS 上でのワークフロー構築のため、Step Functions を直近で導入しました。 18 | 19 | 筆者は Airflow (MWAA) の経験が長く、いくつかブログも書いています。 ()。今回、両サービスを利用してみた上での比較を整理したく記事化しました。 20 | 21 | 前提として、どちらも素晴らしいサービスで、ユースケースに合わせて選定していくことが大事かと思います。 22 | 23 | ## サービス概要 24 | 25 | 各サービスについて、概要を整理しました。 26 | 27 | ※ Airflow は AWS 上でマネージドサービスとして提供されている Amazon Managed Workflows for Apache Airflow (以下 MWAA) をベースに記載します。 28 | 29 | | | [MWAA](https://docs.aws.amazon.com/mwaa/latest/userguide/what-is-mwaa.html) | [Step Functions](https://aws.amazon.com/jp/step-functions/?step-functions.sort-by=item.additionalFields.postDateTime&step-functions.sort-order=desc) | 30 | | --- | --- | --- | 31 | | | ![MWAAフロー](https://future-architect.github.io/images/2022/20220111a/image.png) | ![stepfunctionフロー](https://future-architect.github.io/images/2022/20220111a/stepfunction.png) [新機能 – AWS Step Functions ワークフロースタジオ – ステートマシンを構築するためのローコードのビジュアルツール - Amazon Web Services ブログ](https://aws.amazon.com/jp/blogs/news/new-aws-step-functions-workflow-studio-a-low-code-visual-tool-for-building-state-machines/) 参照 | 32 | | サービス概要 | OSS である [Airflow](https://airflow.apache.org/) をマネージドサービスとして提供 | AWS 独自実装のビジュアルワークフローサービス | 33 | | 一言で | ワークフローにソースコードベース管理の概念を取入れアプリケーション化したサービス (※ Airflow について) | 各種 AWS サービスをパイプラインとして実行するサービス | 34 | | 特徴 | ・Pure Python ベースでワークフローを実装可能 ・独自のブラウザベース UI を提供 ・DAG(有向非巡回グラフ)ベースのワークフロー定義 | ・Amazon States Language(JSON/YAML) ベースでワークフロー(=State Macine)を実装 ・AWSコンソール上でドラッグ&ドロップでワークフローを作成可能 ([Workflow Studio](https://docs.aws.amazon.com/step-functions/latest/dg/workflow-studio.html)) ・200を超える AWS サービスのサポート([参考](https://aws.amazon.com/jp/about-aws/whats-new/2021/09/aws-step-functions-200-aws-sdk-integration/) ) | 35 | | コスト | [料金 - Amazon Managed Workflows for Apache Airflow (MWAA)](https://aws.amazon.com/jp/managed-workflows-for-apache-airflow/pricing/) ・時間単位のインスタンス使用量課金 ・ストレージ使用量課金 | [料金 - AWS Step Functions AWS](https://aws.amazon.com/jp/step-functions/pricing/) ・実行毎課金(状態遷移毎) | 36 | 37 | ## サービス比較 38 | 39 | 各サービス別に、Good/Challenge に分けて記載しています。 40 | 41 | ### Good 42 | 43 | #### MWAA 44 | 45 | - Pythonで実現できることは基本すべて実装可能で、実装の制約が少ない 46 | - UI が充実しており、実行履歴、ログ、実行時間等の様々な情報を参照することが可能 47 | - UI 上でワークフローの任意の位置からリトライ可能 48 | - 各種クラウドSDK/OSS API を呼び出しを簡易化するための provider がサードパーティ提供されている 49 | - [Providers packages reference — apache-airflow-providers Documentation](https://airflow.apache.org/docs/apache-airflow-providers/packages-ref.html#) 50 | - provider を pip でインストール後、各 provider に実装されている operator 関数を呼び出すことで実現可能 51 | 52 | #### Step Functions 53 | 54 | - AWS サービスの呼び出しをローコード(パラメータ指定程度)で実現可能 55 | - Workflow Studio を利用した AWS コンソール上でのワークフロー組み上げが可能 56 | - Amazon States Language を直接書くことなく定義できる 57 | - パラメータ指定(JSON形式)でワークフロー実行可能 58 | - AWS サービスの呼び出しごとにログが出力されており、各 SDK の呼び出し結果を確認可能 59 | 60 | ### Challenge 61 | 62 | #### MWAA 63 | 64 | - ソースコードベースであることから実装コストはある程度見込む必要あり 65 | - 初期構築等で、デフォルトで用意されていなければ、単純なクラウド SDK 呼び出しをするだけの処理を Python で都度実装が必要になる 66 | - UI 上からパラメータ指定での実行がしづらい 67 | - 厳密には実行可能な方法があるが、UI 上でサポートされていない or ジョブの実行画面外に存在しており、運用しづらくなっている 68 | - (2022/01/07時点で [MWAA 未サポート](https://docs.aws.amazon.com/mwaa/latest/userguide/airflow-versions.html#airflow-versions-latest)) Aiflow version 2.1.0 以上でパラメータ指定(`Trigger Dag w/ config`)でワークフローを実行可能となっている 69 | - デフォルトで [実行時間等](https://airflow.apache.org/docs/apache-airflow/stable/templates-ref.html#variables) はワークフローへ渡されるため、時間ベースでの実行の場合は特段困らない 70 | - 運用コスト面では、EC2等と同様に起動時間課金であり、基本は立ち上げたままで運用されることから、Step Functions よりコストは高くなる 71 | - ソースコードを実装するため単体テストを実装したいが、外部 API 呼び出し等が多くなる場合はモック化含めてコストは高くなる 72 | - VPC の構築が必須 73 | - MWAA 向けのネットワーク要件が存在するため、VPC 構築時に合わせて確認しておく必要がある 74 | - [Amazon MWAA でのネットワーキングについて - Amazon Managed Workflows for Apache Airflow](https://docs.aws.amazon.com/ja_jp/mwaa/latest/userguide/networking-about.html) 75 | - マネージドサービスのため直接意識することは少ないが、Airflow の構成について学習するコストはかかる 76 | 77 | #### Step Functions 78 | 79 | - ワークフロー途中からの実行が未サポート 80 | - 初期構築等で失敗しながら動かしていく際に、毎回最初からになって効率が悪かった 81 | - 運用上は、リトライ単位 = 1 State Macine の原則で構築すれば問題なし 82 | - Workflow Studio で作成した定義を IaC 管理化に置きたい場合は、環境情報(本番、開発..)等の一部修正が必須 83 | - 「Workflow Studio で基本作成→JSONをダウンロード→IaC 管理下へ配置」の作成フロー 84 | - [組み込み関数](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/amazon-states-language-intrinsic-functions.html) でできることがあまりないため、入力を少し加工をしたい等で Lambda の実装が必要 85 | - API の実行結果が非同期で成功する場合(インスタンス作成等)に、成功を待ち受けるためのループ処理を都度実装する必要がある 86 | - [Job ステータスのポーリング (Lambda、AWS Batch) - AWS Step Functions](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/sample-project-job-poller.html) 87 | - 各 State の入出力を扱うための、Input/Output/ResultPath,ResultSelector等の学習コストは低くはない 88 | - 同一のパラメータをワークフロー全体で引き回したいケースで実装に考慮が必要 89 | - OutputPath を指定して、Input がすべて上書きされる問題に直面した 90 | - 最終的に、ResultSelector で残したいレスポンス情報を選定して、ResultPath で追加する形式を取ることが多かった 91 | - 参考: [Step Functions の入出力処理 - AWS Step Functions](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/concepts-input-output-filtering.html) 92 | 93 | ## 選定方針 94 | 95 | 各ケースごとに細かい要件等があるかと思いますが、大まかな方針としては以下の通りと考えています。 96 | 97 | - MWAA (Airflow) 98 | - ワークフローの複雑度(※ 実行するタスクの量が指標) が高い 99 | - 実行する 処理時間の長いタスクが複数連続している (リトライ観点) 100 | - 単純な AWS SDK や API Call で処理が完結しない (※ 設計としてワークフローにロジックをもたせる可否は要検討) 101 | - 初期構築にコストをかけることができる 102 | - Step Functions 103 | - 複雑度が低くAWS の各種 SDK を呼び出すのみの単純なワークフロー 104 | - ワークフローの実行頻度が低い 105 | - 手動でのパラメータ指定必須 106 | 107 | ## 所感 108 | 109 | Step Functions を本格的に利用したのは初めてだったので、同じワークフロー系サービスとして経験のあった Airflow との比較をしてみました。 110 | 111 | 実際に AWS 上でワークフローを構築しようとする際は、まずはこの2つのサービス比較から入ることが今後は多くなってくるのではと思いますので、参考になりましたら幸いです。 112 | 113 | Airflow は 2.0 がリリースされて以降も、月1程度で継続的にリリースがされていてますので、引き続きウォッチしていていきたいと考えてます。 114 | 115 | ## 参考 116 | 117 | - [Apache Airflow Documentation — Airflow Documentation](https://airflow.apache.org/docs/apache-airflow/stable/index.html) 118 | - [Amazon Managed Workflows for Apache Airflow (MWAA) とは - Amazon Managed Workflows for Apache Airflow](https://docs.aws.amazon.com/ja_jp/mwaa/latest/userguide/what-is-mwaa.html) 119 | - [AWS Step Functions とは - AWS Step Functions](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/welcome.html) -------------------------------------------------------------------------------- /bookmark/ai/どうして開発チームはClaude Codeをうまく活用できないのか｜すてぃお.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "どうして開発チームはClaude Codeをうまく活用できないのか｜すてぃお" 3 | source: "https://note.com/suthio/n/nb0c1d5cb1aea" 4 | author: 5 | - "[[すてぃお]]" 6 | published: 2025-07-08 7 | created: 2025-10-14 8 | description: "経営者から「AIを使った開発をうちの開発チームにもやってほしいんだけどうまく活用できていないようなので、うまく活用できるようにしたい」と相談を受けます。 僕も下記のような記事を書いているのですが、そもそも使い倒すためには前提条件があるので説明するためにこのnoteを書いています。 （ついでにエンジニアがこの記事を使って経営層に説明しやすくなると良いなと思ってます） 前提 エンジニアとしても生産性の向上するような施策はぜひやりたいと思っていて、Claude Codeなどのコーディングエージェントも活用してうまくやれるなら活用したいと思っている（はず。今回は現場のエンジニアも活用" 9 | tags: 10 | - "clippings" 11 | image: "https://assets.st-note.com/production/uploads/images/200241033/rectangle_large_type_2_45fdfcc2d1ebf825f85bac7a9abeb6f9.png?fit=bounds&quality=85&width=1280" 12 | --- 13 | ![見出し画像](https://assets.st-note.com/production/uploads/images/200241033/rectangle_large_type_2_45fdfcc2d1ebf825f85bac7a9abeb6f9.png?width=1200) 14 | 15 | ## どうして開発チームはClaude Codeをうまく活用できないのか 16 | 17 | [すてぃお](https://note.com/suthio) 18 | 19 | 経営者から **「AIを使った開発をうちの開発チームにもやってほしいんだけどうまく活用できていないようなので、うまく活用できるようにしたい」** と相談を受けます。 20 | 21 | 僕も下記のような記事を書いているのですが、そもそも使い倒すためには前提条件があるので説明するためにこのnoteを書いています。 22 | （ついでにエンジニアがこの記事を使って経営層に説明しやすくなると良いなと思ってます） 23 | 24 | ## 前提 25 | 26 | 27 | エンジニアとしても生産性の向上するような施策はぜひやりたいと思っていて、Claude Codeなどのコーディングエージェントも活用してうまくやれるなら活用したいと思っている（はず。今回は現場のエンジニアも活用したいと思っている前提で進めます） 28 | 29 | エンジニアとしては活用したいが活用できないというジレンマが存在しています。 30 | 31 | 今回、掲載する画像は下記のような簡易的なツールから生成しているので 32 | 経営層に説明する際にエンジニアの皆様はこちらのツールとこのnoteを使って説明してほしい 33 | 34 | [**AIコーディングエージェント リスク・品質マトリクス** *blog-omega-one-33.vercel.app*](https://blog-omega-one-33.vercel.app/ai_coding_risk_matrix.html) 35 | 36 | ## なぜ活用できないのか 37 | 38 | **チームの成熟度 x コードベース品質** によって、どのようにAIが活用できるかが定まるためである。 39 | 40 | ### ① チーム成熟度が低く、コードベース品質がレガシー（技術的負債が溜まっている）パターン 41 | 42 | 43 | チームが成熟しておらず、技術的負債が溜まっている状態だとコーディングエージェントはドキュメント作成やコードレビューなどの低リスクの作業の成果しか期待ができない（かつ成果も微妙になりやすい） 44 | 45 | ![画像](https://assets.st-note.com/img/1751629823-dUmSYJKcBHuknjQ5ta4NivzC.png?width=1200) 46 | 47 | ① チーム成熟度が低く、コードベース品質がレガシー（技術的負債が溜まっている）パターン 48 | 49 | ### ② チーム成熟度もしくは、コードベース品質が標準的なパターン 50 | 51 | チームが成熟するか、コードベース品質が標準的（技術的負債がそこまで溜まってない）パターンだと自動テストの作成やリファクタリングの作業を担うことができるようになる。 52 | この段階でやっとコーディングエージェントを使って、コーディングエージェントを動かす土台を整えることができるようになる。 53 | 54 | ![画像](https://assets.st-note.com/img/1751630148-KP4FThzwXaqm31VUknjxo9s6.png?width=1200) 55 | 56 | ② チーム成熟度が低く、コードベース品質が標準的なパターン 57 | 58 | ![画像](https://assets.st-note.com/img/1751630152-C407AdMli6k8eBTWRxGHPmya.png?width=1200) 59 | 60 | ② チーム成熟度は標準、コードベース品質がレガシーなパターン 61 | 62 | ### ③ チーム成熟度が高く、コードベース品質が標準的なパターン 63 | 64 | コーディングエージェントを使って、品質向上のためのプロセスが回せるようになる。 65 | この段階ではまだ事業に直結するような機能開発における生産性の向上にはほとんど寄与できていない。 66 | 67 | ![画像](https://assets.st-note.com/img/1751630323-50AaiU3wxopNK7mLQHlBJSyG.png?width=1200) 68 | 69 | ③ チーム成熟度が高く、コードベース品質が標準的なパターン 70 | 71 | ### ④ チーム成熟度が一定以上、コードベース品質がモダン（技術的負債小）なパターン 72 | 73 | この段階で初めて、新機能開発や機能修正をコーディングエージェントを活用して行えるようになります。 74 | ここまで行うことによって、新機能開発や機能修正などの作業をコーディングエージェントに任せることができ、事業として生産性向上が実感できるようになると考えています。 75 | 76 | ![画像](https://assets.st-note.com/img/1751630552-2ayzHM6QNwr3RIE4qXdn7bB5.png?width=1200) 77 | 78 | ④ チーム成熟度が一定以上、コードベース品質がモダン（技術的負債小）なパターン 79 | 80 | ## どうすればよいか？ 81 | 82 | ①→②→③→④もしくは①→②→④にするしか方法はない。 83 | 84 | > ① チーム成熟度が低く、コードベース品質がレガシー（技術的負債が溜まっている）パターン 85 | > ② チーム成熟度もしくは、コードベース品質が標準的なパターン 86 | > ③ チーム成熟度が高く、コードベース品質が標準的なパターン 87 | > ④ チーム成熟度が一定以上、コードベース品質がモダン（技術的負債小）なパターン 88 | 89 | ### ①→②にする方法 90 | 91 | チームの改善プロセスを回して成熟度を上げる取り組みを行うことや 92 | まずは愚直にテストを書いて、CIを回すようなプロセスが有効。 93 | 94 | **②を④にする方法** 95 | 96 | ②になっている段階であれば、テストやCIの作成、リファクタリング（の一部）はコーディングエージェントに任せることができるようなっているのでコーディングエージェントを使い、技術的負債を解消し、モダン化するのが良いと思います。 97 | 98 | ## アンチパターンについて 99 | 100 | ### 仮に②もしくは③の段階で機能追加をした場合はどうなるか？ 101 | 102 | レガシーなコードベースに対して、Claude Codeで新機能を追加しようとした結果、 103 | 意図とは違ったコードが生成されたり、 104 | 既存のパターンと異なるコードが生成されたりして技術的負債がさらに積み重なります。 105 | また、エンジニアのレビューの負担が増大し、エンジニアのモチベーションも下がります。 106 | 超短期的にいいことはあっても、1週間や1ヶ月単位で見たらいいことはないです。（中長期で見ても同様に悪い結果しか生まない） 107 | 108 | 109 | 110 | ## 確認チェックリスト 111 | 112 | チームが成熟しているか、コードベースがモダンかレガシーかどうかわからないという質問ももらうので参考程度にチェックリストを作っているので 113 | 参考にしてください。 114 | 115 | ### コードベース品質チェックリスト 116 | 117 | 参考までにレガシー（技術的負債が多い）の特徴を列挙しておきます。 118 | 119 | - 自動テストが書かれていない 120 | - CIが存在しない、または頻繁に失敗している 121 | - デプロイ作業が煩雑でデプロイするのに時間がかかる、よくデプロイに失敗している 122 | - Linter/Formatterが導入されていない 123 | - 言語、フレームワークが2年以上アップデートされていない 124 | - 依存関係の更新が1年以上放置されている 125 | - データベースマイグレーションが手動 126 | - 同じような処理が複数箇所にコピペされている 127 | - エラーハンドリングが不統一 128 | - 巨大な関数やクラスが多い（500行以上） 129 | - APIドキュメントが自動生成され、型情報が付与されていない（OpenAPI、GraphQLなど） 130 | - コードスタイルが各機能において統一感がない 131 | 132 | ※項目に合致している項目が多いとレガシーな可能性があるとして参考程度にしてください。 133 | 134 | ### チーム成熟度チェックリスト 135 | 136 | 参考までに成熟度が低いチームの特徴を列挙しておきます。 137 | 138 | - コードレビューが形式的または存在しない 139 | - ドキュメントが更新されていない 140 | - チーム内の知識共有が行われていない 141 | - 定期的な振り返りが実施されていない 142 | - 開発プロセスが属人化している 143 | - テストを書く文化がない 144 | - 技術的な意思決定の記録が残っていない 145 | - オンボーディングプロセスが確立されていない 146 | - 技術的負債の可視化ができていない 147 | - リリース頻度が月1回未満 148 | - 技術選定の基準が曖昧 149 | 150 | ※項目に合致している項目が多いと成熟度が低い可能性があるとして参考程度にしてください。 151 | 152 | 153 | 154 | ## 最後に 155 | 156 | 僕自身、コーディングエージェントには期待していて 157 | 実際、しっかり準備ができているプロジェクトでClaude Codeを使った時の開発生産性は明らかに向上している。 158 | 159 | Claude Codeの導入を急ぐ気持ちはよくわかるのですが、ちょっと立ち止まって、自分たちの状況を見直してみてほしいです。 160 | 161 | 準備に時間をかけることは、遠回りに見えて実は近道です。 162 | まずは現状を把握して地道な改善活動をしつつ、Claude Codeの導入を進めるのはどうでしょうか。 163 | 164 | **最後にもう一つ** 165 | 166 | 僕がこの記事を書いた理由は、 **「AIを使えば魔法のように生産性が上がる」** という幻想を解きたかったからです。 167 | でも同時に、 **「適切な準備をした上でAIを使えば生産性は上がる」** ということも伝えたいなと思います。 168 | 169 | > LLMの導入は開発チームがドカンとデカくなるのと同じことで、それでレビューやリリースが破滅するか滑らかであるかはスケールに耐えうる開発環境・チームを作ることにいかに真面目に取り組んできたかによって決まる、というのは鋭利だけど絶対言おうと思ってた [#claude\_code\_deep\_dive](https://twitter.com/hashtag/claude_code_deep_dive?src=hash&ref_src=twsrc%5Etfw) 170 | > 171 | > — hiragram/ひらり (@hiragram) [June 30, 2025](https://twitter.com/hiragram/status/1939551710353236330?ref_src=twsrc%5Etfw) 172 | 173 | > そうなんですよね。開発規模が大きくなると発生する諸問題がごく短期間で発生するようになったので、開発を破綻せずにスケールさせる仕組みへの投資が行われているかどうかが直撃するようになりました。 [#claude\_code\_deep\_dive](https://twitter.com/hashtag/claude_code_deep_dive?src=hash&ref_src=twsrc%5Etfw) [https://t.co/YsPsNlitEY](https://t.co/YsPsNlitEY) 174 | > 175 | > — Takuto Wada (@t\_wada) [June 30, 2025](https://twitter.com/t_wada/status/1939558156415426845?ref_src=twsrc%5Etfw) 176 | 177 | 178 | 179 | エンジニアの方は下記の記事を読んでください。 180 | これからのポジショニングについて考えていきましょう。 181 | 182 | ## 補足説明 183 | 184 | 今回説明させていただいた内容は継続的に変更する必要のあるソフトウェアのケースを想定しています。 185 | 例えば、プロトタイプで作ってみる等については積極的にClaude Codeを活用していけると考えています。 186 | 187 | 188 | 189 | 190 | 191 | --- 192 | 193 | コーディングエージェントの活用にて、お困りごとありましたら、問い合わせいただけると幸いです。 194 | 195 | [**株式会社adding | 技術で、事業を加速する** *株式会社addingは、CTOレベルの技術力と経営視点で、新規事業の立ち上げから成長フェーズまで伴走。実装から戦略まで、事* *www.adding.jp*](https://www.adding.jp/) 196 | 197 | [/](https://www.adding.jp/) 198 | 199 | 200 | 201 | ## いいなと思ったら応援しよう！ 202 | 203 | よろしければ応援お願いします！ いただいたチップはおいしいご飯を食べるのに使わせていただきます。 204 | 205 | どうして開発チームはClaude Codeをうまく活用できないのか｜すてぃお -------------------------------------------------------------------------------- /bookmark/react/TypeScriptReactNext.jsおすすめ学習資料のご紹介.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "TypeScript/React/Next.jsおすすめ学習資料のご紹介" 3 | source: "https://zenn.dev/acntechjp/articles/e8e54ee201f77e" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-04-03 7 | created: 2025-10-15 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--lsOlbDwn--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:TypeScript%252FReact%252FNext.js%25E3%2581%258A%25E3%2581%2599%25E3%2581%2599%25E3%2582%2581%25E5%25AD%25A6%25E7%25BF%2592%25E8%25B3%2587%25E6%2596%2599%25E3%2581%25AE%25E3%2581%2594%25E7%25B4%25B9%25E4%25BB%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:Yuuichi%2520Eguchi%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2U2ZDA4MDY5ODcuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/g_south_west%2Ch_34%2Cl_default:og-publication-pro-mark-xcosax%2Cw_34%2Cx_217%2Cy_158/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:Accenture%2520Japan%2520%2528%25E6%259C%2589%25E5%25BF%2597%2529%2Cx_255%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2E3Y2NiYzY2YjIuanBlZw==%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | [Accenture Japan (有志)](https://zenn.dev/p/acntechjp) 14 | 15 | 110 16 | 17 | 61[idea](https://zenn.dev/tech-or-idea) 18 | 19 | ## はじめに 20 | 21 | 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 22 | 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 23 | 24 | ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 25 | 26 | - **TypeScript** 27 | Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行している。\*1 28 | - **React** 29 | Metaが開発した、現代のWEB開発において最も使用されているフロントエンドフレームワーク。\*2 30 | 大きなコミュニティによってもたらされる高い安定性・成熟度により効率の良い開発が期待できる。仮想DOMによるパフォーマンスの向上、コンポーネント指向開発による再利用性・メンテ性の向上、JSX記法を使用した宣言的なコーディングによる可読性・メンテ性の向上（TypeScriptはJSX記法を標準でサポートしている。）など、採用するメリットが大きい。 31 | - **Next.js** 32 | Vercelが開発した、現代のWEB開発において最も使用されているメタフレームワーク。\*3 33 | SSR/SSG/自動コード分割/自動画像最適化によるパフォーマンスの向上（レンダリングはコンポーネント単位で設定可）、App Router（ディレクトリ構造に基づいたルートが自動的に生成される機能）でルーティング設定が容易になることによる開発効率/メンテ性の向上、ホットリロードによる開発効率の向上などが期待できる。自身がサーバー機能を持つため、別途nginxやApacheの使用も不要。Reactは公式にReactとの併用を推奨している。 34 | 35 | \*1 [https://2024.stateofjs.com/en-US/usage/](https://2024.stateofjs.com/en-US/usage/) 36 | \*2 [https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/](https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/) 37 | \*3 [https://2024.stateofjs.com/en-US/libraries/meta-frameworks/](https://2024.stateofjs.com/en-US/libraries/meta-frameworks/) 38 | 39 | ## 学習資料 40 | 41 | ### 公式資料 42 | 43 | 開発者をやっていると公式資料を参照しましょうとしつこく言われると思いますが、進化の速いWEB開発業界ではそれがより強く当てはまります。TypeScript/React/Next.jsそれぞれ公式チュートリアルが大変分かりやすいので、まずここから始めることをお勧めいたします。 44 | 45 | 1. [The TypeScript Handbook（公式）](https://www.typescriptlang.org/docs/handbook/intro.html) 46 | 47 | The TypeScript Handbookは、TypeScriptの公式ドキュメントで、基本的な概念から応用的なトピックまで網羅しています。TypeScriptを初めて学ぶ方や、既にJavaScriptに慣れている方にも役立つ内容が満載です。 48 | 49 | 1. [Learn React（公式）](https://react.dev/learn) 50 | 51 | Learn Reactは、Reactの公式チュートリアルです。Reactの基礎から始め、コンポーネント、ステート管理、ライフサイクルメソッドなどについて学べます。実際のコード例を通じて実践的に学べるのが魅力です。 52 | 53 | 1. [Start building with Next.js（公式）](https://nextjs.org/learn) 54 | 55 | Start building with Next.jsは、Next.jsの公式ドキュメントです。Next.jsの基本的な使い方や、動的ルーティング、APIルート、静的サイト生成（SSG）などについて学べます。Next.jsを使って効率的にアプリケーションを開発したい方には必見の資料です。 56 | 57 | ### 書籍 58 | 59 | 次に、より深い知識を体系的に学ぶためにお勧めできる書籍を紹介します。内容はグッと難しくなりますが、上記のチュートリアルを完了させた後であれば、適宜公式資料にも目を通しながら、読破できるレベルのものだと思います。 60 | 61 | 1. [初めてのJavaScript 第3版（O'Reilly）](https://www.oreilly.co.jp/books/9784873117836/) 62 | 63 | 初めてのJavaScript 第3版は、JavaScriptの基礎を学ぶための入門書です。JavaScriptの基本的な文法や、DOM操作、イベントハンドリング、非同期処理について詳しく解説しています。現在はもう素のJavaScriptを書く人はいないと思いますが、何がJavaScriptで出来て、どうTypeScriptへ変わったのか理解する為、こちらの書籍をまず参照しました。 64 | 65 | 1. [初めてのTypeScript（O'Reilly）](https://www.oreilly.co.jp/books/9784814400362/) 66 | 67 | 初めてのTypeScriptは、TypeScriptの基礎から応用までを学べる書籍です。型システムの活用方法や、TypeScriptを使った実践的な開発について詳しく解説しています。 68 | 69 | 1. [Reactハンズオンラーニング 第2版（O'Reilly）](https://www.oreilly.co.jp/books/9784873119380/) 70 | 71 | Reactハンズオンラーニング 第2版は、Reactの基本的な使い方から応用的なトピックまでをカバーしています。実際のプロジェクトを通じて学ぶ形式なので、実践的なスキルを身につけるのに最適です。 72 | 73 | 1. [Fluent React（英語版のみ）（O'Reilly）](https://www.oreilly.com/library/view/fluent-react/9781098138707/) 74 | 75 | Fluent Reactは、英語版ですが非常に高品質なReactの書籍です。Reactの最新のトレンドやベストプラクティスについて深く学ぶことができます。難しい専門用語を使用せず、比較的読みやすい英語で書かれています。普段から英語を勉強したり、使用している方であれば、難なく読めると思います。 76 | 77 | ※Next.jsについては、特にバージョンアップが速く、現在のバージョンでの実装を前提に書かれた書籍も少ない為、ご紹介を割愛いたします。しかしながら、公式資料が大変有用なため、Next.jsについては公式資料のみで十分キャッチアップ可能だと思います。 78 | 79 | ### 番外編: WEB開発全般に関わるお勧めの書籍 80 | 81 | 最後に番外編として、WEB開発全般に関わるもののうち、評判も良くWEB開発に関わる方であれば読んだ方が良いと考えられる書籍をご紹介いたします。（私もまだ部分的にしか読めていないものも含みます） 82 | 83 | 1. [マルチテナントSaaSアーキテクチャの構築（O'Reilly）](https://www.oreilly.co.jp/books/9784814401017/) 84 | 85 | マルチテナントSaaSアーキテクチャの構築は、SaaSアプリケーションの設計と実装について詳しく解説しています。マルチテナントアーキテクチャの基本から実践的な設計パターンまで学べる書籍です。 86 | 87 | 1. [ハンズオンNode.js（O'Reilly）](https://www.oreilly.co.jp/books/9784873119236/) 88 | 89 | ハンズオンNode.jsは、Node.jsの基本から実践的なアプリケーション開発までを学べる書籍です。非同期プログラミングやExpressを使ったWebアプリケーションの構築についても詳しく解説しています。 90 | 91 | 1. [Web API: The Good Parts（O'Reilly）](https://www.oreilly.co.jp/books/9784873116860/) 92 | 93 | Web API: The Good Partsは、良質なWeb APIを設計・実装するためのベストプラクティスについて解説しています。RESTfulなAPI設計や、セキュリティ、スケーラビリティについても学べます。 94 | 95 | 1. [体系的に学ぶ 安全なWebアプリケーションの作り方 第2版（SB Creative）](https://www.sbcr.jp/product/4797393163/) 96 | 97 | 体系的に学ぶ 安全なWebアプリケーションの作り方 第2版は、Webアプリケーションのセキュリティについて体系的に学べる書籍です。クロスサイトスクリプティング（XSS）、SQLインジェクション、認証・認可などのセキュリティ対策について詳しく解説しています。 98 | 99 | 1. [［改訂新版］プロになるためのWeb技術入門（技術評論社）](https://gihyo.jp/book/2024/978-4-297-14571-2) 100 | 101 | ［改訂新版］プロになるためのWeb技術入門は、WEB開発に必要な基本的な技術を体系的に学べる書籍です。HTML、CSS、JavaScript、サーバーサイドの基本からセキュリティまで幅広いトピックをカバーしています。改訂新版とありますが、改訂前の版のみでカバーしているトピックもあるそうなので、（私はまだ読めていませんが、）余裕のある方は改訂前後両方読んでみるのも良いと思います。 102 | 103 | ## 注意事項 104 | 105 | WEB開発の世界は日進月歩で、言語/ライブラリの更新が日々ものすごいスピードで行われています。一方で、書籍は体系的に信頼度の高い情報が載っているという利点があるものの、著者がそれらを纏めるのに時間がかかります。書籍が書かれて出版される間に、言語/ライブラリのバージョンが変わってしまい、書籍に記載の内容と現行バージョンの仕様が異なるという事が少なくありません。これが今回の記事の一番上に公式資料を載せた理由でもあるのですが、書籍に記載のコードをそのまま実行しても動かないなど上手くいかない部分が出てきた場合、必ず公式資料と照らし合わせて自分で調整するということが必要になります。その点をご承知おきいただいたうえで、書籍でのキャッチアップも進めていただけると幸いです。 106 | 107 | 以上、私がTypeScript/React/Next.jsを使用したWEB開発を学ぶために参考にした公式資料と書籍をご紹介しました。これらのリソースを活用して、ぜひ皆さんもWEBアプリ開発のスキルを向上させてください。 108 | 109 | 110 110 | 111 | 61 112 | 113 | [Accenture Japan (有志)](https://zenn.dev/p/acntechjp) 114 | 115 | アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。 116 | 117 | ### Discussion 118 | 119 | ![](https://static.zenn.studio/images/drawing/discussion.png) 120 | 121 | ログインするとコメントできます -------------------------------------------------------------------------------- /bookmark/claude/Claude Code の学習モードで自分の手でコードを書く練習をしよう.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Claude Code の学習モードで自分の手でコードを書く練習をしよう" 3 | source: "https://azukiazusa.dev/blog/claude-code-learning-mode/" 4 | author: 5 | - "[[azukiazusaのテックブログ2]]" 6 | published: 2025-08-23 7 | created: 2025-10-14 8 | description: "コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。しかし、AI エージェントによってコーディングの多くが自動化されると、開発者が自分の手でコードを書く機会は減少してしまうというジレンマがあります。Claude Code の学習モードを使用すると、自分の手でコードを書く練習ができます。学習モードでは、AI エージェントはユーザー自身にも一部のコードの生成を依頼します。この記事では、Claude Code の学習モードの使い方について解説します。" 9 | tags: 10 | - "clippings" 11 | image: "https://azukiazusa.dev/blog/ogp/claude-code-learning-mode.png" 12 | --- 13 | [Back to blog](https://azukiazusa.dev/blog) 14 | 15 | コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。AI エージェントは人間よりも早い速度で大量のコードを生成でき、開発者の生産性を大幅に向上させる可能性を秘めています。その一方で AI が生成したコードを正しく理解し、コードベースのアーキテクチャに一貫したスタイルで書かれているか、セキュリティ上の問題がないかをレビューする開発者の能力は依然として重要です。 16 | 17 | AI が生成したコードを理解し、レビューする能力は一朝一夕に身につくものではありません。このようなスキルを身につけるには自分の頭で考え、手を動かしてコードを書く経験が必要です。しかし、AI エージェントによってコーディングの多くが自動化されると、開発者が自分の手でコードを書く機会は減少してしまうというジレンマがあります。ビジネスの観点からはコードを書くスピードが求められているものの、開発者が学習の目的で自らの手でコードを書く時間を確保することもまた必要なことになってくるでしょう。 18 | 19 | Claude Code の学習モードを使用すると、AI エージェントに頼らずに自分の手でコードを書く練習をできます。学習モードでは、AI エージェントはすべてのコードを生成するのではなく、ユーザー自身にも一部のコードの生成を依頼します。これにより、ユーザーは自分の手でコードを書く経験を積みながら、AI エージェントからのサポートも受けることができます。 20 | 21 | この記事では、Claude Code の学習モードの使い方について解説します。 22 | 23 | ## Claude Code の学習モードを使う 24 | 25 | Claude Code の学習モードは [output-style](https://docs.anthropic.com/en/docs/claude-code/output-styles) 機能を通じて利用できます。 `output-style` は Claude Code がユーザーとコミュニケーションを取る際のスタイルをカスタマイズするための機能です。デフォルトではタスクを完了するために効率的にコード生成し、簡潔に回答するスタイルが使用されます。 `output-style` デフォルトのスタイルに追加して以下の組み込みのスタイルが提供されています。 26 | 27 | - `Explanatory` （説明型）: Claude が選択したコードの実装方針やコードパターンについて説明しながらコードを生成する 28 | - `Learning` （学習型）: Claude がユーザーの学習をサポートするために、「インサイト」を共有したり、一部のコードの生成をユーザーに依頼する 29 | 30 | Claude Code の学習モードは `Learning` スタイルを使用します。 `output-style` を変更するためには Claude を起動した後に `/output-style` コマンドを実行します。 31 | 32 | ```bash 33 | /output-style 34 | ``` 35 | 36 | Copied! 37 | 38 | スタイルを選択する UI が表示されるので、 `Learning` スタイルを選択します。 39 | 40 | ![](https://images.ctfassets.net/in6v9lxmm5c8/1BydRYtbru1XKL8vrEcLzZ/02d8621c5c12383bd95e4838e93cf663/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-08-23_13.23.37.png?q=50&fm=webp) 41 | 42 | スタイルを選択した後に Claude Code にタスクを指示してみましょう。ここでは例としてカンバンボードアプリケーションにおいて、表示中のタスクを文字列でフィルタリングする機能を実装するタスクを指示してみます。 43 | 44 | ```plaintext 45 | カンバンボードにおいて、表示中のタスクを文字列でフィルタリングする機能を実装してください。 46 | 47 | - ユーザーが入力フォームに入力した文字列に基づいて、表示中のタスクをリアルタイムでフィルタリングする 48 | 49 | - タスクのタイトルにフィルタ文字列が含まれている場合にそのタスクを表示する 50 | 51 | - 入力フォームはカンバンボードの上部に配置する 52 | ``` 53 | 54 | Copied! 55 | 56 | はじめはいつものスタイルと同じように、現在のカンバンボードのコードベースを調査して実装方針を計画します。 57 | 58 | ![](https://images.ctfassets.net/in6v9lxmm5c8/5yPPF57DBB0IeXkCPxgKA1/826f3811559614a948abbe374292767c/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-08-23_13.27.33.png?q=50&fm=webp) 59 | 60 | Claude Code が計画した実装方針は「インサイト」としてユーザーに共有されます。「インサイト」によりユーザーは Claude Code がどのような思考でコードを生成しようとしているのかを理解できます。 61 | 62 | ![](https://images.ctfassets.net/in6v9lxmm5c8/2A1Hcb2YUCvIvF6PSSl9uL/5f743f7bbba6bf3896f8941d22444b70/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-08-23_13.28.00.png?q=50&fm=webp) 63 | 64 | フィルタ入力用のコンポーネントの作成は Claude Code がすべて作成しましたね。 65 | 66 | ![](https://images.ctfassets.net/in6v9lxmm5c8/2vnm3NY7vp4z7N6C0dJbCt/e6ae8f2a3928ce697a1eb1a85130aa12/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-08-23_13.38.06.png?q=50&fm=webp) 67 | 68 | その後もフィルタリングロジックの中核部分は Claude Code により生成されていきました。フィルタリング機能の基本的な実装が完了した後、さらにユーザービリティを向上させるためのフィルタリングの状態を示す情報を追加しようとしています。この部分の実装をユーザーに依頼していますね。実装する箇所は `TODO(human)` というコメントで示されています。 69 | 70 | ```plaintext 71 | ● Learn by Doing 72 | 73 | 74 | 75 | Context: フィルタリング機能の基本的な実装は完了しましたが、ユーザビリティを向上させるために、フィルタリングの状態を示す情報を追加したいと思います。現在のフィルタ結果で表示されているタスクの総数や、フィルタがアクティブな状態であることを明確に示すことで、ユーザーがより効果的にフィルタ機能を活用できます。 76 | 77 | 78 | 79 | Your Task: /Users/xxx/sandbox/kanban-app/components/drag-drop-board.tsxのフィルター入力フィールドの下に、フィルタ結果の表示情報を追加してください。TODO(human)コメントの場所に実装してください。 80 | 81 | 82 | 83 | Guidance: フィルタされたタスクの総数を表示し、フィルタがアクティブ（filterTextが空でない）な場合は「○件のタスクが見つかりました」のようなメッセージを表示してください。filteredBoardから各columnのtasks.lengthの合計を計算することができます。フィルタが無効な場合は何も表示しないか、全タスク数を表示するかを検討してください。 84 | ``` 85 | 86 | Copied! 87 | 88 | TODO リストの項目が「Request human input on filter result display implementation」となり、ユーザーの入力を待機する状態になっています。 89 | 90 | ![](https://images.ctfassets.net/in6v9lxmm5c8/4TMklXPpJleiOJH8ciDxsK/beb4c2963bc901660e020e88ed747ca2/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-08-23_13.59.17.png?q=50&fm=webp) 91 | 92 | ここではあえて誤ったコードを入力してみましょう。 `filteredBoard.columns.reduce(...)` を使用すればフィルタされたタスクの総数を計算できますが、あえて `filteredBoard.columns.length` と誤ったコードを入力してみます。 93 | 94 | ```tsx 95 | <div className="relative max-w-md"> 96 | 97 | <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" /> 98 | 99 | <Input 100 | 101 | placeholder="タスクをフィルタ..." 102 | 103 | value={filterText} 104 | 105 | onChange={(e) => setFilterText(e.target.value)} 106 | 107 | className="pl-10" 108 | 109 | /> 110 | 111 | </div> 112 | 113 | 114 | 115 | {filterText && ( 116 | 117 | <p className="text-sm text-muted-foreground"> 118 | 119 | {filteredBoard.columns.length} 120 | 121 | 件のタスクが見つかりました 122 | 123 | </p> 124 | 125 | )} 126 | 127 | 128 | 129 | <DndContext 130 | 131 | sensors={sensors} 132 | 133 | onDragStart={handleDragStart} 134 | 135 | onDragOver={handleDragOver} 136 | 137 | onDragEnd={handleDragEnd} 138 | 139 | > 140 | ``` 141 | 142 | Copied! 143 | 144 | 「実装が完了しました」と入力して送信します。「ただし、少し修正が必要ですね。現在のコードはカラム数を表示していますが、タスクの総数を表示する方が適切です。」修正が必要な箇所を指摘してくれました。 145 | 146 | ![](https://images.ctfassets.net/in6v9lxmm5c8/6f06awAxVR20AhV7P5ZJK4/fb343dae6607245868252e18bec0217f/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-08-23_14.13.56.png?q=50&fm=webp) 147 | 148 | これで実装が完了しました。個人的にはもう少しユーザーにコードの生成を依頼しても良いのではないかと考えますが、自分でコードを書くゆとりを与えてくれるのは良いところですね。 149 | 150 | ## まとめ 151 | 152 | - Claude Code の `output-style` 機能を使用すると、エージェントの出力スタイルを変更できる 153 | - デフォルトのスタイルは効率的にコードを生成し、簡潔に回答するスタイル。独自のスタイルを定義する他に、組み込みのスタイルとして `Explanatory` と `Learning` が提供されている 154 | - Explanatory はコードの実装方法やコードパターンについて説明しながらコードを生成するスタイル 155 | - Learning はユーザーの学習をサポートするために「インサイト」を共有したり、一部のコードの生成をユーザーに依頼するスタイル 156 | - ユーザーにコードの生成を依頼する箇所を `// TODO(human)` というコメントで示し、ユーザーの入力を待機する状態に移行する 157 | 158 | ## 参考 159 | 160 | - [Output styles - Anthropic](https://docs.anthropic.com/en/docs/claude-code/output-styles) 161 | 162 | ## 記事の理解度チェック 163 | 164 | 以下の問題に答えて、記事の理解を深めましょう。 165 | 166 | ### Claude Code の学習モードを有効にするために使用するコマンドは何ですか？ 167 | 168 | - learning-mode コマンド 169 | もう一度考えてみましょう 170 | - output-style 171 | 正解！ 172 | Claude Code の学習モードは output-style コマンドで Learning スタイルを選択することで有効になります。 173 | - .claude/settings.json 174 | もう一度考えてみましょう 175 | - CLAUDE.md 176 | もう一度考えてみましょう 177 | 178 | ### ユーザーにコードの生成を依頼する箇所を示すために使用されるコメントは何ですか？ 179 | 180 | - // TODO(human) 181 | 正解！ 182 | ユーザーにコードの生成を依頼する箇所は // TODO(human) というコメントで示されます。 183 | - // TODO(user) 184 | もう一度考えてみましょう 185 | - // WRITE\_HERE 186 | もう一度考えてみましょう 187 | - // YOUR\_TURN 188 | もう一度考えてみましょう -------------------------------------------------------------------------------- /bookmark/codex/Codex CLIを使いこなすための機能・設定まとめ.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Codex CLIを使いこなすための機能・設定まとめ" 3 | source: "https://zenn.dev/dely_jp/articles/codex-cli-matome" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-09-02 7 | created: 2025-10-14 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--j7X6svl3--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Codex%2520CLI%25E3%2582%2592%25E4%25BD%25BF%25E3%2581%2584%25E3%2581%2593%25E3%2581%25AA%25E3%2581%2599%25E3%2581%259F%25E3%2582%2581%25E3%2581%25AE%25E6%25A9%259F%25E8%2583%25BD%25E3%2583%25BB%25E8%25A8%25AD%25E5%25AE%259A%25E3%2581%25BE%25E3%2581%25A8%25E3%2582%2581%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:%25E3%2583%25A9%25E3%2582%25AF%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzM3MDYyNjhkNmMuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:Kurashiru%2520Tech%2520Blog%2Cx_220%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YwODYxOWQxYzkuanBlZw==%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | 640 14 | 15 | 286[tech](https://zenn.dev/tech-or-idea) 16 | 17 | ## はじめに 18 | 19 | こんにちは、ラクです！ 20 | 21 | 最近、開発者の間でOpenAIの「Codex CLI」が話題になっていますね。 22 | Codex CLIは今年の4月に公開されたばかりの歴史の浅いツールですが、短いサイクルで改善・アップデートが続いています。 23 | 24 | 現時点ではClaude Codeに比べて未実装の機能もありますが、その差は急速に縮まりつつあります。 25 | ただし公式ドキュメントのようなものはなく、現時点ではリポジトリを直接見に行くしかありません。 26 | 本記事ではリリースノートやPRを読んで、私が実際に使って便利に感じた設定や機能を紹介していきます。 27 | 28 | ## なぜ今、Codex CLIが話題なのか？ 29 | 30 | ### ChatGPTのサブスクリプションで利用できるようになった 31 | 32 | GPT-5の公開（2025年8月7日）以降、ChatGPTの有料プラン（Plus/Pro/Team）加入者は追加料金なし・定額でCodex CLIを利用できるようになりました。 33 | 34 | Codex CLIが公開された2025年4月当初はAPI Key前提でした。 35 | Claude Codeと比べて機能的にも優位性は限定的でしたが、現在は使い勝手が大きく向上しています。 36 | 37 | ### Claude Codeの性能劣化 38 | 39 | これはAnthropicの公式発表ではありませんが、「Claude Codeの挙動が以前と変わった」「性能が落ちた」という声が多く、私自身も同様の印象を持っています。 40 | こうした背景から、Claude CodeからCodex CLIへの移行を検討する開発者が増えているのをX上でよく見かけます。 41 | 42 | ## Codex CLIの基本設定 43 | 44 | ### インストール方法 45 | 46 | 公式ではnpm、もしくはHomebrewでインストールする方法が案内されています。 47 | 48 | ```shell 49 | npm install -g @openai/codex 50 | ``` 51 | 52 | ```shell 53 | brew install codex 54 | ``` 55 | 56 | ### AGENTS.mdで日本語対応を設定する 57 | 58 | Codexでは、 `~/.codex/AGENTS.md` に共通プロンプトを記述すると、すべての会話に自動で読み込まれます 59 | 日本語での応答をデフォルトにしたい場合は、以下のような短い指示を書いておくのがおすすめです。 60 | 61 | ```shell 62 | 日本語で簡潔かつ丁寧に回答してください 63 | ``` 64 | 65 | AGENTS.mdはCodexをはじめ、CursorやGitHub Copilot,Gemini CLI, Roo Codeなど多くのAIツールが共通して利用することができるCustom Instructionsのファイル名です(Claude Codeも早く対応して欲しい....) 66 | 67 | ### 設定ファイル: ~/.codex/config.toml 68 | 69 | Codex CLIの設定は、基本的に `~/.codex/config.toml` ファイルで行います。 70 | 当初Node.jsで実装されていたCodex CLIがRustでスクラッチから再実装された経緯があり、その影響で設定ファイルにはTOML形式が採用されているようです。 71 | 72 | 以下は私が実際に使用している設定例です。 73 | modelの指定で明示的に"gpt-5-codex"を使用するようにしています。 74 | 75 | ```toml 76 | model = "gpt-5-codex" 77 | model_reasoning_effort = "high" 78 | hide_agent_reasoning = true 79 | network_access = true 80 | 81 | notify = ["bash", "-lc", "afplay /System/Library/Sounds/Ping.aiff"] 82 | 83 | [tools] 84 | web_search = true 85 | 86 | [mcp_servers.context7] 87 | command = "npx" 88 | args = ["-y", "@upstash/context7-mcp@latest"] 89 | 90 | [mcp_servers.figma] 91 | command = "npx" 92 | args = ["-y", "mcp-remote", "http://127.0.0.1:3845/sse"] 93 | ``` 94 | 95 | また、 `config.toml` に記述した設定は、環境変数や実行時の引数で上書きできます。 96 | 優先順位は次のとおりです。 97 | 98 | 1. `--config key=value` （コマンドライン引数） 99 | 2. 環境変数 100 | 3. `config.toml` の設定値 101 | 102 | ## 便利な機能と設定詳説 103 | 104 | ### GPT-5のreasoningを常にhighにする 105 | 106 | 次の設定で常に high の推論モードを有効化します。 107 | デフォルトではmediumが指定されていますが、highにするのがこの記事の中でも一番おすすめしたい設定です！ 108 | 109 | ```toml 110 | model_reasoning_effort = "high" 111 | ``` 112 | 113 | ### Notify（Claude Hooks相当）で音を鳴らす 114 | 115 | タスク完了時などに通知を受け取ることができます。 116 | macOSでサウンドを鳴らす設定例は以下のとおりです。 117 | 118 | ```toml 119 | # config.toml 120 | notify = ["bash", "-lc", "afplay /System/Library/Sounds/Ping.aiff"] 121 | ``` 122 | 123 | より高度なデスクトップ通知は、 [@laiso](https://x.com/laiso) さんの「 [新Codex CLIの使い方](https://blog.lai.so/codex-rs-intro/) 」が参考になります。 124 | 125 | ### MCPを設定する 126 | 127 | Claude Code同様にMCPに対応していますが、専用のJSONではなくCodex CLI自体の設定ファイルと同じ `config.toml` に記述します。 128 | 設定例は次のとおりです。 129 | 130 | ```toml 131 | [mcp_servers.context7] 132 | command = "npx" 133 | args = ["-y", "@upstash/context7-mcp@latest"] 134 | 135 | [mcp_servers.figma] 136 | command = "npx" 137 | args = ["-y", "mcp-remote", "http://127.0.0.1:3845/sse"] 138 | ``` 139 | 140 | 現時点のCodex CLIは stdio 通信のみサポートのため、SSEのMCPサーバーは直接利用できません。 141 | `mcp-proxy` や `mcp-remote` などのラッパーを挟む方法が公式に案内されています。 142 | 実際、FigmaなどリモートMCPが必要なものは `mcp-remote` を使用しています。 143 | 144 | > Defines the list of MCP servers that Codex can consult for tool use. Currently, only servers that are launched by executing a program that communicate over stdio are supported. For servers that use the SSE transport, consider an adapter like mcp-proxy. 145 | 146 | ### Web検索ツールを有効にする 147 | 148 | Codexには標準でWeb検索機能が組み込まれており、最新の情報に基づいた回答を生成させることができます。 149 | デフォルトでは無効になっていますが、以下の設定を追加することで有効化できます。 150 | 151 | ```toml 152 | [tools] 153 | web_search = true 154 | ``` 155 | 156 | ![search.png](https://res.cloudinary.com/zenn/image/fetch/s--YiCd0sf_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1497503eafd3b43edb4bbe3c.png%3Fsha%3Ded68170697f63cd4f7ea2c3cafdca1fd6777edcf) 157 | 158 | ### Custom Prompts（Claudeのスラッシュコマンド相当）を作る 159 | 160 | 頻繁に使うプロンプトをカスタムコマンドとして登録しておく機能です。 161 | 162 | プロジェクト配下の `.codex/prompts/` に置いても読み込まれず、 `~/.codex/prompts/` 配下に置く必要があります。 163 | 今後に期待です！ 164 | 165 | 実際にClaude Codeでも使用していたリファクタリング用のslash commandをCodexに移植しました。 166 | 以下のように `/` を入力した後にファイル名が表示され、実行できるようになります。 167 | 168 | ![](https://res.cloudinary.com/zenn/image/fetch/s--405gT8tm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/672d402124c1ae83b254b451.png%3Fsha%3Dda0f25ea20fe41ad63d9ac5c1102620ed95b22b3) 169 | 170 | ### reasoningログの非表示 171 | 172 | Codexは回答生成前に内部の思考過程を示す「reasoning」イベントを断続的に出力します。 173 | TUI表示で冗長に感じる場合は、次の設定で非表示にできます。 174 | 175 | ```toml 176 | # config.toml 177 | hide_agent_reasoning = true # 既定値は false 178 | ``` 179 | 180 | ### @ でファイルをメンションする 181 | 182 | プロンプト内で `@path/to/file` と書くと、そのファイル内容を明示的に指定することができます。 183 | ![](https://res.cloudinary.com/zenn/image/fetch/s--M3XoPboc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/6f06b4750b1d23eedd371a0e.png%3Fsha%3D3caf696ee1ff29dd797e4404265c7bf282bce71e) 184 | 185 | ### CodexのVSCode拡張 186 | 187 | CodexのVS Code拡張は2025年8月27日に公開されました。 188 | [developers.openai.com/codex/ide](https://developers.openai.com/codex/ide) 189 | 190 | OpenAI公式のVS Code拡張（ChatGPT Desktop連携）は以前から存在していましたが、そこにCodex CLI対応が加わった形です。 191 | 192 | CLIをそのまま使用するときとの違いとして、以下の点が挙げられます。 193 | 194 | - VS Codeで開いているファイルを参照できるため、 `@` でファイル名を指定しなくても雑にプロンプトを投げることができる 195 | - Codex Cloudへのタスクを流すことができる 196 | 197 | ![](https://res.cloudinary.com/zenn/image/fetch/s--iO1golUV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/9df6923ee5504f5138acf965.png%3Fsha%3D1d0def7a718d2f034e7b3ddfd7b4e1f3993fb7fc) 198 | 199 | ## 主要コマンド解説 200 | 201 | | コマンド | Claude Code相当 | 説明 | 202 | | --- | --- | --- | 203 | | `/new` | `/clear` | 現在のセッションを破棄し、新しいセッションを開始します | 204 | | `/mcp` | `/mcp` | 現在のセッションで有効になっているMCPを表示します | 205 | | `/compact` | `/compact` | 長くなった対話履歴をモデルに要約させ、トークンを節約します | 206 | 207 | ## おまけ：Codex CLIの制限について 208 | 209 | - Plus / Business（Team）/ Enterprise / Education 210 | - ローカルタスク: 平均的なユーザーは、週の制限内で 5 時間あたり 30〜150 メッセージ。 211 | - Pro 212 | - ローカルタスク: 平均的なユーザーは、週の制限内で 5 時間あたり 300〜1,500 メッセージ。 213 | 214 | OpenAIでCodexをリードする Alexander Embiricos 氏のポストによれば、これは現時点の利用状況における p25〜p75 の目安とのことです。 215 | 制限に関しては今後の利用状況に応じて変更される可能性があると思われます。 216 | 217 | 640 218 | 219 | 286 -------------------------------------------------------------------------------- /bookmark/playwright/テスト自動化フレームワーク「Playwright」にAIエージェント機能。自動的にテスト計画とテストコードの生成、テストコードのデバッグなど.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "テスト自動化フレームワーク「Playwright」にAIエージェント機能。自動的にテスト計画とテストコードの生成、テストコードのデバッグなど" 3 | source: "https://www.publickey1.jp/blog/25/playwrightai.html" 4 | author: 5 | published: 6 | created: 2025-10-14 7 | description: "マイクロソフトが主導して開発しているオープンソースのテスト自動化フレームワーク「Playwright」の新バージョン「Playwright 1.56」がリリースされました。 Playwrightはデスクトップ向けのWebアプリケーションやモ..." 8 | tags: 9 | - "clippings" 10 | image: "https://www.publickey1.jp/2025/maxresdefault.jpg" 11 | --- 12 | 2025年10月14日 13 | 14 | 15 | 16 | マイクロソフトが主導して開発しているオープンソースのテスト自動化フレームワーク「Playwright」の新バージョン「 [Playwright 1.56](https://playwright.dev/docs/release-notes#version-156) 」がリリースされました。 17 | 18 | Playwrightはデスクトップ向けのWebアプリケーションやモバイル向けのWebアプリケーションのテスト自動化が可能で、Chromium、WebKit、Firefoxなどの主要なモダンブラウザのエンジンのヘッドレス、ヘッドありのいずれの環境でも実行可能です。 19 | 20 | OSはWindows、macOS、Linuxをサポートします。 21 | 22 | テストはJavaScript、TypeScript、Java、Python、C＃などで記述でき、ローカル環境での実行だけでなく、CI（継続的統合）環境での実行などにも対応します。 23 | 24 | Playwright 1.56では、新機能として生成AIによる以下の3つのエージェントが追加されました。 25 | 26 | *Planner* 27 | 対象となるWebアプリケーションのテスト計画をMarkdown形式のドキュメントとして生成 28 | 29 | *Generator* 30 | テスト計画のドキュメントをPlaywrightで実行可能なテストコードに変換 31 | 32 | *Healer* 33 | テストが失敗した場合など、テストコードのバグを修正する 34 | 35 | ## テスト計画やテストコードなど自動生成 36 | 37 | PlaywrightのAIエージェント機能はVisual Studio CodeのGitHub CopilotもしくはClaude Code、OpenCodeに対応しています。 38 | 39 | 下記はVisual Studio Codeによるデモ動画の画面です。 40 | 41 | ![fig](https://www.publickey1.jp/2025/playwright156-01.png) 42 | 43 | 例えば、ユーザーが視聴した映画を管理する機能を備えたWebサイトに対して、ログインなどのテスト環境を整えた上で、Plannerエージェントに「映画のリスト管理機能のテストを生成せよ」と指示すると、テスト環境の初期設定に従って実際にWebサイトにログイン、機能を探索、分析を開始します。 44 | 45 | オプションとしてProduct Requirements Document（PRD）をコンテキストを明示するために追加可能です。 46 | 47 | ![fig](https://www.publickey1.jp/2025/playwright156-02.png) 48 | 49 | そしてヒューマンリーダブルかつ、テストコードを生成するのにも十分な内容を備えたテスト計画のドキュメントがMarkdown形式で生成されます。 50 | 51 | ![fig](https://www.publickey1.jp/2025/playwright156-03.png) 52 | 53 | テスト計画の内容に問題がなければ、Generatorエージェントに渡すことでPlaywrightが実行可能なテストコードが生成されます。 54 | 55 | テストが失敗する場合には、Healerエージェントに対して修正を指示することでテストコードの問題を見つけ、修正してくれます。 56 | 57 | ![fig](https://www.publickey1.jp/2025/playwright156-04.png) 58 | 59 | #### あわせて読みたい 60 | 61 | - [ガートナー、AIにおけるハイプサイクル2025を発表。AIエージェントやマルチモーダルAIは過剰期待、AIネイティブソフトウェアエンジニアリングやAGIは黎明期など](https://www.publickey1.jp/blog/25/ai2025aiaiaiagi.html) 62 | - [生成AIに疑似コードで指示すると自然言語よりも効率的にプログラムが生成できるというアイデアから生まれた、生成AI用の疑似言語「SudoLang」](https://www.publickey1.jp/blog/24/aiaisudolang.html) 63 | - [マイクロソフト、AIエージェントがセキュリティ対応を自動化。Security Copilotエージェント群を発表](https://www.publickey1.jp/blog/25/aisecurity_copilot.html) 64 | - [生成AIが自律的にテストを生成、実行しバグや脆弱性を発見してくれる「Spark」、Code Intelligenceが正式リリース](https://www.publickey1.jp/blog/25/aisparkcode_intelligence.html) 65 | 66 | [![fbシェア](https://www.publickey1.jp/2024/fbshare_btn.png)](http://www.facebook.com/share.php?u=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F25%2Fplaywrightai.html) 67 | 68 | [![Xポスト](https://www.publickey1.jp/2024/xpost_btn.png)](https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fwww.publickey1.jp%2F&text=%E3%83%86%E3%82%B9%E3%83%88%E8%87%AA%E5%8B%95%E5%8C%96%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%80%8CPlaywright%E3%80%8D%E3%81%ABAI%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD%E3%80%82%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AB%E3%83%86%E3%82%B9%E3%83%88%E8%A8%88%E7%94%BB%E3%81%A8%E3%83%86%E3%82%B9%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E7%94%9F%E6%88%90%E3%80%81%E3%83%86%E3%82%B9%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%AA%E3%81%A9%20%EF%BC%8D%20Publickey&url=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F25%2Fplaywrightai.html) 69 | 70 | [![Feedly](https://www.publickey1.jp/2024/feedly_btn.png)](https://feedly.com/i/subscription/feed%2Fhttps%3A%2F%2Fwww.publickey1.jp%2Fatom.xml) 71 | 72 | 73 | 74 | *≫次の記事* 75 | [Python 3.14登場、フリースレッド版正式サポート。実験的JITコンパイラも公式バイナリで利用可能に](https://www.publickey1.jp/blog/25/python_314jit.html) 76 | 77 | *≪前の記事* 78 | [Google、「Gemini Enterprise」発表。OfficeやSalesforce、SAP、Jiraなど業務アプリとの連携、コーディング支援、エージェント開発まで包括的に提供](https://www.publickey1.jp/blog/25/googlegemini_enterpriseofficesalesforcesapjira.html) 79 | 80 | 81 | 82 | 83 | #### タグクラウド 84 | 85 | [クラウド](https://www.publickey1.jp/cloud/) 86 | [AWS](https://www.publickey1.jp/cloud/aws/) / [Azure](https://www.publickey1.jp/cloud/microsoft-azure/) / [Google Cloud](https://www.publickey1.jp/cloud/google-cloud/) 87 | [クラウドネイティブ](https://www.publickey1.jp/cloud/cloud-native/) / [サーバレス](https://www.publickey1.jp/cloud/serverless/) 88 | [クラウドのシェア](https://www.publickey1.jp/cloud/cloud-share/) / [クラウドの障害](https://www.publickey1.jp/cloud/cloud-failure/) 89 | 90 | [コンテナ型仮想化](https://www.publickey1.jp/container-vm/) 91 | 92 | [プログラミング言語](https://www.publickey1.jp/programming-lang/) 93 | [JavaScript](https://www.publickey1.jp/programming-lang/javascript/) / [Java](https://www.publickey1.jp/programming-lang/java/) / [.NET](https://www.publickey1.jp/programming-lang/net/) 94 | [WebAssembly](https://www.publickey1.jp/programming-lang/webassembly/) / [Web標準](https://www.publickey1.jp/programming-lang/web-standards/) 95 | [開発ツール](https://www.publickey1.jp/devtools/) / [テスト・品質](https://www.publickey1.jp/devtools/software-test/) 96 | 97 | [アジャイル開発](https://www.publickey1.jp/devops/agile/) / [スクラム](https://www.publickey1.jp/devops/scrum/) / [DevOps](https://www.publickey1.jp/devops/) 98 | 99 | [データベース](https://www.publickey1.jp/database/) / [機械学習・AI](https://www.publickey1.jp/database/machine-learning-ai) 100 | [RDB](https://www.publickey1.jp/database/rdb/) / [NoSQL](https://www.publickey1.jp/database/nosql/) 101 | 102 | [ネットワーク](https://www.publickey1.jp/network/) / [セキュリティ](https://www.publickey1.jp/network/security) 103 | [HTTP](https://www.publickey1.jp/network/http/) / [QUIC](https://www.publickey1.jp/network/quic/) 104 | 105 | [OS](https://www.publickey1.jp/os) / [Windows](https://www.publickey1.jp/os/windows) / [Linux](https://www.publickey1.jp/os/linux) / [仮想化](https://www.publickey1.jp/os/vm) 106 | [サーバ](https://www.publickey1.jp/hardware/server/) / [ストレージ](https://www.publickey1.jp/hardware/storage/) / [ハードウェア](https://www.publickey1.jp/hardware/) 107 | 108 | [ITエンジニアの給与・年収](https://www.publickey1.jp/trends/payment/) / [働き方](https://www.publickey1.jp/trends/workstyle/) 109 | 110 | [殿堂入り](https://www.publickey1.jp/after-words/recommend/) / [おもしろ](https://www.publickey1.jp/after-words/funny) / [編集後記](https://www.publickey1.jp/after-words/) 111 | 112 | [全てのタグを見る](https://www.publickey1.jp/tags.html) 113 | 114 | #### Blogger in Chief 115 | 116 | ![photo of jniino](https://www.publickey1.jp/images/profile.jpg) 117 | 118 | Junichi Niino（jniino） 119 | IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。 120 | （ [詳しいプロフィール](https://www.publickey1.jp/about-us.html) ） 121 | 122 | Publickeyの新着情報をチェックしませんか？ 123 | Twitterで ： [@Publickey](https://twitter.com/publickey/) 124 | Facebookで ： [Publickeyのページ](https://www.facebook.com/publickey/) 125 | RSSリーダーで ： [Feed](https://www.publickey1.jp/atom.xml) 126 | 127 | #### 最新記事10本 128 | 129 | - [Python 3.14登場、フリースレッド版正式サポート。実験的JITコンパイラも公式バイナリで利用可能に](https://www.publickey1.jp/blog/25/python_314jit.html) 130 | - [テスト自動化フレームワーク「Playwright」にAIエージェント機能。自動的にテスト計画とテストコードの生成、テストコードのデバッグなど](https://www.publickey1.jp/blog/25/playwrightai.html) 131 | - [Google、「Gemini Enterprise」発表。OfficeやSalesforce、SAP、Jiraなど業務アプリとの連携、コーディング支援、エージェント開発まで包括的に提供](https://www.publickey1.jp/blog/25/googlegemini_enterpriseofficesalesforcesapjira.html) 132 | - [「Diaブラウザ」正式版に、誰でもダウンロード可能。AI時代の業務のためのブラウザを目指す](https://www.publickey1.jp/blog/25/diaai.html) 133 | - [「React Foundation」をメタ、マイクロソフト、Vercelらが設立へ。ReactやReact Nativeの中立的な開発主体として](https://www.publickey1.jp/blog/25/react_foundationvercelreactreact_native.html) 134 | - [「State of JavaScript 2025」の投票がスタート、仕事や趣味でJavaScriptを使っている人は誰でも回答可能](https://www.publickey1.jp/blog/25/state_of_javascript_2025javascript.html) 135 | - [生成AIはネットワーク構築運用をどれだけ楽にするか？ Interop Tokyoでの実験が明かした現実と可能性。Cloud Operator Days Tokyo 2025基調講演ほか［PR］](https://www.publickey1.jp/blog/25/ai_interop_tokyocloud_operator_days_tokyo_2025pr.html) 136 | - [次期MCP（Model Context Protocol）では非同期操作、ステートレス、公式のプロトコル拡張などサポート](https://www.publickey1.jp/blog/25/mcpmodel_context_protocol.html) 137 | - [マイクロソフト、MCPやA2Aプロトコルに対応したAIエージェント開発を容易にする「Microsoft Agent Framewok」プレビュー公開](https://www.publickey1.jp/blog/25/mcpa2aaimicrosoft_agent_framewok.html) 138 | - [ガートナー「先進テクノロジーのハイプサイクル 2025年版」発表。人に代わるマシン・カスタマー、プログラマブル・マネーなど注目](https://www.publickey1.jp/blog/25/_2025.html) -------------------------------------------------------------------------------- /bookmark/aws/Visual Studio Code上で AWS Step Functions のワークフローをより簡単に構築.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Visual Studio Code上で AWS Step Functions のワークフローをより簡単に構築" 3 | source: "https://aws.amazon.com/jp/blogs/news/introducing-an-enhanced-local-ide-experience-for-aws-step-functions/" 4 | author: 5 | - "[[Amazon Web Services]]" 6 | published: 2025-03-24 7 | created: 2025-10-15 8 | description: "AWS Step Functions は、ステートマシンの構築をより簡単にするために、ローカル IDE 機能がより強化されました。これにより、Workflow Studio が AWS Toolkit 拡張機能を通じて Visual Studio Code (VS Code) で利用できるようになりました。開発者は AWS コンソールと同じ強力な視覚的な編集機能を使用して、ローカル IDE でステートマシンを作成および編集できます。" 9 | tags: 10 | - "clippings" 11 | image: "https://d2908q01vomqb2.cloudfront.net/b3f0c7f6bb763af1be91d9e74eabfeb199dc1f1f/2025/03/24/step-functions-8-service.jpg" 12 | --- 13 | ## Amazon Web Services ブログ 14 | 15 | この記事は2025 年 3 月 7 日に公開された「 [Introducing an enhanced local IDE experience for AWS Step Functions](https://aws.amazon.com/jp/blogs/compute/introducing-an-enhanced-local-ide-experience-for-aws-step-functions/) 」を翻訳したものとなります。 16 | 17 | *本記事は、シニアソリューションアーキテクトの Ben Freiberg が執筆しました。* 18 | 19 | [AWS Step Functions](https://aws.amazon.com/step-functions/) は、ステートマシンの構築をより簡単にするために、ローカル IDE 機能がより強化されました。これにより、Workflow Studio が [AWS Toolkit](https://aws.amazon.com/visualstudiocode/) 拡張機能を通じて Visual Studio Code (VS Code) で利用できるようになりました。 20 | 開発者は AWS コンソールと同じ強力な視覚的な編集機能を使用して、ローカル IDE でステートマシンを作成および編集できます。 21 | 22 | Step Functions は、開発者が AWS サービスを使用して分散アプリケーションの構築、プロセスの自動化、マイクロサービスのオーケストレーション、データや機械学習 (ML) パイプラインの作成を支援するビジュアルワークフローサービスです。 23 | 24 | お客様は、 [AWS Lambda](https://aws.amazon.com/lambda/) 、 [AWS Fargate](https://aws.amazon.com/fargate/) 、 [Amazon Bedrock](https://aws.amazon.com/bedrock/) 、 [HTTP API 統合](https://docs.aws.amazon.com/step-functions/latest/dg/call-https-apis.html) など、複数のサービスを含むワークフローを構築するために Step Functions を選択しています。開発者は、 [Workflow Studio](https://docs.aws.amazon.com/step-functions/latest/dg/workflow-studio.html) を使用して AWS コンソールから、または JSON ベースのドメイン固有言語である [Amazon States Language (ASL)](https://docs.aws.amazon.com/step-functions/latest/dg/concepts-amazon-states-language.html) を使用してコードとして、これらのワークフローをステートマシンとして作成します。開発者は、アプリケーションやインフラストラクチャ (IaC) コードと共にワークフローの定義を管理します。今や、開発者は AWS コンソールと同じ体験で、VS Code でワークフローを構築およびテストするためのさらなる機能を利用できるようになりました。 25 | 26 | ## ローカルワークフロー開発の簡素化 27 | 28 | 統合された Workflow Studio により、開発者は自身のローカル IDE 内で Step Functions ワークフローを円滑に構築できます。開発者は AWS コンソールで使用するのと同じキャンバスを使用して、ステートをドラッグ＆ドロップしてワークフローを構築できます。ワークフローを視覚的に修正すると、ASL 定義が自動的に更新されるため、構文ではなくビジネスロジックに集中できます。 Workflow Studio の統合により、作業環境を切り替えることなく、AWS コンソールと同じ直感的で視覚的なステートマシンの設計アプローチを提供します。 29 | 30 | ## はじめに 31 | 32 | 更新された IDE の操作性を使用するには、VS Code 拡張機能として [AWS Toolkit](https://aws.amazon.com/visualstudiocode/) のバージョン 3.49.0 以上がインストールされていることを確認してください。 33 | 34 | [![更新可能な VS Code の AWS Toolkit 拡張機能](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-1.jpeg)](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-1.jpeg) 35 | 36 | *図 1: AWS Toolkit の更新* 37 | 38 | AWS Toolkit 拡張機能をインストールした後、ステートマシン定義を開いて Workflow Studio でビルドを開始できます。 39 | ローカルワークスペースの定義ファイルを使用するか、 [AWS Explorer](https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/aws-explorer.html) を使用してクラウドから既存のステートマシン定義をダウンロードできます。 40 | VS Code の統合機能は、JSON 形式と YAML 形式の ASL 定義をサポートしています。 41 | (注: Workflow Studio が自動的にファイルを開くためには、ファイルの拡張子が `.asl.json` 、`.asl.yml` 、または `.asl.yaml` である必要があります。) 42 | YAML ファイルを使用する場合、Workflow Studio は編集のために定義を JSON に変換し、保存前に YAML に再変換します。 43 | 44 | [![デザインモードが開かれた Workflow Studio のサンプルステートマシン](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-2.jpeg)](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-2.jpeg) 45 | 46 | *図 2: Workflow Studio のデザインモード* 47 | 48 | VS Code の Workflow Studio は、デザインモードとコードモードの両方をサポートしています。デザインモードでは、ワークフローの構築と確認のためのグラフィカルインターフェイスを提供します。 49 | コードモードでは、統合されたコードエディタを使用して、ワークフローの [Amazon States Language](https://docs.aws.amazon.com/step-functions/latest/dg/concepts-amazon-states-language.html) (ASL) 定義を表示および編集できます。 50 | 次の画面に示すように、Workflow Studio の右上にある *Return to Default Editor* リンクを選択することで、いつでもテキストベースの編集に戻ることができます。 51 | 52 | [![コードモードが開かれた Workflow Studio でのサンプルステートマシン](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-3.jpeg)](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-3.jpeg) 53 | 54 | *図 3: Workflow Studio のコードモード* 55 | 56 | VS Code で Workflow Studio を手動で開くには、ワークフロー定義ファイルの上部にある「 Open with Workflow Studio 」アクションを使用するか、エディターペインの右上にあるアイコンを使用します。 57 | 以下の画面では、両方のオプションが強調表示されています。 58 | また、ファイルエクスプローラーペインからファイルのコンテキストメニューを使用して Workflow Studio を開くこともできます。 59 | 60 | [![デフォルトエディタで表示された asl ファイルと、Workflow Studio を開くための様々な方法](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-4.jpeg)](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-4.jpeg) 61 | 62 | *図 4: エディターへの Workflow Studio の統合* 63 | 64 | Workflow Studio で行った編集は、未保存の変更として元の ASL ファイルに自動的に同期されます。 65 | 変更を保存するには、Workflow Studio またはファイルエディタから変更を保存する必要があります。 66 | 同様に、ローカルファイルに加えた変更は、保存時に Workflow Studio に同期されます。 67 | 68 | Workflow Studio は [Definition Substitutions](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-resource-stepfunctions-statemachine.html#cfn-stepfunctions-statemachine-definitionsubstitutions) に対応しているため、 [AWS CloudFormation](https://aws.amazon.com/cloudformation/) や [AWS Cloud Development Kit (CDK)](https://docs.aws.amazon.com/cdk/v2/guide/home.html) などの IaC ツールと統合されたワークフローも編集できます。 69 | Definition Substitutions は CloudFormation の機能で、IaC テンプレートで提供する値への動的な参照をワークフロー定義に追加できます。 70 | 71 | ```yaml 72 | AWSTemplateFormatVersion: "2010-09-09" 73 | Description: "State machine with Definition Substitutions" 74 | Resources: 75 | MyStateMachine: 76 | Type: AWS::StepFunctions::StateMachine 77 | Properties: 78 | StateMachineName: HelloWorld-StateMachine 79 | DefinitionS3Location: 80 | Bucket: amzn-s3-demo-bucket 81 | Key: state-machine-definition.json 82 | DefinitionSubstitutions: 83 | TableName: DemoTable 84 | ``` 85 | 86 | YAML 87 | 88 | その後、ステートマシンの定義で定義の代替を使用できます。 89 | 90 | ```json 91 | "Write message to DynamoDB": { 92 | "Type": "Task", 93 | "Resource": "arn:aws:states:::dynamodb:putItem", 94 | "Next": "Remove message from SQS queue", 95 | "Arguments": { 96 | "TableName": "${TableName}", 97 | "Item": { 98 | ... omitted for brevity ... 99 | } 100 | }, 101 | "Output": "{% $states.input %}" 102 | } 103 | ``` 104 | 105 | JSON 106 | 107 | このコードは、putItem オペレーションを使用して DynamoDB にメッセージを書き込む Step Functions のタスクステートを定義しています。 108 | `${TableName}` という置換構文により、ステートマシンの実行時にパラメータとして渡される動的な DynamoDB テーブル名を使用できます。 109 | 110 | ## テストとデプロイ 111 | 112 | Workflow Studio の統合により、Step Functions の [TestState API](https://aws.amazon.com/blogs/compute/accelerating-workflow-development-with-the-teststate-api-in-aws-step-functions/) を使用して単一のステートをテストできます。 113 | TestState API を使用すると、ステートマシンを作成したり、既存のステートマシンを更新したりすることなく、ローカルの IDE からクラウド上のステートをテストできます。 114 | このにより、ステートマシン全体を呼び出すことなく、個々のステートの変更の作成とデバッグができます。 115 | たとえば、IDE を離れることなく、入出力の処理を改善したり、Choice ステートの条件ロジックを更新したりできます。 116 | 117 | **状態のテスト** 118 | 119 | 1. Workflow Studio で任意のステートマシン定義ファイルを開きます 120 | 2. キャンバスまたはコードタブから State （日本語: 状態）を選択します 121 | 3. 右側のインスペクターパネルが開いていない場合は開きます [![A DynamoDB PutItem opened in the Workflow Studio inspector panel with the Arguments showing a Definition Substitution..](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-5-1.png)](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-5-1.png) 122 | **図 5 ：個別のステートの引数** 123 | 4. 上部の **Test state** ボタン（日本語: テスト状態）を選択します 124 | 5. IAM ロールを選択し、入力を追加します。 [TestState API を使用するために必要な権限](https://docs.aws.amazon.com/step-functions/latest/dg/test-state-isolation.html#test-state-permissions) がロールに付与されていることを確認してください。 125 | 6. ステートに Definition Substitutions が含まれている場合、特定の値に置き換えることができる追加セクションが表示されます 126 | 7. **Start Test** （日本語: テストを開始）を選択します 127 | 128 | [![Modal popup of the TestState with a role selected and showing the entered value of a Definition Substitution.](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-6.png)](https://d2908q01vomqb2.cloudfront.net/1b6453892473a467d07372d45eb05abc2031647a/2025/03/05/sf-ide-6.png) 129 | 130 | *図 6: 定義の置換を含むテストステートの設定* 131 | 132 | テストが成功したら、AWS Toolkit を使用して [IDE からワークフローを公開](https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/building-stepfunctions.html) できます。 133 | また、 [AWS Serverless Application Model](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/what-is-sam.html) 、AWS CDK、CloudFormation などのインフラストラクチャーをコードで管理するためのツールを使用してステートマシンをデプロイすることもできます。 134 | 135 | ## まとめ 136 | 137 | Step Functions は、VS Code IDE と AWS Toolkit を使用したワークフローの開発を簡素化するため、強化されたローカル IDE 環境を導入しています。 138 | これにより、コーディング、テスト、デプロイ、デバッグのサイクルが効率化され、開発者は Workflow Studio をスムーズに統合できます。 139 | ビジュアルなワークフローデザインと充実した機能を備えた IDE のパワーを組み合わせることで、開発者はより効率的に Step Functions のワークフローを構築できるようになりました。 140 | 141 | まず、 [AWS Toolkit for Visual Studio Code](https://aws.amazon.com/visualstudiocode/) をインストールし、Workflow Studio の統合に関する [ユーザーガイド](https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/stepfunctions-workflowstudio.html) をご覧ください。 142 | AWS サーバーレスに関する実践的な例、ベストプラクティス、有用なリソースは [Serverless Land](https://serverlessland.com/) でご覧いただけます。 143 | 144 | 翻訳は技術統括本部 ソリューションアーキテクトの [菅原太樹](https://x.com/taikis_tech) が担当し、一部を加筆修正しました。 -------------------------------------------------------------------------------- /bookmark/aws/AWSの安価でスケーラブルなウェブアプリ構成 2025年度版.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "AWSの安価でスケーラブルなウェブアプリ構成 2025年度版" 3 | source: "https://tmokmss.hatenablog.com/entry/serverless-fullstack-webapp-architecture-2025" 4 | author: 5 | - "[[tmokmss]]" 6 | published: 2025-05-16 7 | created: 2025-10-15 8 | description: "3年前、趣味で開発するウェブアプリ向けの安価なAWSアーキテクチャについて記事を書きました。当時流行りの話題だった記憶です。 趣味Webサービスをサーバーレスで作る ― 格安編 - maybe daily dev notes 最近はAWSにも新たに色々なサービスが出てきて、以前とは一味違う構成を取れるようになっています。この記事では、アップデートされた格安かつスケーラブルなウェブアプリ向けAWSアーキテクチャを紹介します。 コード 本記事で紹介するアーキテクチャのリファレンス実装は、以前と同じリポジトリに公開しています。 github.com 主な機能は下記です: Next.js App Ro…" 9 | tags: 10 | - "clippings" 11 | image: "https://ogimage.blog.st-hatena.com/13574176438089935881/6802418398348257917/1747656060" 12 | --- 13 | 3年前、趣味で開発するウェブアプリ向けの安価なAWSアーキテクチャについて記事を書きました。当時流行りの話題だった記憶です。 14 | 15 | [趣味Webサービスをサーバーレスで作る ― 格安編 - maybe daily dev notes](https://tmokmss.hatenablog.com/entry/20220611/1654931458) 16 | 17 | 最近はAWSにも新たに色々なサービスが出てきて、以前とは一味違う構成を取れるようになっています。この記事では、アップデートされた格安かつスケーラブルなウェブアプリ向けAWSアーキテクチャを紹介します。 18 | 19 | ## コード 20 | 21 | 本記事で紹介するアーキテクチャのリファレンス実装は、以前と同じリポジトリに公開しています。 22 | 23 | [github.com](https://github.com/aws-samples/serverless-full-stack-webapp-starter-kit) 24 | 25 | ![](https://cdn-ak.f.st-hatena.com/images/fotolife/t/tmokmss/20250515/20250515235658.png) 26 | 27 | 主な機能は下記です: 28 | 29 | - Next.js App RouterをAWS Lambda上にデプロイ 30 | - CloudFront + Lambda関数URLによるレスポンスストリーミング対応 31 | - クライアントからサーバー、DBまでの型安全性 32 | - Aurora Serverless V2でScale to zerosするRDBMS 33 | - 非同期/Cronジョブ機構とクライアントへのリアルタイム通知 34 | - Cognitoによる認証認可 (SSR対応) 35 | - CDKのコマンド一発でデプロイ 36 | 37 | それではDive deepしていきましょう。 38 | 39 | ## 利用技術の説明 40 | 41 | 以下に上記アーキテクチャの要点を説明します。 42 | 43 | ### Next.js on Lambda 44 | 45 | CloudFront + Lambda fURL + Lambda Web Adapterの構成で、Next.js on AWS Lambdaを実現しています。この構成の詳細は以下の資料もご覧ください。 46 | 47 | [speakerdeck.com](https://speakerdeck.com/tmokmss/aws-lambda-web-adapterwohuo-yong-suruxin-siisabaresunoshi-zhuang-patan) 48 | 49 | この構成であれば、Next.js App Routerでは [重要なレスポンスストリーミングの要件](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming) も達成できます。 50 | 51 | 別のアドバンスドな構成として [cdklabs/cdk-nextjs](https://github.com/cdklabs/cdk-nextjs) という方法もあるのですが、今回は見送っています。今の構成でも、CloudFrontのキャッシュを活用すればLambda上のNext.jsだけでも効率的に動作するように思うので、複雑性に対して得られるメリットが少ないかなと感じています。 52 | 53 | ### E2Eの型安全 54 | 55 | 今回は以下のライブラリも使い、クライアントからサーバー・データベースまでの型安全性が実現されています: 56 | 57 | - [next-safe-action](https://github.com/TheEdoRan/next-safe-action) 58 | - [React Hook Form](https://github.com/react-hook-form/react-hook-form) 59 | - [Prisma](https://github.com/prisma/prisma) 60 | 61 | 以前、Page Routerの時代は [tRPCを使ったサンプル](https://github.com/aws-samples/trpc-nextjs-ssr-prisma-lambda) を作ったこともあったのですが、App RouterになってE2E型安全の実現がさらに楽になりました。ページのレンダリング時には直接DBを叩くような書き方ができますし、ミューテーションの処理もServer Actionで容易です。クライアントからのクエリだけはtRPCのほうが扱いやすかった印象ですが、Server Actionを使っても可能ではあります (クライアントのJSから [実行・結果の取得](https://next-safe-action.dev/docs/execute-actions/hooks/useaction) ができるため)。 62 | 63 | また、Server Actionを素で使うと、認証認可といった処理が煩雑になりがちです。こうした処理をミドルウェア的に簡単に挿入するため、next-safe-actionを利用しています。認証認可処理が実装された [Action Clientを作成し](https://next-safe-action.dev/docs/define-actions/create-the-client) 、それを使ってServer Actionを定義するだけです。 [tRPCのprocedure](https://trpc.io/docs/server/procedures) と似た書き心地ですね。 64 | 65 | next-safe-actionは、React Hook Formと容易に統合できる点も魅力です。 [adapter-react-hook-form](https://github.com/next-safe-action/adapter-react-hook-form) というライブラリを使えば簡単です([コード例](https://github.com/aws-samples/serverless-full-stack-webapp-starter-kit/blob/ae718df5303050100b161d8ab03935e78894feb0/webapp/src/app/\(root\)/components/CreateTodoForm.tsx#L24-L46) 。) フォームとServer Actionの統合方法としては [Conform](https://ja.conform.guide/) も人気ですが、個人的には慣れ親しんだReact Hook Formの体験を保ちたいので、こちらの方法を好んでいます。 66 | 67 | ### サーバーレスの利便性 68 | 69 | サーバーレスサービスを主に構成されるため、リクエストが増えても自動でスケールアウトしますし、またアイドル時のコストはゼロになります。(ただしVPCを使うため、NATのみ例外。後述。) 70 | 71 | またデータベースについても、Aurora Serverless v2が登場したことで、アイドル時のコストをゼロにできるようになりました。 以前はAWSでScale to zeroするDBといえばDynamoDBだったのですが、RDBMSでこれができるようになったのは大きいです。やはり開発体験としてはNoSQLより慣れていて円滑なことが多いため。 72 | 73 | ### AppSync Eventsによるクライアントへのリアルタイム通知 74 | 75 | 2024年末にGAした [AppSync Events](https://docs.aws.amazon.com/appsync/latest/eventapi/event-api-welcome.html) により、リアルタイム通知の実装が非常に手軽になりました。これは例えば、クライアントへのジョブ完了通知などに利用できます。 76 | 77 | 従来はAPI Gateway WebSockets APIなどを利用していた部分かと思いますが、AppSync EventsではコネクションIDの管理が不要になる他、ブロードキャストの実装も容易です。 78 | 79 | 個人的には、API Gateway WebSocketをこの用途で使うと実装が煩雑になるため、これまではリアルタイム通知でなくポーリングによる実装をすることが多かったです。しかしながら、AppSync Eventsでは多くの面倒な部分をサービス(と [Amplify library](https://docs.amplify.aws/react/build-a-backend/data/connect-event-api/))側で隠蔽してくれるため、より気軽にリアルタイム通知要件を実装できるようになりました。 80 | 81 | 使い所は意外と多いので、ぜひ考えてみてください。 82 | 83 | ### Next.js App RouterとCognitoログインの統合 84 | 85 | 従来のSPAではCognitoログインを統合する場合、 [Amplify UIコンポーネント](https://ui.docs.amplify.aws/react/connected-components/authenticator) を使うのが一般的でした。しかしながら、こちらはクライアントコンポーネントのためSSRと相性が良くない上、トークンをhttp-onlyなCookieに保存することも困難でした。 86 | 87 | 現在はこの状況が大きく改善されており、App RouterでCognitoをうまく扱うためのライブラリ [Amplify Next.js adapter](https://docs.amplify.aws/javascript/build-a-backend/server-side-rendering/) が提供されています。これはUIコンポーネントでなく、 [Cognito Managed Login](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-managed-login.html) を活用してログイン機能を提供します。また、Cookieを経由してサーバーサイドでトークンやユーザー情報を取得するのも容易です。 88 | 89 | Amplify Next.js adapterとnext-safe-actionを組み合わせることで、Server ActionをCognitoの認証で保護することも簡単にできます ([コード例](https://github.com/aws-samples/serverless-full-stack-webapp-starter-kit/blob/ae718df5303050100b161d8ab03935e78894feb0/webapp/src/lib/safe-action.ts#L30-L39))。 90 | 91 | ### EventBridge Schedulerによるcronジョブ機構 92 | 93 | ウェブアプリでは、しばしばジョブのスケジュール実行機能 (毎日朝4時に集計実行など) が必要になりがちです。今回は [EventBridge Scheduler](https://docs.aws.amazon.com/scheduler/latest/UserGuide/what-is-scheduler.html) を使っています。 94 | 95 | EventBridge Schedulerは従来のEventBridgeルールと比べて、cronのタイムゾーンが指定できたり [タイムウィンドウ](https://docs.aws.amazon.com/scheduler/latest/UserGuide/managing-schedule-flexible-time-windows.html) を指定できたりと、上位互換のような存在です。 96 | 97 | Schedulerの [CDK L2が最近GA](https://aws.amazon.com/blogs/devops/announcing-the-general-availability-of-the-amazon-eventbridge-scheduler-l2-construct/) したので、スケジュールもCDKで便利に一元管理できます。 [コード例](https://github.com/aws-samples/serverless-full-stack-webapp-starter-kit/blob/ae718df5303050100b161d8ab03935e78894feb0/cdk/lib/constructs/async-job.ts#L55-L59) 98 | 99 | ### CDKによる一撃デプロイ 100 | 101 | 上記のシステムを、 [AWS CDK](https://aws.amazon.com/cdk/) のコマンド一発でデプロイできるようにしています。この性質は初期構築を楽にするだけでなく、環境複製を容易にする意味でも重要です。 102 | 103 | これを実現する上での難点としては、Next.jsのビルド時に、Cognito User Pool IDなどデプロイ時に決定される値が必要になることです。つまり、初回デプロイ前にNext.jsをビルドできないため、デプロイ手順が煩雑になりえます。 104 | 105 | この問題は、デプロイ時にコンテナイメージをビルドできるコンストラクト([`ContainerImageBuild`](https://github.com/tmokmss/deploy-time-build?tab=readme-ov-file#build-a-container-image))を使うことで解消しています。 [以前紹介したdeploy-time-build](https://tmokmss.hatenablog.com/entry/20220515/1652623112) を改良したものです。 106 | 107 | 別解としては [next-runtime-env](https://github.com/expatfile/next-runtime-env) というライブラリを使うことで、ランタイムの環境変数を静的ファイルに注入することができます。しかし、こちらは環境変数周りの扱いが完全には透過的でなく、特殊な実装が必要になる ([コード例](https://github.com/expatfile/next-runtime-env/blob/536fc86d486fd0da722a97264ca5bc1830e4c71e/README.md?plain=1#L56-L69)) ため、今回は避けています。 108 | 109 | ### コスト 110 | 111 | コストのブレークダウン表は [READMEにまとめてあります](https://github.com/aws-samples/serverless-full-stack-webapp-starter-kit?tab=readme-ov-file#cost) 。100ユーザーで月額8.5ドルという見積もりです。もちろんこれはざっくりした概算で、実際の値はユースケース次第となります。 112 | 113 | また、上記は無料枠を含めていません。無料枠をフル活用できる場合は、Cognito, Lambda, NAT Instanceなど多くのサービスが無料範囲に収まるため、月額5ドル未満となるでしょう。 114 | 115 | ## このアーキテクチャの欠点 116 | 117 | 良い話ばかりだとアレなので、何点か既知の欠点を挙げておきます: 118 | 119 | ### VPCが必要のため、NAT Gatewayのコストがかかる 120 | 121 | Aurora Serverless v2においてもVPCは必要のため、Lambdaのネットワーク疎通のためにNAT Gatewayやそれに類する機能が必要となります。NAT Gatewayは小規模利用には少々コストが目立ちがちです。 122 | 123 | 小規模なユースケースではNAT Gatewayの代わりにNATインスタンスを使うことで、毎月のコストを3USD (t4g.nano)に抑えることができます。無料枠に含まれるインスタンスを使うことも可能でしょう。 124 | 125 | あるいはそもそもVPCなしで利用可能な [Aurora DSQL](https://aws.amazon.com/rds/aurora/dsql/) も存在します。2025/05現在ではプレビュー状態のため今回は利用を見送っていますが、GAされれば良い代替手段となるはずです。 126 | 127 | ### コールドスタート 128 | 129 | 本アーキテクチャでは、Lambda, Auroraのコールドスタートの影響を受けます。アイドル状態からアクセスしたとき、およそ以下の待ち時間が生じます: 130 | 131 | - Lambda: 1〜3秒程度 132 | - Aurora: 10秒程度 133 | 134 | 頻繁なアクセスのあるアプリであれば深刻な問題になることは少ないですが、アクセス頻度の少ないアプリ (5分に1回未満など) の場合、アクセスのたびにコールドスタートが生じてユーザー体験が悪化するリスクがあります。 特に今回はSPAなどとは違いS3から静的ファイルを配信するわけでもないため、Lambdaが起動するまでは一切ページが描画されない点も、ユーザーに不安をもたらすポイントです。 135 | 136 | こうしたコールドスタート問題の緩和策は、今回は以下が考えられます: 137 | 138 | - Lambda: 定期的(2分おきなど)にLambdaにリクエストするwarmerを設置する (provisioned concurrencyよりは安価) 139 | - Aurora: 自動停止に関するパラメータを調整する (停止状態に移行するまでの時間を伸ばすなど) 140 | 141 | ある程度のアクセス頻度があれば問題になることは少ないと思われますが、考慮点として挙げました。 142 | 143 | ### 大規模利用時のコスト 144 | 145 | ウェブアプリへのリクエスト数が増えLambdaの利用量が増えてくると、コスト効率が悪化する場合が考えられます。Lambdaはリクエストごとに計算リソースが分離しており、I/Oバウンドな処理ではリソースが遊びがちのためです (もちろん [良し悪しはあります](https://qiita.com/_kensh/items/dc99e9a0238a1b4238a5))。 146 | 147 | このため、利用量が大きくなると、ECSなどに移行することが必要になるかもしれません。とはいえ移行自体はそれほど困難ではないはずです。アプリ自体はNext.jsをそのまま利用でき、またステートレスな部分のみの移行のため。 148 | 149 | 必要な移行作業はLambda + 関数URLの部分を、ALB + ECSなどに置き換えるだけです。この場合scale to zeroしないためアイドル時のコストは増えますが、大規模な利用であればこのコストは支配的な要因にはならないでしょう。 150 | 151 | ## 関連情報 152 | 153 | 今回は私の開発したサンプルを紹介しましたが、その他にもフルスタックなウェブアプリを構築する新しい手段はいくつかAWSから提供されています。 154 | 155 | [Amplify Gen2](https://docs.amplify.aws/) も良いスターティングポイントとなると思います。私はプレーンなCDKの方が好きなので上記のサンプル実装を作成しましたが、好みの問題でしょう。 156 | 157 | また、オーストラリアの同僚が、最近 [NX plugin for AWS](https://github.com/awslabs/nx-plugin-for-aws) というツールを公開しました。これはTanStack RouterやtRPCで構築、あるいはPython Fast APIも選択できるなど、実装上の違いはあるものの、ウェブアプリの開発体験を高めたいという目的は同じです。 158 | 159 | [awslabs.github.io](https://awslabs.github.io/nx-plugin-for-aws/jp/) 160 | 161 | [AWS PDK](https://github.com/aws/aws-pdk) と同じメンバーが作っており、PDKでの学びが活かされてるそうです。日本語ドキュメントも用意されているので、ぜひお試しください: [クイックスタートガイド | @aws/nx-plugin](https://awslabs.github.io/nx-plugin-for-aws/jp/get_started/quick-start/) 162 | 163 | ## まとめ 164 | 165 | 最新のAWSサービス群を活用して、フルスタックなウェブアプリを構築するアーキテクチャを紹介しました。 166 | 167 | 個人的には今のところかなり開発体験が良いので、ウェブアプリはしばらくこの構成で作ろうと思います。 168 | 169 | [« AIエージェントアプリのコンテキスト長上…](https://tmokmss.hatenablog.com/entry/handling-context-window-length-limit) [気軽なインド・ラダック旅。突然のレー空… »](https://tmokmss.hatenablog.com/entry/trip_to_ladakh_turns_into_exciting_bus_tour) -------------------------------------------------------------------------------- /bookmark/claude/Claude Sonnet 4.5 発表関連情報まとめ.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Claude Sonnet 4.5 発表関連情報まとめ" 3 | source: "https://zenn.dev/schroneko/articles/claude-sonnet-4-5" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-09-30 7 | created: 2025-10-14 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--6nEaACtn--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Claude%2520Sonnet%25204.5%2520%25E7%2599%25BA%25E8%25A1%25A8%25E9%2596%25A2%25E9%2580%25A3%25E6%2583%2585%25E5%25A0%25B1%25E3%2581%25BE%25E3%2581%25A8%25E3%2582%2581%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:%25E3%2581%25AC%25E3%2581%2593%25E3%2581%25AC%25E3%2581%2593%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzE4ZDE4NWExYTYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | 377 14 | 15 | 89 16 | 17 | ## tl;dr 18 | 19 | - Claude Sonnet 4.5 が発表されたよ 20 | - コーディング性能はあらゆるモデルの中で一番高いよ 21 | - ミスアライメントがすべてのモデルの中で最も低いよ 22 | - Opus 4.1 と比べても全体的に性能が向上しているよ 23 | - Claude Code が v 2.0.0 にアプデされたよ 24 | - Claude Code にチェックポイント機能がついたよ（ESC x2 か `/rewind` ） 25 | - Claude Code SDK が Claude Agent SDK にリネームされたよ 26 | - Claude for Chrome がウェイトリスト登録者全員に解放されたよ 27 | - Claude API にコンテキスト管理のふたつの機能が追加されたよ 28 | - Claude Sonnet 4.5 に既に対応済みのサービスをまとめたよ 29 | 30 | --- 31 | 32 | Claude Sonnet 4.5 の発表にともなって公開されたリソースが盛りだくさんで、迷子になりかけたのでまとめます。各リソースに対してそれぞれ解説をしていきます。 33 | 34 | ## Claude Sonnet 4.5 について 35 | 36 | Anthropic の Claude Sonnet 4.5 が公開。世界中で最高性能のコーディングモデル。複雑なエージェントの構築やコンピュータ操作、リーズニング、数学タスクにおいて前のモデルから大幅に性能向上。30 時間を超える複雑な複数のステップにわたるタスクを実行可能。入力 $3 / 1M token、出力 $15 / 1M token とお値段は据え置き。 37 | 38 | ### Claude Sonnet 4.5 の性能 39 | 40 | ![](https://storage.googleapis.com/zenn-user-upload/61fce0feda1e-20250930.webp) 41 | 42 | ソフトウェアエンジニアリングタスクのベンチマーク SWE-bench Verified において 77.2% と最高性能。実際の開発では、複雑で複数のステップにわたるタスクにおいて、30 時間以上かけてタスクを実行できることを確認。実世界のコンピュータ操作の能力を測るベンチマーク OSWorld においても 61.4% と最高性能。 43 | 44 | 下記のデモ動画では、Claude がブラウザを直接操作し、ウェブサイトを操作したりスプレッドシートへ入力したりする様子を確認できる。 45 | 46 | <iframe src="https://www.youtube-nocookie.com/embed/oXfVkbb7MCg" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> 47 | 48 | ![](https://storage.googleapis.com/zenn-user-upload/9b91b06a2abc-20250930.webp) 49 | 50 | 他にも多くのベンチマークで性能向上を確認。 51 | 52 | ![](https://storage.googleapis.com/zenn-user-upload/af9437f24b83-20250930.webp) 53 | 54 | ![](https://storage.googleapis.com/zenn-user-upload/b0a2d753251b-20250930.webp) 55 | 56 | ![](https://storage.googleapis.com/zenn-user-upload/be162f9bc6d2-20250930.webp) 57 | 58 | ![](https://storage.googleapis.com/zenn-user-upload/81a195d25e2a-20250930.webp) 59 | 60 | 金融、法律、医療、科学技術分野の専門家による評価では Sonnet 4.5 は Opus 4.1 を含むモデルと比較して、専門分野に関する知識とリーズニング能力が格段に向上したとのこと。 61 | 62 | アーリーアクセスのあった Cursor や GitHub、NETFLIX 他の企業においても高評価。 63 | 64 | ### ミスアライメントを軽減したモデル 65 | 66 | ![](https://storage.googleapis.com/zenn-user-upload/3f24d1f5a109-20250930.webp) 67 | 68 | Claude Sonnet 4.5 は性能の高さだけではなく、ミスアライメントを最小にまで減らすことのできたモデル。安全性の訓練により、過度にユーザの指示に従ったり、虚偽の回答をするなどの行動パターンを低減。プロンプトインジェクションに対する防御性能を大幅に向上。 69 | 70 | また、Claude Sonnet 4.5 は AI セーフティレベル 3（ASL-3）のもと公開。化学兵器・生物兵器・放射性物質・核兵器（CBRN）に関する入出力を検出するための「分類器」と呼ばれるフィルタを含む。 71 | 72 | 時折、分類器の誤検知が想定されるため、会話が中断された場合 Claude Sonnet 4 に切り替える機能を実装。誤検知は継続的に減少しており、さらに減らせるよう取り組んでいる。 73 | 74 | ### Claude Agent SDK 75 | 76 | 半年以上に渡って Claude Code を継続的に改善。メモリ管理や権限システム、サブエージェントについて取り組んできた。コーディングに限らず、様々なタスクにおいて役に立つツールとして、Claude Code SDK を Claude Agent SDK とリネームしてリブランディング。 77 | 78 | ### Bonus research preview 79 | 80 | リサーチプレビュー版の「Imagine with Claude」を公開。Claude がリアルタイムでソフトウェアを作成。対話に応じてその場で Claude が作成していく様子を眺められる。Max プランの契約が必須で、遊べるのは 5 日間だけ。 81 | 82 | ### 補足 83 | 84 | あらゆる用途において Claude Sonnet 4 の完全上位互換であり、Claude Sonnet 4.5 へのアップグレードを推奨。 85 | 86 | ## AI エージェント向けの適切なコンテキストエンジニアリング 87 | 88 | プロンプトエンジニアリングとは、LLM に対する最適な結果を得るための指示文の書き方や構造化の仕方。一方で、コンテキストエンジニアリングとは、LLM の推論時に用いる最適な情報を（トークンセット）を選び、管理するための戦略であり、システムインストラクション、ツール、MCP、外部データ、メッセージ履歴など、プロンプト以外の関連するすべての情報が含まれる。絶えず変化する膨大な情報から、限られたコンテキストウィンドウに含めるべき内容を選別・構築する芸術と科学。 89 | 90 | ![](https://storage.googleapis.com/zenn-user-upload/01c38e91ffad-20250930.png) 91 | 92 | 人間と同じように LLM は情報が多くなればなるほど、そのコンテキストから情報を正確かつ効率的に引っ張ってくる能力が低下、これを「context rot」と呼ぶ。位置エンコーディングなどにより、ロングコンテキストの処理はできるようになるが、検索や推論においてコンテキストが短い時に比べて性能が下がることがある。したがって、適切なコンテキスト設計が重要。 93 | 94 | 優れたコンテキスト設計とは、求める結果が得られる可能性を最大化しつつ、可能な限り最小限の情報で構成されるトークンセットを見つけることを意味する。 95 | 96 | 具体的には、システムプロンプトを適切な抽象度で書き、ツールは機能が重複しないよう明確に与え、例示はかさ増すことなく厳選する。実行時は事前にコンテキストをすべて読み込むのではなく、ファイルパスやリンクなどの軽い識別子を保持しておき、必要に応じて動的に情報を取得する「ジャストインタイム」アプローチが適切。これは人間の認知プロセスに似ており、Claude Code でも採用されている。 97 | 98 | コンテキストウィンドウを超える長時間のタスクには、要約して新たなコンテキストウィンドウで再開するコンテキスト圧縮、コンテキスト外にメモを保存する構造化メモ、専門エージェントが個別処理するサブエージェントアーキテクチャといった技術がある。 99 | 100 | ## Claude Agent SDK を使ってエージェントを構築 101 | 102 | Claude Code の公開当初は Anthropic 社内の開発者の生産性向上が目的であった。ここ数ヶ月で単なるコーディングツールの枠を超え、Deep Research や動画制作、メモといったコーディング以外の用途にも利用が進む。汎用的に使えるということを名前に反映させるため、Claude Code SDK を Claude Agent SDK にリネーム。 103 | 104 | Claude にコンピュータ操作の機能を与えることで、CSV ファイルの読み取りやウェブ検索、データの可視化など、さまざまな作業をこなす汎用エージェントに。Claude Agent SDK で作成できるエージェントの例として、財務管理エージェント、パーソナルアシスタントエージェント、カスタマーサポートエージェント、ディープリサーチエージェントなどが挙げられている。 105 | 106 | ![](https://storage.googleapis.com/zenn-user-upload/b8b673386223-20250930.png) 107 | 108 | エージェントは「コンテキスト収集→アクション実行→検証→繰り返し」のエージェントループで動作。コンテキスト収集にはエージェンティック検索、セマンティック検索、サブエージェント、コンパクション機能を、アクション実行には、ツール、bash、コード生成、MCP を、検証にはルール定義、ビジュアルフィードバック、LLM による評価を用いる。 109 | 110 | エージェントループを繰り返した後に、各タスクが適切な状態かどうかをテスト。出力結果、特に失敗事例を分析。特に必要なツールが与えられているかを確認。機能追加などにより、評価にブレが生じる場合は実際のお客さんの利用パターンに基いたテストセットを用意。 111 | 112 | ## Claude Agent SDK へのマイグレーション 113 | 114 | Claude Code SDK が Claude Agent SDK にリネームされたことによるマイグレーションガイド。 115 | 116 | ![](https://storage.googleapis.com/zenn-user-upload/27bc08335e1e-20250930.png) 117 | 118 | 一度アンインストールしてから Claude Agent SDK をインストール。 119 | 120 | ``` 121 | npm uninstall @anthropic-ai/claude-code 122 | ``` 123 | 124 | ``` 125 | npm install @anthropic-ai/claude-agent-sdk 126 | ``` 127 | 128 | ``` 129 | pip uninstall claude-code-sdk 130 | ``` 131 | 132 | ``` 133 | pip install claude-agent-sdk 134 | ``` 135 | 136 | ドキュメントのコードのすべてを貼り付けると長くなるのでしませんが、TypeScript にせよ、Python にせよ、インポート箇所の置き換えが必要。また、SDK 経由で CLAUDE.md や settings.json、スラッシュコマンドなどを読み込まないように。したがって、使いたい時には下記のように指定する必要がある。 137 | 138 | ``` 139 | const result = query({ 140 | prompt: "Hello", 141 | options: { 142 | settingSources: ["user", "project", "local"] 143 | } 144 | }); 145 | ``` 146 | 147 | ## Claude Code をより自律的に 148 | 149 | Claude Code にいくつかのアップグレードが加えられ、VS Code 拡張機能、ターミナルインターフェース 2.0、チェックポイント機能が追加。デフォルトモデルに Claude Sonnet 4.5 を採用。 150 | 151 | ネイティブの VS Code 拡張機能により、IDE にてサイドバーから直接 Claude Code を使うことができ、Claude の編集をリアルタイムで確認できる。 152 | 153 | <iframe src="https://www.youtube-nocookie.com/embed/IpFG_K-1xog" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> 154 | 155 | ターミナルインターフェースにおいて、ステータス表示を改善、プロンプトの履歴機能を `Ctrl+r` で検索可能に。プロンプトの再利用や編集が簡単に。 156 | 157 | ![](https://storage.googleapis.com/zenn-user-upload/148f2e447b40-20250930.webp) 158 | 159 | チェックポイント機能が追加。変更前のタイミングでコードを自動保存、Esc キーを 2 回、あるいは `/rewind` コマンドで前のバージョン戻すことができる。復元の際には、コード、会話、またはその両方を選ぶことができる。 160 | 161 | ただし、Claude による編集時にのみ適用されるため、ユーザによる編集や bash コマンドの実行時には適用されない点に注意。バージョン管理システムとの併用を推奨。 162 | 163 | ![](https://storage.googleapis.com/zenn-user-upload/adee0b0f53c3-20250930.png) 164 | 165 | ## Claude Developer Platform におけるコンテキスト管理 166 | 167 | Claude API にて、コンテキスト管理を行なうための「コンテキスト編集機能」と「メモリツール」のふたつの機能を追加。開発者はコンテキストの上限に悩むことなく、長時間にわたるタスクを処理するエージェントを構築することができる。 168 | 169 | ### 実業務ではコンテキストウインドウのような制約は存在しない 170 | 171 | コンテキスト編集機能は、トークンの上限に近付くとコンテキストウインドウにあるツール呼び出し結果のうち、古いものを自動的に削除するもの。 172 | 173 | ![](https://storage.googleapis.com/zenn-user-upload/09a4d105bb19-20250930.png) 174 | 175 | メモリツールは、コンテキストウィンドウの外にある情報を保存、参照することができるもの。専用のメモリディレクトリにおいて、ファイルの作成や読み込み、更新、削除が可能。 176 | 177 | Claude がコンテキスト編集機能やメモリツールを使ってカタンをプレイする様子。ナレッジベースを構築、ゲームを横断してメモリを保持、古くなった情報を削除する。 178 | 179 | <iframe src="https://www.youtube-nocookie.com/embed/BER3EhUIyz0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> 180 | 181 | メモリツールはクライアント側で動作。ストレージはバックエンドで管理、データの保存先や永続化は制御可能。メモリは後続のエージェントのセッションで使うこともできる。 182 | 183 | 長時間稼働するエージェントの活用事例として挙げられているものは、コーディング作業、研究、データ処理。 184 | 185 | コンテキスト編集機能とメモリツールの組み合わせで、ベースラインと比べて複雑な複数のステップのタスクの性能が 39% 向上。コンテキスト編集機能単体でも 29% の性能向上。通常であればコンテキストが溢れて失敗していたタスクもコンテキスト編集機能単で完遂可能に、トークン消費量も 84% 削減。 186 | 187 | ## Claude Sonnet 4.5 のメモリ＆コンテキスト管理 188 | 189 | Claude Sonnet 4.5 のメモリツールとコンテキスト管理機能についての Jupyter Notebook によるクックブック。 190 | 191 | メモリツール（ノートブック内の memory\_20250818）を呼び出し、学んだパターンをファイルベースで記録、クライアント側の実装により制御。 192 | 193 | コンテキスト編集機能（clear\_tool\_uses\_20250919）により、ツール結果のうち古いものを自動削除、メモリを保持したまま会話を管理。 `"edits": [{"type": "clear_tool_uses_20250919",...` のように与える。メモリは /memories ディレクトリに格納。 194 | 195 | ## Claude for Chrome 拡張機能 196 | 197 | Claude がブラウザ操作をしてくれる Google Chrome の拡張機能。Claude Max プランが必須。$100 か $200 は問わない。以前より、ウェイトリスト登録をされていた方は使えるようになっているはず。もしウェイトリスト登録がまだの方は下記の案内とウェイトリスト登録ページを参照。 198 | 199 | Claude for Chrome のセットアップや使い勝手について以前まとめているので、ご興味のある方がいらしたらご覧ください。 200 | 201 | ## Claude Code for VS Code （VS Code 拡張機能） 202 | 203 | バージョン 2.0.0 にアップデート。ネイティブ統合。 204 | 205 | ## Claude の利用状況が設定から見られるように 206 | 207 | Claude のアプリと Claude Code の利用状況をリアルタイムで確認できるように。下記ページより。 208 | 209 | こんな感じ。カレントセッションとウィークリーリミットを見ることができる。Opus 単体も。 210 | 211 | ![](https://storage.googleapis.com/zenn-user-upload/a1896597078d-20250930.png) 212 | 213 | Claude Code にも `/usage` コマンドが追加されたのでそちらはこんな感じ。 214 | 215 | ![](https://storage.googleapis.com/zenn-user-upload/c0b85691cd0f-20250930.png) 216 | 217 | ## Claude Code 2.0.0 のアップデート内容 218 | 219 | Claude Code のバージョンが 1.0.126 から 2.0.0 に。変更内容は下記の通り。 220 | 221 | - VS Code のネイティブ拡張機能 222 | - アプリケーションの全面的な機能改善 223 | - 会話を遡って変更を取り消し `/rewind` コマンドを追加 224 | - 利用状況を確認する `/usage` コマンドを追加 225 | - 思考モードの切り替えをタブキーで（セッション内で保持） 226 | - Ctrl-R で履歴を検索 227 | - 未実装だった Claude コンフィグコマンドを追加？よくわからんけど config は増えていることを確認 228 | - フック機能の改善（ `'tool_use' ids without 'tool_result' blocks` エラー） 229 | - Claude Code SDK の Claude Agent SDK への名称変更 230 | - `--agents` フラグを用いてサブエージェントを動的に追加 231 | 232 | ## 各社の Claude Sonnet 4.5 対応状況 233 | 234 | Cursor、Windsurf、OpenRouter、Cline、Vercel、Bedrock、Vertex AI、Devin、Genspark、Databricks、GitHub Copilot、Perplexity AI、GitLab Duo にて利用可能。 235 | 236 | --- 237 | 238 | 以上となります！お読みいただきありがとうございます。 239 | 240 | モデルだけでなく、ツールやプロダクト、ボーナスプレビューまで盛りだくさん！10 月 6 日の OpenAI DevDay になんとしても間に合わせたかったという気概が伝わってきます...！私ごとですが、そんな来たる OpenAI DevDay に運よく現地参加することがかないまして、半月ほどサンフランシスコの AI スタートアップに訪問予定です。もし気になる方がいらしたら、X のサブスクにて情報を公開すると思うので、入ってくださると泣いて喜びます！ 241 | 242 | ちなみに、今週は Gemini 関連の発表もあるようですので、とても寝る時間がありませんね（） 243 | 244 | ## おまけ 1 245 | 246 | マスコットキャラクターの名前は「Claw'd」。Claude Artifacts で SVG で作成されたキャラクターです。おそらく読みは同じ「クロード」かな？ 247 | 248 | ## おまけ 2 249 | 250 | システムプロンプトをリークさせてみました。ご参考まで。 251 | 252 | [GitHubで編集を提案](https://github.com/schroneko/zenn/blob/main/articles/claude-sonnet-4-5.md) 253 | 254 | 377 255 | 256 | 89 257 | 258 | この記事に贈られたバッジ 259 | 260 | ![Thank you](https://static.zenn.studio/images/badges/paid/badge-frame-10.svg) ![Thank you](https://static.zenn.studio/images/badges/paid/badge-frame-10.svg) ![Thank you](https://static.zenn.studio/images/badges/paid/badge-frame-5.svg) ![Thank you](https://static.zenn.studio/images/badges/paid/badge-frame-5.svg) ![Thank you](https://static.zenn.studio/images/badges/paid/badge-frame-3.svg) -------------------------------------------------------------------------------- /bookmark/aws/【AWS】 代表的なクラウドデザインパターン紹介.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "【AWS】 代表的なクラウドデザインパターン紹介" 3 | source: "https://zenn.dev/moko_poi/articles/8a2dece3a7b9c9" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2024-08-25 7 | created: 2025-10-15 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--qV6Zqk1r--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2580%2590AWS%25E3%2580%2591%2520%25E4%25BB%25A3%25E8%25A1%25A8%25E7%259A%2584%25E3%2581%25AA%25E3%2582%25AF%25E3%2583%25A9%25E3%2582%25A6%25E3%2583%2589%25E3%2583%2587%25E3%2582%25B6%25E3%2582%25A4%25E3%2583%25B3%25E3%2583%2591%25E3%2582%25BF%25E3%2583%25BC%25E3%2583%25B3%25E7%25B4%25B9%25E4%25BB%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:moko-poi%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2RiOGVkM2Q3ZDguanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | 311 14 | 15 | 14 16 | 17 | ## はじめに 18 | 19 | AWSの豊富なサービス群を活用することで、高可用性かつ高スケール性を実現するシステムを構築することが可能です。 20 | 21 | しかし、クラウドサービスの特性を最大限に活かすためには、適切なデザインパターンを理解し、実践することが重要です。そこで今回は、AWSを利用して「 **高可用性** 」かつ「 **高スケール性** 」を実現するための代表的なクラウドデザインパターンを紹介します。 22 | 23 | ## 1\. EC2インスタンスを利用した動的コンテンツの配信 24 | 25 | ![AWS Design Pattern](https://storage.googleapis.com/zenn-user-upload/5a324c871fb2-20240825.png) 26 | 27 | ### 動的コンテンツとは？ 28 | 29 | 動的コンテンツとは、ユーザーのリクエストに応じて生成されるコンテンツのことを指します。たとえば、ユーザーのログイン状況や入力内容に基づいて異なるページを表示するようなケースです。 30 | 31 | ### AWSサービスの簡単な解説 32 | 33 | - **Amazon EC2 (Elastic Compute Cloud):** スケーラブルなコンピューティングリソースを提供するサービスです。必要に応じて、インスタンスの数を増減させることができます。 34 | - **Amazon ELB (Elastic Load Balancing):** 複数のEC2インスタンスにトラフィックを分散させ、可用性と耐障害性を向上させます。ALBはHTTP/HTTPS、NLBはTCP/TLS/UDPプロトコルをサポートします。 35 | - **Amazon Route 53:** 高可用性とスケーラビリティを備えたDNSウェブサービスです。ドメイン名をIPアドレスにマッピングし、ユーザーを最適なサーバーに誘導します。 36 | - **Auto Scaling:** 指定されたポリシーに基づいて、EC2インスタンスの数を自動的に調整する機能です。これにより、変動する負荷に対応できます。 37 | 38 | 詳細については [公式ドキュメント](https://aws.amazon.com/jp/documentation/) をご参照ください。 39 | 40 | ### 具体例 41 | 42 | Next.jsのSSRを利用した動的コンテンツ生成は、ユーザーのリクエストごとに新しいHTMLをサーバー側で生成するため、動的コンテンツの代表的な例です。また、コンテナ化されたアプリケーションをデプロイするケースも多く、EC2の部分をECS (Amazon Elastic Container Service) に置き換えることもあります。 43 | 44 | ## 2\. S3を利用した静的コンテンツの配信 45 | 46 | ![](https://storage.googleapis.com/zenn-user-upload/b4fe5118608e-20240825.png) 47 | 48 | ### 静的コンテンツとは？ 49 | 50 | 静的コンテンツとは、サーバーサイドで処理を行わずに、そのままの状態でクライアントに配信されるコンテンツのことを指します。具体的には、画像ファイル、動画ファイル、HTML、CSS、JavaScriptなどが該当します。これらのファイルはユーザーのリクエストに応じて変化することがなく、サーバーから直接提供されます。 51 | 52 | ### AWSサービスの簡単な解説 53 | 54 | - **Amazon S3 (Simple Storage Service):** スケーラブルで耐久性が高いオブジェクトストレージサービスです。静的ウェブサイトのホスティングや、データのバックアップ、アーカイブに利用されます。 **署名付きURL** を利用することで、一定期間のみ有効なURLを生成し、特定のユーザーにのみアクセスを許可できます。 55 | - **Amazon CloudFront:** AWSが提供するコンテンツ配信ネットワーク（CDN）サービスで、グローバルに分散したエッジロケーションを通じてコンテンツをキャッシュし、高速でユーザーに配信します。 56 | 57 | ※すでに説明したものは割愛します 58 | 59 | ### 具体例 60 | 61 | 静的コンテンツを利用した代表的な例として、Next.jsのSPA（シングルページアプリケーション）が挙げられます。Next.jsでは、ビルドされた静的ファイルをS3にホスティングし、CloudFrontを通じて世界中のユーザーに高速で配信するケースが一般的です。 62 | 63 | このパターンでは、S3に格納された静的コンテンツをCloudFrontを介してキャッシュし、ユーザーに配信することで、レスポンスタイムを短縮し、コストを削減することができます。 64 | 65 | ### \[Topic\] S3 66 | 67 | ## 3\. 動的コンテンツと静的コンテンツの混在 68 | 69 | ![](https://storage.googleapis.com/zenn-user-upload/6f8a5126a6e4-20240825.png) 70 | 71 | 動的なコンテンツと静的なコンテンツを同時に配信するためのパターンです。このパターンでは、CloudFrontのマルチオリジン機能を利用することで、コンテンツのパスに応じて適切なオリジン（ソース）からコンテンツを取得し、効率よく配信します。 72 | 73 | ### 動的コンテンツと静的コンテンツが混在する具体的なケース 74 | 75 | 典型的なケースとして、Eコマースサイトが挙げられます。商品ページやユーザーページは動的に生成されるコンテンツですが、画像やCSS、JavaScriptファイルなどの静的コンテンツも同じページに含まれています。この場合、動的コンテンツはEC2インスタンス上でホストされ、静的コンテンツはS3に保存されます。CloudFrontを使用することで、動的コンテンツと静的コンテンツが統合的に管理され、最適なオリジンからの配信が行われます。 76 | 77 | ※ EC2の部分をECSに置き変えることもあります 78 | 79 | ## 4\. サーバレスアーキテクチャを利用した動的Webサービスの構築 80 | 81 | ![](https://storage.googleapis.com/zenn-user-upload/fe20a11950ab-20240825.png) 82 | 83 | ### サーバレスアーキテクチャとは？ 84 | 85 | サーバレスアーキテクチャとは、サーバの管理や運用を意識せずに、アプリケーションを構築・実行することができるクラウドのアーキテクチャスタイルです。サーバ管理の負担が軽減され、スケーラビリティやコスト効率が高まるため、スタートアップや小規模プロジェクトにも適しています。 86 | 87 | ### AWSサービスの簡単な解説 88 | 89 | - **AWS Lambda:** コードを実行するためのサーバーレスコンピューティングサービスです。リクエストに応じてコードが自動的にスケールし、ユーザーが直接サーバを管理する必要がありません。 90 | - **Amazon API Gateway:** APIの作成・管理を行うサービスで、HTTPリクエストをLambda関数や他のAWSサービスにルーティングします。APIのセキュリティ、認証、モニタリング機能を簡単に実装できます。 91 | 92 | ### この構成が具体的に使われるパターン 93 | 94 | このサーバレス構成は、動的Webサービスを構築する際に一般的に利用されます。具体的な例としては、RESTful APIやグラフQL APIの構築、モバイルアプリのバックエンド、Webアプリケーションのバックエンドなどが挙げられます。Lambdaがリクエストに応じて動的にコンテンツを生成し、API Gatewayがそのリクエストを処理・管理します。 95 | 96 | ### Webサービスの公開における注意点 97 | 98 | サーバレスアーキテクチャでは、Lambdaが高いスケーラビリティを持つため、大量のリクエストを処理することが可能です。ただし、同時実行数やリクエストレートに上限があり、これを超える場合には、追加のチューニングやLambdaのプロビジョンドコンカレンシーを設定する必要があります。 99 | 100 | また、Webサービスとして公開する際には、API Gatewayのレートリミットの設定や、キャッシュを有効にすることでパフォーマンスを向上させることが重要です。 101 | 102 | ### バッチ処理や非同期処理にも利用 103 | 104 | サーバレスアーキテクチャは、Webサービスだけでなく、バッチ処理や非同期処理にも非常に適しています。たとえば、S3にアップロードされたファイルを処理するためのLambda関数や、SNSトピックでトリガーされる通知システムなどが考えられます。これにより、サーバーレスアーキテクチャは多様なユースケースに柔軟に対応することができます。 105 | 106 | ### Lambda URLsについて 107 | 108 | 最近のアップデートで、API Gatewayを利用せずに、直接Lambda関数を呼び出すことができる **Lambda URLs** 機能が追加されました。この機能を利用することで、API Gatewayの設定が不要となり、よりシンプルでコスト効果の高いAPI構築が可能です。ただし、API Gatewayが提供するセキュリティ機能や認証機能が必要な場合には、従来通りAPI Gatewayを使用することが推奨されます。 109 | 110 | ### コスト面について 111 | 112 | サーバレスアーキテクチャは、そのスケーラビリティに加えて、コスト効率も高いのが特徴です。Lambdaは実行時間に応じて課金され、使用していない間はコストがかかりません。API Gatewayもリクエスト数に基づいた課金モデルを採用しており、利用量に応じてコストが変動します。このため、トラフィックが少ないスタートアップやプロジェクトに特に適しています。 113 | 114 | ### Topic: Lambdaについて深掘り 115 | 116 | ### AWS Lambdaのスケーラビリティと制限 117 | 118 | AWS Lambdaは高いスケーラビリティを持っており、大量のリクエストを処理することが可能です。ただし、同時実行数やリクエストレートに関する制限があります。 119 | 120 | #### 同時実行数（Concurrency）の定義 121 | 122 | - **同時実行数** は、同時に実行されているLambda関数の数を指します。デフォルトでは、各リージョンごとに **1,000** の同時実行数の制限が設定されています。 123 | - この制限に達すると、リクエストはキューに入るか、スロットルされる可能性があります。これにより、関数が呼び出されるまでの遅延が発生することがあります。 124 | - 必要に応じて、 **プロビジョンドコンカレンシー** （プロビジョニングされた同時実行数）を設定することで、特定の関数に対して予測可能な負荷に対応するためのスロットを事前に確保することが可能です。 125 | 126 | #### リクエストレートの制限 127 | 128 | - **リクエストレート** は、Lambda関数が処理できるリクエストの頻度を指します。具体的には、各Lambda関数インスタンスは1秒あたり **最大10件** の同期リクエストを処理することができます。全体としては、同時実行数の10倍が最大リクエストレートとなります。（=10,000） 129 | - 非同期リクエストの場合、理論的にはリクエスト数に制限はありませんが、実際には同時実行数に基づいて処理が行われます。 130 | - リクエストレートの制限を超えると、リクエストはキューに入れられ、関数が利用可能になるまで処理が遅延する可能性があります。 131 | 132 | **参照** ： [**AWS Lambda クォータ**](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/gettingstarted-limits.html) 133 | 134 | ## 5\. RDSを利用した冗長構成 135 | 136 | ![](https://storage.googleapis.com/zenn-user-upload/094a35a1046e-20240825.png) 137 | 138 | ### AWSサービスの簡単な解説 139 | 140 | - **Amazon RDS (Relational Database Service):** AWSが提供するマネージドリレーショナルデータベースサービスです。簡単にデータベースのセットアップ、運用、スケーリングが可能で、MySQL、PostgreSQL、Oracle、SQL Server、MariaDBなどの一般的なデータベースエンジンをサポートしています。 141 | 142 | ### RDSの冗長とは？ 143 | 144 | **冗長性** とは、システムの信頼性と可用性を高めるために、同じ機能を持つ複数のリソースを用意することを指します。Amazon RDSでは、主に **マルチAZ配置** や **リードレプリカ** を活用することで、冗長性を高めています。 145 | 146 | - **なぜ冗長性が必要か？** 147 | データベースがダウンすると、アプリケーション全体が影響を受ける可能性があります。冗長性を確保することで、障害発生時にもシステムが迅速に復旧し、データの損失やサービスダウンを防ぐことができます。 148 | 149 | #### \[補足\] 単語の説明 150 | 151 | > **マルチAZ (Multi-AZ):** Amazon RDSのオプションで、高可用性とデータ耐久性を確保するために使用されます。異なるアベイラビリティゾーンにプライマリーデータベースとスタンバイデータベースが配置され、障害発生時には自動でフェイルオーバーが行われます。 152 | > **リードレプリカ (Read Replica):** 読み出し専用のデータベースインスタンスで、主に参照クエリの負荷分散やスケーラビリティの向上に使用されます。 153 | 154 | ### \[Topic\] DBの冗長性とThe Scale Cube 155 | 156 | データベースの冗長性を確保することは簡単ではなく、特にスケーラビリティとパフォーマンスのバランスを取ることが課題です。この点に関して、「 **The Scale Cube** 」というモデルがあります。 157 | 158 | - **The Scale Cube** は、システムをスケーリングするための3つの次元（X軸、Y軸、Z軸）を提案しています： 159 | 160 | **X軸** （ロードバランシング）は、同じデータベースインスタンスを複製し、リクエストを複数のインスタンスに分散させる方法です。しかし、これは基本的には読み取りのスケールには有効ですが、書き込みのスケールには制約があります。書き込み操作は通常一箇所に集まるため、スケールが難しい部分です。 161 | 162 | **Y軸** （サービス分割）は、機能やデータを分割してそれぞれ別のデータベースに持たせる方法です。このアプローチは、データの依存関係をどう管理するかが難しく、データの整合性を保ちながらのスケーリングが複雑になります。 163 | 164 | **Z軸** （シャーディング）は、データを分割して異なるシャードに分散させる方法です。これは特に大規模なデータセットで有効ですが、シャード間のデータの一貫性を保つのが難しく、スケールの際には多くの課題があります。 165 | 166 | **参照** ： [**The Scale Cube**](https://microservices.io/articles/scalecube.html) 167 | 168 | ### 冗長性のパターン 169 | 170 | RDSで使用される主な冗長性パターンには以下があります： 171 | 172 | 1. **マルチAZ配置** 173 | 異なるアベイラビリティゾーンにプライマリとスタンバイを配置することで、可用性を確保するパターンです。障害発生時に自動でフェイルオーバーが行われます。 174 | 2. **リードレプリカ** 175 | 参照専用のレプリカを複数作成し、読み取り処理の負荷を分散するパターンです。これにより、書き込みと読み取りのトラフィックを分離できます。 176 | 177 | ### 構成図についての解説 178 | 179 | 上記の構成図では、次のような冗長性が確保されています： 180 | 181 | - **マスター（M）とスタンバイ（S）のデータベースインスタンス** 182 | 更新トランザクションを扱うプライマリインスタンス（M）があり、スタンバイ（S）インスタンスがフェイルオーバー用に待機しています。このセットアップにより、データベースのダウンタイムを最小限に抑えられます。 183 | - **リードレプリカ（R）** 184 | 参照系クエリを処理するためのリードレプリカが配置されています。これにより、参照系クエリがマスターインスタンスにかかる負荷を軽減し、スケーラビリティを向上させています。 185 | 186 | ### 他の方法や技術選定について 187 | 188 | RDSのマルチAZ配置やリードレプリカの代替として、 **DynamoDB** のようなNoSQLデータベースを利用することも検討できます。DynamoDBはデフォルトで高可用性とスケーラビリティを提供し、管理負荷が軽減されます。ただし、DynamoDBを選択する際は、データの構造やアクセスパターンがRDBMSよりも適しているかを検討する必要があります。 189 | 190 | また、 **Amazon Aurora** も選択肢です。AuroraはMySQLやPostgreSQL互換のデータベースエンジンで、RDSと同様にフルマネージドなサービスですが、以下の点でさらに優れた冗長性とパフォーマンスを提供します。 191 | 192 | ### \[Topic\]　Amazon Aurora 193 | 194 | - **クラスター構成:** Auroraでは、データはクラスターとして管理され、デフォルトでデータが6つのコピーに分散され、2つの異なるアベイラビリティゾーン（AZ）に配置されます。これにより、データの高い耐障害性と可用性が確保されます。 195 | - **マルチAZ必須（ストレージの冗長構成）:** AuroraクラスターのストレージはマルチAZ構成が必須となっており、複数のAZにまたがってデータを自動的にレプリケートするため、ストレージの冗長性が非常に高いです。これにより、ストレージ層での障害が発生しても、データの可用性は保たれます。 196 | - **クラスターインスタンス（コンピューティングの冗長構成）:** クラスターに接続するインスタンスについては、シングルAZ構成も選択可能です。これにより、コンピューティングリソースの冗長性を調整することができます。例えば、シングルAZで動作させてコストを抑えつつ、ストレージ層での高い冗長性を維持することが可能です。 197 | 198 | 加えて、RDSよりも自動化が進んでおり、バックアップやフェイルオーバーが迅速かつ自動的に行われます。 199 | 200 | **参照**: [**Amazon Aurora の高可用性**](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/Concepts.AuroraHighAvailability.html) 201 | 202 | ### デメリットや注意点、障害テスト 203 | 204 | 冗長構成は非常に効果的ですが、いくつかのデメリットや注意点があります： 205 | 206 | - **コストの増加:** 冗長性を確保するためには複数のインスタンスを維持する必要があり、それに伴うコストが増加します。 207 | - **複雑性:** システムが複雑になることで、管理やモニタリングが難しくなる場合があります。 208 | - **障害テスト:** 定期的に障害シナリオをテストすることが重要です。例えば、意図的にプライマリインスタンスを停止し、フェイルオーバーが正常に行われるかを確認するテストを実施することが推奨されます。 209 | 210 | ### \[Topic\] NewSQL 211 | 212 | **NewSQL** は、従来のリレーショナルデータベース（RDBMS）のACID特性を維持しながら、NoSQLのスケーラビリティを備えた新しいタイプのデータベースです。特に、書き込みがボトルネックとなるユースケースでのスケールアウトが難しいという課題を解決するために設計されています。 213 | 214 | #### 主な特徴 215 | 216 | - **水平スケーリング** を実現し、書き込み処理のスケールアウトが可能。 217 | 218 | #### 代表的なNewSQLツール 219 | 220 | - **Google Spanner**: グローバルな分散型リレーショナルデータベース。高い一貫性とスケーラビリティを提供します。 221 | - **TiDB**: MySQL互換の分散型データベースで、水平スケーリングと強い一貫性を実現します。 222 | - **Vitess**: YouTubeが開発したスケーラブルなMySQLクラスター管理システムで、シャーディングや自動フェイルオーバーに対応しています。 223 | 224 | #### NewSQLの活用例 225 | 226 | - 書き込み負荷が高いオンラインゲームのバックエンドやリアルタイムデータ処理などで使われてることが多そう 227 | 228 | [**私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT【イベントレポート】**](https://findy-tools.io/articles/event-report-TiDB/10) 229 | 230 | ## まとめ 231 | 232 | クラウドアーキテクチャを設計する際には、 **コスト、複雑性、冗長性、スケーラビリティ** などのバランスを考慮しながら、最適なアプローチを選択することが重要です。 233 | そのためには、基本的なアーキテクチャやクラウドの特性を理解しておくことが非常に大切です。 234 | 235 | また、デザインパターンをより深く理解するためには、以下の内容を読むことを強くお勧めします 236 | 237 | - [**AWS Well-Architected Framework**](https://aws.amazon.com/jp/architecture/well-architected/?wa-lens-whitepapers.sort-by=item.additionalFields.sortDate&wa-lens-whitepapers.sort-order=desc&wa-guidance-whitepapers.sort-by=item.additionalFields.sortDate&wa-guidance-whitepapers.sort-order=desc) 238 | AWSが推奨するベストプラクティスに基づいて、信頼性、セキュリティ、パフォーマンス効率、コスト最適化などを考慮したアーキテクチャを設計するためのガイドです。 239 | - [**AWSクラウドデザインパターン - Cloud Design Pattern**](https://aws.clouddesignpattern.org/index.php/%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8.html) 240 | 241 | これらのリソースを参考にしながら、最適なクラウドアーキテクチャを設計してみてください。 242 | 243 | AWSや他のクラウドサービスの詳細については、公式ドキュメントや関連リソースを参照し、常に最新の情報をチェックすることをお勧めします。 244 | 245 | 最後まで読んでくださりありがとうございました。 246 | 少しでも役に立てば幸いです。 247 | 248 | 311 249 | 250 | 14 -------------------------------------------------------------------------------- /bookmark/mcp/MCPの認証と認可の現在と未来 hi120ki.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "MCPの認証と認可の現在と未来 | hi120ki" 3 | source: "https://hi120ki.github.io/ja/blog/posts/20250728/" 4 | author: 5 | - "[[hi120ki]]" 6 | published: 2025-07-28 7 | created: 2025-10-21 8 | description: "MCPの認証と認可の現在と未来" 9 | tags: 10 | - "clippings" 11 | image: "https://hi120ki.github.io/ja/img/2025-07-28/ogp.png" 12 | --- 13 | [English](https://hi120ki.github.io/blog/posts/20250728/) 14 | 15 | 2025年7月現在、MCPは2024-11-05、2025-03-26、2025-06-18の3つのバージョンを経て進化し、私達は手元のMCPクライアントとなるCursorやClaude CodeやVSCodeからnpxコマンドやuvコマンドやDockerコンテナによってMCPサーバーを起動したりRemote MCPサーバーに接続するなど日常的に使うようになりました。 16 | 17 | 実際に私自身がよく利用しているMCPライブラリである [MCP Servers - Cursor](https://docs.cursor.com/tools/mcp) を見てみると多くのサービスが独自にMCPサーバーの提供に投資している様子が伺え、エコシステムは拡大していっています。 18 | 19 | ![Cursor MCP Servers](https://hi120ki.github.io/ja/assets/images/cursor-mcp-servers-b71c33e1f4d1bf4de639baaf014f561e.png) 20 | 21 | 例: Notion、Figma、Linear、GitHub 22 | 23 | 特に [Atlassian Remote MCP Server beta](https://community.atlassian.com/forums/Atlassian-Platform-articles/Using-the-Atlassian-Remote-MCP-Server-beta/ba-p/3005104) はサービスが公式に提供するMCPサーバーの中で、最も先進的なものの一つです。 24 | 25 | Cursorを立ち上げると自動的にブラウザが立ち上がりAtlassianアカウントへのログインへ誘導され、認可画面で許可するアクセス権限の範囲を確認し、その後MCPサーバーを経由してAI Agentが私自身のConfluenceやJiraリソースにアクセスできるようになります。 26 | 27 | このOAuthフローはエンドユーザーにとって非常に便利です。API Keyを発行したり、有効期限や保管方法を気にする必要はありません。短命アクセストークンの発行はMCP仕様側の推奨であり、具体的な寿命や更新挙動はAS実装（Atlassian等）のポリシーによりますが、有効期限が切れれば再度ブラウザが誘導してくれます。 28 | 29 | このOAuthフローはMCPが既存OAuthエコシステムと整合しやすい設計（OAuth 2.1準拠、AS分離、PKCE等の原則）を提供することで実現されているのですが、ただ一方でこのMCPのOAuth仕様は利用拡大を妨げている欠点もあります。この記事ではその欠点を解説しつつ、MCP仕様変更の試みとOktaが取ろうとしている解決アプローチを公開されている資料から推察し紹介します。これにより、Enterprise環境でのMCPの利用拡大のロードマップ策定の助けになれば幸いです。 30 | 31 | > 私はOAuthの専門家ではないため、不正確な内容が含まれる可能性があります。詳細は [References](https://hi120ki.github.io/ja/blog/posts/20250728/#references) に挙げた資料をご覧ください。 32 | 33 | ## Dynamic Client Registrationの欠点 34 | 35 | MCPのOAuth仕様は基本的にことが知られています。 36 | 37 | つまり、以下のような4つの登場人物が存在します。 38 | 39 | - **Client**: MCPクライアント、CursorやClaude Code、MCP Inspectorなど 40 | - **Resource Server**: MCPサーバーおよびMCPサーバーがアクセスする保護されたリソース(Confluence、Jiraなど)を持つサーバー 41 | - **Authorization Server**: OAuthにおける認可サーバー、サービスのアクセストークンを発行するサーバー 42 | - **Browser**: ユーザーが操作するブラウザ 43 | 44 | があります。つまりクライアントは認可サーバーに登録され、ブラウザを介して認可サーバーからアクセストークンを取得し、リソースサーバーにアクセスするという流れです。 45 | 46 | 一般的にOAuth 2.1では、クライアントは事前に認可サーバーに登録されている必要があります。例えばConfidential Clientはアクセストークンを取得するためのClient ID(とClient Secret)を持つことができます。 47 | 48 | しかし、実際にMCPを利用する際には、以下の設定でOAuthフローを実行することができます。Client ID(とClient Secret)は事前に設定されており、認可サーバーに登録されている必要があるはずですが、この設定では省略されています。 49 | 50 | ```json 51 | "mcp-atlassian": { 52 | "url": "https://mcp.atlassian.com/v1/sse" 53 | } 54 | ``` 55 | 56 | この理由としてはMCP仕様ではクライアントが事前に認可サーバーに登録されていることは必須ではありません。MCPはを利用することを推奨しており、クライアントは事前の登録なしに `/register` エンドポイントを通じて認可サーバーに登録され、アクセストークンを取得することができます。 57 | 58 | これは非常に便利な機能であり、簡単にMCPを利用するために設計されています。しかし、このDynamic Client Registrationにはいくつかの欠点があります。 59 | 60 | 1. **セキュリティの懸念**: Dynamic Client Registrationは、クライアントが認可サーバーに登録される際に、Client ID(とClient Secret)を自動的に生成しますが、クライアントが不正に登録される可能性があります。特に、エンタープライズ環境では、セキュリティポリシーにより、事前に登録されたクライアントのみが許可されることが一般的です。 61 | 2. **Dynamic Client Registrationのサポートが必要**: Dynamic Client Registrationを利用するためには、認可サーバーがこの機能をサポートしている必要がありますが、すべての認可サーバーがこの機能をサポートしているわけではありません。特にエンタープライズ環境では、既存の認可サーバーがDynamic Client Registrationをサポートしていない場合があります。 62 | 63 | OktaはDynamic Client Registration自体はサポートしますが、管理者権限に基づく認証(例：APIトークン)を要するため、無認証のDynamic Client Registrationは不可能です。Googleについては公開文書上、汎用のDynamic Client Registration APIは提供されておらず、一般にコンソールでの静的クライアント登録が前提です。つまり、OktaやGoogleを直接MCPにおけるOAuthの認可サーバーとして配置することは不可能です。 64 | 65 | ではAtlassianのRemote MCP Serverはどのように追加のクレデンシャルなしにDynamic Client Registrationをサポートしているのでしょうか。彼らは独自にDynamic Client Registrationを実装したAuthorization Serverを提供しています。 66 | 67 | AtlassianはOAuth 2.1ベースのASメタデータを公開しており、Remote MCP Serverの接続開始時にブラウザ経由のOAuthフローへ誘導されます([https://mcp.atlassian.com/v1/sse](https://mcp.atlassian.com/v1/sse))が、ここでAtlassianはMCP専用の認可サーバーを提供し、そこからさらに本来のAtlassianアカウントのエコシステムを構成している認可サーバーを利用しています。 68 | 69 | この2つの認可サーバーを組み合わせて利用する方式は現在よく取り入れられており、もし自身で試したい場合は [remote-mcp-github-oauth - Cloudflare AI](https://github.com/cloudflare/ai/tree/main/demos/remote-mcp-github-oauth) でその詳細を学ぶことができます。 [workers-oauth-provider](https://github.com/cloudflare/workers-oauth-provider) というCloudflareが提供しているOAuth providerを構成するためのライブラリを利用し、独自にDynamic Client Registrationを構成し提供することができます。 70 | 71 | しかしこの方式は実装が複雑となり、また同時にMCPサーバーを構成する人が認可サーバーの責任を追う必要があることを意味します。一般的にOAuthのような仕組みは高度な知識とスキルがないと脆弱性を含めてしまうリスクがあり、自前での実装やメンテナンスは避けるべきとされています。ただし、Cloudflare Workersのworkers-oauth-providerのような実績あるライブラリを活用すれば、.well-known/DCR/PKCEまで下支えできるため、選定と運用体制次第でリスク低減は可能です。それでも一般的な企業の中で内部の従業員向けにMCPサーバーのアクセス制限を正しく構成したいという動機に対しては、このアプローチは依然としてリスクとコストが大きすぎると判断されるでしょう。 72 | 73 | ## 不明瞭なBackend Servicesへの認可の仕様 74 | 75 | 一般的な企業の中で内部の従業員向けにMCPサーバー、とくにこれらのMCPサーバーが社内のリソース(Backend Services)にアクセスするときのベストプラクティスは何でしょうか? 76 | 77 | 社内のリソースとはAmazonやGoogle CloudやAzureといったクラウドのデータベース、New RelicやData DogといったObservability Platformからのメトリクス・ログ、そしてGoogle Workspace・Notion・Confluenceといったナレッジベースなどです。これらとMCPサーバーを連携し自動化を行うことは喫緊の課題です。とはいいつも、これらのリソースについてMCPサーバーに"安全な"方法でアクセス権限を付与することは困難です。 78 | 79 | 一般的に用いられる手法はMachine UserやService Accountで統一された権限でアクセス権限を付与することです。これは非常にセットアップが容易です。一つの権限のみに着目し、それをある一定のアクセス制限の元で公開するのみです。しかしこれは [Confused deputy problem](https://docs.aws.amazon.com/IAM/latest/UserGuide/confused-deputy.html) を引き起こす場合があります。ある組織ではナレッジベースに特定の部門(HRやFinance部門など秘匿性の高い部署)のみが閲覧できるドキュメントがあるにもかかわらす、Machine Userで統一された権限でナレッジベースの全体ドキュメント読み取り権限がMCPサーバーに対して構成され、そのMCPサーバーが全従業員がアクセスできるような設定で公開されたとしましょう。別の部門に所属するある従業員は本来与えられたアカウントの権限では閲覧が禁止されていたはずの重要な社内ドキュメントに社内MCPサーバーを介してアクセスすることができるようになってしまいます。これはMCPやAIに限らず起きる問題ではありますが、既存の部門ごとや個人ごとに設定されたアクセス境界を破壊する重大な構成ミスとなります。 80 | 81 | この場合にベストプラクティスとなるアプローチはユーザーごとにOAuthフローを介してユーザーの既存のアクセス権限のサブセットであることが保証されたアクセストークンを取得し、それのみを使ってMCPサーバーがBackend Servicesのリソースへアクセスします。これによって既存のアクセス境界が守られConfused deputy problemは発生しません。 82 | 83 | MCP本体は [RFC 9728(Protected Resource Metadata)](https://datatracker.ietf.org/doc/html/rfc9728) と [RFC 8707(Resource Indicators)](https://datatracker.ietf.org/doc/html/rfc8707) で"どのASからどうトークンを得るか"の土台を整備しました。RFC 9728により、クライアントは保護リソースのメタデータから正しいAuthorization Server・リソース識別子を動的に発見でき、RFC 8707によって適切なスコープとリソースを指示してトークン取得できます。これらはMCPのAuthorization Server分離設計と整合し、複数Authorization Serverを横断した認可フローの基盤となっています。一方で現時点では複数のBackend Servicesからリソースを取得しつつ一定の機能を提供するようなMCPサーバーを適切な認可の仕組みとともに提供するベストプラクティスが未確立であり、Enterprise環境において従業員向けに提供される集中管理されたMCPサーバー群を提供するときの壁となります。 84 | 85 | > これらの制限を回避する方法のアイデアの一つは、認可が完了していない段階では `auth` ToolのみをMCPサーバーから提供し、このToolからOAuthフローを開始するURLをMCPクライアントに提供しアクセストークンを取得した後 [List Changed Notification](https://modelcontextprotocol.io/specification/2025-06-18/server/tools#list-changed-notification) を送信し、本来利用可能であったToolをMCPクライアントに公開するというものです。 86 | > 87 | > しかしあくまでこれは既存のMCP仕様を利用した代替案であり実際にベストプラクティスとなるかには疑いが残ります。 88 | 89 | このようにDynamic Client Registrationにおける既存エコシステムの限られたサポート状況、そしてBackend ServicesへのOAuthによる適切なアクセス権限付与において現在のMCP仕様は残念ながらエンタープライズ環境で十分に成熟しているとは言えません。 90 | 91 | しかし一方で現在MCP仕様のレポジトリにはこれらの改善を期待できるPRがあります。それが [Enterprise-Managed Authorization Profile for MCP #646](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/646) です()。 92 | 93 | これは現在Internet-Draftとして公開されている [Identity Assertion Authorization Grant](https://datatracker.ietf.org/doc/draft-parecki-oauth-identity-assertion-authz-grant/) をベースとして構成された新たなフローです。 94 | 95 | ここでは5つの登場人物が存在します。 96 | 97 | - **Browser**: ユーザーが操作するブラウザ 98 | - **MCP Client**: MCPクライアント、CursorやClaude Code、MCP Inspectorなど 99 | - **Identity Provider**: OktaやGoogleなどのEnterprise環境でのユーザー管理プロバイダー 100 | - **MCP Authorization Server**: AtlassianやNotionやData Dogが提供する認可サーバー 101 | - **MCP Resource Server**: MCPサーバーおよびMCPサーバーがアクセスする保護されたリソース(Confluence、Jiraなど)を持つサーバー 102 | 103 | は以下のようになっています。 104 | 105 | 1. ユーザーがMCPサーバーの利用をCursor等のMCPクライアントで有効にすると、自動的にブラウザが開かれIdP(OktaやGoogle等)のログイン画面が表示され、そのまま従業員ID等を用いてログインします。 106 | 2. IdPでのログイン成功後、認可コードがブラウザを経由してMCPクライアントに提供されMCPクライアントはその認可コードを使って、IdPからIdentity Assertionの仕組みのためのIDトークンを取得します。このID TokenはMCPクライアントに保存されます。 107 | 3. MCPクライアントはID TokenとアクセスしようとしているMCPサーバーの識別子を含めて、IdPからIdentity Assertion JWT Authorization Grant(ID-JAG)の仕組みを使ってAssertion Token(Identity Assertion JWT)を取得します。 108 | 4. MCPクライアントはID-JAGの仕組みを使ってAssertion Tokenを送信し、アクセストークンを取得します。 109 | 5. MCPクライアントはこのアクセストークンを使ってMCP Resource Serverにアクセスします。 110 | 111 | MCPクライアントがID Tokenを取得した後のプロセスはブラウザを一切介せず行われるということになり、ユーザーの視点から見るとIdPでのログインが完了すると自動的にIdP管理者から許可されている範囲のサービスのアクセストークンが自動的に取得されるようになります。サービスごとにアクセストークンを発行し設定したりOAuthフローを実行する必要はなくなり、IdPでのログインという1つのアクションでMCPサーバーが提供する機能へアクセスできるようになります。 112 | 113 | ## Oktaが掲げるCross App Accessとは 114 | 115 | このIdentity Assertion Authorization GrantをベースとしたMCPのOAuth仕様においてOktaのようなIdPはどのような役割を果たすのでしょうか? これらはOktaが提供している [いくつかのCross App Accessに関する公開情報](https://www.okta.com/newsroom/press-releases/okta-introduces-cross-app-access-to-help-secure-ai-agents-in-the/) から推察できます。 116 | 117 | このフローの大きな特徴の一つはIdPが各サービスのアクセストークン発行のハブとなることです。 118 | 119 | Enterprise環境のIdP管理者は一般的にOktaやGoogle上でユーザーを管理するだけでなくサービス自体も管理しています。実際にそれぞれのEnterprise環境ごとにOktaやGoogleで多くのサービスが統合されSCIMによる自動プロビジョニングとSAMLによるIdP経由のログインという体験をしていると思います。それらに加えてこの仕様ではユーザー管理・サービス管理だけではなくアクセストークンの管理もIdPに委任できるようになることを意味します。IdP管理者はどのOAuth Clientからどのサービスのアクセストークンを自動的に取得できるようになるのかを管理できるようになるほか、アクセストークンの発行状況もID-JAGの発行状況から可視性を得ることができます。 120 | 121 | 今まではそれぞれのサービス内で独自に行われていたアクセストークン発行のプロセスにIdPが入り込むことにより、Enterprise環境の管理者がより中央集権的な管理と可視性を得ることができるようになり、各サービス上で今まで見過ごされてきていた長期間有効なアクセストークンやAPIキーを置き換えることができるようになります。 122 | 123 | ## 現時点の懸念点 124 | 125 | まず懸念点として挙げられるのが各サービスの対応状況です。基本的にこのような"ユーザーになりすますことができ、かつ指定されたスコープでのアクセストークンをユーザーからの承認アクションなく発行できる機能"は著名なものだとGoogle WorkspaceのDomain Wide Delegationが挙げられますが、まだ未対応のサービスがほとんどだと思われます。Okta自体のCross App Access機能については、2025年第3四半期（Q3）に選定顧客向けの機能提供予定と公表されており（2025年6月23日リリース）、ISV/エンタープライズの両面でエコシステムの足並みが鍵となります。各サービスの対応状況も継続してウォッチしていく必要があります。 126 | 127 | また、MCPでの利用について [Enterprise-Managed Authorization Profile for MCP #646](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/646) ではOAuthクライアントの登録について以下のようにDynamic Client Registrationは用いず、MCPクライアントはIdPおよびMCP Authorization Serverに登録されている、つまりOAuthにおけるClient ID(やClient Secret)に当たるものを事前にユーザーに配布する必要があることを指摘しています。 128 | 129 | > The MCP client will likely need to be pre-registered with the enterprise IdP for single sign-on. 130 | > 131 | > It is also assumed that the MCP client will be pre-registered with the MCP server’s authorization server. 132 | 133 | 基本的にEnterprise環境ではMDM等のユーザー環境への一定のコントロールが存在しますが、Cursor・Claude Code・MCP Inspectorなどの多岐にわたるMCPクライアントにおいてこの事前登録を具体的にどう進めるのかは示されていません。つまり、私達はIdP・MCP Authorization ServerだけでなくそれぞれのMCP Clientのサポート開始を待つ必要があります。 134 | 135 | ## さいごに 136 | 137 | MCPでの現時点での認証と認可の仕様は残念ながらEnterprise環境では活用が難しいものとなっていますが一方でそれらを改善する動きがあり、さらに既存のEnterprise環境内のアクセス権限管理をよりIdPで集中管理できるように発展していく未来があります。 138 | 139 | 管理の集中化・可視性の向上・ユーザー体験の向上は歓迎するものであるものの、まだ超えなければならない壁があるのもわかっているためこれらの動向を引き続き追っていきたいと思います。 140 | 141 | (更新:2025/9/5) [MCP Meetup Tokyo 2025](https://aiau.connpass.com/event/365588/) において追加の最新情報を加えとして発表を行いました。 142 | 143 | ## References 144 | 145 | - [Enterprise-Ready MCP - Aaron Parecki](https://aaronparecki.com/2025/05/12/27/enterprise-ready-mcp) 146 | - [Enterprise-Managed Authorization Profile for MCP #646](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/646) 147 | - [Identity Assertion Authorization Grant - IETF Datatracker](https://datatracker.ietf.org/doc/draft-parecki-oauth-identity-assertion-authz-grant/) 148 | - [oktadev/id-assertion-authz-node-example](https://github.com/oktadev/id-assertion-authz-node-example) 149 | - [Cross-App Access - Okta Platform](https://www.okta.com/integrations/cross-app-access/) 150 | - [Okta introduces Cross App Access to help secure AI agents in the enterprise](https://www.okta.com/newsroom/press-releases/okta-introduces-cross-app-access-to-help-secure-ai-agents-in-the/) -------------------------------------------------------------------------------- /bookmark/aws/TerraformでAmazon ECSを構築するサンプルコードを書いてみた.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "TerraformでAmazon ECSを構築するサンプルコードを書いてみた" 3 | source: "https://qiita.com/chacco38/items/ca9a4362097457373324" 4 | author: 5 | - "[[chacco38]]" 6 | published: 2023-12-20 7 | created: 2025-10-15 8 | description: "はじめに みなさん、こんにちは。今回はTerraformの入門ということでAmazon ECSのサンプルコードを書いてみましたのでこちらを紹介していきたいと思います。 なお、サンプルコードを書いた際のTerraformおよびAWSプロバイダーのバージョンは次のとおりです。..." 9 | tags: 10 | - "clippings" 11 | image: "https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY2MTM5MDglMkZjMzM1NGFhMGNhYzg2NTM1NDEwNWFlYjQxYWQ3YmI4ZGUxODA0NjVmJTJGeF9sYXJnZS5wbmclM0YxNTg2MDE1NDgzP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz0yZWI5NGM4ZTZmNzkwNzRkNWQyN2NjNzFiNTU3YWFmMA%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkYwOTNmYzlhY2MwNGE1ZDg2NzBjZWExMGIzNGU0NmQ1MWVjNDExYjEzJTJGb3JpZ2luYWwuanBnJTNGMTYzNDcwODQ5Nz9peGxpYj1yYi00LjAuMCZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZiZz1GRkZGRkYmYm9yZGVyPTIlMkNGRkZGRkYmZm09cG5nMzImcz0zMGUxODVhOWNkYzY3ZTQ3Mjc1ZmM1OThiM2MwNzkzNQ%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3D95b84b35e5bf4cf6333212880af86b09?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9VGVycmFmb3JtJUUzJTgxJUE3QW1hem9uJTIwRUNTJUUzJTgyJTkyJUU2JUE3JThCJUU3JUFGJTg5JUUzJTgxJTk5JUUzJTgyJThCJUUzJTgyJUI1JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFCJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgyJTkyJUU2JTlCJUI4JUUzJTgxJTg0JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NTM4MDg1N2M1OGFkNzc4Zjk3ZTAxZjcwMWIxYjZhYzE&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBjaGFjY28zOCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWVjY2Y2ZDI1MmI5NDI5ODJkMTA1YmI2NGQzYTc0NmRh&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=5qCq5byP5Lya56S-5pel56uL6KO95L2c5omAIC8g44Kv44Op44Km44OJ44Ko44Oz44K444OL44Ki44Oq44Oz44Kw44OB44O844Og&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%233A3C3C&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=a44f569a595349f85a5fb2ca0de492e0" 12 | --- 13 | ![](https://relay-dsp.ad-m.asia/dmp/sync/bizmatrix?pid=c3ed207b574cf11376&d=x18o8hduaj&uid=) 14 | 15 | ## Qiita Conference 2025 Autumn 16 | 17 | ![](https://cdn.qiita.com/assets/public/client-resources/image-yukihiro_matz-62ee5a1ddc705baf-62ee5a1ddc705baf.png) 18 | 19 | まつもとゆきひろ 20 | 21 | ベテランによるAI時代のプログラミング（2025年秋版） 22 | 23 | [特設サイトで詳細をチェック](https://qiita.com/official-campaigns/conference/2025-autumn) 24 | 25 | この記事は最終更新日から1年以上が経過しています。 26 | 27 | ## はじめに 28 | 29 | みなさん、こんにちは。今回はTerraformの入門ということでAmazon ECSのサンプルコードを書いてみましたのでこちらを紹介していきたいと思います。 30 | 31 | なお、サンプルコードを書いた際のTerraformおよびAWSプロバイダーのバージョンは次のとおりです。最新バージョンでは定義方法が異なっている可能性があるため、実際にコードを書く際は最新の「 [Terraformドキュメント](https://developer.hashicorp.com/terraform/docs) 」と「 [AWSプロバイダードキュメント](https://registry.terraform.io/providers/hashicorp/aws/latest/docs) 」を確認しながら開発を進めていただければと思います。 32 | 33 | **例）versions.tf** 34 | 35 | versions.tf 36 | 37 | ```tf 38 | # Requirements 39 | terraform { 40 | required_version = "~> 1.3.6" 41 | 42 | required_providers { 43 | aws = { 44 | source = "hashicorp/aws" 45 | version = "~> 4.46.0" 46 | } 47 | } 48 | } 49 | ``` 50 | 51 | ## サンプルコードを書いてみた 52 | 53 | 今回は次のような構成のサンプルコードを書いてみました。なお、変数定義部分などの一部省略している点、ならびにステップごとの細かい説明などは省いていますのでご承知おきください。詳細については「 [AWSプロバイダードキュメント](https://registry.terraform.io/providers/hashicorp/aws/latest/docs) 」をご参照ください。 54 | 55 | - [例1. ECSクラスタの作成](https://qiita.com/chacco38/items/#%E4%BE%8B1-ecs%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%BF%E3%81%AE%E4%BD%9C%E6%88%90) 56 | - [例2. タスク定義の作成](https://qiita.com/chacco38/items/#%E4%BE%8B2-%E3%82%BF%E3%82%B9%E3%82%AF%E5%AE%9A%E7%BE%A9%E3%81%AE%E4%BD%9C%E6%88%90) 57 | - [例3. ECSサービスの作成](https://qiita.com/chacco38/items/#%E4%BE%8B3-ecs%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E4%BD%9C%E6%88%90) 58 | 59 | ちなみに、すべてのサンプルコードに共通してプロバイダー定義は次のようにしています。 60 | 61 | **例）providers.tf** 62 | 63 | providers.tf 64 | 65 | ```tf 66 | # デフォルトのプロバイダー設定 67 | provider "aws" { 68 | region = var.aws_region 69 | default_tags { 70 | tags = { 71 | Owner = "matt" 72 | Terraform = "true" 73 | } 74 | } 75 | } 76 | ``` 77 | 78 | ## 例1. ECSクラスタの作成 79 | 80 | ECSクラスタの例でContainer Insightsを有効化している以外には特筆するところはないかと思います。 81 | 82 | **例）main.tf** 83 | 84 | main.tf 85 | 86 | ```tf 87 | # ECSクラスタの作成 88 | resource "aws_ecs_cluster" "this" { 89 | name = var.ecs_cluster_name 90 | 91 | setting { 92 | name = "containerInsights" 93 | value = "enabled" 94 | } 95 | 96 | tags = { 97 | Name = var.ecs_cluster_name 98 | } 99 | } 100 | ``` 101 | 102 | ## 例2. タスク定義の作成 103 | 104 | AWS Fargate向けのタスク定義の例で、タスク起動用IAMロールやコンテナ用IAMロールなども併せて作成しています。 105 | 106 | **例）main.tf** 107 | 108 | main.tf 109 | 110 | ```tf 111 | # タスク定義の作成 112 | resource "aws_ecs_task_definition" "this" { 113 | family = var.ecs_task_name 114 | network_mode = "awsvpc" 115 | requires_compatibilities = ["FARGATE"] 116 | cpu = var.ecs_task_cpu 117 | memory = var.ecs_task_memory 118 | execution_role_arn = aws_iam_role.ecs_execution.arn 119 | task_role_arn = aws_iam_role.ecs_task.arn 120 | 121 | container_definitions = jsonencode([ 122 | # 割愛 123 | ]) 124 | 125 | tags = { 126 | Name = var.ecs_task_name 127 | } 128 | } 129 | 130 | # タスク起動用IAMロールの定義 131 | resource "aws_iam_role" "ecs_execution" { 132 | name = var.iam_ecs_execution_role_name 133 | 134 | assume_role_policy = jsonencode({ 135 | "Version": "2012-10-17", 136 | "Statement": [ 137 | { 138 | "Sid": "", 139 | "Effect": "Allow", 140 | "Principal": { 141 | "Service": "ecs-tasks.amazonaws.com" 142 | }, 143 | "Action": "sts:AssumeRole" 144 | } 145 | ] 146 | }) 147 | 148 | tags = { 149 | Name = var.iam_ecs_execution_role_name 150 | } 151 | } 152 | 153 | # タスク起動用IAMロールへのポリシー割り当て 154 | resource "aws_iam_role_policy_attachment" "ecs_execution" { 155 | policy_arn = "arn:aws:iam::aws:policy/service-role/AmazonECSTaskExecutionRolePolicy" 156 | role = aws_iam_role.ecs_execution.name 157 | } 158 | 159 | # コンテナ用IAMロールの定義 160 | resource "aws_iam_role" "ecs_task" { 161 | name = var.iam_ecs_task_role_name 162 | 163 | assume_role_policy = jsonencode({ 164 | "Version": "2012-10-17", 165 | "Statement": [ 166 | { 167 | "Sid": "", 168 | "Effect": "Allow", 169 | "Principal": { 170 | "Service": "ecs-tasks.amazonaws.com" 171 | }, 172 | "Action": "sts:AssumeRole" 173 | } 174 | ] 175 | }) 176 | 177 | tags = { 178 | Name = var.iam_ecs_task_role_name 179 | } 180 | } 181 | 182 | # コンテナ用IAMポリシーの定義（例ではSSMパラメータストアのアクセス権限を付与） 183 | resource "aws_iam_policy" "ecs_task" { 184 | name = var.iam_ecs_task_policy_name 185 | path = "/service-role/" 186 | 187 | policy = jsonencode({ 188 | "Version": "2012-10-17", 189 | "Statement": [ 190 | { 191 | "Action": [ 192 | "ssm:GetParametersByPath", 193 | "ssm:GetParameters", 194 | "ssm:GetParameter" 195 | ], 196 | "Effect": "Allow", 197 | "Resource": [ 198 | "*" 199 | ] 200 | } 201 | ] 202 | }) 203 | 204 | tags = { 205 | Name = var.iam_ecs_task_policy_name 206 | } 207 | } 208 | 209 | # コンテナ用IAMロールへのポリシー割り当て 210 | resource "aws_iam_role_policy_attachment" "ecs_task" { 211 | policy_arn = aws_iam_policy.ecs_task.arn 212 | role = aws_iam_role.ecs_task.name 213 | } 214 | ``` 215 | 216 | ## 例3. ECSサービスの作成 217 | 218 | AWS Fargate向けのECSサービスの例で、タスク起動用IAMロールやコンテナ用IAMロールなども併せて作成しています。 219 | 220 | **例）main.tf** 221 | 222 | main.tf 223 | 224 | ```tf 225 | # ECSサービスの作成 226 | resource "aws_ecs_service" "this" { 227 | name = var.ecs_service_name 228 | cluster = aws_ecs_cluster.this.id 229 | task_definition = aws_ecs_task_definition.this.arn 230 | desired_count = var.ecs_desired_count 231 | health_check_grace_period_seconds = var.ecs_health_check_grace_period_seconds 232 | launch_type = "FARGATE" 233 | force_new_deployment = var.ecs_force_new_deployment 234 | 235 | network_configuration { 236 | security_groups = [aws_security_group.this.id] 237 | subnets = [for x in data.aws_subnet.private : x.id] 238 | } 239 | 240 | load_balancer { 241 | target_group_arn = aws_lb_target_group.backend.arn 242 | container_name = var.ecs_container_name 243 | container_port = var.ecs_container_port 244 | } 245 | 246 | tags = { 247 | Name = var.ecs_service_name 248 | } 249 | 250 | depends_on = [aws_lb.cc_external_nlb] 251 | } 252 | 253 | # セキュリティグループの定義（通信制御の定義は割愛） 254 | resource "aws_security_group" "this" { 255 | name = var.security_group_name 256 | vpc_id = data.aws_vpc.this.id 257 | 258 | tags = { 259 | Name = var.security_group_name 260 | } 261 | 262 | lifecycle { 263 | create_before_destroy = true 264 | } 265 | } 266 | 267 | # NLB向けのECSサービス用ターゲットグループの定義 268 | resource "aws_lb_target_group" "this" { 269 | name = var.nlb_target_group_name 270 | port = var.ecs_container_port 271 | protocol = "TCP" 272 | target_type = "ip" 273 | vpc_id = data.aws_vpc.this.id 274 | 275 | tags = { 276 | Name = var.elb_target_group_name 277 | } 278 | } 279 | ``` 280 | 281 | **例）data.tf** 282 | 283 | data.tf 284 | 285 | ```tf 286 | # VPC情報の取得 287 | data "aws_vpc" "this" { 288 | cidr_block = var.vpc_cidr_block 289 | } 290 | 291 | # サブネット情報の取得 292 | data "aws_subnet" "private" { 293 | for_each = var.private_subnets 294 | 295 | vpc_id = data.aws_vpc.default.id 296 | availability_zone = each.value.availability_zone 297 | cidr_block = each.value.cidr_block 298 | } 299 | ``` 300 | 301 | **例）outputs.tf** 302 | 303 | outputs.tf 304 | 305 | ```tf 306 | output "security_group_id" { 307 | description = "The ID of the security group" 308 | value = try(aws_security_group.this.id, "") 309 | } 310 | ``` 311 | 312 | ## 終わりに 313 | 314 | 今回はTerraformの入門ということで、Amazon ECSのサンプルコードをいくつかご紹介してきましたがいかがだったでしょうか。こんな記事でも誰かの役に立っていただけるのであれば幸いです。 315 | 316 | なお、今回ご紹介したコードはあくまでサンプルであり、動作を保証するものではございません。そのまま使用したことによって発生したトラブルなどについては一切責任を負うことはできませんのでご注意ください。 317 | 318 | --- 319 | 320 | - AWS は、米国その他の諸国における Amazon.com, Inc. またはその関連会社の商標です。 321 | - Terraform は、HashiCorp, Inc. の米国およびその他の国における商標または登録商標です。 322 | - その他、記載されている会社名および商品・製品・サービス名は、各社の商標または登録商標です。 323 | 324 | [0](https://qiita.com/chacco38/items/#comments) 325 | 326 | コメント一覧へ移動 327 | 328 | X（Twitter）でシェアする 329 | 330 | Facebookでシェアする 331 | 332 | はてなブックマークに追加する 333 | 334 | 新規登録して、もっと便利にQiitaを使ってみよう 335 | 336 | 1. あなたにマッチした記事をお届けします 337 | 2. 便利な情報をあとで効率的に読み返せます 338 | 3. ダークテーマを利用できます 339 | [ログインすると使える機能について](https://help.qiita.com/ja/articles/qiita-login-user) 340 | 341 | [新規登録](https://qiita.com/signup?callback_action=login_or_signup&redirect_to=%2Fchacco38%2Fitems%2Fca9a4362097457373324&realm=qiita) [ログイン](https://qiita.com/login?callback_action=login_or_signup&redirect_to=%2Fchacco38%2Fitems%2Fca9a4362097457373324&realm=qiita) 342 | 343 | ## Qiita Conference 2025 Autumn 11月5日(水)~7日(金)開催！ 344 | 345 | ![](https://cdn.qiita.com/assets/public/official_campaigns/qiita_conference_2025_autumn/image-conference_2025_autumn_ogp-7cf3021de31b9ab76a7b3bbaf2909bb5.png) 346 | 347 | Qiita Conferenceは、AI時代のエンジニアに贈るQiita最大規模のテックカンファレンスです！ 348 | 349 | 基調講演ゲスト(敬称略) 350 | 351 | piacere、牛尾 剛、Esteban Suarez、和田 卓人、seya、ミノ駆動、市谷 聡啓、からあげ、岩瀬 義昌、まつもとゆきひろ、みのるん and more… 352 | 353 | [イベント詳細を見る](https://qiita.com/official-campaigns/conference/2025-autumn) 354 | 355 | [2](https://qiita.com/chacco38/items/ca9a4362097457373324/likers) 356 | 357 | いいねしたユーザー一覧へ移動 358 | 359 | 4 -------------------------------------------------------------------------------- /bookmark/ai/【コピペOK】技術的負債を作らないためのルールを設定しよう（Claude Code, Codex, Cursor対応）.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "【コピペOK】技術的負債を作らないためのルールを設定しよう（Claude Code, Codex, Cursor対応）" 3 | source: "https://zenn.dev/tmasuyama1114/articles/global_rule_file" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-10-09 7 | created: 2025-10-14 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--czjxOlpb--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2580%2590%25E3%2582%25B3%25E3%2583%2594%25E3%2583%259AOK%25E3%2580%2591%25E6%258A%2580%25E8%25A1%2593%25E7%259A%2584%25E8%25B2%25A0%25E5%2582%25B5%25E3%2582%2592%25E4%25BD%259C%25E3%2582%2589%25E3%2581%25AA%25E3%2581%2584%25E3%2581%259F%25E3%2582%2581%25E3%2581%25AE%25E3%2583%25AB%25E3%2583%25BC%25E3%2583%25AB%25E3%2582%2592%25E8%25A8%25AD%25E5%25AE%259A%25E3%2581%2597%25E3%2582%2588%25E3%2581%2586%25EF%25BC%2588Claude%2520Code%252C%2520Codex%252C%2520Cursor%25E5%25AF%25BE%25E5%25BF%259C%25EF%25BC%2589%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:%25E3%2581%25A8%25E3%2581%25BE%25E3%2581%25A0%2540AI%2520%25E9%25A7%2586%25E5%258B%2595%25E9%2596%258B%25E7%2599%25BA%25E6%2595%2599%25E8%2582%25B2%25E8%2580%2585%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzYyNTkxYzBkNDYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | 269 14 | 15 | 171[tech](https://zenn.dev/tech-or-idea) 16 | 17 | こんにちは、とまだです。 18 | 19 | AIエージェントを使い始めたけど、「動くコードは作ってくれるけど、品質が心配...」と感じたことはありませんか？ 20 | 21 | 私も最初はそうでした。 22 | 23 | Claude CodeやCursor、Codexを使っていると、確かに素早くコードを生成してくれます。 24 | ですが、そのコードが本当に「良いコード」なのか不安になりますよね。 25 | 26 | Zenn でこちらの記事が注目を集めているように、多くの方がコードの品質を気にしているようです。 27 | 28 | そこで、AI駆動開発でより良いコードを書くための「共通ルールファイル」をご紹介します！ 29 | 30 | ここでいう「ルールファイル」とは、AIにもっと品質の高いコードを書いてもらうための指示を書いたファイルです。 31 | Claude Code などでは「メモリファイル」とも呼ばれていますが、パッと見でわかりやすいよう「ルールファイル」と呼ぶことにします。 32 | 33 | そして、これらはプロジェクトごとに作るのではなく、共通で使えるようにすることで、効率的にコードを書くことができます。 34 | 今回は、AIにもっと品質の高いコードを書いてもらうための「共通ルールファイル」を紹介します。 35 | 36 | これを読めば、Claude Codeをもっと効果的に使いこなせるようになるはずです。 37 | 38 | ちなみに私は本業ではフリーランスエンジニア、ならびにAI駆動開発の導入支援を行っています。 39 | また、Udemy で [AI 駆動開発講座を複数開講](https://school.learning-next.app/coupons) しており、いくつかベストセラーもいただいています。 40 | 41 | その経験を活かして、初心者の方でもわかりやすいよう、丁寧に解説しています！ 42 | 43 | ## 忙しい人のために要約 44 | 45 | - AIに「良いコード」の基準を教える設定ファイルを作る 46 | - 一度設定すれば、すべてのプロジェクトで自動的に適用される 47 | - コード品質をAIが常に意識してくれる 48 | - Claude Code、Codex、Cursor での設定方法を紹介 49 | - 他の AI エージェントでも同じように設定できるはず 50 | 51 | ## この記事を読むと得られるメリット 52 | 53 | - AI駆動開発でより良いコードを書くための「共通ルールファイル」を作る方法を学べる 54 | - 設定方法を紹介するので、すぐに実践できる 55 | - セキュリティや保守性で悩むことなくコードを書ける 56 | - 初心者でも長く使えるコードを書ける 57 | 58 | それでは、早速本題に入ります！ 59 | 60 | ## なぜAIエージェントに「ルール」が必要なのか 61 | 62 | ### プログラミングの「良いコード」は奥が深い 63 | 64 | プログラミングを始めたばかりの頃、私は「動けばOK」だと思っていました。 65 | 66 | しかし実際の開発現場では、コードが動くのは最低限のことなのです。 67 | 68 | 料理で例えてみましょう。 69 | 家で自分用に作る料理なら「食べられれば良い」かもしれません。 70 | ですが、レストランで提供する料理となると話は別です。 71 | 味はもちろん、見た目、栄養バランス、食材の安全性、原価、調理時間まで考える必要があります。 72 | 73 | プログラミングも同じです。 74 | 趣味のコードなら「動けばOK」でも、仕事で使うコードは違います。 75 | 読みやすさ、修正のしやすさ、エラーへの対処、処理速度など、様々な品質が求められるのです。 76 | 77 | ### AIは「何を重視すべきか」が分からない 78 | 79 | 実は、AIエージェントは「良いコード」を書く能力を持っています。 80 | 81 | ただし、私たちが何も指示しなければ、AIは「とりあえず動くコード」を優先して書いてしまいます。 82 | 83 | なぜでしょうか？ 84 | 85 | それは、AIには「このプロジェクトで何を重視すべきか」が分からないからです。 86 | 87 | たとえば、以下のような状況を考えてみてください。 88 | 89 | - プロトタイプを作る場合 → スピード重視で良い 90 | - お客様に納品する場合 → 品質とセキュリティが最重要 91 | - 大規模サービスの場合 → 性能と拡張性が大切 92 | 93 | AIにはこういった文脈が分かりません。 94 | だからこそ、私たちが「ルール」として教えてあげる必要があるのです。 95 | 96 | ## 共通ルールファイルとは 97 | 98 | ### 優秀な先輩エンジニアのアドバイスを自動化 99 | 100 | 共通ルールファイルは、AIに対する「開発の指針」を書いたドキュメントです。 101 | 102 | イメージとしては、優秀な先輩エンジニアが常に隣にいて、以下のようなアドバイスをしてくれる感じです。 103 | 104 | 「このエラー処理、ちゃんと書いた？」 105 | 「セキュリティは大丈夫？」 106 | 「後から読む人のことも考えてる？」 107 | 108 | このようなアドバイスを、AIが自動的に考慮してくれるようになります。 109 | 110 | ### 一度設定すれば、ずっと使える 111 | 112 | 共通ルールファイルの素晴らしい点は、一度設定すれば新しいプロジェクトを始めるたびに設定し直す必要がないことです。 113 | 114 | プロジェクトごとに特別なルールがある場合は追加できますが、基本的な品質ルールは共通で使い回せます。 115 | 116 | ## 設定方法（5分で完了！） 117 | 118 | 設定方法はとても簡単です。 119 | 使っているAIエージェントによって方法が異なるので、それぞれ説明します。 120 | 121 | 後述するルールをコピペして貼り付けるだけです。 122 | 123 | ### Claude Codeの場合 124 | 125 | Claude Codeは、ターミナルから使うAIエージェントです。 126 | 設定は以下の手順で行います。 127 | 128 | #### 1\. 設定用のフォルダとファイルを作る 129 | 130 | ターミナル（コマンドプロンプトやPowerShell）を開いて、以下のコマンドを順番に実行します。 131 | 132 | ```bash 133 | # フォルダを作成 134 | mkdir -p ~/.claude 135 | 136 | # ファイルを作成 137 | touch ~/.claude/CLAUDE.md 138 | ``` 139 | 140 | Windowsの場合は、PowerShellで以下のコマンドを実行してください。 141 | 142 | ```powershell 143 | # フォルダを作成 144 | New-Item -Path "$HOME\.claude" -ItemType Directory -Force 145 | 146 | # ファイルを作成 147 | New-Item -Path "$HOME\.claude\CLAUDE.md" -ItemType File -Force 148 | ``` 149 | 150 | #### 2\. ファイルを開いて、ルールを貼り付ける 151 | 152 | 作成したファイルを開く必要があります。 153 | 154 | VS Codeを使っている場合は、以下のコマンドで開けます。 155 | 156 | ```bash 157 | code ~/.claude/CLAUDE.md 158 | ``` 159 | 160 | VS Codeで `code` コマンドが使えない場合は、以下の手順で有効にしてください。 161 | 162 | 1. VS Codeを開く 163 | 2. `Command+Shift+P` （Macの場合）または `Ctrl+Shift+P` （Windowsの場合）を押す 164 | 3. 「Shell Command: Install 'code' command in PATH」を選択 165 | 166 | もしくは、直接ファイルを探して開くこともできます。 167 | ただし、`.claude` のようにドット（.）で始まるフォルダは通常見えないので、隠しファイルを表示する設定が必要になります。 168 | （ここでは割愛しますが「隠しフォルダ　表示」というキーワードで検索すれば、設定方法が出てきます） 169 | 170 | ### Codexの場合 171 | 172 | Codexも同様の手順です。 173 | 174 | ```bash 175 | # フォルダを作成 176 | mkdir -p ~/.codex 177 | 178 | # ファイルを作成 179 | touch ~/.codex/AGENTS.md 180 | 181 | # VS Codeで開く 182 | code ~/.codex/AGENTS.md 183 | ``` 184 | 185 | ### Cursorの場合 186 | 187 | CursorはVS Codeベースのエディタなので、GUI（画面操作）で設定できます。 188 | 189 | 1. Cursorを開く 190 | 2. 設定画面を開く（歯車アイコンをクリック） 191 | 3. 「Rules & Memories」を選択 192 | 4. 「User Rules」の「Add Rule」ボタンをクリック 193 | 5. ルールを貼り付けて保存 194 | 195 | これで設定完了です！ 196 | 197 | ## 実際に使えるルールファイル（コピペOK） 198 | 199 | では、実際に私が作成したルールファイルをご紹介します。 200 | そのままコピペして使うだけで、コードの品質をAIが常に意識してくれるようになります！ 201 | 202 | ```markdown 203 | # AI駆動開発 共通ガイドライン 204 | 205 | ## 開発の基本理念 206 | - 動くコードを書くだけでなく、品質・保守性・安全性を常に意識する 207 | - プロジェクトの段階（プロトタイプ、MVP、本番環境）に応じて適切なバランスを取る 208 | - 問題を見つけたら放置せず、必ず対処または明示的に記録する 209 | - ボーイスカウトルール：コードを見つけた時よりも良い状態で残す 210 | 211 | ## エラーハンドリングの原則 212 | - 関連が薄く見えるエラーでも必ず解決する 213 | - エラーの抑制（@ts-ignore、try-catch で握りつぶす等）ではなく、根本原因を修正 214 | - 早期にエラーを検出し、明確なエラーメッセージを提供 215 | - エラーケースも必ずテストでカバーする 216 | - 外部APIやネットワーク通信は必ず失敗する可能性を考慮 217 | 218 | ## コード品質の基準 219 | - DRY原則：重複を避け、単一の信頼できる情報源を維持 220 | - 意味のある変数名・関数名で意図を明確に伝える 221 | - プロジェクト全体で一貫したコーディングスタイルを維持 222 | - 小さな問題も放置せず、発見次第修正（Broken Windows理論） 223 | - コメントは「なぜ」を説明し、「何を」はコードで表現 224 | 225 | ## テスト規律 226 | - テストをスキップせず、問題があれば修正する 227 | - 実装詳細ではなく振る舞いをテスト 228 | - テスト間の依存を避け、任意の順序で実行可能に 229 | - テストは高速で、常に同じ結果を返すように 230 | - カバレッジは指標であり、質の高いテストを重視 231 | 232 | ## 保守性とリファクタリング 233 | - 機能追加と同時に既存コードの改善を検討 234 | - 大規模な変更は小さなステップに分割 235 | - 使用されていないコードは積極的に削除 236 | - 依存関係は定期的に更新（セキュリティと互換性のため） 237 | - 技術的負債は明示的にコメントやドキュメントに記録 238 | 239 | ## セキュリティの考え方 240 | - APIキー、パスワード等は環境変数で管理（ハードコード禁止） 241 | - すべての外部入力を検証 242 | - 必要最小限の権限で動作（最小権限の原則） 243 | - 不要な依存関係を避ける 244 | - セキュリティ監査ツールを定期的に実行 245 | 246 | ## パフォーマンスの意識 247 | - 推測ではなく計測に基づいて最適化 248 | - 初期段階から拡張性を考慮 249 | - 必要になるまでリソースの読み込みを遅延 250 | - キャッシュの有効期限と無効化戦略を明確に 251 | - N+1問題やオーバーフェッチを避ける 252 | 253 | ## 信頼性の確保 254 | - タイムアウト処理を適切に設定 255 | - リトライ機構の実装（指数バックオフを考慮） 256 | - サーキットブレーカーパターンの活用 257 | - 一時的な障害に対する耐性を持たせる 258 | - 適切なログとメトリクスで可観測性を確保 259 | 260 | ## プロジェクトコンテキストの理解 261 | - ビジネス要件と技術要件のバランスを取る 262 | - 現在のフェーズで本当に必要な品質レベルを判断 263 | - 時間制約がある場合でも、最低限の品質基準を維持 264 | - チーム全体の技術レベルに合わせた実装選択 265 | 266 | ## トレードオフの認識 267 | - すべてを完璧にすることは不可能（銀の弾丸は存在しない） 268 | - 制約の中で最適なバランスを見つける 269 | - プロトタイプなら簡潔さを、本番なら堅牢性を優先 270 | - 妥協点とその理由を明確にドキュメント化 271 | 272 | ## Git運用の基本 273 | - コンベンショナルコミット形式を使用（feat:, fix:, docs:, test:, refactor:, chore:） 274 | - コミットは原子的で、単一の変更に焦点を当てる 275 | - 明確で説明的なコミットメッセージを英語で記述 276 | - main/masterブランチへの直接コミットは避ける 277 | 278 | ## コードレビューの姿勢 279 | - レビューコメントは建設的な改善提案として受け取る 280 | - 個人ではなくコードに焦点を当てる 281 | - 変更の理由と影響を明確に説明 282 | - フィードバックを学習機会として歓迎 283 | 284 | ## デバッグのベストプラクティス 285 | - 問題を確実に再現できる手順を確立 286 | - 二分探索で問題の範囲を絞り込む 287 | - 最近の変更から調査を開始 288 | - デバッガー、プロファイラー等の適切なツールを活用 289 | - 調査結果と解決策を記録し、知識を共有 290 | 291 | ## 依存関係の管理 292 | - 本当に必要な依存関係のみを追加 293 | - package-lock.json等のロックファイルを必ずコミット 294 | - 新しい依存関係追加前にライセンス、サイズ、メンテナンス状況を確認 295 | - セキュリティパッチとバグ修正のため定期的に更新 296 | 297 | ## ドキュメントの基準 298 | - READMEにプロジェクトの概要、セットアップ、使用方法を明確に記載 299 | - ドキュメントをコードと同期して更新 300 | - 実例を示すことを優先 301 | - 重要な設計判断はADR (Architecture Decision Records)で記録 302 | 303 | ## 継続的な改善 304 | - 学んだことを次のプロジェクトに活かす 305 | - 定期的に振り返りを行い、プロセスを改善 306 | - 新しいツールや手法を適切に評価して取り入れる 307 | - チームや将来の開発者のために知識を文書化 308 | ``` 309 | 310 | ## 8つの品質チェックポイント（初心者向け解説） 311 | 312 | ルールファイルに含まれる品質の観点を、初心者にも分かりやすく解説します。 313 | 314 | ### 1\. エラーハンドリング（エラーへの対処） 315 | 316 | プログラムでエラーが起きたとき、どう対処するかということです。 317 | 318 | 自動販売機で例えると分かりやすいでしょう。 319 | お金が詰まったとき、良い自動販売機なら「お金が詰まりました。係員を呼んでください」と表示します。 320 | 悪い自動販売機は、そのまま固まってしまいます。 321 | 322 | プログラムも同じです。 323 | 何か問題が起きたとき、適切にユーザーに知らせて、安全に処理を続けるか止める必要があります。 324 | 325 | AIにルールを設定することで、ネットワークエラーやファイル読み込みエラーなど、様々なエラーに対処するコードを自動的に書いてくれるようになります。 326 | 327 | ### 2\. セキュリティ（安全性の確保） 328 | 329 | 家の鍵をかけ忘れたら誰でも入れてしまうように、プログラムにもセキュリティ対策が必要です。 330 | 331 | 具体的には以下のような対策です。 332 | 333 | - パスワードを画面に表示しない 334 | - 個人情報を暗号化する 335 | - 悪意のある入力をブロックする 336 | - APIキー（サービスを使うための鍵）を隠す 337 | 338 | AIが自動的にこれらを考慮したコードを書いてくれるようになります。 339 | 340 | ### 3\. 保守性（修正・改善のしやすさ） 341 | 342 | コードは一度書いて終わりではありません。 343 | 後から機能を追加したり、バグを修正したりする必要があります。 344 | 345 | 部屋の整理整頓と同じです。 346 | きちんと整理されていれば、必要なものがすぐ見つかります。 347 | 散らかっていると、探すのに時間がかかります。 348 | 349 | 整理されたコードの特徴の例をあげてみましょう。 350 | 351 | - 変数名が分かりやすい（ `a` ではなく `userName` など） 352 | - 機能ごとにファイルが分かれている 353 | - コメントで意図が説明されている 354 | - 重複したコードがない 355 | 356 | ### 4\. テスタビリティ（テストのしやすさ） 357 | 358 | 新しい家電を買ったとき、まず動作確認しますよね。 359 | プログラムも同じで、きちんと動作確認（テスト）できる作りにすることが大切です。 360 | 361 | テストしやすいコードは、以下のような特徴があります。 362 | 363 | - 機能が小さく分割されている 364 | - 外部サービスに依存しすぎていない 365 | - 入力と出力が明確 366 | - 予測可能な動作をする 367 | 368 | ### 5\. パフォーマンス（処理速度） 369 | 370 | プログラムの処理速度のことです。 371 | 372 | レジで会計するとき、1商品ずつ別々に会計するより、まとめて会計した方が早いですよね。 373 | 374 | プログラムも同じで、効率的な処理方法を選ぶことが重要です。 375 | 376 | - 不要な処理を避ける 377 | - データベースアクセスを最小限にする 378 | - 重い処理は必要なときだけ実行 379 | - キャッシュ（一時保存）を活用 380 | 381 | ### 6\. 信頼性（安定した動作） 382 | 383 | 電車が遅延したとき、良い鉄道会社は振替輸送の案内をします。 384 | プログラムも、問題が起きたときの代替手段が必要です。 385 | 386 | 信頼性を高める方法： 387 | 388 | - エラーが起きたら自動的にリトライ（再試行） 389 | - サービスが停止したら別のサービスを使う 390 | - データのバックアップを取る 391 | - 異常を検知したらアラートを出す 392 | 393 | ### 7\. 可観測性（状況把握のしやすさ） 394 | 395 | 体温計で熱を測るように、プログラムも「今どんな状態か」を把握できることが大切です。 396 | 397 | 具体的には、以下のような対策があります。 398 | 399 | - ログ（記録）を残す 400 | - エラーの詳細情報を記録 401 | - 処理時間を計測 402 | - ユーザーの行動を追跡（プライバシーに配慮して） 403 | 404 | 問題が起きたとき、これらの情報があれば原因を特定しやすくなります。 405 | 406 | ### 8\. スケーラビリティ（拡張性） 407 | 408 | 小さなお店が人気になって、お客さんが増えたらどうするでしょうか？ 409 | 席を増やしたり、店舗を拡大したりしますよね。 410 | 411 | プログラムも同じで、利用者が増えたときに対応できる作りが重要です。 412 | 413 | - データベース設計を工夫する 414 | - サーバーを増やせる構成にする 415 | - 処理を並列化できるようにする 416 | - 不要な機能は後から追加できる設計にする 417 | 418 | ## よくある質問 419 | 420 | ### Q: プログラミング初心者でも使えますか？ 421 | 422 | はい、むしろ初心者の方にこそおすすめです！ 423 | 424 | 共通ルールファイルがあれば、AIが「なぜこの実装が良いのか」を説明しながらコードを書いてくれます。 425 | 実践しながら、良いコードの書き方を自然に学べます。 426 | 427 | 最初は生成されたコードの意味が分からなくても大丈夫です。 428 | AIに「このコードのエラー処理の部分を説明して」と聞けば、丁寧に教えてくれます。 429 | 430 | ### Q: すべてのプロジェクトに同じルールで大丈夫？ 431 | 432 | 基本的なルールは共通で使えます。 433 | ただ、プロジェクトごとに `CLAUDE.md` や `AGENTS.md` を作成して、カスタマイズすることもできます。 434 | 435 | たとえば React のプロジェクトならコンポーネント配置のルールや、 436 | TypeScript での型定義のコーディングルールなどを追加すると良いでしょう。 437 | 438 | ### Q: ルールが多すぎてAIが混乱しませんか？ 439 | 440 | あまりに多いとAIが混乱する可能性がありますが、今回ご紹介したルール程度であれば問題ありません。 441 | 442 | また、ルールファイルには「プロジェクトの段階に応じて適切なバランスを取る」という指示も含まれているため、AIが状況に応じて判断してくれます。 443 | 444 | ただし、今後追記していって長くなった際には、Claude や ChatGPT などにプロンプトとルールファイルを渡して「内容を圧縮」すると良いでしょう。 445 | 446 | こちらはプロンプトの例です。私がよく使用しているプロンプトです。 447 | 448 | ```markdown 449 | # 背景 450 | これは、AIに対するルールファイルです。 451 | AIがコーディングを行う際に、このルールファイルを常に参照しています。 452 | 453 | ...（ここにルールファイルの内容） 454 | 455 | # 現状の問題点 456 | 457 | かなり長いルールファイルになってしまっています。 458 | このままだと全体のコンテキストが長大になり、性能が低下してしまう可能性があります。 459 | 460 | # 命令 461 | 462 | 元の内容を保持しつつも、内容を圧縮・整理してください。 463 | ``` 464 | 465 | ### Q: 設定したルールを確認する方法は？ 466 | 467 | AIに「現在設定されているルールを教えて」と聞けば、適用されているルールを確認できます。 468 | 469 | また、コードを生成してもらうときに「なぜこの実装にしたの？」と聞けば、どのルールを考慮したか説明してくれます。 470 | 471 | それ自体が勉強にもなりますので、ぜひ試してみてください！ 472 | 473 | ## まとめ 474 | 475 | AI駆動開発において、AIエージェントは私たちの強力なパートナーです。 476 | 477 | ですが、パートナーも「どんな仕事を期待しているか」を知る必要があります。 478 | 共通ルールファイルは、その期待を明確に伝える手段です。 479 | 480 | 一度設定すれば、AIが常に品質を意識したコードを書いてくれるようになります。 481 | 482 | 「動くコード」から「良いコード」へ。 483 | より自信を持って開発を進められるようになります。 484 | 485 | 設定はたった5分で完了します。 486 | ぜひ今すぐ試してみてください！ 487 | 488 | より良いコードを書けるようになると、開発が楽しくなりますし、将来の自分や他の開発者にも喜ばれます。 489 | 490 | 質問や相談があれば、お気軽にコメントや [X（Twitter）](https://x.com/muscle_coding) でお声がけください！ 491 | 492 | また、AI駆動開発をはじめた方のために質問や相談、仲間との交流ができる Discord も「今日」作りました。 493 | （眺めているだけでも勉強になる仕組みにしているので、気軽に参加してください） 494 | 495 | 一緒にAI駆動開発を楽しんでいきましょう！ 496 | 497 | ## その他のClaude Code関連記事 498 | 499 | Youtube でも AI 駆動開発の実践動画を公開しています！ 500 | 501 | よければチャンネル登録していただき、AI駆動開発の実践的な情報をキャッチアップしていってください！ 502 | 503 | ## ちょっと宣伝：AI駆動開発を体系的に学びたい方へ 504 | 505 | 冒頭でも触れましたが Udemy では AI 駆動開発講座を複数開講しており、いくつかベストセラーもいただいています。 506 | 507 | 最大で 90%OFF のクーポンも配布しておりますので、これから学ぶ方はぜひご利用ください。 508 | 509 | Webアプリやスマホアプリ、Pythonなど、多くの分野で講座を開講しています！ 510 | 511 | 269 512 | 513 | 171 -------------------------------------------------------------------------------- /bookmark/claude/SuperClaude とは？Claude Codeのコード品質を30%改善できた神ツールの完全ガイド！.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "SuperClaude とは？Claude Codeのコード品質を30%改善できた神ツールの完全ガイド！" 3 | source: "https://qiita.com/tomada/items/2eb1b0623c9f59424235" 4 | author: 5 | - "[[tomada]]" 6 | published: 2025-08-23 7 | created: 2025-10-14 8 | description: "こんにちは、とまだです。 Claude Code でコードを書いていて、「セキュリティ的に大丈夫かな？」とか「もっとパフォーマンス改善できないかな？」と悩んだことはありませんか？ 最近話題の SuperClaude というフレームワークを使ってみたところ、コード品質の改善が..." 9 | tags: 10 | - "clippings" 11 | image: "https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMzY0NTAxJTJGcHJvZmlsZS1pbWFnZXMlMkYxNzI3NjQxODY2P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz0yMjFmY2Y1M2RmNTc5N2FjOTljY2M2ZjJmMDZmYmZhYg%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkYxYTRhOTgwOTQ4OTMzZmQwYzNkZGE2NTFmOTVlNzRiMDZiMjAxMGQwJTJGb3JpZ2luYWwuanBnJTNGMTc1MDAxNzUyOD9peGxpYj1yYi00LjAuMCZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZiZz1GRkZGRkYmYm9yZGVyPTIlMkNGRkZGRkYmZm09cG5nMzImcz1iODQ4ZDAzYmU4MWMyYmFmZjc4OTRiZDI1ZjkxZTJmMQ%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3D75810b9a633915110fe98a18527a28d6?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9U3VwZXJDbGF1ZGUlMjAlRTMlODElQTglRTMlODElQUYlRUYlQkMlOUZDbGF1ZGUlMjBDb2RlJUUzJTgxJUFFJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUU1JTkzJTgxJUU4JUIzJUFBJUUzJTgyJTkyMzAlMjUlRTYlOTQlQjklRTUlOTYlODQlRTMlODElQTclRTMlODElOEQlRTMlODElOUYlRTclQTUlOUUlRTMlODMlODQlRTMlODMlQkMlRTMlODMlQUIlRTMlODElQUUlRTUlQUUlOEMlRTUlODUlQTglRTMlODIlQUMlRTMlODIlQTQlRTMlODMlODklRUYlQkMlODEmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1iNWJjM2UwZGU4ZDJmOGFmZDdhY2Q5ZDJmYmM4ZTU3ZA&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0b21hZGEmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1hZWRjMzNlM2YzMmEzN2ExODhkNTM3MGFiNTUwYzc5Ng&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=TGVhcm5pbmcgTmV4dA&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=dbfc96a3879ad931faed0f3b4bc7db5e" 12 | --- 13 | ![](https://relay-dsp.ad-m.asia/dmp/sync/bizmatrix?pid=c3ed207b574cf11376&d=x18o8hduaj&uid=) 14 | 15 | こんにちは、とまだです。 16 | 17 | Claude Code でコードを書いていて、「セキュリティ的に大丈夫かな？」とか「もっとパフォーマンス改善できないかな？」と悩んだことはありませんか？ 18 | 19 | 最近話題の **SuperClaude** というフレームワークを使ってみたところ、コード品質の改善がとても楽になったので紹介します。 20 | 21 | （追記：実践編は [こちら](https://qiita.com/tomada/items/34c67a6a5320f3fd59f9) ） 22 | 23 | ## 忙しい人のために要約 24 | 25 | - SuperClaude は Claude Code を拡張する無料のオープンソースツール 26 | - 専門家ペルソナが自動的に登場して最適な支援をしてくれる 27 | - 16個の高品質なカスタムコマンドがすぐに使える 28 | - コード分析で品質を数値化、改善前後の効果が明確に分かる 29 | - インストールは1分で完了、アンインストールも簡単 30 | 31 | （追記：動画版も公開しました！） 32 | 33 | ![](https://www.youtube.com/watch?v=ZUr_Sp72q50) 34 | 35 | ## SuperClaude とは？ 36 | 37 | SuperClaude は Claude Code の開発体験を向上させるフレームワークです。 38 | 39 | 通常の Claude Code だと、セキュリティチェックやパフォーマンス改善を依頼しても、どこまで網羅的にチェックしてくれているか分かりづらいですよね。 40 | 41 | SuperClaude を導入すると、専門家が自動的に登場して適切な観点でコードをチェックしてくれます。 42 | 43 | 料理に例えると、普通の Claude Code が一般的な料理人だとしたら、SuperClaude は和食職人、フレンチシェフ、パティシエが必要に応じて登場してくれるようなイメージです。 44 | 45 | ## SuperClaude のすごいところ 46 | 47 | ### 1\. ペルソナによる専門的な支援 48 | 49 | SuperClaude には11種類の専門家ペルソナが用意されています。 50 | 51 | 例： 52 | 53 | - 🛡️ **security** - セキュリティの脆弱性をチェック 54 | - ⚡ **performance** - パフォーマンスのボトルネックを特定 55 | - 🏗️ **architect** - システム設計の観点で改善提案 56 | 57 | これらのペルソナは、作業内容に応じて自動的に選択されます。 58 | 59 | 「auth.js を分析して」と伝えると、セキュリティエキスパートが自動的に登場。 60 | React コンポーネントを作成すると、フロントエンドスペシャリストが支援。 61 | 62 | 専門家チームと一緒に開発しているような体験ができます。 63 | 64 | 他のペルソナについては、記事の最後の方で詳しく解説します。 65 | 66 | ### 2\. 実用的なカスタムコマンド 67 | 68 | 16個のカスタムコマンドがすぐに使えます。 69 | 70 | よく使うコマンド： 71 | 72 | - `/sc:analyze` - コードの品質・セキュリティ・パフォーマンスを分析 73 | - `/sc:improve` - コードの自動改善 74 | - `/sc:troubleshoot` - 問題の体系的な調査 75 | 76 | これらのコマンドには適切なペルソナが自動的に割り当てられるので、どのペルソナを使うか悩む必要はありません。 77 | 78 | 他のコマンドについては、記事の最後の方で詳しく解説します。 79 | 80 | ちなみに、コマンドについては別記事でも詳しく解説しています。 81 | 82 | ### 3\. 改善効果の可視化 83 | 84 | 分析結果が数値で表示されるのが特に便利です。 85 | 86 | ```text 87 | | カテゴリ | スコア | ステータス | 88 | |-------------|--------|-----------| 89 | | 型安全性 | 100% | ✅ 優秀 | 90 | | コード品質 | 75% | ⚠️ 良好 | 91 | | セキュリティ | 85% | ✅ 良好 | 92 | | パフォーマンス | 70% | ⚠️ 要改善 | 93 | | アーキテクチャ | 60% | 🔴 重要 | 94 | ``` 95 | 96 | どこを優先的に改善すべきか一目瞭然ですね。 97 | 98 | ## 実際に使ってみる 99 | 100 | ### インストール手順 101 | 102 | Python のパッケージマネージャー `uv` を使用します。 103 | 104 | ```bash 105 | # uvのインストール（まだの場合） 106 | curl -Ls https://astral.sh/uv/install.sh | sh 107 | 108 | # 仮想環境の作成 109 | uv venv 110 | source .venv/bin/activate 111 | 112 | # SuperClaudeのインストール 113 | uv pip install SuperClaude 114 | 115 | # フレームワークの設定 116 | python3 -m SuperClaude install 117 | ``` 118 | 119 | インストール時に「Quick Installation（推奨）」を選択すれば、1分程度で完了します。 120 | 121 | 既存の設定は自動的にバックアップされるので安心です。 122 | 123 | ### コード分析を実行してみる 124 | 125 | 実際のプロジェクトで `/sc:analyze` コマンドを試してみました。 126 | 127 | 今回はプロジェクト内の `src/app/coupons/` というディレクトリ内を分析してみます。 128 | 129 | ```bash 130 | /sc:analyze src/app/coupons/ 131 | ``` 132 | 133 | このコマンド一つで、以下の観点で分析が実行されます。 134 | 135 | 1. **コード品質** - 重複コード、エラーハンドリングの不足 136 | 2. **セキュリティ** - XSSリスク、入力検証の欠如 137 | 3. **パフォーマンス** - 冗長なデータ取得、画像最適化 138 | 4. **アーキテクチャ** - DRY原則違反、スケーラビリティ 139 | 140 | 分析結果の一部を見てみましょう。 141 | 142 | ```markdown 143 | 📈 コード品質分析 144 | 145 | ⚠️ 改善が必要な領域 146 | 147 | 1. コードの重複（優先度：高） 148 | - 問題: ほぼ同一構造の12個の個別コースページ 149 | - 影響: メンテナンス負担、不整合リスク 150 | - 影響行数: 約2,400行の重複コード 151 | 152 | 推奨事項: [slug]パターンによる動的ルーティングの実装 153 | ``` 154 | 155 | 具体的な問題点と解決策が明確に提示されます。 156 | 157 | さらに、優先度別の推奨事項も提供されます。 158 | 159 | ```markdown 160 | 🔴 緊急（即座に対応） 161 | 1. 動的ルーティングの実装 162 | - 推定工数: 4時間 163 | - 影響: コード80%削減 164 | 165 | 🟡 高優先度（今週中） 166 | 2. データ取得の最適化 167 | - 推定工数: 2時間 168 | ``` 169 | 170 | どこから手をつければいいか迷うことがなくなりますね。 171 | 172 | ### コードの改善を実行 173 | 174 | 分析結果を元に、 `/sc:improve` コマンドで改善を実行します。 175 | 176 | ```bash 177 | /sc:improve src/app/coupons/ ここまでの分析内容をもとに改善してください 178 | ``` 179 | 180 | SuperClaude は分析結果に基づいて、優先度の高い項目から順に改善を進めてくれます。 181 | 182 | 改善後のレポート： 183 | 184 | ```markdown 185 | 📊 改善前後の比較 186 | 187 | | 項目 | 改善前 | 改善後 | 改善率 | 188 | |-------------|----------|--------|--------| 189 | | ファイル数 | 13個 | 3個 | -77% | 190 | | コード行数 | 約2,400行 | 約700行 | -71% | 191 | | 重複コード | 12箇所 | 0箇所 | -100% | 192 | | 保守性スコア | 65% | 90% | +38% | 193 | ``` 194 | 195 | 数値で改善効果が確認できるので、達成感がありますね。 196 | 197 | ## チーム開発での活用方法 198 | 199 | SuperClaude は個人開発だけでなく、チーム開発でも効果的です。 200 | 201 | ### 品質基準の設定 202 | 203 | チームで「スコアが80%を下回ったら改善する」といったルールを決めておくと良いでしょう。 204 | 205 | 客観的な数値があることで、リファクタリングのタイミングが明確になります。 206 | 207 | ### コードレビュー前のチェック 208 | 209 | プルリクエストを出す前に `/sc:analyze` を実行することで、事前に問題を発見できます。 210 | 211 | レビュアーの負担も減りますし、手戻りも少なくなります。 212 | 213 | ### 新メンバーのオンボーディング 214 | 215 | `/sc:load` コマンドでプロジェクト全体の構造を把握できます。 216 | 217 | ```bash 218 | /sc:load --deep --summary 219 | ``` 220 | 221 | 新しくジョインしたメンバーも、プロジェクトの全体像を素早く理解できます。 222 | 223 | ## 注意点と対策 224 | 225 | ### 英語で出力される場合 226 | 227 | デフォルトでは英語で出力されることがあります。 228 | 229 | 日本語で出力したい場合は、コマンドの後に「日本語で」と追加しましょう。 230 | 231 | ```bash 232 | /sc:analyze src/ 日本語で出力してください 233 | ``` 234 | 235 | ### 分析に時間がかかる場合 236 | 237 | 大規模なプロジェクトでは分析に時間がかかることがあります。 238 | 239 | 最初は小さなディレクトリから試してみることをおすすめします。 240 | 241 | ### アンインストール方法 242 | 243 | もし合わなかった場合も、簡単にアンインストールできます。 244 | 245 | ```bash 246 | python3 -m SuperClaude uninstall --complete --yes 247 | ``` 248 | 249 | ## まとめ 250 | 251 | SuperClaude を使うことで、Claude Code でもコード品質を維持したり、改善がスムーズになります。 252 | 253 | 使ってみた感想としては、特に以下の点が便利でした。 254 | 255 | - 専門家ペルソナが自動的に適切な支援をしてくれる 256 | - コード品質が数値化され、改善効果が明確に分かる 257 | - 豊富なカスタムコマンドで開発効率が向上する 258 | 259 | インストールも簡単なので、ぜひ一度試してみてください。 260 | 261 | ## Claude Code の関連記事 262 | 263 | 他にも Claude Code や AI 駆動開発の記事を書いていますので、よかったらこちらもご覧ください！ 264 | 265 | - [Claude Codeインストールから企業サイト公開まで！1時間で学ぶAI駆動開発の実践ガイド](https://note.com/tomada/n/n908dbff794cc) 266 | - [【Claude Code】マネできる！個人開発するときに最初に用意したドキュメント24種と機能要件書を全公開](https://qiita.com/items/e27292b65f723c4633d9) 267 | - [【コピペOK】個人開発でApple風デザインルールを作ったら統一感のあるカッコいいUIにできた話](https://qiita.com/tomada/items/decece613046a61b11a3) 268 | 269 | ## おまけ：SuperClaude カスタムコマンド17種 270 | 271 | （8/27 追記：コマンドに追加があったので、別記事に移動しました） 272 | 273 | ## おまけ：SuperClaude ペルソナ11種 274 | 275 | ### 技術系スペシャリスト 276 | 277 | #### 🏗️ architect - システム設計専門家 278 | 279 | - 長期的なアーキテクチャ計画とシステム設計を担当 280 | - スケーラビリティと保守性を最優先に考慮 281 | - 技術的負債の評価と改善策を提案 282 | - デザインパターンの適用と依存関係の最適化を支援 283 | - 「architecture」「design」「scalability」などのキーワードで自動起動 284 | 285 | #### 🎨 frontend - UI/UX・アクセシビリティ専門家 286 | 287 | - ユーザー体験とアクセシビリティ（WCAG 2.1 AA準拠）を重視 288 | - パフォーマンス予算（3秒以内のロード時間）を管理 289 | - レスポンシブデザインとクロスブラウザ対応を確保 290 | - デザインシステムの構築と一貫性を維持 291 | - 「component」「UI」「UX」「responsive」などで自動起動 292 | 293 | #### ⚙️ backend - API・インフラ専門家 294 | 295 | - 信頼性（99.9%アップタイム）を最優先事項として設計 296 | - API設計とデータベース最適化を担当 297 | - エラーハンドリングと復旧メカニズムを実装 298 | - ゼロトラストセキュリティの原則を適用 299 | - 「API」「database」「service」「server」などで自動起動 300 | 301 | #### 🛡️ security - セキュリティ・脆弱性評価専門家 302 | 303 | - 脅威モデリングと脆弱性評価を実施 304 | - OWASP準拠のセキュリティベストプラクティスを適用 305 | - 認証・認可システムの設計と監査 306 | - 重要度別（Critical/High/Medium/Low）の脆弱性分類 307 | - 「security」「vulnerability」「auth」「compliance」などで自動起動 308 | 309 | #### ⚡ performance - パフォーマンス最適化専門家 310 | 311 | - ボトルネックの特定と測定駆動の最適化 312 | - API応答時間500ms以内、データベースクエリ100ms以内を目標 313 | - メモリ使用量とバンドルサイズの最適化 314 | - キャッシング戦略とロード時間の改善 315 | - 「performance」「optimization」「speed」「slow」などで自動起動 316 | 317 | ### プロセス・品質管理エキスパート 318 | 319 | #### 🔍 analyzer - 根本原因調査専門家 320 | 321 | - 体系的なデバッグと根本原因分析を実施 322 | - 証拠に基づく問題解決アプローチを採用 323 | - パターン認識と仮説検証を通じた調査 324 | - 複雑な問題の構造化された分解 325 | - 「analyze」「debug」「investigate」「root cause」などで自動起動 326 | 327 | #### 🧪 qa - 品質保証・テスト専門家 328 | 329 | - テスト戦略の立案とリスクベースのテスト優先順位付け 330 | - エッジケースの特定と包括的なカバレッジ確保 331 | - 予防重視のアプローチで品質を向上 332 | - テストピラミッドの設計と自動化推進 333 | - 「test」「quality」「validation」「coverage」などで自動起動 334 | 335 | #### 🔄 refactorer - コード品質・技術的負債管理専門家 336 | 337 | - シンプルで読みやすいコードへのリファクタリング 338 | - 技術的負債の定量化と段階的な削減 339 | - コードの一貫性とデザインパターンの適用 340 | - 循環的複雑度とコード可読性スコアの改善 341 | - 「refactor」「cleanup」「quality」「technical debt」などで自動起動 342 | 343 | #### 🚀 devops - インフラ自動化・デプロイ専門家 344 | 345 | - CI/CDパイプラインの構築と最適化 346 | - Infrastructure as Codeの実践 347 | - ゼロダウンタイムデプロイメントの実現 348 | - 包括的な監視とアラート設定 349 | - 「deploy」「infrastructure」「CI/CD」「monitoring」などで自動起動 350 | 351 | ### 知識共有・コミュニケーション専門家 352 | 353 | #### 👨🏫 mentor - 教育指導・知識移転専門家 354 | 355 | - 段階的な学習アプローチで概念を説明 356 | - スキルレベルに応じた最適な説明方法を選択 357 | - 実践的な例題を通じた理解促進 358 | - チーム内の知識共有とベストプラクティスの伝達 359 | - 「explain」「learn」「understand」「teach」などで自動起動 360 | 361 | #### ✍️ scribe - 技術文書作成・コミュニケーション専門家 362 | 363 | - 明確で読みやすい技術文書の作成 364 | - API仕様書・README・ユーザーガイドの執筆 365 | - 多言語対応（英語・日本語・中国語など） 366 | - 対象読者に応じた適切な文体と詳細度の調整 367 | - 「document」「write」「guide」「README」などで自動起動 368 | 369 | ### ペルソナの連携パターン 370 | 371 | #### 自動的な協調作業の例 372 | 373 | - **セキュリティレビュー**: security + backend が連携 374 | - **パフォーマンス改善**: performance + frontend/backend が協調 375 | - **品質向上**: refactorer + qa + architect が共同作業 376 | - **ドキュメント作成**: scribe + mentor が教育的な文書を作成 377 | - **複雑な調査**: analyzer + 関連分野の専門家が協力 378 | 379 | #### 複数ペルソナが起動する状況 380 | 381 | - 認証システム実装 → security + backend + architect 382 | - UIコンポーネント開発 → frontend + performance + qa 383 | - 技術的負債の解消 → refactorer + architect + analyzer 384 | - 本番デプロイ準備 → devops + security + qa 385 | - 新機能の設計 → architect + 関連技術の専門家 386 | 387 | [1](https://qiita.com/tomada/items/#comments) 388 | 389 | コメント一覧へ移動 390 | 391 | X（Twitter）でシェアする 392 | 393 | Facebookでシェアする 394 | 395 | はてなブックマークに追加する 396 | 397 | 新規登録して、もっと便利にQiitaを使ってみよう 398 | 399 | 1. あなたにマッチした記事をお届けします 400 | 2. 便利な情報をあとで効率的に読み返せます 401 | 3. ダークテーマを利用できます 402 | [ログインすると使える機能について](https://help.qiita.com/ja/articles/qiita-login-user) 403 | 404 | [新規登録](https://qiita.com/signup?callback_action=login_or_signup&redirect_to=%2Ftomada%2Fitems%2F2eb1b0623c9f59424235&realm=qiita) [ログイン](https://qiita.com/login?callback_action=login_or_signup&redirect_to=%2Ftomada%2Fitems%2F2eb1b0623c9f59424235&realm=qiita) 405 | 406 | ## Qiita Conference 2025 Autumn 11月5日(水)~7日(金)開催！ 407 | 408 | ![](https://cdn.qiita.com/assets/public/official_campaigns/qiita_conference_2025_autumn/image-conference_2025_autumn_ogp-7cf3021de31b9ab76a7b3bbaf2909bb5.png) 409 | 410 | Qiita Conferenceは、AI時代のエンジニアに贈るQiita最大規模のテックカンファレンスです！ 411 | 412 | 基調講演ゲスト(敬称略) 413 | 414 | piacere、牛尾 剛、Esteban Suarez、和田 卓人、seya、ミノ駆動、市谷 聡啓、からあげ、岩瀬 義昌、まつもとゆきひろ、みのるん and more… 415 | 416 | [イベント詳細を見る](https://qiita.com/official-campaigns/conference/2025-autumn) 417 | 418 | [236](https://qiita.com/tomada/items/2eb1b0623c9f59424235/likers) 419 | 420 | いいねしたユーザー一覧へ移動 421 | 422 | 230 -------------------------------------------------------------------------------- /bookmark/claude/Anthropicが公開しているClaude Codeのベストプラクティスを初心者向けに解説.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Anthropicが公開しているClaude Codeのベストプラクティスを初心者向けに解説" 3 | source: "https://zenn.dev/tmasuyama1114/articles/claude_code_best_practice_guide" 4 | author: 5 | - "[[Zenn]]" 6 | published: 2025-10-13 7 | created: 2025-10-14 8 | description: 9 | tags: 10 | - "clippings" 11 | image: "https://res.cloudinary.com/zenn/image/upload/s--fvf2vuCH--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Anthropic%25E3%2581%258C%25E5%2585%25AC%25E9%2596%258B%25E3%2581%2597%25E3%2581%25A6%25E3%2581%2584%25E3%2582%258BClaude%2520Code%25E3%2581%25AE%25E3%2583%2599%25E3%2582%25B9%25E3%2583%2588%25E3%2583%2597%25E3%2583%25A9%25E3%2582%25AF%25E3%2583%2586%25E3%2582%25A3%25E3%2582%25B9%25E3%2582%2592%25E5%2588%259D%25E5%25BF%2583%25E8%2580%2585%25E5%2590%2591%25E3%2581%2591%25E3%2581%25AB%25E8%25A7%25A3%25E8%25AA%25AC%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:%25E3%2581%25A8%25E3%2581%25BE%25E3%2581%25A0%2540AI%2520%25E9%25A7%2586%25E5%258B%2595%25E9%2596%258B%25E7%2599%25BA%25E6%2595%2599%25E8%2582%25B2%25E8%2580%2585%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzYyNTkxYzBkNDYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" 12 | --- 13 | 74 14 | 15 | 51[idea](https://zenn.dev/tech-or-idea) 16 | 17 | こんにちは、とまだです。 18 | 19 | 「AIツールを使ってコーディングを効率化したい！」 20 | 21 | そう思ってClaude Codeを始めてみたものの、思うような結果が出なくて悩んでいませんか？ 22 | 23 | 今回は、Anthropic社が公開している [Claude Codeのベストプラクティス](https://www.anthropic.com/engineering/claude-code-best-practices) から抜粋し、初心者にもわかりやすく解説します！ 24 | 25 | これを読めば、Claude Codeをもっと効果的に使いこなせるようになるはずです。 26 | 27 | ちなみに私は本業ではフリーランスエンジニア、ならびにAI駆動開発の導入支援を行っています。 28 | また、Udemy で [AI 駆動開発講座を複数開講](https://school.learning-next.app/coupons) しており、いくつかベストセラーもいただいています。 29 | 30 | その経験を活かして、初心者の方でもわかりやすいよう、丁寧に解説しています！ 31 | 32 | ## 忙しい人のために要約 33 | 34 | - `CLAUDE.md` ファイルで開発ルールを共有 35 | - 適切なツールの権限設定で安全性と効率性を両立 36 | - テスト駆動開発やビジュアルモックを活用した開発フローが効果的 37 | - 複数のClaude Codeを並行実行して生産性を向上 38 | - GitHub CLIを使ったバージョン管理やPRレビューの活用 39 | - コマンドのカスタマイズで開発効率を向上 40 | - セキュリティと安全性を意識した使い方が重要 41 | - ヘッドレスモードでの自動化も可能 42 | 43 | なお、まだ Claude Code を使ったことがない方は、無料で公開しているこちらの本から学ぶことができます。 44 | 45 | ## Claude Codeとは？ 46 | 47 | まず簡単にClaude Codeについて改めて説明しておきます。 48 | 49 | Claude Codeは、Anthropic社が提供するAI駆動のコーディング支援ツールです。 50 | 51 | コマンドラインから直接使えて、ファイルの作成・編集、テストの実行、GitやGitHubとの連携まで、幅広い開発作業をサポートしてくれます。 52 | 53 | 特徴的なのは、AIがコードを生成するだけでなく、実際にファイルを操作したり、コマンドを実行したりできることです。 54 | 55 | ただし、この強力な機能を使いこなすには、いくつかのコツがあります。 56 | 57 | それでは、具体的なベストプラクティスを見ていきましょう。 58 | 59 | ## CLAUDE.mdでチーム開発を効率化 60 | 61 | ### プロジェクトのルールを共有する仕組み 62 | 63 | Claude Codeには、 `CLAUDE.md` という特別なファイルがあります。 64 | 65 | このファイルをプロジェクトのルートディレクトリに置いておくと、Claude Codeが自動的に読み込んでくれます。 66 | 67 | つまり、チーム全体で共有したい開発ルールやよく使うコマンドを記載しておけば、毎回説明する必要がなくなるのです。 68 | 69 | ### CLAUDE.mdの活用例 70 | 71 | たとえば、以下のような情報を記載しておくと便利です。 72 | 73 | ```markdown 74 | # プロジェクトのコマンド 75 | - npm run build: プロジェクトをビルド 76 | - npm run typecheck: 型チェックを実行 77 | 78 | # コーディング規約 79 | - ES modulesを使用（CommonJSは使わない） 80 | - importはなるべく分割代入で記述 81 | 82 | # 開発フロー 83 | - 変更後は必ず型チェックを実行 84 | - テストは個別に実行（全体実行は避ける） 85 | ``` 86 | 87 | このように書いておけば、Claude Codeは自動的にこれらのルールに従って開発を進めてくれます。 88 | 89 | 新しくチームに参加したメンバーも、このファイルを見れば開発の進め方がすぐにわかります。 90 | 91 | ### CLAUDE.mdの配置場所 92 | 93 | CLAUDE.mdファイルは、以下の場所に配置できます。 94 | 95 | - **プロジェクトルート** ：最も一般的な配置場所 96 | - **親ディレクトリ** ：モノレポで複数のプロジェクトがある場合に便利 97 | - **子ディレクトリ** ：特定のフォルダで作業する際に自動読み込み 98 | - **ホームフォルダ** （ `~/.claude/CLAUDE.md` ）：全プロジェクトで共通の設定 99 | 100 | ## サブエージェントで複雑な問題を解決 101 | 102 | ### サブエージェントとは？ 103 | 104 | サブエージェントは、特定のタスクに特化した独立したAIエージェントです。 105 | 106 | それぞれが専用のコンテキストウィンドウとツール権限を持ち、メインの会話とは別に作業を進められます。 107 | 108 | `.claude/agents/` フォルダにMarkdown形式で定義し、 `/agents` コマンドで管理します。 109 | 110 | ちょっと前の記事なのですが、こちらで詳しく解説しています。 111 | 112 | ### 探索フェーズでサブエージェントを活用する 113 | 114 | 複雑な問題に取り組む時、メインのClaude Codeにすべてを任せるとコンテキストがパンパンになってしまいます。 115 | 116 | そんな時は、サブエージェントに詳細調査を任せる方法が効果的です。 117 | 118 | たとえば、こんな指示を出します。 119 | 120 | ```bash 121 | 関連ファイルを読み込んで実装方針を立ててください。 122 | 技術的に不明な点があれば、サブエージェントを使って詳しく調査してください。 123 | ``` 124 | 125 | こうすると、メインのClaude Codeは全体の方針を考えながら、細かい技術調査はサブエージェントに任せてくれます。 126 | 127 | サブエージェントは独立したコンテキストで動作するため、メインの会話を汚染せず、より深い調査ができて、実装の精度も上がります。 128 | 129 | ### 実装の検証に使う 130 | 131 | テスト駆動開発でありがちなのが、「テストに通るだけの実装」になってしまうことです。 132 | 133 | これを防ぐために、以下のような指示が有効です。 134 | 135 | ```bash 136 | テストをすべて通す実装ができたら、 137 | 独立したサブエージェントで、実装が適切かどうか検証してください。 138 | テストに過度に依存していないか確認してもらってください。 139 | ``` 140 | 141 | サブエージェントは、メインとは別の視点で実装を評価できるため、より客観的なコードレビューが可能になります。 142 | 143 | ### サブエージェントの管理方法 144 | 145 | サブエージェントを作成・編集するには、 `/agents` コマンドを使用します。 146 | 147 | ```bash 148 | /agents 149 | ``` 150 | 151 | このコマンドで、以下のことができます： 152 | 153 | - 既存のサブエージェントの一覧表示 154 | - 新しいサブエージェントの作成 155 | - サブエージェントの編集・削除 156 | - 使用可能なツールの設定 157 | 158 | プロジェクト固有のサブエージェントは`.claude/agents/` に、全プロジェクトで共通のサブエージェントは `~/.claude/agents/` に保存されます。 159 | 160 | ## コンテキスト管理で長時間作業を効率化 161 | 162 | コンテキストというのは、AIが持っている情報のことです。 163 | 164 | 人間と同じく、コンテキストが多すぎると情報を正確に思い出す能力が低下していきます。 165 | 166 | ### /clearコマンドを戦略的に使う 167 | 168 | 長時間Claude Codeを使っていると、だんだん動作が重くなったり、的外れな提案が増えたりしませんか？ 169 | 170 | これは、コンテキストウィンドウが不要な情報でいっぱいになってしまうからです。 171 | 172 | そこで、 `/clear` コマンドを使うことで、コンテキストをリセットすることができます。 173 | 174 | ```bash 175 | /clear 176 | ``` 177 | 178 | 人間でいうと「リフレッシュして頭をリセットする」ようなものです。 179 | 180 | 違う機能の実装に移る時は、思い切って `/clear` してしまいましょう。 181 | 182 | ただし、 `/clear` は全てのコンテキストをリセットするので、注意が必要です。 183 | 184 | 作業の続きをしたい場合は、 `/compact` コマンドを使うことで、コンテキストを圧縮することができます。 185 | 186 | ```bash 187 | /compact 188 | ``` 189 | 190 | ここでいう「圧縮」とは、ここまでの作業内容を要約して、コンテキストを節約するような意味を指します。 191 | 192 | ただし、ここまでのコンテキストを引き継ぐことになりますので、全く別な作業に移る時は、 `/clear` を使ってください。 193 | 194 | ちなみに、大きく機能追加や設計変更をした場合は、 `/init` コマンドを使うことで、CLAUDE.mdを更新することができます。 195 | 196 | ```bash 197 | /init 198 | ``` 199 | 200 | `/init` は何回でも実行できますので、大きく機能追加や設計変更をした場合は、実行しておきましょう。 201 | 202 | `/clear` を使っても `/compact` を使っても CLAUDE.md の内容は引き継がれますので、その点は安心です。 203 | 204 | ### 長時間セッションのコツ 205 | 206 | #### チェックリストを作る 207 | 208 | 大量のタスク（たとえばlintエラーの修正）がある時は、Markdownファイルでチェックリストを作ると便利です。 209 | 210 | ```bash 211 | 1. すべてのlintエラーをchecklist.mdに書き出してください 212 | 2. 一つずつ修正して、完了したらチェックを入れてください 213 | 3. 10個修正したら進捗を報告してください 214 | ``` 215 | 216 | これなら、コンテキストが膨らんでも、どこまで進んだかが明確です。 217 | 218 | #### 重要な決定事項は外部ファイルに保存 219 | 220 | 実装方針や重要な決定は、別ファイルに残しておきます。 221 | 222 | ```bash 223 | 今回の実装方針をimplementation_notes.mdにまとめてから、 224 | /clearして次のタスクに進んでください 225 | ``` 226 | 227 | 後から「あの時どういう方針だったっけ？」となった時に助かります。 228 | 229 | AIにとっても、人間にとっても重要なポイントです。 230 | 231 | ## MCP（Model Context Protocol）でツールを拡張 232 | 233 | ### MCPサーバーで外部ツールと連携する 234 | 235 | Claude CodeはMCPクライアントとしても動作するので、外部ツールとの連携が可能です。 236 | 237 | 私も最初はよくわからなかったのですが、要するに「Claude Codeが使えるツールを増やせる仕組み」だと理解すれば大丈夫です。 238 | 239 | たとえばWebアプリの開発であれば、Chrome DevTools MCPサーバーを使うと UI チェックやパフォーマンスチェックができたりと、開発効率が大幅に向上します。 240 | 241 | なお、プロジェクトルートに`.mcp.json` ファイルを作っておくと、チーム全員が同じツールを使えるようになります。 242 | 243 | ```json 244 | // 例：Sentry MCPサーバーを使う場合 245 | { 246 | "mcpServers": { 247 | "sentry": { 248 | "type": "http", 249 | "url": "https://mcp.sentry.dev/mcp", 250 | "args": ["--sentry-auth-token", "your-auth-token"] 251 | }, 252 | } 253 | } 254 | ``` 255 | 256 | チーム開発では、この設定ファイルをGitに含めておけば、メンバー全員が同じ環境で作業できて便利ですね。 257 | 258 | ## 適切な権限設定で安全性を確保 259 | 260 | ### なぜ権限設定が重要か 261 | 262 | Claude Codeは強力なツールですが、ファイルの編集やコマンドの実行など、システムに影響を与える操作も可能です。 263 | 264 | そのため、デフォルトでは多くの操作に対して許可を求めてきます。 265 | 266 | しかし、毎回許可を求められるのは効率的ではありません。 267 | 268 | 安全性を保ちながら効率的に作業するため、適切な権限設定が重要になります。 269 | 270 | ### 権限設定の方法 271 | 272 | 権限の設定には、以下の4つの方法があります。 273 | 274 | 1. **セッション中に「Always allow」を選択** 275 | 2. **`/permissions` コマンドを使用** 276 | 3. **設定ファイルの直接編集** 277 | 4. **`--allowedTools` フラグを使用** 278 | 279 | よく使うツールは、事前に許可リストに追加しておくと便利です。 280 | 281 | 色々とやり方はありますが、 `settings.json` で設定するのが整理しやすくておすすめです。 282 | 283 | 私が書いた無料本の中で詳しく解説していますので、ぜひご覧ください。 284 | 285 | GitHubと連携するなら、 `gh` CLIをインストールしておくのもおすすめです。 286 | 287 | ## 効果的な開発フローの実践 288 | 289 | ### 探索・計画・実装・コミットのワークフロー 290 | 291 | Claude Codeを使った開発では、以下のようなフローが効果的です。 292 | 293 | 1. **探索** ：関連ファイルを読み込ませる 294 | 2. **計画** ：実装方針を立てる 295 | 3. **実装** ：コードを書く 296 | 4. **コミット** ：変更を保存 297 | 298 | ポイントは、いきなりコードを書かせるのではなく、まず計画を立てさせることです。 299 | 300 | ちなみに「think」という言葉を使うと、Claude Codeは時間をかけて考えてくれます。 301 | 302 | ```bash 303 | 関連ファイルを読み込んで、この機能の実装方針を提案してください think 304 | ``` 305 | 306 | ちなみに、もーーーっと考えさせたい場合は、「think hard」「think harder」「ultrathink」という言葉を使うことで、より深く考えてくれます。 307 | 308 | > These specific phrases are mapped directly to increasing levels of thinking budget in the system: "think" < "think hard" < "think harder" < "ultrathink." Each level allocates progressively more thinking budget for Claude to use. 309 | 310 | もしくは `tab` キーを押しても think モードになります。 311 | 312 | ### テスト駆動開発の活用 313 | 314 | テストを先に書いてから実装する方法も、Claude Codeに限らずAI駆動開発では非常に効果的です。 315 | 316 | 1. **テストを書く** ：期待する動作を明確にする 317 | 2. **テストの失敗を確認** ：まだ実装がないことを確認 318 | 3. **テストをコミット** ：テストの内容を固定 319 | 4. **実装を書く** ：テストが通るまで繰り返す 320 | 5. **実装をコミット** ：完成したコードを保存 321 | 322 | この方法だと、Claude Codeは明確な目標（テストを通すこと）に向かって作業できるため、より良い結果が得られやすくなります。 323 | 324 | 「先にゴールを設定して、それに向かって作業させる」というのは、AI駆動開発の基本です。 325 | 326 | ### ビジュアルモックを使った開発 327 | 328 | UIを作る場合は、デザインモックを用意してそれに合わせて実装させる方法も効果的です。 329 | 330 | 1. **デザインモックを提供** ：画像やスクリーンショットを渡す 331 | 2. **実装を依頼** ：モックに基づいてコードを書かせる 332 | 3. **スクリーンショットで確認** ：実装結果を画像で確認 333 | 4. **調整を繰り返す** ：モックに近づくまで修正 334 | 335 | 視覚的なフィードバックがあると、Claude Codeもより正確な実装ができます。 336 | 337 | ビジュアルモックは、Claude Code のみならず、Cursor や Codex などでも使えます。 338 | 339 | ## GitとGitHubの活用 340 | 341 | ### バージョン管理の自動化 342 | 343 | Claude Codeは、Gitコマンドを使ったバージョン管理も得意です。 344 | 345 | コミットメッセージの作成、ブランチの管理、マージの実行など、多くの作業を任せられます。 346 | 347 | ```bash 348 | 変更内容を確認して、適切なコミットメッセージでコミットしてください 349 | ``` 350 | 351 | 実務など、いきなりコミットさせるのが不安という方は「コミットメッセージを考えてください」と指示してみてください。 352 | 353 | そのあとに「コミットしてください」と指示することで、安心して作業を進められます。 354 | 355 | ### GitHub連携の活用 356 | 357 | GitHub を使っている場合には、GitHub CLI を使っていれば、以下のような作業も可能です。 358 | 359 | - プルリクエストの作成 360 | - イシューへのコメント 361 | - コードレビューへの対応 362 | - ビルドエラーの修正 363 | 364 | 特に、コードレビューで指摘された内容を修正する作業は、Claude Codeが得意とする分野です。 365 | 366 | 私の場合、AI が PR につけたレビューコメントを取得して、修正を実行しています。 367 | 368 | なお、GitHub CLI については以下の記事がわかりやすいです。 369 | 370 | GitHub CLI を使う場合には、CLAUDE.md にたとえば以下のように書いておくと便利です。 371 | 372 | ```bash 373 | # GitHub CLI を使って PR を作成する 374 | gh pr create 375 | 376 | ...(他にも色々書いておく) 377 | ``` 378 | 379 | 「GitHub CLI を使えるんだ」と理解させる助けにもなります。 380 | 381 | ## コマンドのカスタマイズ 382 | 383 | ### スラッシュコマンドの作成 384 | 385 | よく使う作業は、カスタムコマンドとして登録しておけます。 386 | 387 | `.claude/commands` フォルダにMarkdownファイルを作成すると、スラッシュコマンドとして使えるようになります。 388 | 389 | たとえば、GitHubイシューにもとづいて修正を実行するコマンドを作る場合... 390 | 391 | ```markdown 392 | # .claude/commands/fix-github-issue.md 393 | 394 | GitHubイシュー #$ARGUMENTS を確認して、以下を実行： 395 | 1. イシューの内容を読む 396 | 2. 関連ファイルを特定 397 | 3. 修正を実装 398 | 4. テストを実行 399 | 5. プルリクエストを作成 400 | ``` 401 | 402 | 使用時は以下のように実行します。 403 | 404 | ```bash 405 | /fix-github-issue 1234 406 | ``` 407 | 408 | マークダウンファイルの中では `$ARGUMENTS` を使うことで、コマンド実行時に値を渡せるようになります。 409 | 410 | ここでは、イシュー番号を渡すことで、そのイシューに対して修正を実行します。 411 | 412 | また、ホームディレクトリの `~/.claude/commands/` に置けば、すべてのプロジェクトで共通のコマンドとして使えます。 413 | 414 | ## セキュリティと安全性の確保 415 | 416 | ### 危険な操作を避ける 417 | 418 | Claude Codeは強力なツールゆえ、以下の点に注意が必要となります。 419 | 420 | - **本番環境では使わない** ：開発環境での使用に留める 421 | - **機密情報は扱わない** ：APIキーやパスワードは別管理 422 | - **重要なファイルのバックアップ** ：作業前に必ずバックアップ 423 | 424 | ### コンテナ環境の活用 425 | 426 | より安全に使いたい場合は、Dockerコンテナ内での実行がおすすめです。 427 | 428 | ```bash 429 | docker run -it --rm -v $(pwd):/workspace ubuntu:latest 430 | # コンテナ内でClaude Codeを実行 431 | ``` 432 | 433 | これにより、万が一の際もホストシステムへの影響を最小限に抑えられます。 434 | 435 | ## 複数のClaude Codeを並行活用 436 | 437 | これは私はあまりやってないのですが、Anthropic が公開しているベストプラクティスにも書かれていますので、紹介しておきます。 438 | 439 | ただし、ちょっと上級者向けのテクニックなので、初心者の方は無理にやらなくても大丈夫です。 440 | 441 | ### 並行作業で効率化 442 | 443 | 大きなプロジェクトでは、複数のClaude Codeを同時に走らせることで、開発効率を大幅に向上する手法があります。 444 | 445 | たとえば、以下のような使い分けができます。 446 | 447 | - **Claude A** ：新機能の実装 448 | - **Claude B** ：テストの作成 449 | - **Claude C** ：ドキュメントの更新 450 | - **Claude D** ：バグ修正 451 | 452 | ### Gitワークツリーの活用 453 | 454 | Gitのワークツリー機能を使えば、同じリポジトリの異なるブランチで並行作業ができます。 455 | 456 | ```bash 457 | git worktree add ../project-feature-a feature-a 458 | cd ../project-feature-a && claude 459 | ``` 460 | 461 | これにより、複数の機能開発を同時に進められます。 462 | 463 | ## ヘッドレスモードでの自動化 464 | 465 | こちらもあまり私は活用しきれていないのですが、Anthropic が公開しているベストプラクティスにも書かれていますので、紹介しておきます。 466 | 467 | ### CI/CDパイプラインへの統合 468 | 469 | Claude Codeは、ヘッドレスモード（対話なし）でも動作します。 470 | 471 | これを使えば、CI/CDパイプラインに組み込んで自動化できます。 472 | 473 | ```bash 474 | claude -p "このプルリクエストのレビューコメントを分析して、改善案を提案" --output-format stream-json 475 | ``` 476 | 477 | ### 自動イシュー分類 478 | 479 | GitHubのイシューを自動で分類する例： 480 | 481 | ```bash 482 | claude -p "新しいイシューを確認して、適切なラベルを付ける" --dangerously-skip-permissions 483 | ``` 484 | 485 | ただし、 `--dangerously-skip-permissions` フラグは慎重に使用してください。 486 | 487 | ## まとめ 488 | 489 | Claude Codeは、適切に使えば開発効率が何倍にもアップできるツールです。 490 | 491 | 今回紹介したベストプラクティスを実践することで、より安全で効率的な開発が可能になるはずです。 492 | 493 | 特に重要なポイントは以下の3つですので、ぜひ意識してください。 494 | 495 | 1. **CLAUDE.mdで開発ルールを明文化** 496 | 2. **段階的な開発フローの実践** 497 | 3. **適切な権限設定とセキュリティの確保** 498 | 499 | これらを意識しながら、少しずつClaude Codeの機能を試していくことをおすすめします。 500 | 501 | 最初は小さなタスクから始めて、徐々に複雑な作業を任せていけば、きっと手放せないツールになるはずです。 502 | 503 | 皆さんもClaude Codeを使って、より効率的な開発を実現してみてください！ 504 | 505 | ## その他のClaude Code関連記事 506 | 507 | また、Youtube でも AI 駆動開発の実践動画を公開しています！ 508 | 509 | よければチャンネル登録していただき、AI駆動開発の実践的な情報をキャッチアップしていってください！ 510 | 511 | ## ちょっと宣伝：AI駆動開発を体系的に学びたい方へ 512 | 513 | 冒頭でも触れましたが Udemy では AI 駆動開発講座を複数開講しており、いくつかベストセラーもいただいています。 514 | 515 | 最大で 90%OFF のクーポンも配布しておりますので、これから学ぶ方はぜひご利用ください。 516 | 517 | Webアプリやスマホアプリ、Pythonなど、多くの分野で講座を開講しています！ 518 | 519 | 74 520 | 521 | 51 --------------------------------------------------------------------------------