新卒1年目のフロントエンド開発での取り組み/New grad front-end efforts

2025年3月12日開催「kaonavi Tech Talk#20」で登壇した際の発表資料です。
https://kaonavi.connpass.com/event/344412/

◼︎イベント概要
カオナビでは、プロセスや、エンジニアリングについて日々改善をおこないながらアジャイルな開発を行なっています。
スクラムをスケールする際の工夫、品質向上へのチーム全体でのアプローチ、データ活用による顧客視点の醸成など、実りの多い内容が盛りだくさんです。
本イベントのアーカイブは下記からご覧いただけます！是非ご覧ください。
https://www.youtube.com/live/zQAlHonf-KA

◼︎kaonavi Tech Talkとは？
「"はたらく"にテクノロジーを実装し、個の力から社会の仕様を変える」というパーパスを掲げるカオナビによるオンラインイベントです！
HRTechのリーディングカンパニーであるカオナビの開発組織は、学習する組織として絶え間なく変化を続けてきました。
組織・チーム・プロセス・エンジニアリングなど多くの領域に対してTry&Errorを繰り返すことで学びを重ね、開発組織もサービスもカイゼンを行ってきました。
そうした学びは社内の勉強会や交流会で共有されてきましたが
カオナビの開発組織の文化・人を多くの方に知っていただきたい
社内外で学びを循環させ、コラボレーションを実現する場を創出したい
といった想いから、kaonavi Tech Talkは生まれました。
カオナビの開発最前線で活躍するメンバーがスピーカーを務め、日々の開発で得た学びを発信して参ります！
ぜひカジュアルにご参加いただければと思います。

Transcript

