Claude Codeとplaywright mcpを連携させると開発体験が向上するのでみんなやろう
どうもこんにちは、Claude Codeで遊び始めて2週間くらいが立ちましたがまだまだ模索中です 最近覚えた新しいテクニックが playwright-mcp(https://github.com/microsoft/playwright-mcp) を使ってブラウザ操作を全てclaude code経由でやるというものです playwrightはpuppeteerと同じく、chromeなどのブラウザをjsで操作するやつなのですが、puppeteerよりも使い勝手が良い&更新が超高頻度なのでよく使っています ※ただし、mcpサーバーのplaywrightは本家と比べると機能がイマイチなのでそこは発展を待ちましょう さて、mcpサーバーをclaudeに追加する設定ですが、claude自身に質問すると大嘘をつくので（ここらへんしんどさ感じますよね）原典を当たる必要があります mcpの追加 具体的には
Claude Codeの前と後。やり始めたこととやめたこと
こんにちは、しば田です。 ちょっと俗っぽいですが、以前にこんな記事を書きました。 これの続編的な感じです。（こういうのがあってもいいだろうと...。） この時から考えると未だにやっていてよかったことともうやってないなぁみたいなのが混在します。 備忘録も兼ねて書き記します。 ※記事の対象者は Claude Codeを使ってプログラミングしている人/使い始めた人を想定しています。 ※メンタルモデル的な話、生存戦略的な話は出てきません 宣伝 こちらのイベントでLTします。まだClaude Codeを使ったことがない人向けに布教します！ （すでにClaude Codeに関するいい資料がありすぎて資料作りが難しい・・・） Claude Codeを使い始めてからやり始めた良さげなこと こまめに/clear 必須。コンテキスト長が埋まると、auto-compactionが走るので、それまでのやり取りが圧
ClaudeのMaxプランによって変わった個人開発のスタイル
はじめに Claude Code Maxプランが5月2日に発表されてすぐに飛びつき、100$のプランをサブスクして使うようになりました。 以前からClineやGitHub CopilotなどLLMのサポートを受けた開発を試してきましたが、定額かつ高性能なOpusとSonnet4によって開発に対する価値観とスタイルが大きく変えられてしまいました。 Claude CodeのTipsとかはよく技術記事やXで見かけますが、個人プロジェクトにおいてガッツリ利用されている記事は少ないかと思い書き始めてみようと思います。 開発環境 Claudeとは関係ないですが、1月に転職し開発マシンをWindowsからMacbookに変えました。それ以降作業する時にはMacを使用するようになり、Windowsのデスクトップは置物となりました。Claude Codeが定額利用できるようになって以降、2つの使い道ができた
Claude Code時代のアプリ開発手法
Claude Codeによる開発体験の変化 みなさんClaude Code使っていますか？ Clineやそのフォーク、Cursorなどが群雄割拠していたところからここ1ヶ月くらいで急激に話題の中心に躍り出たClaude Codeですが、便利なツールという評価を超えて、これまでの開発フローを一新しうる可能性を持ったツールだと思います。 特に、与えられたタスクを分解して様々なツールを使いながら順に機能を実装していく様子は経験を積んだエンジニアのやり方そのものです。 CLIベースのツールであることの利点として動かすコンピューターを選ばないので、公式のGitHub Actions連携をすれば手元に開発環境がなくてもIssueやPull Requestのチャットで会話をしながら開発を進めることまでできてしまいます。 Claude Codeとアプリ開発の相性 そうはいっても、Claude Codeをう
Claude Code に壊されないための denyルール完全ガイド - izanami
結論：Claude Codeのdenyは、ガッツリ書いておけ ワイは、Claude Code と Supabase MCP で、Supabase のDB全部削除させてしまったことがある。目の前でテーブルが「ッポン」といった感じで消えてトラウマになった 思い返せば permissions.deny に書いておけばよかったのかもしれない permissions.deny とはなんぞや？ Claude Codeのpermissions.denyは、AIが危険な操作や機密情報へのアクセスを行わないよう制限する設定やね。これがあるおかげで、AIに任せても「壊さない・漏らさない・暴走しない」が実現される AIに対してのガードレール設計ですね この記事では、Claude Code の deny リストを読み解きながら、「なぜその操作が禁止されているのか」「自分の環境でも取り入れるべきか？」を考えてみる
Claude Code 逆引きコマンド事典
これは何？ 「Claude CodeのXXXで困った時どうする？」という逆引き一問一答形式でまとめたClaude Codeのコマンド集です。 僕は普段から説明書を読まないタイプ(爆)で、Claude CodeもBest Practiceを斜め読みした程度で使ってたのですが、ある時 claude -r コマンドを知って「そんな便利なコマンドあるのか！」と驚愕しました笑。 ちゃんと説明書読まないとなぁと反省し、メモをとりながらClaude公式ドキュメント(+多少の入門記事)を読み直したので、メモをまとめて公開してみます。とはいえ、単なるコマンド一覧では「過去の僕」は読まないかなと思ったので笑、逆引き一問一答形式にしています。 内容は2025年6月23日現在では正しいはずですが、界隈の速さを考えると一瞬で陳腐化すると思います。動かない場合は公式ドキュメントを参照していただけると幸いです。また、明
Claude Codeの公式VSCode拡張が拡張機能ストアで検索可能な形で公開されたので改めて触ってみた | DevelopersIO
Claude Codeの公式VSCode拡張が手動で追加できるようになったので、AWS CloudFormationテンプレートをClaude Code拡張経由で編集・デプロイまでやってみました。拡張機能のおかげで、右タブにClaude Codeのセッションが確立されたコンソールが作成されます。 Claude Codeの公式VSCode拡張が検索可能になったぞ おのやんです。 2025/5/28より、Claude Codeの公式VSCode拡張がリリースされております。こちらが拡張機能ストアで検索可能な形で公開されました。 Claude Code自体が登場した際は、VSCodeとの統合はベータ版でした。 VSCodeのshellでclaudeを立ち上げる際に、こちらの拡張機能が自動でインストールされる（参考：IDEにClaude Codeを追加する - Anthropic）という特性上、一
Claude CodeにAWS環境のトラブルシューティングと修復をしてもらってみた | DevelopersIO
はじめに かつまたです。 今回はエラーが発生してしまったAWS環境をClaude Codeを使ってトラブルシューティングを行った事例をご紹介します。 本ブログではS3バケットポリシーの要因によりオブジェクトアップロードができない状態から、Claude Codeの力を借りて問題を解決する過程をお見せします。 前提条件 awsume-1password-pluginを利用してawsumeでClaude Codeでスイッチロールし、AWS環境をClaude Codeが利用できる状態にしています。 以下ブログを参考に、Claude CodeのインストールからAWS環境への接続を試みました。 本ブログ内のClaude Code操作で利用したCLAUDE.mdは以下になります。Claudeで生成したものを一部編集したものになりますので改良の余地は十二分にあると思います。 CLAUDE.md例 ## C
Claude Code ベストプラクティス
1. はじめに Claude Code は、Anthropic が開発したコマンドライン上で動作する agentic coding ツールです。agentic coding とは、AI が自律的にコードを読み書きし、テストの実行やファイル操作、Git 操作などを組み合わせながら、開発者と協働してソフトウェア開発を進める手法を指します。 Claude Code は意図的に低レベルで設計されており、特定のワークフローを強制せず、開発者が自由にカスタマイズできる柔軟性を提供します。この設計思想により、様々な開発環境やプロジェクトに適応でき、スクリプト化や自動化にも対応できるパワーツールとして機能します。 本記事では、Claude Code の効果的な環境セットアップから始まり、基本的なワークフローの確立、最適化技術、そして高度な自動化やマルチインスタンス運用まで、段階的に実践的なベストプラクティ
Claude Codeのカスタムスラッシュコマンドでドキュメント作成を効率化する
はじめに 技術プロジェクトにおいて、ドキュメントの作成・更新・メンテナンスは重要な作業ですが、多くの開発者にとって煩雑で時間がかかる作業でもあります。特に、Sphinxのようなドキュメント生成ツールは高機能である反面、設定が複雑で学習コストが高いという課題があります。 本記事では、 Claude Codeのカスタムスラッシュコマンド機能 を活用して、こうした課題を解決し、効率的なドキュメント作成環境を構築する方法を紹介します。 Claude Codeのカスタムスラッシュコマンドとは Claude Codeは、.claude/commands/ディレクトリに配置したMarkdownファイルを自動的に読み込み、カスタムスラッシュコマンドとして利用できる機能を提供しています。 主な利点 プロジェクト固有の操作を標準化: 複雑なコマンドラインや設定手順を単一のコマンドに集約 チーム全体での作業統一
「Claude Code」導入をめっちゃスムーズにする「ドキュメントの下地」を作るプロンプト - Qiita
「Cursor擦り倒すシリーズ」ということで何本か記事を書いてきましたが、ハタと気づきました。 「最近は Claude Code のほうをよく使っています。出しているアウトプットの総量は断然 Cursor より多いです。」 ということで、一旦 Cursor 擦り倒すは終了して、今度は「Claude Code」擦り倒してさらなる生産性向上に努めたい所存です。 ちなみに、Cursor 擦り倒すシリーズの 1 つ目の記事はこちらです。 はじめに 「Claude Code はいい感じにコードベースの意図をくみ取って、バシバシ開発してくれるらしい」と耳にして、Claude Code を導入した私は最初の一歩でつまずきました。ツール自体の学習コストよりも、運用に載せるまでの摩擦 はそれなりに大きかったです。 そこで私は、一枚の “初期設定プロンプト” を用意することにしました。結果から言えば、このプロ
Claude Code を初めて使う人向けの実践ガイド
この記事は Claude Code を初めて試そうとされている方向けの記事です。 導入手順 Claude Codeは、ターミナルで動作する対話型AIコーディングツールです。コードの生成だけでなく、ファイルの編集、テストの実行、Gitの操作まで自然言語で指示できます。 以下の公式ドキュメントを参考にして導入してみてください。 公式ドキュメント：https://docs.anthropic.com/ja/docs/claude-code/overview VS Code拡張：https://docs.anthropic.com/ja/docs/claude-code/ide-integrations よく使うコマンド CLIコマンド（起動前） Claude Code を起動するコマンド: claude # 対話セッションを開始 claude --continue # 直近のセッションを継続 c
Claude CodeでリモートMCPがサポートされました | DevelopersIO
AnthropicからClaude CodeがリモートMCPをサポートしたとの発表がありました リモートMCPは、MCPサーバーがローカル環境ではなく、クラウドやリモートサーバー上で実行されているMCPサーバーと接続する際の総称です。 以下の図の赤枠がリモートMCPサーバーで、SSEやStreamable HTTPといった接続レイヤーがよく使われています。 リモートMCPがサポートされることによって、以下のようなメリットがあります。 ローカルMCPと比較すると以下になります 設定が簡単 アップデートをしなくて良い ローカルMCPの場合、PC内のプログラムを更新する必要があります また今回Claude Codeのアップデートには、リモートMCPサーバー向けのOAuthサポートも含まれているため、ローカルにクレデンシャルを持たなたくて良いためセキュアと言えます。 リモートMCPサーバーと接続
Claude Code どこまでも/ Claude Code Everywhere
僕がClaude Codeに初めて触れたのは、2025年の春だった。生成AIにはすでに慣れ親しんでいた。流行に乗り遅れてはいけないと必死に勉強し、エディターの補完機能やコード生成ツールとして日常的に活用していた。ただ、当時の僕にとってそれはまだ「CLIで動く便利なコーディング支援ツール」程度の認識でしか…
【Claude Code Tips】私のマイCLAUDE.mdを解説します
はじめに こんにちは、弱者エンジニア代表、橋田至です。 皆さんはClaude Code使っていますか？ Claude Codeとは、ターミナル上で動作するエージェント型コーディングツールです。 私自身、Claude Codeがリリースされてから毎日使用していますが、毎日生成能力の高さに驚いております。 そんなClaude Codeの性能をさらに引き出すものが、CLAUDE.mdという仕組みになっています。 CLAUDE.mdとは？ CLAUDE.mdはメモリ機能になります。 CLAUDE.mdを作成することで、Claude はこのファイルを継続的に参照し、プロジェクト固有の知識として学習することができます。 CLAUDE.mdには、 アーキテクチャ設計 コーディング規則 共通ワークフロー などを設定すると、生成されるコードがより精度の高いものになります。 ちなみに、.cluade/にmdフ
Claude Codeで実用的なWebサービスを作る｜himara2
こんにちは！ひまらつ（@himara2）です。 Claude Codeが話題ですね。実際に使ってみるとClineやCursorなどのAIエージェントと比べて賢さのレベルが高く、開発アシスタントとして次のレベルに来ているような気がします。 サンプルアプリやプロトタイプを作れるのは確実なので、今回はデータベースを持つ実用的なアプリケーションをどれくらい作れるか試してみました。これからClaude Codeを触る方のヒントとなれば幸いです:) 今回作ったもの麻雀点棒管理アプリを作った麻雀をするときに点数の管理をするWebアプリです。 定期的に友人と麻雀をしてるんですが、友人宅にある自動雀卓機が点数表示に対応していないモデルで毎回ちょっとだけ困っていたのでその解決が目的です。 課題としては超ニッチです。このWebアプリが爆発的にヒットする可能性はまずありませんが、AI開発はコストが低いので自分専用
Claude Codeを徹底解説してみた（後編） | DevelopersIO
こんちには。 データ事業本部 機械学習チームの中村(nokomoro3)です。 今回はClaude Codeを徹底解説したいと思います。 本記事について 私は元々はCursorを使っており、Claude Codeは必要なのか半信半疑だったのですが、試してみた感じエージェントの挙動はかなり期待通りな印象です。実際にCursorではコード補完やCmd + Kをメインに、エージェント的な動きはClaude Codeやるように最近使い分けを始めています。 使用感は主観に寄るところも大きいので文面でお伝えするのは難しいですが、Claude Codeのことを少しでも知ってもらい多くの人に使ってもらるよう、一通りの使い方を記事にしました。 以下の内容で記載しており、盛りだくさんとなっております。 Claude Codeの基本的なセットアップ方法から解説 基礎的な使い方から応用（Permission、Gi
バイブコーディングチュートリアル：Claude Code でカンバンアプリケーションを作成しよう
バイブコーディングとは、AI エージェントを活用して直感的にアプリケーションを開発する新しいコーディングスタイルです。このチュートリアルでは、Claude Code を使って Next.js でカンバンボードアプリケーションを作成します。 気がつけばコーディングの分野で AI エージェントを活用することが一般的になりつつあります。特に「バイブコーディング（Vibe Coding）」と呼ばれる新しいタイプのコーディングスタイルは一種のバズワードになっています。Vibe とは元々音楽シーンで使われていた言葉で「雰囲気・フィーリング・ノリ」といった意味を持ちます。プログラマーは技術的な詳細にとらわれるのではなく、自らの直感的なアイディアを AI エージェントに自然言語で伝えることで、AI エージェントが主体になってアプリケーションの開発を進めていきます。このスタイルではプログラマーはほとんどコー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Anthropic、「Claude Code for VSCode」をリリース／ターミナルで動作する同社のコーディング支援AIツールを「Visual Studio Code」で
【西川和久の不定期コラム】 AIに指示するだけの「バイブコーディング」もここまでできるようになった！ ～Claude CodeでXのアーカイブをメディアとともにデータベースへ取り込み、検索アプリを作ってみる
