TalentXバックエンドエンジニアの吉田です。採用ブランディングサービスである MyTalent Brand のバックエンド開発を主に担当しています。
当社のシステム開発に携わるエンジニアは、いずれのチームでもフロントエンドとバックエンドで担当職域が分かれています。職種が固定されていることで高い専門性を保てる一方、プロジェクト内容によっては FE・BE のどちらかに工数が偏り、片方のリソースだけが不足してリリース時期がその影響を大きく受ける、という問題が発生していました。
担当外職域の実装が可能なメンバーももちろんおります。ただ、全員が実運用可能なレベルまで専門性を高めることはあまり現実的ではなく、長らく専門特化が合理的であるという状況が続いていましたが、AI 活用によってこの状況が変わりつつあります。
AI コーディングによって職域外タスクを担当することのハードルを大きく下げ、機能リリースのスケジュールを早めたり、一人で一つの小規模プロジェクトの全工程を完遂させてアジャイルに市場投入する体制が整うなど、提供サービスの質を高める上で良い影響が生まれています。
私自身、BE 専任で FE 開発はほとんど未経験でしたが、FE 実装の PR を作成・マージ〜リリースまで行うようになり、実運用に至っています。
本記事では「BE が FE を学ぶコツ」ではなく、既存の AI 活用の延長としてこの取り組みが組織に再現性を持って浸透したのはなぜか、どんな前提条件が揃っていたからこそ機能したのかを、自身の体験・所感を基にお伝えできればと考えています。
【前提】当社のAI環境と技術スタック
当社では開発メンバー全員が Claude Code を利用しています。また、私が初めて FE タスクに対応した際のリポジトリの技術スタックは以下の通りです。
- 基盤: Vite + React 18 + TypeScript
- 状態管理: jotai / フォーム: react-hook-form
- UI: 社内デザインシステム + MUI
- 品質: ESLint / Stylelint / Prettier / 型 / Storybook / Vitest
上記のうち半分ほどは初見、何に利用するライブラリなのかもわからないという状態からのスタートでした。
初期段階での失敗
まず最初に試したのは、一旦全て AI に書かせて、後からコードリーディングで理解していくという手法でしたが、驚くほど理解が進みませんでした。
具体的に対応したのは、検索条件（日付の範囲や期間）を URL に反映するという機能でしたが、BE の感覚で言えば、状態をクエリパラメータに持たせるだけの話に見えました。
自動生成させたコードは、検索条件を既存の React Context とは別に URL にも持たせ、両者を同期する作りになっていました。その後、URL だけを状態の置き場所にする形に作り直して、ようやく「最初のあれは状態の二重管理というアンチパターンだったのか」と理解しましたが、全て書かせて後から読むのではこの結論まではたどり着けませんでした。
何にAIを使うか・使わないか
1. 何が難しいのかを壁打ちで言語化
「検索条件を URL に反映する」だけでなぜこんなに悩んだのか？ FE 初心者が躓きやすいポイントを Claude と壁打ちしながら以下のように言語化してもらいました。
- UI の状態（state）がサーバでなくクライアント側に分散して存在し、置き場所が複数ある（コンポーネント / Context / URL）という感覚が BE にはない
- URL を状態の源にするという発想（共有・リロードで復元できる）は FE 特有
これらは PR 内容や Jira チケットと紐付けてローカルの Obsidian vault に記録し、ナレッジとして貯め続けています。現在も FE タスクを実施する上で「BE の感覚のままでいると何に躓きそうか」を事前に壁打ちするようにしています。
2. AIに丸投げしない進め方を定義
前項の通り、丸投げで生成すると「動くけど説明できない」状態になります。特に FE は BE と比較してその傾向が顕著だなと感じます。
かといって全部自分で書くのは時間がかかりすぎるため、「決める・理解する」は自分、「調べる・書く・確かめる」は AI、という線引きを設け、効果的に生成しながら理解を深めるための進め方を定義しました。★のついている項目でのみ AI に頼るようにしました。
これを何度も繰り返して 1 つの PR を少しずつ作り上げていきます。
- ★ やることを 1 テーマに絞る（状態管理ならそれだけ、等。テーマとして適切な範囲を壁打ち）
- 叩き台を出す前に、公式ドキュメントの該当箇所を先に読む
- ★ 叩き台を出してもらう→動かす→「なぜこの書き方か」をしつこく詰める
- 自分の言葉で説明できたら次へ。できなければ戻る
3. 初期ゴールを低めに定義
最後に初期ゴールを定義しました。「FE もできるようになる」は目標として曖昧すぎて、どこまでやれば十分なのかが自分でも分からなくなってしまうためです。
初回 PR の時点では、ゴールを意図的に絞りました。セキュリティ・エラーハンドリング・スケーラビリティといった、動かすだけでは確認できないけれど本来は担保すべき観点は、もちろん軽視するものではありません。ただ、これらすべてを初期段階で自分一人で判断し切ることは、最初のゴールには置きませんでした。
代わりに、「小さい単位で PR を出す」ことを軸に据え、上記のような観点は既存のガードレールやレビューを通じて一つずつ学んでいくことを重視しました。抜けている観点はレビューで指摘してもらい、その指摘の意図を理解することを次の学びにしていく。このサイクルを回せる状態を、最初のゴールとしました。
最初から全てを一人で担保しようとすれば学習コストが跳ね上がり、それこそ「割に合わない」状態に逆戻りします。ゴールを絞って開始して、レビューとガードレールで補い、少しずつ引き上げる。この方が結果的に早く戦力になれると考えました。
組織で再現するための前提条件
前項の内容はあくまで私個人の進め方でしたが、結果として、現在このチャレンジは個人・チームとして軌道に乗っています。
しかし、これらが回った一番の要因は間違いなく組織側の足場が揃っていたからでした。逆に言えば、その足場がない状態で同じことをやっても恐らく定着しないと考えています。
当社で重要と感じた前提条件は以下の通りです。
1. AIコーディングが前提になっていること
大前提ですが、知らない文法やお作法を調べる時間、定型コードを書く時間、躓いて作業ストップしてしまう、等のコストの大部分は、AI が肩代わりしてくれます。結果として、領域外に手を出すことが初めて割に合うようになりました。
2. 規約やガードレールが整備されているか
規約が文書化されており、ESLint や Storybook が利用できる形になっていました。また、一例ですが以下のような Claude Code Skill が事前に作成されており、自分自身で答え合わせがある程度行える形になっていました。
- new-feature: FSD（Feature-Sliced Design / レイヤー単位でディレクトリを切る設計手法）準拠のディレクトリと雛形ファイル（型・定数・コンポーネント等）を生成。構成を暗記していない状態でも、正しい置き場所から書き始められる。
- swr-hook: プロジェクトのパターンに沿ったデータ取得フックと型を生成し、API の繋ぎ込みが定型化できる。
- full-review: コーディング規約・コード品質・パフォーマンス・セキュリティの 4 観点でレビュー。引数なしで現ブランチ差分を自己点検、PR URL を渡せば PR レビューも可。
- create-pr: ブランチ名から JIRA 番号を抽出し、コミットと diff から本文を組み立て、チーム標準テンプレで PR を作成。小さい単位での PR 作成のハードルを軽くする。
3. チャレンジを許容するレビュー体制・サポート文化
職域外チャレンジを許容してもらえる空気感があったことは、言うまでもなく最も基本的であり、かつ重要なポイントでした。
担当者へのレビュー負担も上がり、キャッチアップのために一時的にベロシティが下がっても将来への投資とポジティブに捉えてもらえました。私自身も FE メンバーの BE 自走をサポートする中で、職域ごとの情報共有会を行ったり、チーム全体でお互いのスキルアップを支え合いながら非常に前向きにこのチャレンジを進められました。
まとめ
長い間自分の仕事はコードを書くことだと思っていましたが、AI コーディングが主流となり、気づけばほとんど自分では書かなくなっていました。便利になった一方で、正直少し寂しさもありました。
今回久しぶりに一からコードと向き合って、知識の浅い言語に四苦八苦したのは、単純に楽しかったです。しかもそれが自分の手応えだけで終わらず、自身の知識で FE メンバーの BE チャレンジをサポートできたり、チームの動き方として軌道に乗って、現在当たり前に職域外のタスクアサインが行えていることは何より喜ばしいことでした。
BEーFE 間に限った話ではなく、土台と文化を今後も整え続けることで再現性を持って対応できる領域を増やしていき、個人の専門性は引き続き発揮しつつ、組織全体で T 型人材化を進めていけると感じています。
最後に
最後までご覧いただきありがとうございました！
TalentXでは一緒に働く仲間を募集しております。 talentx.brandmedia.i-myrefer.jp
また、カジュアル面談も行っていますのでぜひご応募ください！ i-myrefer.jp
