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
LLMとSLMを活用!Azure Functions × モダンフロントエンドでつくる次世代アプリケーション
nahokoxxx
1
1.4k
ZOZOのGlobal ECを支えるフロントエンド / Frontend of ZOZO Global EC
nahokoxxx
5
3.7k
Other Decks in Programming
See All in Programming
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
110
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
110
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
260
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
670
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
220
CloudNativePGを布教したい
nnaka2992
0
110
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
910
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
230
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
880
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
250
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Why Our Code Smells
bkeepers
PRO
336
57k
Designing Experiences People Love
moore
140
23k
Code Review Best Practice
trishagee
67
18k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Become a Pro
speakerdeck
PRO
26
5.2k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
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