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.2k
ZOZOのGlobal ECを支えるフロントエンド / Frontend of ZOZO Global EC
nahokoxxx
5
3.6k
Other Decks in Programming
See All in Programming
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
370
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1k
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
CSC509 Lecture 08
javiergs
PRO
0
110
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
A Philosophy of Restraint
colly
203
16k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing for Performance
lara
604
68k
Writing Fast Ruby
sferik
626
61k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Typedesign – Prime Four
hannesfritz
39
2.4k
Thoughts on Productivity
jonyablonski
67
4.3k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
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