「分からないことだらけ」から始まったフロントエンド開発、その学習法とは？
まず、坂村氏のニジボックスでの経験を概観しておこう。坂村氏は転職前からバックエンドの経験はあったものの、toCのフロントエンド開発は未経験だった。ニジボックス入社後、最初の案件は大規模メディアのエンハンス開発だったという。その後、『スタディサプリ』のチームでモダンフロントエンド開発や大規模なエンハンスを経験した。途中からはグループリーダーに昇進し、メンバーが成長できる環境作りにも取り組むようになった。それでは、これまでの歩みを順に見ていこう。
坂村氏が最初に手がけた案件は、リクルートグループが運営するWebアプリケーションのエンハンス開発だ。「HTML」「SCSS」「JavaScript」でサイト本体のエンハンスやランディングページ（LP）の作成を行った。ニジボックスでは、基本的に1人で1案件を担当し、開発を進めていく。そのため、担当ディレクターやデザイナーとのコミュニケーションが重要になる。
坂村氏が価値の発揮につながったと感じる要因を今から振り返ると、「納期を見すえた適切なタイミングでの報連相」「ピクセルパーフェクトなデザイン再現」「プロダクトのルールに則った可読性の高いコーディング」「メンバー追加のための受け入れ体制強化」「技術力向上やスムーズな案件進行のためのドキュメント整備」があるという。
次に坂村氏が担当したのは、小学生・中学生向けの学習教材『スタディサプリ』のWebアプリケーション開発だ。ここではリクルートとニジボックスから数人ずつのエンジニアが参加し、スクラムで開発を進めた。
技術スタックはフロントエンドが「Next.js」と「Apollo Client」、複数のサービスが存在するバックエンドは「Express」「Apollo Server」「Prisma」「Ruby on Rails」などが使われている。坂村氏は「当初は本当に、スクラムも、GitHubも、GraphQLも、CD/CDも、Dockerも、AWSも、何も分からなかった。たぶんもっとありましたが、あらゆることが初めてで、質問ばかりでした。フォローしてくださった先輩エンジニアのみなさんには頭があがりません」と振り返る。
そのような状況でも、坂村氏は自分なりにチームに貢献しようと努力する。比較的難易度の低い作業や小さめのイシューには積極的に手を挙げ、なるべく多くの経験を積むことをまずは意識した。また、率先してPRレビューも行った。坂村氏は、「コードを読み解き、質問や意見を述べることは何よりの勉強になる」と強調した。
加えて、「分からないことがあったらすぐにチャットで質問する」と坂村氏。このような取り組みは一見チームの役に立たないように感じるかもしれないが、坂村氏によると「相談した内容は記録に残る。他のメンバーが同じ問題でつまずいたときにチャットを見返して解決できることもあるので、質問することは共有ナレッジの蓄積につながる」とのことだ。「自戒もこめて、ガンガン質問と相談をしましょう」と呼びかける。こうして坂村氏は、短期間でフロントエンド開発の基礎をぐんぐん吸収していった。
高難度のイシューやブラウザ依存のバグにはどう対応する？
ここからは、坂村氏が経験した技術的事例を紹介する。まずは、小学生向けの新しい学習コンテンツ「スライドコンテンツ」だ。これは、従来のものよりも動画や音声を活用し、よりインタラクティブな学習体験を提供する。
着手時点で要件が固まっておらず、仕様も複雑で高難度なイシューだった。開発タスクはリードエンジニアとペアプログラミングで進めたが、常に同期的に作業できるわけではない。例えば、あらかじめチャットで作業順序の同意をとるなど、1人で開発する場合とは異なるコミュニケーションスキルを習得する必要があった。
同時に、この案件はバックエンドタスクへの「染み出し」（自分の役割を超えて、別の領域の仕事にも挑戦すること）の契機ともなった。坂村氏は前職や副業でバックエンドの経験があり、今後のキャリアを考えるとバックエンドのスキルや実務経験も伸ばしていきたいという強い意欲があった。坂村氏が「やっていき」と呼ぶ、このやる気を原動力に、設計から実装、テスト作成まで担当し、先輩にこまめにレビューしてもらったという。
この案件を振り返り、坂村氏は「後方互換性を担保する設計や開発の難しさを体験できました。また、複数サービスからなる大規模サービスの開発を経験できたのも良かったです」と話す。「染み出し」については、「フロント担当だからといってバックエンドやUI/UXを知らなくていいわけではない。『やっていき』がある人が少しずつ他の領域に染み出していくことで、チーム全体の能力が広がっていく」とその重要性を強調した。
もう1つの事例は、ブラウザ依存のバグ対応だ。国語の教材では、ブラウザであまり見ない縦書き表示をするため、ブラウザ依存のバグに遭遇することがある。このようなバグは再現性が低く、調査に困難が伴うことも多い。実際に坂村氏も、縦書き表示で左から右へスクロールしようとボタンをタップすると、スクロールが右端にリセットされてしまう現象に遭遇した。
このバグに対し、坂村氏はパフォーマンスタブを使用してブラウザの挙動を地道に細かく調べることで、何とか解決につなげることができた。この経験を振り返って、「実務でないとなかなか経験できないことですが、成長のために必要なスキルかなと思っています」と語った。
メンバー育成を通じた、自分自身のステップアップとは
ここからはニジボックスの組織的な取り組みについて見ていこう。同社は、エンジニアが成長するための環境作りに力を入れている。社内研修は開発メンバーも企画に関わり、実際の案件に役立つスキルを学べる内容となっている。外部講師を招くこともあるそうだ。また、社内LT（ライトニングトーク）などのイベントを通じて、他プロジェクトに参画しているメンバーとの知見共有の機会も設けている。
今回は、坂村氏がかつて注力したメンバー育成について紹介する。きっかけは、社内のあるバックエンドエンジニアがフロントエンド担当になったことだ。モダンフロントエンド開発の知識をより深く定着させてもらいたいと、さらなる学習を勧めた。
まず、スキルシートを使用して学習開始前のスキルレベルを把握する。このスキルシートは社内で運用しているものをベースにアレンジした。スキルシートから、自信のないスキルをどのような学習で伸ばしていくかを相談し、実際に学習を進める。もし分からないことがあれば、週次の1on1やチャットで都度フォローする。最終的には期の最後に再びスキルシートを記入してもらい、成長度合いを測定する。
一通り実践してみて、坂村氏は「適切な学習題材を選定することの難しさ、スキルシートに沿って偏りのない学習を意識することの大切さ、そして自分の計画性の甘さに気づきました」と振り返る。
例えば題材選定について。スキルシートから「○○が分かるようになる」という目標を設定する際に、アクションが「アプリケーションを作成してみよう」だけでは不十分だ。坂村氏は「この項目を伸ばすなら、こういう機能が作れるようになると達成できたことになる」というところまで考える必要があったと説明する。理解不足の部分をリストアップしてもらい、理解度を高めるための質問会を開くなど、伸ばしたい項目にフォーカスする取り組みも行ったそうだ。さらに、「こうした成長支援は自分に経験がないと肌感がつかめないので、日ごろから業務外の範囲であっても勉強しておくことが大事」と話した。計画性について、坂村氏は「育成を通じて本人にスキルがつくことで、結果、本人の業務負荷を軽減することにつながるため、業務に入る前にスキルシートの『どの項目』を『どの程度』まで理解している状態にしたいのか、詳細な計画が必要だと学びました。次に育成の機会があったら、この反省を活かしたいです」と話した。
最後に「ニジボックスでの経験を振り返ると、少しずつ新しいことに挑戦し続けた4年半でした。今後もこのように挑戦を続け、よりエンジニアとして成長していきたい」と抱負を語り、坂村氏はセッションを締めくくった。
