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.7k
フロントエンドエンジニアのスキルについて / 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
2.6k
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
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
260
実践!App Intents対応
yuukiw00w
1
350
Rancher と Terraform
fufuhu
0
100
Laravel Boost 超入門
fire_arlo
1
120
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
1.1k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
令和最新版手のひらコンピュータ
koba789
14
8k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
TanStack DB ~状態管理の新しい考え方~
bmthd
2
320
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
A designer walks into a library…
pauljervisheath
207
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
For a Future-Friendly Web
brad_frost
179
9.9k
GitHub's CSS Performance
jonrohan
1031
460k
Become a Pro
speakerdeck
PRO
29
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
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