Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
フロントエンドエンジニアのスキルについて / About Frontend Developer Skills
Nahoko Matsui
June 19, 2019
Programming
5
2.1k
フロントエンドエンジニアのスキルについて / About Frontend Developer Skills
Nahoko Matsui
June 19, 2019
Tweet
Share
More Decks by Nahoko Matsui
See All by Nahoko Matsui
ZOZOのGlobal ECを支えるフロントエンド / Frontend of ZOZO Global EC
nahokomatsui
5
2.9k
Other Decks in Programming
See All in Programming
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
budougumi0617
0
1k
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
0
280
You CANt teach an old dog new tricks
michaelbukachi
0
110
Milestoner
bkuhlmann
1
200
dbtとBigQueryで始めるData Vault入門
kazk1018
0
170
コードの解析と言語習得の心得
jinjin33333
0
130
Language Summit 2022: WebAssembly: Python in the browser and beyond
tiran
2
310
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.5k
TDX22: User-Mode DB Ops
ca_peterson
3
1.1k
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
28
18k
From Java 11 to 17 and beyond
josepaumard
0
290
roadmap to rust 2024
matsu7874
1
660
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
16
8.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
314
19k
The Art of Programming - Codeland 2020
erikaheidi
31
5.8k
Product Roadmaps are Hard
iamctodd
34
6.1k
Practical Orchestrator
shlominoach
178
8.6k
Building Flexible Design Systems
yeseniaperezcruz
310
33k
It's Worth the Effort
3n
172
25k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Designing for Performance
lara
596
63k
Fireside Chat
paigeccino
11
1.2k
Ruby is Unlike a Banana
tanoku
91
9.2k
The Mythical Team-Month
searls
208
39k
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