爆速効率化！Claude AI ✕ ツールで変わるエンジニアの仕事術 〜MCP構築と実践勉強会〜

7月12日に開催される「爆速効率化！Claude AI ✕ ツールで変わるエンジニアの仕事術 〜MCP構築と実践勉強会〜」のプレゼン資料です。

Transcript

1. 爆速効率化！Claude AI ✕ ツールで 変わるエンジニアの仕事術 〜MCP構築と実践勉強会〜 By あっちゃん Genspark で作成
2. 自己紹介 名前：あっちゃん 業界歴13年のWEBアプリケーションエンジニア PHP、Javaなどバックエンド中心 他のSNSでは「たかふ」 「たかふみ」名義でも活躍中 Genspark で作成
3. Claudeとは Anthropic社が開発した先進的なAIアシスタント 自然な対話と複雑なタスク処理能力を備える 文章作成、情報分析、問題解決が得意 倫理的な判断と安全性に配慮した設計 Genspark で作成
4. Claudeの料金体系 無料プラン ¥0 基本的な機能を無料で利用 可能 Proプラン $20/月 高度な機能と長文処理に対 応 MAXプラン $100〜$200/ 月 最高性能と最新機能へのア クセス Genspark で作成
5. Anthropic社の歴史 2021年、OpenAIの研究者らが独立して設立 AI安全性と責任ある開発を重視する企業理念 2023年、Amazonから40億ドルの大型出資を獲得 AWS上でClaudeが優先的に提供される戦略的パートナーシップ Genspark で作成
6. ここ半年のClaudeの動向 2024 11月 ClaudeDesktopリリース 2024 11月 MCPリリース 2025 2月 ClaudeCodeリリース 2025 4月 MAXプラン追加 2025 5月 Claude4リリース 2025 6月 ClaudeCodeがProプラン対応 Genspark で作成
7. ClaudeDesktopとは デスクトップで動作するClaude Electronベースで開発 Node.js上で動作 C Genspark で作成
8. Electronとは Web技術でデスクトップアプリを開発するフレームワーク HTML、CSS、JavaScriptでクロスプラットフォームアプリを構築 メインプロセス Node.js環境・OS操作 レンダラープロセス UI表示・ユーザー操作 Genspark で作成
9. ClaudeDesktopとElectronの関係 ClaudeDesktopはElectronフレームワークで開発されています メインプロセス側でMCPを通してOS操作が可能に Electron メインプロセス MCP レンダラープロセス Claude UI OS操作 Genspark で作成
10. MCP（Model Context Protocol）とは Claude AI MCP 外部ツール・ OS MCP = LLM用APIのような仕組み Claudeが外部ツールやOSと直接やり取りするためのプロトコル AIとツールの連携を標準化・簡略化 Genspark で作成
11. MCPがもたらす進化 外部ツール・OS・アプリとの連携による 能力拡張 テキスト応答を超えた実世界でのタスク 実行 複雑なワークフローの自動化を実現 AIエージェントの新たな可能性を開拓 Genspark で作成
12. MCPの例：filesystem ファイルの読み書き操作 MCPを通してファイルシステムへのアクセスが可能に プロジェクト作成 新規プロジェクトの作成とファイル生成をAPI経由で実行 既存ファイル操作 既存ファイルの読み込み・編集・保存をClaudeから直接実行 ※ ClaudeCode と同様の機能をDesktop上でも活用可能 Genspark で作成
13. ClaudeCodeとは 主な機能 複数言語のコード生成・実行 既存コードの解析・改善 デバッグ支援 ファイル作成・編集 使用例 AIとの対話を通してコードを生成・実行・修正できる機能 2025年2月にリリース、6月からProプランでも利用可能に 複雑なプログラミングタスクをAIの支援で効率化 > クラウドストレージアプリを作って ✓ プロジェクト生成中 ... ✓ React + Express + SQLite 構成 ✓ 10 ファイル作成完了 Genspark で作成
14. ClaudeCodeのコマンド Qiita 詳しくはQiitaに記載 ファイル作成・編集 コード実行 ゲーム作成 Proプランでも利用可能（2025年6月～） Genspark で作成
15. ClaudeCodeのコツ プロンプト作成はChatGPTと相談 効果的なプロンプトをChatGPTと一緒に考えることで精度向上 "ChatGPT: Claudeで使える最適なプログラミングプロンプトを教えて" 禁止事項(deny)の設定 セキュリティ向上のため、実行を禁止したい操作を明示的に指定 "ネットワーク接続やシステム変更操作は許可しないで" カスタムコマンドの活用 頻繁に使うコマンドをカスタマイズして作業効率化 "よく使うフォルダ構成やテンプレートを事前定義" Genspark で作成
16. AIの向き合い方 何でもできる ドラえもんではない どんな課題も魔法のように解決してくれる 万能なツールではありません VS 効率化の パートナー 自分ができることを より効率的に実行するための協力者です AIの強みを理解し、適切な場面で活用することが重要です Genspark で作成
17. MCPの例：Playwright 本来はe2eテスト用ツール 複数ブラウザに対応した自動テストフレームワーク ブラウザの自動操作 MCPと連携することで、AIによるブラウザ自動操作が可能に 自然言語でのテスト記述 「ログインしてダッシュボードを表示して」のような自然な指示でテスト実行 ※ 独自のテクニックが必要ですが、非エンジニアでも扱いやすい利点があります Genspark で作成
18. MCPの例：Obsidian Notionのローカル版として マークダウン形式のナレッジベース・個人用Wiki構築ツール ドキュメント作成・編集 MCPを通してObsidianでのノート作成・編集が可能に 内部データの読み取り 保存されたノートの検索・参照・分析をAIと連携して実行 MCPで第二の脳（セカンドブレイン）との連携が強化 Genspark で作成
19. MCPの例：context7 様々な形式のドキュメントをAIが参照できる形に変換 ドキュメント間の関連性を自動で分析・構築 AIと文書のシームレスなコミュニケーションを実現 PDFファイル 論文・レポート Wordファイル 会議資料・仕様書 Excelファイル データ・表計算 コードファイル ソースコード context7 Genspark で作成
20. MCPの例：mysql データベース操作の自動化 AIを通してMySQL操作が可能に。複雑なSQLを自然言語で実行 データ検索・分析 SELECT * FROM users WHERE last_login > '2025-01-01'; ↓ 自然言語で表現 ↓ "2025年以降にログインしたユーザー一覧を教えて" データ更新・レポート生成 クエリ結果の可視化やレポート自動作成も可能に Genspark で作成
21. 時間が余ったら ここでアプリを一本作ってみる Claude AIとMCPを活用したライブコーディングデモ Genspark で作成
22. 最後に 本日はご参加いただきありがとうございました！ 業務委託案件のご紹介 興味のある方は、この後の別スライドにてご案内いたします。 エンジニアと しての次のステップにぜひご検討ください。 質問タイム Claude AIやMCPについて、ご質問がありましたらお気軽にどうぞ！ ご清聴ありがとうございました Genspark で作成