フロントエンドエンジニアのスキルについて / About Frontend Developer Skills

Transcript

1. フロントエンドエンジニアの
 スキルについて
 ZOZOテクノロジーズMeetup #10 for Frontend Engineer
 株式会社ZOZOテクノロジーズ
 開発部
 松井

   菜穂子 Copyright © ZOZO Technologies, Inc.

2. © ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 開発部
 松井 菜穂子
 • 1992年生まれ・関西大学

   外国語学部卒業
 • 新卒でITコンサル系会社にエンジニアとして入社
 • その後複数の企業でエンジニアリングに従事
 • 個人としてWEB制作受託事業を営む
 • 2018年5月 ZOZOテクノロジーズに入社
 • 現在はWEBフロントエンドをメインに色々
 2

3. © ZOZO Technologies, Inc. 「こんなスキルを
 身に付けるべきだ！」
 お話ししないこと
 3

4. © ZOZO Technologies, Inc. 「身に付けるべきスキルは何か
 こんな風に
 検討してみては？」
 お話しすること
 4

5. © ZOZO Technologies, Inc. スキルについて考え始めた経緯
 5

6. © ZOZO Technologies, Inc. • 以前：デザイナーとフロントエンドエンジニアの線引きが曖昧
 • 最近：マークアップがどちらの管轄か明確にする現場が増えてきた
 フロントエンドエンジニア ≠

   デザイナー
 6 それでも…
 HTML / CSS デザイン JavaScript デザイナー
 デザイナー
 フロントエンドエンジニア
 フロントエンドエンジニア


7. © ZOZO Technologies, Inc. • 現場でよく依頼される仕事
 フロントエンドエンジニアは考えることがたくさん
 7 画面プロトタイプ作って！ バグの原因の切り分けをして！


   SEO対策して！
 SPAで作って！
 jQueryコード保守して！
 サイトパフォーマンス上げて！
 モバイルアプリ作って！
 画面仕様書書いて！
 テストシナリオ作って！
 CMSのカスタマイズして！
 全部できないといけない？


8. © ZOZO Technologies, Inc. • 勉強会や技術記事で見聞きするキーワード
 フロントエンドエンジニアは考えることがたくさん
 8 Service Worker


   Web Assembly
 Web Native
 BaaS
 Backend for Frontend
 Web Component
 勉強しつづけないといけない？
 
 Flux


9. © ZOZO Technologies, Inc. 実際に達成しようとすると…
 9 • ① フロントエンドに少しでも関わるスキルは全部身につける？
 •

   全て勉強する時間はない
 • 勉強するモチベーションが低い領域もある
 • ② ジェネラリスト or エキスパート？
 • 器用貧乏になる
 • 求められないスキルになるかも
 • ③ マークアップエンジニア or アプリケーションエンジニア？
 • どこまでがマークアップ？
 • どちらも出来た方が都合が良いときも多い


10. © ZOZO Technologies, Inc. ①・②・③どれをとっても何かを諦めるしかない？
 自分のやりたいことと現場で求められることの板挟み？
 だからフロントエンドは辛いと言われる？
 10 スキルについて考え始めた経緯
 悩み


11. © ZOZO Technologies, Inc. 状況の整理
 11

12. © ZOZO Technologies, Inc. スキル分類の認識は人によって異なることが多い
 12 マークアップ SEO デザイン コミュニケーション

    ドキュメント 仕様設計 なんとなくユーザー寄りっぽい分類
 インフラ アーキテクチャ なんとなく技術寄りっぽい分類
 バックエンド 関連 パフォーマンス • とある非フロントエンドエンジニアの認識


13. © ZOZO Technologies, Inc. スキル分類の認識は人によって異なることが多い
 13 マークアップ スタイリング デザイン インフラ

    パフォーマンス なんとなくユーザー寄りっぽい分類
 • とあるフロントエンドエンジニアの認識


14. © ZOZO Technologies, Inc. • とある納期のタイトな案件を抱える現場
 現場によって要望が相当異なる
 14 • とある古いフロントエンドコードを抱える現場


    • とあるバックエンドエンジニアの多い現場
 マークアップ コード設計 品質 ＞
 CSS設計 新技術 ＞
 デザイン SEO対策 ＞
 マークアップ 画面設計

