BASEプロダクトチームブログ

ネットショップ作成サービス「BASE ( https://thebase.in )」、ショッピングアプリ「BASE ( https://thebase.in/sp )」のプロダクトチームによるブログです。

AIを活用する事でバックエンドエンジニアがフロントエンドに挑戦し、学んだことを語りたい

はじめに

BASEでソフトウェアエンジニアをしている Futoshi Endo(@fendo181)といいます。
以前、同じチームの Kumar さんが以下のタイトルで記事を執筆されました。

「BASEでの開発体験を向上させるための取り組み」

devblog.thebase.in

この記事では、生成AIの活用によって、メンバー全員がフロントエンドとバックエンドの両方を担当できるようになった、という挑戦について触れられていました。

今回のプロジェクトでは、メンバー全員がフロントエンドとバックエンドの両方を担当できるようにするということにチャレンジをしました。メンバーは以前から専門領域を広げたいという意欲を持っていましたが、学習コストやペアプログラミングにかかる時間的負担を考慮し、プロジェクトの進行を優先せざるを得ませんでした。

しかし今回、AIツールの活用によってこれが実現可能となりました。

自分はまさにこのプロジェクトのエンジニアメンバーの1人であり、AIツールの力を借りることで、バックエンドの領域から、フロントエンド開発に挑戦することができました。 この記事では、どのように生成AIを活用して学習・開発を進めたのか、具体的な体験をベースに紹介します。


AIを“頼れるエキスパート”として活用し、スキルを拡張する

今回のプロジェクトでは、主に React + TypeScript を用いた機能開発が中心でした。 プロジェクト初期は「フロントエンドもやってみたい」という気持ちはありつつも、ReactやTypeScriptの文法に不慣れな自分にとっては、「何が分からないのかすら分からない」状態で、不安の方が大きかったのを覚えています。

まず取り組んだのは、Reactの公式ドキュメントのチュートリアルをベースにした写経です。 基本的な構文やライフサイクル、Hookの使い方などを手を動かしながら覚えていきました。 しかし、それだけでは実務のコードはなかなか読めるようにはなりません。

PRレビューにおいても、変更内容の意図が掴めずに苦労していたのが実情です。
そこで活用したのが、ChatGPT や GitHub Copilot Chat といったAIツールです。

わからないコードの説明や、PR内容の要約、APIや型の補足など、質問を投げることでその場で壁打ちができる環境が構築できました。 その後は、技術書やサンプルコードを写経しながら実装力を強化し、壁にぶつかるたびにAIに質問を重ねることで、学習のトライアンドエラーを高速に回すことができました。

特に印象に残っているのは、1ヶ月前は理解できなかったコードが、自分でAI Agentを活用し、出力されたコードの意図をすべて理解し、業務でも活用できるコードへと変わっていった実感です。

たとえば、最初はAIが生成したコードの正誤すら判断できませんでしたが、繰り返しのやり取りと経験の積み重ねによって、「どの部分が怪しいか?なぜそうなるか?」を自然と説明できるようになっていたのです。

当初は「フロントエンドに関連する機能改善で20本ほどPRを出せたら十分」と考えていましたが、プロジェクト終盤には60本以上のPRを提出しており、予想以上の成果につながりました。

もちろん、新規ページ追加や、APIへリクエストを行う為のClient追加のような機能開発から、細かなUI調整や文言変更なども含まれていますが、ReactとTypeScriptの知識がほぼゼロの状態から始めた自分にとって、この実績は大きな自信になりました。

この経験から強く感じたのは、生成AIは単なる効率化のツールではなく、学習の初動コストを下げ、スキル拡張を加速する存在であるということです。
今後、「生成AIでコードを書く」だけでなく、生成されたコードが正しいかを判断する能力=レビュー力・設計力がますます重要になると考えています。

その意味で、AIとの理想的な関係性は以下のように整理できるのではないかと思っています。


  • 得意な領域 → 生成AIを活用し、生産性を最大化する
  • 不得意な領域 → 生成AIを“頼れるエキスパート”として活用し、学習のスピードを上げる

AIと上手く付き合うコツは得意な領域では積極的に生成AIを活用し、生産性を上げ、不得意な領域では頼れるエキスパートとして活用し、学習をするのが良い近道なのではないかと思っています!

まとめ

今回紹介したようにAIを活用することでこれまで専門外だったフロントエンド領域に挑戦することができました。一方で、AIを使う中で一貫して意識していたのが、How(やり方)に偏りすぎないことの重要性です。

Claude CodeやCodex CLIなど、AI Agentによるコードの自動生成は非常に便利ですし、私自身も Zennで記事 を書くほど積極的に活用しています。

しかし、ソフトウェアエンジニアとして本当に重要なのは、「なぜその実装を選ぶのか?」「設計意図は何か?」というWhyの部分です。

ユーザー体験、アーキテクチャ、保守性、チーム内の運用方針など、Whyを考慮することで、より本質的な開発ができると確信しています。

AIは間違いなく、これからのエンジニアにとって欠かせないパートナーになります。

だからこそ、自身の成長へつながる使い方と、上手く付き合っていくのがこれからのAI時代のエンジニアに求められるスキルセットだと思っています!

最後に宣伝で、BASEにおけるAI活用や開発スタイルにご興味を持っていただけた方がいれば、ぜひ採用ページもご覧ください!

binc.jp

今後も、プロジェクトで得た知見を継続的に発信していきます。
最後までお読みいただき、ありがとうございました!

おわり!