Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Nahoko Ushirokawa

June 19, 2019
Tweet

More Decks by Nahoko Ushirokawa

Other Decks in Programming

Transcript

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

    外国語学部卒業
 • 新卒でITコンサル系会社にエンジニアとして入社
 • その後複数の企業でエンジニアリングに従事
 • 個人としてWEB制作受託事業を営む
 • 2018年5月 ZOZOテクノロジーズに入社
 • 現在はWEBフロントエンドをメインに色々
 2
  2. © ZOZO Technologies, Inc. • 以前:デザイナーとフロントエンドエンジニアの線引きが曖昧
 • 最近:マークアップがどちらの管轄か明確にする現場が増えてきた
 フロントエンドエンジニア ≠

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

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


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

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


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

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

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

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

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

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

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

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


    • とあるバックエンドエンジニアの多い現場
 マークアップ コード設計 品質 >
 CSS設計 新技術 >
 デザイン SEO対策 >
 マークアップ 画面設計
  9. © ZOZO Technologies, Inc. • 「ユーザー寄りのフロントエンドエンジニアを目指して勉強します。」
 スキルは大分類ではなく、細かい項目ベースで考えた方が良さそう
 17 • エンジニアが目標を立てるとき


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

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


    • 付加スキル
 ※ 主要/付加やカテゴリ・レベルの分類は便宜上。
   一人のエンジニアがまとめて身につけるべきスキルという意味合いではない
  11. © ZOZO Technologies, Inc. • 想像したよりもたくさんの領域がある
 • 全てのスキル列挙すると膨大な数になる
 • 自分のスキルは全てをカバーするようなものではない


    • フロントエンドエンジニアでなくても出来ることもあった
 • 数年後には大きく変わっているかもしれない
 • 現場によって求められるスキルが相当異なりそう
 気づき
 19
  12. © ZOZO Technologies, Inc. • スキルを細かく整理
 
 • 自分のスキルを求めている現場を選ぶ or

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

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


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

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


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