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

by sakamuuy

Slide 1

Slide 1 text

4年半の現場経験から見えてきた、フロントエンドエンジニアに必要なスキル坂村洋輔

Slide 2

Slide 2 text

自己紹介 ● 坂村洋輔 ● 1994年5月3日生まれ ● 簡単な経歴 ○ 新卒でITベンダーに入社し、 2年半ほどエンジニアとして就業 ○ Web開発をやりたい気持ちからニジボックスに入社し、約4年半が経過 ● 興味のある技術 ○ Webフロントエンド ○ Node.js, Rust

Slide 3

Slide 3 text

本日お話しすること

Slide 4

Slide 4 text

ニジボックスに入社してから４年半、その中で担当案件やポジションも変わっていった

Slide 5

Slide 5 text

一口にフロントエンドエンジニアといっても、仕事内容は現場によって多種多様

Slide 6

Slide 6 text

現場やポジションによって「求められていること」も変化する

Slide 7

Slide 7 text

それに加えて、技術的にもフロントエンド開発は学ぶことがたくさんある

Slide 8

Slide 8 text

フロントエンド開発は学ぶことがたくさんあるネットワーク A11y ブラウザ HTML, CSS, JavaScript, WebAPI ビルドツール, Linter Package Manager などなど...... セキュリティテストフレームワーク,ライブラリ

Slide 9

Slide 9 text

求められることは変化していくし、勉強することもたくさんあるし大変......

Slide 10

Slide 10 text

エンジニアの価値発揮ってどんな事があるだろう🤔 プレイヤーとして、組織のリーダーとしての経験を踏まえて、お伝えできるところをありのまま伝えたい

Slide 11

Slide 11 text

経歴

Slide 12

Slide 12 text

ニジボックス入社前職もエンジニアではあったが、toCのフロントエンド開発は未経験エンハンス案件 HTML, JavaScript, CSS(SCSS) を利用した開発がメインスタディサプリ TypeScript, Next.js, GraphQLなどを利用した開発小学講座の開発開始大型エンハンスリリースにむけて開発するチームに移動現在ニジボックス側のグループリーダーになる

Slide 13

Slide 13 text

エンハンス案件

Slide 14

Slide 14 text

エンハンス開発 ● リクルートグループが運営するWebアプリケーションのエンハンス ● HTML, SCSS, JavaScriptを利用して、サイト本体のエンハンス開発やLP の作成が主な開発内容 ● フロントエンドエンジニアは基本一人で一案件を担当し、開発を進める ○ そのため、同案件の担当ディレクターさんやデザイナーさんとのコミュニケーションがとても重要

Slide 15

Slide 15 text

振り返ると価値発揮につながっていたと感じること ● 納期を見据えた適切なタイミングでの報連相 ● ピクセルパーフェクトなデザイン再現 ● プロダクトのルールに則った可読性の高いコーディング ● メンバー追加のための受け入れ体制強化 ● 技術力向上、スムーズな案件進行のためのドキュメント整備 ● などなど......

Slide 16

Slide 16 text

スタディサプリ

Slide 17

Slide 17 text

スタディサプリ小学生、中学生向けの新規Webアプリケーションの開発

Slide 18

Slide 18 text

スタディサプリ

Slide 19

Slide 19 text

案件概要 ● スタディサプリ小学講座、中学講座の新規Webアプリケーション開発 ● 基本スクラム開発をベースに、チーム状況に合わせてアレンジしながら開発

Slide 20

Slide 20 text

技術スタック ● フロントエンド ○ Next.js ○ Apollo Client ● バックエンド(サービスが複数存在) ○ Express ○ Apollo Server ○ Prisma ○ Ruby on Rails

Slide 21

Slide 21 text

参画当初は何もわからなかった

Slide 22

Slide 22 text

いろいろなことが初めてだった ● 実務でのモダンフロントエンド開発 ● スクラム開発 ● GitHubを利用したチーム開発 ● GraphQL ● CI/CD ● Docker ● AWS ● などなど.......(たぶんもっとあった)

Slide 23

Slide 23 text

とにかく質問ばかりだった

Slide 24

Slide 24 text

当時優しくフォローしてくださったエンジニアの皆様には本当に頭が上がりません😭

Slide 25

Slide 25 text

できそうなところはとにかく手を上げたそれほど難しくない作業や、小さいissueなどは積極的に着手した。

Slide 26

Slide 26 text

どうやったら未熟な自分がチームの役に立てるかを意識しながら動いた ● 小さなissueや作業タスクを積極的に取っていく ● 率先してPR reviewをする ○ 他のエンジニアが書いたコードを読んで理解し、質問や自分の意見を述べることは何よりの勉強 ● わからないことがあったら騒ぐ

Slide 27

Slide 27 text

どうやったら未熟な自分がチームの役に立てるかを意識しながら動いた ● 小さなissueや作業タスクを積極的に取っていく ● 率先してPR reviewをする ● わからないことがあったら騒ぐチームの役に立ってる...?

Slide 28

Slide 28 text

相談した内容はチャットツールに残る ● なにか問題が起きたときは、他のメンバーもそこで詰まることが多い ● 自分以外のメンバーが同じ箇所で詰まったときも、チャットを見返すことで解決できることもある ● つまり、相談することはそのまま共有ナレッジの蓄積につながっていく

Slide 29

Slide 29 text

ガンガン質問、相談してこうぜ！（自戒）

Slide 30

Slide 30 text

ここからはいくつか対応した案件の具体例を紹介

Slide 31

Slide 31 text

スライドコンテンツ実装

Slide 32

Slide 32 text

スライドコンテンツとは