1. 新卒1年目の フロントエンド開発での取り組み kaonavi Tech Talk #20 ~フロントエンドスペシャル vol.3~ 2025.03.12 © kaonavi, inc.
2. 自己紹介💫 © kaonavi, inc. ✈ 赤嶺佳名子 (あかみね かなこ) ✈ 24新卒カオナビ入社 ✈ フロントエンドエンジニア 　 （もともとはバックエンド志望） ✈ スキル管理を開発するチームに所属 2
3. © kaonavi, inc. 3 未経験からのフロントエンドの挑戦
4. 学生時代の経験 • 統計・機械学習・AI・マーケティング • Webアプリ作成・VR / MR 🎓 データサイエンス学部での学び © kaonavi, inc. 4 • Webアプリ開発ではバックエンドに注力 • ロジックを考えて機能が実装できたときが楽しい • フロントエンドは最低限の経験のみ 💻 開発経験とバックエンド志向 自然とバックエンド 志望で入社
5. 研修で発見したフロントエンドの魅力 • ただ見た目を作るだけだと思っていた • フロントエンドの技術的な深さを知らなかった 💭 それまでの印象 © kaonavi, inc. 5 • デザインを実装に変換していく達成感 • ユーザーの体験を直接形作ることの面白さ • コードの変更がリアルタイムで反映されることの面白さ 🌟 初めて本格的にフロントエンドに触れてみて
6. フロントエンド選択の理由 ✨ 視覚的変化の楽しさ ◦ 書いたコードがすぐ反映されるから楽しい © kaonavi, inc. 6 🔮 いずれはフルスタックになりたい ◦ なら今挑戦しよう！！ 👤 チームのサポート体制 ◦ 未経験で不安だったけど、サポートしてくれる環境だった
7. © kaonavi, inc. 7 フロントエンドエンジニア人生スタート 🌱
8. 最初の一歩 🐣 • 文言修正・バグ修正・リファクタリング • スタイル修正が中心のタスク 🔧 軽微なタスクからスタート（チームの案件とは別軸） © kaonavi, inc. 8 • プロダクションコードの読み方 • フロントエンドの全体感を掴む • リリースまでの開発の一連の流れ • チーム担当機能の理解 📚 この時期に学んだこと
9. 本格的に案件に参画！！ • それまで：スタイル修正中心の単純なタスク • 本格的な案件：デザイン・仕様からコンポーネント設計と実装を担当 ↕ それまでとの大きな違い © kaonavi, inc. 9 • APIからデータを取得・加工して UIを表示する • コンポーネント間の状態管理と更新の流れ • 条件に応じた表示切り替えと分岐処理 • 動的な位置計算を伴うUIコンポーネントの実装 🤯 初めて直面した技術的な壁
10. チームの支えと学びのプロセス • ペアプロで基本的なパターンを教えてもらう • ヒントをもらって自分で実装してみる • わからなくなったらSlackで質問して、ハドルで教えてもらう 👫 チームの手厚いサポート © kaonavi, inc. 10 • 公式ドキュメントや技術記事で基礎知識のインプット • 過去の類似実装を参考にする • AIに質問する • 試行錯誤を繰り返す 📖 知識の幅を広げる
11. MR提出とレビューの嵐 • ローカルでの表示確認󰢐 • 仕様書の要件みたしてる󰢐 • Figma通りのデザイン󰢐 • これで完璧！MRだそう！！！ 🙌 実装できた！！！ © kaonavi, inc. 11
12. MR提出とレビューの嵐 • ローカルでの表示確認󰢐 • 仕様書の要件みたしてる󰢐 • Figma通りのデザイン󰢐 • これで完璧！MRだそう！！！ 🙌 実装できた！！！ © kaonavi, inc. 12 ⚡ ⚡ ⚡ だが... 現実は厳しかった ... ⚡ ⚡ ⚡
13. MR提出とレビューの嵐 • ローカルでの表示確認󰢐 • 仕様書の要件みたしてる󰢐 • Figma通りのデザイン󰢐 • これで完璧！MRだそう！！！ 🙌 実装できた！！！ © kaonavi, inc. 13 • 完璧だと思ってたMRが全然だめだった • 修正→再レビュー→修正を繰り返し ◦ 最終的に返信も含めると40件超えのコメント！ 😱 想像以上に細かい視点からのフィードバック ⚡ ⚡ ⚡ だが... 現実は厳しかった ... ⚡ ⚡ ⚡
14. レビューで指摘されたところ抜粋 © kaonavi, inc. 14 • この書き方だと冗長になってしまっている • 命名が誤解あたえそうなので変更したほうが良さそう • コンポーネントをもう少し分割できそう • スクリーンリーダーユーザーでも読み上げられるように • この値は定数化したほうが良い • 親要素の関係的にこの記述は不要 • この記述はコメントで補足してあげてもいいかも
15. フロントエンド開発で得た気づきと学び • 見た目が同じでも内部品質にこだわること • アクセシビリティなども考慮する必要があること • 保守性・拡張性まで考えた設計が必要なこと 󰔞 レビューから学んだこと © kaonavi, inc. 15 • 状況でベストプラクティスが変わる • 既存コードを参考にする際の見極めの難しさ • デザインから実装への落とし込みの複雑性 • UIの見た目以上に求められる技術的な深さ ⛰ 手を動かして実感したフロントエンドの奥深さ
16. 今までを振り返って • まだ技術的な課題はあるが、チームの支援のもとで自律的に進める力が身 についてきた • 簡単な修正や案件について、仕様相談から実装、テスト、リリースまでの一 連の流れを一人で担当できるようになった 📈 少しずつ成長を実感 © kaonavi, inc. 16 • 偉大な先輩方がたくさんいて、様々な面から学びを吸収できる • わからないことをすぐに相談できる風通しの良さがある • レビューで細かい指摘をもらえ、都度学びになる 🌈 成長を支える恵まれた環境
17. © kaonavi, inc. 17 まとめ
18. まとめ • 最初は不安だったが、チャレンジして本当に良かった • 毎日新しい学びがあるので楽しく開発できている 🌳 未経験からの挑戦を振り返って © kaonavi, inc. 18 • まだまだ技術的に足りない部分の向上 • 自信をもって「できる」と言える部分を増やす • 支えてもらう側から支える側へのステップアップ • 新しいことにも果敢に挑戦する気持ちを持つ 🚀 これから意識したいこと
19. ご清聴ありがとうございました！