開発初心者がClaude Codeを使って開発チームにジョインした話

Transcript

1. 開発初⼼者が Claude Codeを使って 開発チームにジョインした話 稲垣 徹 製造ビジネステクノロジー部 スマートプロダクトチーム
2. ⾃⼰紹介 2 • 2025年4⽉~ クラスメソッド • Webアプリ開発 / フロントエンド • 6⽉から案件参加 / 2案件⽬ 稲垣 徹 / クラスメソッド 製造ビジネステクノロジー部 スマートプロダクトチーム
3. 本⽇お話すること 3 - Claude Codeがあったおかげで無事ジョインできた話 - フロントエンド開発業務におけるAI活⽤⽅法 - AIを活⽤する開発初⼼者が感じていること
4. Claude Codeがあったおかげで 無事ジョインできた話
5. 6⽉時点のわたしのスペック 5 - 6⽉~ 初案件 - フロントエンドエンジニア→予想外 - TypeScript→あまり得意でない - スクラム開発→未経験 そんな不安の中始まったのですが、Claude Codeがなんとかしてくれました！
6. 1案件⽬のジョインの話 6 案件の歴史が⻑く、⼤量のコード‧ドキュメントがありました Claude Codeにも読んでもらって、分からないところClaude Codeに聞くことで、 下記の理解をより深めることができました - フロントエンドの実装⽅法全般 - スクラムの進め⽅ - PRの書き⽅ - Gitの操作⽅法 - テストの書き⽅ - 先輩への質問⽅法 - … 業界未経験者の私が、分からないこと全部聞いていたら、 おそらく先輩の仕事時間はほぼなかったと思います…
7. 開発初⼼者が普通にClaude Codeを使うだけで効果⼤ 7 - リポジトリを参照して答えてくれるのが素晴らしい - docリポジトリの場合→検索&要約エージェント的 - Appリポジトリの場合→開発エージェント的 - ある程度⾃律的に動いてくれるのが素晴らしい - 全く開発の道筋がわからない初⼼者エンジニアにやさしい - 雑に投げてもある程度答えてくれるのが素晴らしい - 先輩のレビューコメントに疑問点があっても、そのままプロンプトにいれ るだけで回答してくれる柔軟さが使いやすい 開発初⼼者1⼈に 24h365dプロジェクトの質問し放題の先⽣をつけられる！
8. フロントエンド開発業務における AI活⽤⽅法
9. 業務フロー 9 1 実装すべき内容を把握 2 3 開発用のブランチを作成 4 UI実装 5 Commit / PR作成 6 LGTMもらう マージして2に戻る
10. AIを活かせているところ 10 1 実装すべき内容を把握 2 3 開発用のブランチを作成 4 UI実装 5 Commit / PR作成 6 LGTMもらう マージして2に戻る
11. UI実装 -Figma MCPを使ってデザインデータ取得- 11 - 開発初⼼者にとって難しいこと - 1からUI実装してって⾔われても、どこから書けばいいかわからない - 解決策 - FigmaMCPを導⼊して、UI作成の補助をしてもらう
12. Figma MCPとは？ 12 Claude CodeのようなAIアシスタントから、Figma内のデザインデータを利⽤する ためのツール Figmaのデザインフレームへのリンクをプロンプトにいれるだけで、デザイナーさ んが作成したデザインデータをClaude Codeに読み込ませることができる。 UIを1から実装しなくて良い ⾒た⽬に関しては⾼い精度でAIが実装してくれる
13. プロンプトとTodo 13 https://www.figma.com/design/~~~~~~~~~(Figmaリンク) /src/ui/componentsのコンポーネントをなるべく使⽤して、下記フォルダ内に 実装して src/app/~~~~(ファイルパス) 現在の実装を 真似るTodoが多数
14. ⾒た⽬以外の実装をみてみると… 14 - ⼀部型定義がない - 特定のライブラリを使⽤してくれない - その他リファクタは必要 0から調べながら開発するよりは早い たたき台があるだけで実装に対するハードルが⼤分下がる
15. Figmaデスクトップアプリ側 - 基本設定>ローカルMCPサーバーを有効化 導⼊⽅法はとてもかんたん 15 是⾮試してみてください Dev Mode MCPサーバー利用ガイド – Figma Learn - ヘルプセンター Claude Code側 - ターミナルで下記実⾏ claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
16. コミットメッセージの作成 16 - 開発初⼼者にとって難しいこと - コミットメッセージにおいて、feat: / fix: までは書けるけど、その後の ⽂章思いつかない… - 解決策 - カスタムスラッシュコマンドを導⼊することで 簡単にコミットメッセージを作成可能に
17. カスタムスラッシュコマンドとは？ 17 - Claude Codeに渡すプロンプトのショートカットコマンド - 頻繁に使⽤するプロンプトを.mdファイルに定義する - /<ファイル名>と⼊⼒することで、Claude Codeから呼び出し可能
18. 使い⽅はとても簡単 18 /commit-message2 ClaudeCode
19. カスタムスラッシュコマンドの作り⽅ 19 - リポジトリの.claude/commandsディレクトリに.mdファイルを作成 - 通常のプロンプトを書く感覚で指⽰⽂を⼊れていくだけでOK
20. mdファイルの中⾝ 20 Task定義 上記の変更から、コミット メッセージを作成してくだ さい 実⾏したいBashコマンド git diff: 差分を確認 git log: 以前のコミットメッ セージの内容を確認 Anthropic公式ページ
21. mdファイルの中⾝ 21 Prefix候補 feat/fix/refactor/choreの4つ commit例
22. 簡単に試したい場合 22 - スラッシュコマンドリスト（Awesome Claude Code）が公開されている - Anthropic公式ページでも実装例が公開されている （参考） Anthropic公式ページ https://docs.anthropic.com/ja/docs/claude-code/slash-commands#bash%E3%82%B3%E3%83%9E%E3%83 %B3%E3%83%89%E5%AE%9F%E8%A1%8C Awesome Claude Code https://github.com/hesreallyhim/awesome-claude-code?tab=readme-ov-file#slash-commands-
23. 実装でAIを使いこなすコツ 23 1. commit毎に会話をクリア コンテキストが長すぎると精度が落ちる 会話が長すぎる場合、 変な迷路に迷い込んでいる可能性大 2. WIP commit / stashの活用 別の実装案を試したい時に、一旦 WIPでコミットor stashしてAIに試させる 3. 類似実装を直接プロンプトに渡す コードベース全体を読ませる or探させるより、 url貼り付け &関連コードをコピペした方が確実 4. 明確なゴールがあるなら自力で実装 明確な実装はCursorの自動補完を使いながら 自分で書くほうが早い &勉強になる
24. AIを活⽤する開発初⼼者が感じていること
25. PRレビュー会が有意義 25 - 先輩1&2) 「このuseEffectはコード⾒づらくなるから、むやみに使わないほう がいいよね〜」「ほう！別の実装ってどんな感じですか？」「ここはkeyを使 うといいよ〜」「なるほど！」 - 私) （分からなすぎる…後でAIにきいてみよう） - 単語レベルでも拾えていたので、AIに聞いてざっくり理解できた。
26. AIを活⽤する開発初⼼者が感じていること 26 - AIのお陰でメンバーとのちょっとした雑談や、ほんの少しのヒントから、め ちゃくちゃ勉強できるようになった - メンバーとのコミュニケーションを積極的にとって、学習のタネを集める - そのタネをAIと育てまくることが技術⼒向上のカギ？
27. 今後ジュニアエンジニアが⽣き残るために 27 - AIの恩恵を享受し続けるため、AIの勉強を続ける - 先輩エンジニアの⾔葉を⼀語⼀句逃さない勢いで吸収する
28. まとめ
29. まとめ 29 私は下記のようにAIを使い倒すことで、今仕事ができています！ まだClaude Code未履修の⽅、同じ境遇の駆け出しエンジニアさんの参考になる と幸いです - Claude Codeの導⼊ - MCPの導⼊（Figma） - 定型作業のカスタムスラッシュコマンド化