Slide 33

Slide 33 text

小学生向けに開発した新しい学習コンテンツ ● 従来の学習コンテンツと異なり、問題に回答するだけでなく、動画や音声が多く活用され、よりインタラクティブに学習できるコンテンツ

Slide 34

Slide 34 text

着手時点ではまだ要件も固まっていなかったり、仕様も複雑だったり、高難度なissue

Slide 35

Slide 35 text

基本ペアプロで開発を進めた ● 仕様はコンテンツ制作を担当する別チームとデザイナーと開発チームで相談しながら決定 ● 開発タスクはissueリードのエンジニアの方と相談しながら基本ペアプロで進めた ● 常に同期的に作業ができるわけではない ○ 一人でissueを持って対応するのとは違うスキルが必要 ○ 非同期ではあるが、常にコンテキストを共有して作業するイメージ ○ 設計はもちろん、作業の順序や内容についてあらかじめ同意を取っておくことが大事

Slide 36

Slide 36 text

バックエンドタスクへの染み出しもやっていった

Slide 37

Slide 37 text

もともと自分にやっていきがあった前職や副業ではバックエンドの経験もある。自分の今後のキャリアを考えていったときにバックエンドのスキルも伸ばしていきたし、実務経験も積んでいきたい。

Slide 38

Slide 38 text

バックエンドのタスクも担当させていただくことに ● 設計から実装、テスト作成まで担当した ● 各フェーズでは先輩エンジニアの方にこまめにレビューしていただいた

Slide 39

Slide 39 text

経験できて良かったこと ● 後方互換性を担保した設計、開発の難しさを実感 ○ エンハンス開発だからこその難しさを経験できてよかった ● 複数サービスをまたいだ開発

Slide 40

Slide 40 text

他方面への染み出し ● フロントエンドエンジニアだからといって、バックエンドのことやUI、デザインのことを全く知らなくて良い訳では無い ● やっていきがある人が少しずつ染み出していくことで、チームの能力もちょっとずつ広がっていく UI/UXの知識バックエンドの知識フロントエンドチーム

Slide 41

Slide 41 text

ブラウザ依存のBug対応

Slide 42

Slide 42 text

縦書き表示のコンテンツが存在する

Slide 43

Slide 43 text

縦書き表示のWebコンテンツが少ないこともあり、ブラウザ依存の Bugに遭遇することが多い

Slide 44

Slide 44 text

再現性が低かったり、手順によって事象が変わったりするため調査が大変

Slide 45

Slide 45 text

たとえば

Slide 46

Slide 46 text

縦書き表示のコンテンツは左から右にスクロール

Slide 47

Slide 47 text

縦書き表示のコンテンツは左から右にスクロールボタンタップの際にスクロールが右端にリセットされてしまう

Slide 48

Slide 48 text

地道にブラウザやライブラリの挙動を調査......

Slide 49

Slide 49 text

地道な調査ができることも重要なスキル ● 開発者ツールのパフォーマンスタブやネットワークタブを使ってデバッグできることもスキルの一つ ● ライブラリやブラウザの挙動を細かく追いかけることで解決できた

Slide 50

Slide 50 text

組織的な取り組み

Slide 51

Slide 51 text

メンバーが成長できる環境 ● 社内研修 ● 社内LT ● 他プロジェクトに参画しているメンバーとの知見共有 ● スキルシート ● メンバーの育成 ● などなど......

Slide 52

Slide 52 text

Slide 53

Slide 53 text

メンバーの育成の背景 ● バックエンドエンジニアとして同プロジェクトに参画しているメンバーが、フロントエンドの案件を担当することに ● モダンフロントエンド開発の知識をより定着させ、実務をスムーズに進めることができるようになることが目標

Slide 54

Slide 54 text

メンバーの育成計画スキルシートで学習開始前のスキル感を把握スキルに自信のない項目をどう学習進めたら伸ばせるかの相談実際に学習わからない箇所があれば週 1の1on1や Slackで都度解消もう一度スキルシートに回答してもらい、成長度合いを測る繰り返し

Slide 55

Slide 55 text

実際にやってみてわかったこと ● 適切な学習の題材選定の難しさ ● スキルシートに沿って偏りなく学習を進めることを意識することが必要 ● 自分の計画性の甘さに気づいた

Slide 56

Slide 56 text

題材の選定スキルシートの項目を伸ばす、という目標に対してただ漠然と「アプリケーションを作ってみましょう」では弱いこの項目を伸ばすには、こういう機能が作れるようになるとカバーできそう、と見込んでおく必要これは自分が体験しておかないとなかなかわからないこと。特に業務でやらないような範囲は日頃の勉強が大事

Slide 57

Slide 57 text

伸ばしたい項目にフォーカスした動き項目ごとに理解できていない箇所をリストアップしてもらい、そこの理解度を挙げられるような質問会を開いた

Slide 58

Slide 58 text

自分の計画性の甘さに気付いた単にこのスキルシートの項目を伸ばしていきましょう、では甘かった育成は業務に入ってからの負担減が一つの目的だからこそ、業務に入る前にスキルシートの「どの項目」を「どの程度」まで理解している状態にしたい、という詳細な計画が必要だったな、と学んだ

Slide 59

Slide 59 text

まとめ

Slide 60

Slide 60 text

約4年半のニジボックス人生を振り返ってプレイヤーとして、グループリーダーとして、多くの経験をさせてもらった振り返ってみると少しずつ新しいことに挑戦してきた４年半だったように感じる今後も新しい挑戦を続けて、よりエンジニアとして成長していきたい

Slide 61

Slide 61 text

ありがとうございました！