こんにちは、皆さん！マイクです！今日は2025年6月22日、日曜日です。さて、今日の「zenncast」では、Zennで話題になっている記事をいくつかご紹介していきますよ！
まずは、前回の放送でお届けした記事ですが、今日はそのお話はスキップして、早速今日の内容に入っていきましょう！
今日紹介する記事は全部で5本あります。それでは、さっそく最初の記事から始めましょう！
1つ目の記事は「Claude Code中心の開発のためのPythonテンプレートの設計」です。このテンプレートは、Claude Codeを活用したPythonプロジェクトのために設計されており、実装ルールやデバッグのしやすさが重視されています。
まず、プロジェクトは特定のディレクトリ構造や命名規則に従うことが推奨されていて、例えば、`src/`配下にメインパッケージやユーティリティを配置することが挙げられます。型ヒントには`TypedDict`や新しいPython3.12の構文を使用し、静的解析を強化するためにmypyやruffを活用します。
次に、支援ツールの導入についてですが、mypyやruffは厳格な設定で動作し、コードの一貫性や品質を保つために設定されています。また、Makefileを使って、よく使うコマンドをまとめて実行時の混乱を避ける工夫もされています。
さらに、各コードには詳細なログ出力が実装されており、デバッグを容易にする戦略が立てられています。テストは単体テスト、プロパティベーステスト、統合テストの3層構造を採用し、精度を高めています。
最後に、セットアップを自動化するためのコマンドやチートシートが用意されており、開発者が容易に環境を整えられるようになっています。このテンプレートは、Claude Codeと共に開発する際の効率を高め、コードの品質を向上させるために設計されています！
。.
続いて、2つ目の記事は「【Claude Code】カスタムSlash Commandの作り方とコマンド例を紹介する」です。この記事では、Claude CodeにおけるカスタムSlash Commandの作成方法と実際のコマンド例を紹介しています。
Claude Codeでは、スラッシュ（`/`）を入力することで特定の操作を実行できる機能があり、ユーザーは独自のカスタムコマンドを作成できます。カスタムコマンドを作成するには、まず`.claude/commands/`または`~/.claude/commands/`ディレクトリを作成し、コマンド名の`.md`ファイルに指示を記述します。
例えば、バグ修正用の`/bugfix`コマンドやプロジェクトの概要を説明する`/explain-project`コマンド、ログ作成用の`/feature-log`などが紹介されています。これらのコマンドは引数を受け取ることができ、具体的な手順をMarkdown形式で記述できます。
他のユーザーが作成したカスタムコマンドもいくつか紹介されており、技術ブログ記事を生成する`/blog`コマンドやバグ修正のための一連の手順を含むコマンドがあるということです。カスタムSlash Commandを活用することで、エンジニアの日常的な作業が効率化され、個々のニーズに応じた柔軟な対応が可能になるでしょう！
。.
3つ目の記事は「Claude CodeがGitHubのIssue内の画像を読めるようにするgh-assetというOSSを公開しました」です。このOSS「gh-asset」は、GitHubのIssueやPR内に添付された画像を簡単にダウンロードできるツールです。
このツールを使えば、GitHub CLIでは取得できなかった画像情報を扱うことができ、特にプライベートリポジトリの画像にもアクセス可能です。使い方はとてもシンプルで、コマンドラインから`gh-asset download <asset_id> <destination>`を実行するだけで指定した画像をダウンロードできます。
開発の背景には、GitHub CLIがテキスト情報は取得できても、画像情報を直接取得できないという問題がありました。特にClaude CodeのようなAIに画像を認識させる手段が不足していたのです。このツールを使うことで、Issueの内容を基にAIが自動的に画像をダウンロードし、処理できるようになります。
具体的には、CLAUDE.mdファイルにgh-assetを利用する指示を書くことで、AIがIssue内の画像を自動で取得し、実装計画を作成することが可能になります。開発者はRustでこのツールを実装していますが、将来的にはGo言語に移行する可能性も考えられています。
まだ開発初期段階のため、重要なプロダクション環境での使用は推奨されていませんが、ローカルでの利用には非常に便利なツールです。今後の改善や機能追加が期待されており、問題が発生した場合にはGitHubでIssueを報告することができます。興味がある方はGitHubのリポジトリにスターを付けることが奨励されていますよ！
。.
続いて、4つ目の記事は「Claude Code ベストプラクティス」です。この記事では、Claude Codeの基本的な環境セットアップから始まります。
Claude Codeは開発者と協力しながら自律的にコードを生成・テスト・操作できるツールで、低レベルで設計されているため、開発者が自由にカスタマイズできる柔軟性を持っています。CLAUDE.mdファイルの作成や運用、効果的なチューニング手法、ツールの許可リスト設定、GitHub CLIとの連携方法についても解説されています。
基本的なワークフローは「探索・計画・実装・コミット」のサイクルを通じて、開発プロセスを体系的に進めることが重要です。特に、テスト駆動開発（TDD）を導入することで、コードの品質を向上させる手法も説明されています。
さらに、明確で具体的な指示を与えることや、コンテキスト管理の技術が強調されています。最後にはヘッドレスモードを利用した自動化やマルチインスタンス運用の方法についても詳しく述べられています。
これらのベストプラクティスを実践することで、Claude Codeを用いた開発環境の効率性と生産性を最大化することが可能です！
。.
最後に、5つ目の記事は「Figma公式のDev Mode MCPサーバーでUIメンテナンスから解放されよう」です。DRESS CODEでは、200を超える画面数を抱え、デザインデータと実装UIのズレが課題となっていました。
この記事では、FigmaのDev Mode MCPサーバーとCursorを用いて、既存画面のUIメンテナンスを行った事例を紹介しています。このサーバーを利用することで、デザインデータと実装のズレを迅速に修正でき、17ファイルを約30分で調整可能になりました。
重要な技術スタックには、React、TypeScript、Tailwind CSSが含まれ、Cursorを用いてタイポグラフィやコーディング規約をProject Rulesとして定義しています。セットアップはFigmaデスクトップアプリから行い、Cursorと連携することでデザインコンテキストを取得します。
Dev Mode MCPサーバー導入後、UIの微修正作業が劇的に短縮され、1,2時間かかっていた作業が30分で済むようになりました。ただし、完全な自動化は難しいため、特にレスポンシブ対応や複合コンポーネントの微調整には依然としてエンジニアの手が求められます。
AIの活用により8〜9割の修正が可能になりますが、最終的な仕上げはエンジニアの責任です。今後は、Project Rulesを整備し、AIとの協働でさらに高精度なUI整備を進めることが期待されています。この事例は社内での輪読会のネクストアクションとしても取り上げられています。
さて、今日はここまで！紹介した記事を駆け足でおさらいすると、Claude Code中心の開発テンプレート、カスタムSlash Commandの作成方法、GitHub Issueの画像を扱うgh-asset、Claude Codeのベストプラクティス、FigmaのDev Mode MCPサーバーの活用についてお話ししました。
次回も皆さんにお会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひそちらもチェックしてくださいね。番組の感想もお待ちしています！それでは、またね！