この記事は ドワンゴ Advent Calendar 2023 の 13 日目の記事です。
自己紹介
こんにちは。バックエンドエンジニアのlenです。
現在私は社内で使用する教材入稿ツールを改修するプロジェクトに参画しており、そこではバックエンドの実装に加え、フロントエンドの実装も携わっています。
ここではなぜフロントエンドの実装をすることになったのか、またそこから得られたことなどを紹介していきます。
フロントエンドの開発をすることになったきっかけ
理由は2つあります。
1つはバックエンドセクション内でフルスタックな人材が求められていたことです。
2021年の時はバックエンドセクションとフロントエンドセクションというセクション分割をしており、バックエンドセクション内でサービスごとにグループが分かれているような状態でした。
外部ツールは良いのですが新しい内部ツールや内部サービスについても考えていくたびにフロントエンドセクションとの連携が必要になり、貴重なフロントエンドセクションの工数をいただくことになってしまいます。
そこでバックエンドセクション内でフロントエンドの開発能力を持つことによりフロントエンドセクションのリソース削減とセクション内だけで連携を取れるようにしたいという思いがありました。
そういう思いもあり新しく作る教材入稿ツールはバックエンド/フロントエンドともにTypeScriptで開発をしています。
2つめは自分のキャリアプランにおいて多くの技術を取得していきたいという点で合致したからです。
将来技術的な決定権をもつ立場になったときの判断材料を増やす機会を得たいと考えていたときにフロント開発の声がかかったので了承をしました。
以上2点の理由でフロントエンド開発をしていくことになります。
教材入稿ツールの開発当初はPM含め4名のチームでしたのでバックエンドが2人、フロントエンドが1人(自分)というメンバー体制で進んでいくことになります。(現在は6名体制です。)
実際の業務に着手するまで(キャッチアップ方法)
フロントエンドを担当する上での事前知識は基本的なHTML/CSS/JSの知識程度しか持っていなかったので、業務が始まるまでの間キャッチアップの時間をいただくことになりました。
2021年12月 技術のキャッチアップ
当時教材入稿ツールで使われることが決まっていたTypeScriptとReact、Next.jsのキャッチアップを行いました。(技術選定の際にNext.jsは不要になって現在は使っていません)
Reactでは、公式ドキュメントにあるスタートガイドを一通り触りました。
最初は組み込みフックの種類や使い分け(特にuseContextとuseReducerの違いなど)がなかなかチュートリアルだけだと理解できず、社内の有識者(主にフロントエンドセクションの方)に相談をしました。 またチーム内で学んだことを発表したりして知識をつけていました。
私自身昔からアウトプットをしないとなかなか学んだ内容が身につかないため、なにか新しいことを学んだら誰かに話したり発表したりするケースが多いです。
Next.jsも同じく、公式ドキュメントにあるチュートリアルを進めていきました。 こちらでは各項目の終わりに学んだことを確認する簡単なテストがあり、さながら塾の小テスト感覚で学びやすかったです。
TypeScript自体の勉強はこの段階ではあまりしておらず、上記で触って完成したアプリをTSで書き換えてみることをしていました。
他の業務と並行でキャッチアップを行なっていき、約半月ほどでキャッチアップが完了しました。
またこの当時にはなかったのですが、N予備校にて、「付録 TypeScript, React, Next.js 編」という教材が新しく追加されており、現在の新卒研修にて使用されています。
2022年1月 toyアプリの作成
年明けの業務からは、キャッチアップで学んだ知識を活かして簡単な日報アプリの作成をすることになりました。
フロントエンドはNext.js、バックエンドはNestJSのフレームワークを使用し、バックエンドの開発→フロントエンドの開発の手順で作成しました。
フロントエンドのキャッチアップが目的なのでバックエンドの開発はNestJSの公式ドキュメントを参考に簡単なAPIを作成した程度でそこまで時間はかからず完成しました。
フロントエンドでは簡単なレイアウト作成→それに合わせたMUIのコンポーネントを使いながらコンポーネント作成→APIと連携させて画面を作成させる手順で開発をしていきました。
コンポーネントの作成ごとにPRを作成し、有識者にレビューをいただくなどして、より知識を増やしていきました。
基本的な実装が完成したら実際の教材入稿ツールで検討されている画面のお試し実装をtoyアプリの中でしていきました。
react-hook-formを利用した動的フォームの作成、ファイルのアップロード時の状態管理やqueuingなど、組み込みフックやライブラリを駆使して開発していきました。
またフロントエンドでの単体テスト、結合テストの手法についても学び、Testing Libraryを駆使してフロントエンドの品質を保つ方法を学びました。
2022年4月末
toyアプリの作成が終わったところで教材入稿ツールを開発するにあたってフロントエンドの技術選定をしていきました。
キャッチアップで使った技術やライブラリを参考に、フレームワークやビルドツール、UIツールなどを選定していきました。
教材入稿ツールの要件に合わせて候補を何個か出していき、それぞれにメリット、デメリットを記載してマネージャーやフロントエンドセクションの方とともに決めていきました。
2022年5月
この時期から最初のリリースの2023年6月まで約一年間に渡り、デザイナーから共有いただいたデザインをもとにフロントエンドの担当をしてきました。
最初のうちは1つの機能を作るのに5営業日ほど使ってしまうなどかなり時間がかかっていたり、実現が難しい機能が出てきた際にデザイナーさんやフロントエンドセクション、マネージャーなど多くの方に相談させていただいたりなど多くの方に支えられながら開発をしていきました。
この頃からデザイナーやコンテンツを入稿する方などとお話をする機会が増え、元々既存基盤の運用などしていた身としては他部署の方とコミュニケーションをとる機会がかなり増えました。
どのような効果が生まれたか？
個人
フロントエンド目線での物事の見方
フロントエンド開発の視点で物事を考えるようになり、バックエンドの開発やAPI定義をより効果的に行うことができるようになりました。
API定義に関してはどんなレスポンスがあると嬉しいのか、どのようなエラーがあると嬉しいのかを考えやすくなり、API定義をしていくスピードが非常に早くなったと感じております。
バックエンド目線でコード構造の保守性を意識した開発ができた
逆にもともとバックエンド開発をしていたおかげか、フロントエンド開発をしていくにあたりコードの見やすさ、保守性を意識して開発できました。
オブジェクト指向を意識したコンポーネント設計など、バックエンドの目線があるおかげでコードの品質向上に役立っていると考えております。
複雑なUIを実装する知識の獲得とデザインのアプローチ
複雑なUIを構築するために必要なライブラリや技術について学び、実践する機会が増えました。
デザイン仕様からこのコンポーネントが使えそうか、独自のデザインにおいて既存UIフレームワークのこのコンポーネントが使えるのではないかなど開発者目線でデザインをよりよくしていくことができるようになりました。
これにより、開発プロジェクトの実行可能性を向上させ、新しいアイデアの実現にも自信を持てるようになりました。
非エンジニアとのコミュニケーション
フロントエンド開発の知識を持つことで、非エンジニアとのコミュニケーションがスムーズになりました。
具体的にはデザイナーや教材を入稿するコンテンツ制作の方、リリースの前に行う品質保証を担当する方などです。
タスクへのアクセス範囲の拡大
フロントエンドとバックエンドの両方のタスクにアクセスできるようになり、仕事の待ち時間を最小限に抑えることができるようになりました。
例えば、フロントエンドの作業のレビュー待ちの際に、バックエンドのタスクに取り組むことができ、より効率的な時間の活用が可能になりました。
チーム内
バックエンド内での管理ツールの作成ができる力を得た
チーム内でバックエンドのシステムを開発する際に必要な管理ツールを自身で作成できる実力を手に入れることができました。
これにより、今後ツールを作ろうとなった際にもフロントエンドに依頼せずにセクション内で必要なツールを開発し、プロジェクトの効率化に貢献できるようになりました。
まとめ
この記事では、バックエンドエンジニアがフロントエンド開発に挑戦する経験についての影響に焦点を当てました。
自身のキャリアアップに真摯に向き合っていただき、またフロントエンド開発に必要な知識習得のサポートをしてくださるなど弊社の素晴らしい環境には大変感謝しております。
また、フロントエンド開発への挑戦により、個人の業務幅は広がり、新たなやりがいを感じる機会が多くなりました。現在の業務でもバックエンド,フロントエンドともに修正が必要なタスクや新しい機能の作成など一気通貫してタスクを行えるようになるなどより仕事をやりやすい環境になったと感じています。
そして2023年11月からセクションを分割し、バックエンドセクションから教材基盤開発セクションが新設されました。これによりさらに横断的に開発できる体制を作っていただけたので今後入ってくる方などのサポートができればと考えております。
We are hiring!
株式会社ドワンゴの教育事業では、一緒に未来の当たり前の教育をつくるメンバーを募集しています。 カジュアル面談も行っています。 お気軽にご連絡ください！
開発チームの取り組み、教育事業の今後については、他の記事や採用資料をご覧ください。
