Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドエンジニアのスキルについて / About Frontend Developer...
Search
Nahoko Ushirokawa
June 19, 2019
Programming
4
2.8k
フロントエンドエンジニアのスキルについて / About Frontend Developer Skills
Nahoko Ushirokawa
June 19, 2019
Tweet
Share
More Decks by Nahoko Ushirokawa
See All by Nahoko Ushirokawa
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
2
3.5k
LLMとSLMを活用!Azure Functions × モダンフロントエンドでつくる次世代アプリケーション
nahokoxxx
1
1.7k
ZOZOのGlobal ECを支えるフロントエンド / Frontend of ZOZO Global EC
nahokoxxx
5
3.7k
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
220
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
CSC509 Lecture 08
javiergs
PRO
0
260
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
One Enishi After Another
snoozer05
PRO
0
160
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
CSC305 Lecture 09
javiergs
PRO
0
320
CSC305 Lecture 10
javiergs
PRO
0
280
NIKKEI Tech Talk#38
cipepser
0
280
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
940
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
For a Future-Friendly Web
brad_frost
180
10k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
The Invisible Side of Design
smashingmag
302
51k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Context Engineering - Making Every Token Count
addyosmani
8
310
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Transcript
フロントエンドエンジニアの スキルについて ZOZOテクノロジーズMeetup #10 for Frontend Engineer 株式会社ZOZOテクノロジーズ 開発部 松井
菜穂子 Copyright © ZOZO Technologies, Inc.
© ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ 開発部 松井 菜穂子 • 1992年生まれ・関西大学
外国語学部卒業 • 新卒でITコンサル系会社にエンジニアとして入社 • その後複数の企業でエンジニアリングに従事 • 個人としてWEB制作受託事業を営む • 2018年5月 ZOZOテクノロジーズに入社 • 現在はWEBフロントエンドをメインに色々 2
© ZOZO Technologies, Inc. 「こんなスキルを 身に付けるべきだ!」 お話ししないこと 3
© ZOZO Technologies, Inc. 「身に付けるべきスキルは何か こんな風に 検討してみては?」 お話しすること 4
© ZOZO Technologies, Inc. スキルについて考え始めた経緯 5
© ZOZO Technologies, Inc. • 以前:デザイナーとフロントエンドエンジニアの線引きが曖昧 • 最近:マークアップがどちらの管轄か明確にする現場が増えてきた フロントエンドエンジニア ≠
デザイナー 6 それでも… HTML / CSS デザイン JavaScript デザイナー デザイナー フロントエンドエンジニア フロントエンドエンジニア
© ZOZO Technologies, Inc. • 現場でよく依頼される仕事 フロントエンドエンジニアは考えることがたくさん 7 画面プロトタイプ作って! バグの原因の切り分けをして!
SEO対策して! SPAで作って! jQueryコード保守して! サイトパフォーマンス上げて! モバイルアプリ作って! 画面仕様書書いて! テストシナリオ作って! CMSのカスタマイズして! 全部できないといけない?
© ZOZO Technologies, Inc. • 勉強会や技術記事で見聞きするキーワード フロントエンドエンジニアは考えることがたくさん 8 Service Worker
Web Assembly Web Native BaaS Backend for Frontend Web Component 勉強しつづけないといけない? Flux
© ZOZO Technologies, Inc. 実際に達成しようとすると… 9 • ① フロントエンドに少しでも関わるスキルは全部身につける? •
全て勉強する時間はない • 勉強するモチベーションが低い領域もある • ② ジェネラリスト or エキスパート? • 器用貧乏になる • 求められないスキルになるかも • ③ マークアップエンジニア or アプリケーションエンジニア? • どこまでがマークアップ? • どちらも出来た方が都合が良いときも多い
© ZOZO Technologies, Inc. ①・②・③どれをとっても何かを諦めるしかない? 自分のやりたいことと現場で求められることの板挟み? だからフロントエンドは辛いと言われる? 10 スキルについて考え始めた経緯 悩み
© ZOZO Technologies, Inc. 状況の整理 11
© ZOZO Technologies, Inc. スキル分類の認識は人によって異なることが多い 12 マークアップ SEO デザイン コミュニケーション
ドキュメント 仕様設計 なんとなくユーザー寄りっぽい分類 インフラ アーキテクチャ なんとなく技術寄りっぽい分類 バックエンド 関連 パフォーマンス • とある非フロントエンドエンジニアの認識
© ZOZO Technologies, Inc. スキル分類の認識は人によって異なることが多い 13 マークアップ スタイリング デザイン インフラ
パフォーマンス なんとなくユーザー寄りっぽい分類 • とあるフロントエンドエンジニアの認識
© ZOZO Technologies, Inc. • とある納期のタイトな案件を抱える現場 現場によって要望が相当異なる 14 • とある古いフロントエンドコードを抱える現場
• とあるバックエンドエンジニアの多い現場 マークアップ コード設計 品質 > CSS設計 新技術 > デザイン SEO対策 > マークアップ 画面設計
© ZOZO Technologies, Inc. 自分の興味のあるスキルと求められるスキルを 同時に身につけるのが困難なのは、 認識齟齬が原因なのではないか? 15
© ZOZO Technologies, Inc. 解決のための取り組み 16
© ZOZO Technologies, Inc. • 「ユーザー寄りのフロントエンドエンジニアを目指して勉強します。」 スキルは大分類ではなく、細かい項目ベースで考えた方が良さそう 17 • エンジニアが目標を立てるとき
「マークアップのスキルを磨くとともに、UX設計やリッチアニメーションにも 挑戦します。アクセシビリティも勉強してみます。」 • 「モダンなフロントエンドが書けるエンジニアを募集します。」 • 現場がエンジニアを募集するとき 「SPAフレームワークでの開発経験者を募集します。 バックエンドAPIの設計やDevOpsのスキルは歓迎します。」
© ZOZO Technologies, Inc. • まずは社内で細かい項目の認識を合わせるため、スキルマップを作成 スキルマップを作成 18 • 主要スキル
• 付加スキル ※ 主要/付加やカテゴリ・レベルの分類は便宜上。 一人のエンジニアがまとめて身につけるべきスキルという意味合いではない
© ZOZO Technologies, Inc. • 想像したよりもたくさんの領域がある • 全てのスキル列挙すると膨大な数になる • 自分のスキルは全てをカバーするようなものではない
• フロントエンドエンジニアでなくても出来ることもあった • 数年後には大きく変わっているかもしれない • 現場によって求められるスキルが相当異なりそう 気づき 19
© ZOZO Technologies, Inc. • 全員が入力できるスキルシートを作成。自己申告で評価 試しにスキルマップに沿ってメンバーのスキルを整理 20 ※ 実際には全て横繋ぎになっている
1行=1メンバー
© ZOZO Technologies, Inc. 気づき 21 • 「サービス寄り」「技術寄り」に二分できるような傾向はない • 「何でもできる」人はいない
• 「付加スキル」を伸ばしているメンバーもいる
© ZOZO Technologies, Inc. 提案 22
© ZOZO Technologies, Inc. • スキルを細かく整理 • 自分のスキルを求めている現場を選ぶ or
現場が求めるスキルを習得する スキルについての考え方の提案 23 スキルA スキルC スキルB 自分 現場 スキルA・スキルBを 持っている人がほしい! スキルA スキルC 自分 スキルB 習得する 選ぶ
© ZOZO Technologies, Inc. • 現場が正しく「求めるスキル」を表現できるようにする スキルについての考え方の提案 24 スキルA・スキルBを 持っている人がほしい!
何でもできる人が ほしい! 細かく整理されたスキル項目
© ZOZO Technologies, Inc. • スキル構成のパターンはたくさんある スキルについての考え方の提案 25 or スキルA
スキルB スキルC スキルD スキルE スキルA スキルB スキルC スキルD スキルE スキルA スキルB スキルC スキルD スキルE
© ZOZO Technologies, Inc. それぞれに合った適切なスキルを細かい粒度で選択すれば フロントエンドエンジニアは辛くない 自分が興味のある領域のスキルを伸ばすこと 現場の役に立つスキルを伸ばすこと どちらも現実的に実現できそう
26
© ZOZO Technologies, Inc. これからも成長していくフロントエンド界隈を それぞれのスキルで盛り上げていきましょう! 27
© ZOZO Technologies, Inc. フロントエンドエンジニア募集中! 28 • https://tech.zozo.com/recruit/ • 色々なスキルの組み合わせのエンジニアが在籍
• 求めるスキルも現場によって様々。自分に合う環境を社内で見つけやすい SPA プロト タイプ DevOps SEO対策 アニメー ション SPA プロト タイプ DevOps SEO対策 アニメー ション SPA プロト タイプ UX設計 SEO対策 アニメー ション
None