[Developers Boost 2024] 4年半の現場経験から見えてきた、フロントエンドエンジニアに必要なスキル

Transcript

1. 4年半の現場経験から見えてきた、フロ ントエンドエンジニアに必要なスキル 坂村洋輔
2. 自己紹介 • 坂村洋輔 • 1994年5月3日生まれ • 簡単な経歴 ◦ 新卒でITベンダーに入社し、 2年半ほどエンジニアとして就業 ◦ Web開発をやりたい気持ちから ニジボックスに入社し、 約4年半が経過 • 興味のある技術 ◦ Webフロントエンド ◦ Node.js, Rust
3. 本日お話しすること
4. ニジボックスに入社してから４年半、 その中で担当案件やポジションも変わっていった
5. 一口にフロントエンドエンジニアといっても、 仕事内容は現場によって多種多様
6. 現場やポジションによって 「求められていること」も変化する
7. それに加えて、技術的にもフロントエンド開発は 学ぶことがたくさんある
8. フロントエンド開発は学ぶことがたくさんある ネットワーク A11y ブラウザ HTML, CSS, JavaScript, WebAPI ビルドツール, Linter Package Manager などなど...... セキュリティ テスト フレームワーク,ラ イブラリ
9. 求められることは変化してい くし、 勉強することもたくさんあるし 大変......
10. エンジニアの価値発揮ってどんな事があるだろう🤔 プレイヤーとして、組織のリーダーとしての経験を踏まえて、お伝えで きるところをありのまま伝えたい
11. 経歴
12. ニジボックス入 社 前職もエンジニアでは あったが、toCのフロント エンド開発は未経験 エンハンス案 件 HTML, JavaScript, CSS(SCSS) を利用し た開発がメイン スタディサプリ TypeScript, Next.js, GraphQLなどを利用 した開発 小学講座の 開発開始 大型エンハンスリリー スにむけて開発する チームに移動 現在 ニジボックス側のグルー プリーダーになる
13. エンハンス案件
14. エンハンス開発 • リクルートグループが運営するWebアプリケーションのエンハンス • HTML, SCSS, JavaScriptを利用して、サイト本体のエンハンス開発やLP の作成が主な開発内容 • フロントエンドエンジニアは基本一人で一案件を担当し、開発を進める ◦ そのため、同案件の担当ディレクターさんやデザイナーさんとのコミュニケーションがとても 重要
15. 振り返ると価値発揮につながっていたと感じること • 納期を見据えた適切なタイミングでの報連相 • ピクセルパーフェクトなデザイン再現 • プロダクトのルールに則った可読性の高いコーディング • メンバー追加のための受け入れ体制強化 • 技術力向上、スムーズな案件進行のためのドキュメント整備 • などなど......
16. スタディサプリ
17. スタディサプリ 小学生、中学生向けの新規Webアプリケーションの開発
18. スタディサプリ
19. 案件概要 • スタディサプリ小学講座、中学講座の新規Webアプリケーション開発 • 基本スクラム開発をベースに、チーム状況に合わせてアレンジしながら開発
20. 技術スタック • フロントエンド ◦ Next.js ◦ Apollo Client • バックエンド(サービスが複数存在) ◦ Express ◦ Apollo Server ◦ Prisma ◦ Ruby on Rails
21. 参画当初は何もわからなかった
22. いろいろなことが初めてだった • 実務でのモダンフロントエンド開発 • スクラム開発 • GitHubを利用したチーム開発 • GraphQL • CI/CD • Docker • AWS • などなど.......(たぶんもっとあった)
23. とにかく質問ばかりだった
24. 当時優しくフォローしてくださったエンジニアの皆様には本当に頭が 上がりません😭
25. できそうなところはとにかく手を上げた それほど難しくない作業 や、小さいissueなどは積 極的に着手した。
26. どうやったら未熟な自分がチームの役に立てるかを 意識しながら動いた • 小さなissueや作業タスクを積極的に取っていく • 率先してPR reviewをする ◦ 他のエンジニアが書いたコードを読んで理解し、質問や自分の意見を述べること は何よりの勉強 • わからないことがあったら騒ぐ
27. どうやったら未熟な自分がチームの役に立てるかを 意識しながら動いた • 小さなissueや作業タスクを積極的に取っていく • 率先してPR reviewをする • わからないことがあったら騒ぐ チームの役に立ってる...?
28. 相談した内容はチャットツールに残る • なにか問題が起きたときは、他のメンバーもそこで詰まることが多い • 自分以外のメンバーが同じ箇所で詰まったときも、 チャットを見返すことで解決できることもある • つまり、相談することはそのまま共有ナレッジの蓄積につながっていく
29. ガンガン質問、相談してこうぜ！（自戒）
30. ここからはいくつか対応した案件の具体例を紹介
31. スライドコンテンツ実装
32. スライドコンテンツとは
33. 小学生向けに開発した新しい学習コンテンツ • 従来の学習コンテンツと異なり、問題に回答するだけでなく、動画や音声が 多く活用され、よりインタラクティブに学習できるコンテンツ
34. 着手時点ではまだ要件も固まっていなかったり、仕様も複雑だった り、高難度なissue
35. 基本ペアプロで開発を進めた • 仕様はコンテンツ制作を担当する別チームとデザイナーと開発チームで相 談しながら決定 • 開発タスクはissueリードのエンジニアの方と相談しながら基本ペアプロで進 めた • 常に同期的に作業ができるわけではない ◦ 一人でissueを持って対応するのとは違うスキルが必要 ◦ 非同期ではあるが、常にコンテキストを共有して作業するイメージ ◦ 設計はもちろん、作業の順序や内容についてあらかじめ同意を取っておくことが大事
36. バックエンドタスクへの染み出しもやっていった
37. もともと自分にやっていきがあった 前職や副業ではバックエンド の経験もある。自分の今後の キャリアを考えていったときに バックエンドのスキルも伸ば していきたし、実務経験も積 んでいきたい。
38. バックエンドのタスクも担当させていただくことに • 設計から実装、テスト作成まで担当した • 各フェーズでは先輩エンジニアの方にこまめにレビューしていただいた
39. 経験できて良かったこと • 後方互換性を担保した設計、開発の難しさを実感 ◦ エンハンス開発だからこその難しさを経験できてよかった • 複数サービスをまたいだ開発
40. 他方面への染み出し • フロントエンドエンジニアだからといって、バックエンドのことやUI、デザイン のことを全く知らなくて良い訳では無い • やっていきがある人が少しずつ染み出していくことで、チームの能力も ちょっとずつ広がっていく UI/UXの知識 バックエンドの知 識 フロントエンド チーム
41. ブラウザ依存のBug対応
42. 縦書き表示のコンテンツが存在する
43. 縦書き表示のWebコンテンツが少ないこともあり、ブラウザ依存の Bugに遭遇することが多い
44. 再現性が低かったり、手順によって事象が変わったりするため調査 が大変
45. たとえば
46. 縦書き表示のコンテンツは左から右にスクロール
47. 縦書き表示のコンテンツは左から右にスクロール ボタンタップの際にスクロール が右端にリセットされてしまう
48. 地道にブラウザやライブラリの挙動を調査......
49. 地道な調査ができることも重要なスキル • 開発者ツールのパフォーマンスタブやネットワークタブを使ってデバッグで きることもスキルの一つ • ライブラリやブラウザの挙動を細かく追いかけることで解決できた
50. 組織的な取り組み
51. メンバーが成長できる環境 • 社内研修 • 社内LT • 他プロジェクトに参画しているメンバーとの知見共有 • スキルシート • メンバーの育成 • などなど......
52. メンバーが成長できる環境 • 社内研修 • 社内LT • 他プロジェクトに参画しているメンバーとの知見共有 • スキルシート • メンバーの育成 • などなど......
53. メンバーの育成の背景 • バックエンドエンジニアとして同プロジェクトに参画しているメンバーが、フロ ントエンドの案件を担当することに • モダンフロントエンド開発の知識をより定着させ、実務をスムーズに進めるこ とができるようになることが目標
54. メンバーの育成計画 スキルシートで 学習開始前の スキル感を把 握 スキルに自信 のない項目を どう学習進め たら伸ばせる かの相談 実際に学習 わからない箇 所があれば週 1の1on1や Slackで都度 解消 もう一度スキル シートに回答し てもらい、成長 度合いを測る 繰り返し
55. 実際にやってみてわかったこと • 適切な学習の題材選定の難しさ • スキルシートに沿って偏りなく学習を進めることを意識することが必要 • 自分の計画性の甘さに気づいた
56. 題材の選定 スキルシートの項目を伸ばす、という目標に対してただ漠然と「アプリケーション を作ってみましょう」では弱い この項目を伸ばすには、こういう機能が作れるようになるとカバーできそう、と見 込んでおく必要 これは自分が体験しておかないとなかなかわからないこと。特に業務でやらない ような範囲は日頃の勉強が大事
57. 伸ばしたい項目にフォーカスした動き 項目ごとに理解できていな い箇所をリストアップしてもら い、そこの理解度を挙げら れるような質問会を開いた
58. 自分の計画性の甘さに気付いた 単にこのスキルシートの項目を伸ばしていきましょう、では甘かった 育成は業務に入ってからの負担減が一つの目的 だからこそ、業務に入る前にスキルシートの「どの項目」を「どの程度」まで理解し ている状態にしたい、という詳細な計画が必要だったな、と学んだ
59. まとめ
60. 約4年半のニジボックス人生を振り返って プレイヤーとして、グループリーダーとして、多くの経験をさせてもらった 振り返ってみると少しずつ新しいことに挑戦してきた４年半だったように感じる 今後も新しい挑戦を続けて、よりエンジニアとして成長していきたい
61. ありがとうございました！