15. © ZOZO Technologies, Inc. 自分の興味のあるスキルと求められるスキルを
 同時に身につけるのが困難なのは、
 認識齟齬が原因なのではないか？
 15

16. © ZOZO Technologies, Inc. 解決のための取り組み
 16

17. © ZOZO Technologies, Inc. • 「ユーザー寄りのフロントエンドエンジニアを目指して勉強します。」
 スキルは大分類ではなく、細かい項目ベースで考えた方が良さそう
 17 • エンジニアが目標を立てるとき


    「マークアップのスキルを磨くとともに、UX設計やリッチアニメーションにも
 　挑戦します。アクセシビリティも勉強してみます。」
 • 「モダンなフロントエンドが書けるエンジニアを募集します。」
 • 現場がエンジニアを募集するとき
 「SPAフレームワークでの開発経験者を募集します。
 　バックエンドAPIの設計やDevOpsのスキルは歓迎します。」


18. © ZOZO Technologies, Inc. • まずは社内で細かい項目の認識を合わせるため、スキルマップを作成
 スキルマップを作成
 18 • 主要スキル


    • 付加スキル
 ※ 主要／付加やカテゴリ・レベルの分類は便宜上。
 　 一人のエンジニアがまとめて身につけるべきスキルという意味合いではない

19. © ZOZO Technologies, Inc. • 想像したよりもたくさんの領域がある
 • 全てのスキル列挙すると膨大な数になる
 • 自分のスキルは全てをカバーするようなものではない


    • フロントエンドエンジニアでなくても出来ることもあった
 • 数年後には大きく変わっているかもしれない
 • 現場によって求められるスキルが相当異なりそう
 気づき
 19

20. © ZOZO Technologies, Inc. • 全員が入力できるスキルシートを作成。自己申告で評価
 試しにスキルマップに沿ってメンバーのスキルを整理
 20 ※ 実際には全て横繋ぎになっている


    　 1行＝1メンバー


21. © ZOZO Technologies, Inc. 気づき
 21 • 「サービス寄り」「技術寄り」に二分できるような傾向はない
 • 「何でもできる」人はいない

    • 「付加スキル」を伸ばしているメンバーもいる

22. © ZOZO Technologies, Inc. 提案
 22

23. © ZOZO Technologies, Inc. • スキルを細かく整理
 
 • 自分のスキルを求めている現場を選ぶ or

    現場が求めるスキルを習得する
 スキルについての考え方の提案
 23 スキルA スキルC スキルB 自分
 現場
 スキルA・スキルBを 持っている人がほしい！ スキルA スキルC 自分
 スキルB 習得する
 選ぶ


24. © ZOZO Technologies, Inc. • 現場が正しく「求めるスキル」を表現できるようにする
 スキルについての考え方の提案
 24 スキルA・スキルBを 持っている人がほしい！

    何でもできる人が ほしい！ 細かく整理されたスキル項目


25. © ZOZO Technologies, Inc. • スキル構成のパターンはたくさんある
 スキルについての考え方の提案
 25 or
 スキルA


    スキルB
 スキルC
 スキルD
 スキルE
 スキルA
 スキルB
 スキルC
 スキルD
 スキルE
 スキルA
 スキルB
 スキルC
 スキルD
 スキルE


26. © ZOZO Technologies, Inc. それぞれに合った適切なスキルを細かい粒度で選択すれば
 フロントエンドエンジニアは辛くない
 
 自分が興味のある領域のスキルを伸ばすこと
 現場の役に立つスキルを伸ばすこと
 どちらも現実的に実現できそう


    26

27. © ZOZO Technologies, Inc. これからも成長していくフロントエンド界隈を
 それぞれのスキルで盛り上げていきましょう！
 27

28. © ZOZO Technologies, Inc. フロントエンドエンジニア募集中！
 28 • https://tech.zozo.com/recruit/
 • 色々なスキルの組み合わせのエンジニアが在籍


    • 求めるスキルも現場によって様々。自分に合う環境を社内で見つけやすい
 SPA
 プロト
 タイプ
 DevOps
 SEO対策
 アニメー ション
 SPA
 プロト
 タイプ
 DevOps
 SEO対策
 アニメー ション
 SPA
 プロト
 タイプ
 UX設計
 SEO対策
 アニメー ション

29. None