SlideShare a Scribd company logo
Takuya Tejima
March 28th, 2023
モダンフロントエンド開発者に
求められるスキルとは
● 略歴
○ 新卒でIBMソフトウェア開発研究所でソフトウェアエンジニア
○ LINEでフロントエンドエンジニア
○ 共同創業者兼CTOとして起業(東南アジアへ)
○ 現在2社目の起業としてGAOGAOを創業(シンガポールベース)
■ 「グローバル」を強みにした60名規模のエンジニアが参画する開発会社
■ 最近はエンジニア業務以外に、大手企業のエンジニア組織立ち上げやマネージメント業務が多め
● 書籍執筆
○ 共著: Vue.js入門
○ 共著: TypeScriptとReact/Next.jsでつくる実践Webアプリケーション (1-2章 担当)
About Me
Takuya Tejima | GAOGAO Co-founder&CEO
@tejitak
モダンフロントエンドとは
(本書1章の内容+α)
世界的なフロントエンドのトレンド
“Frontend Engineer”というキーワードのGoogle検索トレンドの推移
jQuery全盛期
- jQueryが大多数のWebサイト・アプリケーションで使用されていた理由はブラウザの互換性解消が大きな理由だった
- アプリケーション開発の多くの処理はサーバー側で実装されていた
- コンポーネント指向ではなく、特定のDOMに対してグローバルに処理を追加していく形式だった
- SPAの例は増えてきていたもののAjaxがメインで包括的なアプリケーションフレームワークなどは浸透していなかった
jQuery全盛期からReact全盛期へ(モダンフロントエンド)
React全盛期 (現在)
- ブラウザの性能の向上と共に高いUI/UX・DX(Developer Experiece)を実現できるようになった
- UI/UXの向上: コンポーネント設計、ステート設計、インフラ設計、パフォーマンス測定の重要性
- DXの向上: ビルドツールからデプロイ・テストまで周辺ツールの拡充
- 結果、サーバー・クライアント型Web開発において、フロントエンドの比重が大きくなってきた
(参考: https://roadmap.sh/frontend)
フロントエンド開発そのもののあり方が変わってきている
本書1章から抜粋
モダンフロントエンドを構成する要素
● 設計
○ 1 要件/UX・UI定義
■ Spec(UI・UX)の理解 (企画・デザイナーとのコミュ
ニケーション)
○ 2 API設計
■ インターフェース設計 (BEとのコミュニケーション)
○ 3 コンポーネント設計
■ atomicデザイン設計
○ 4 ステート設計
■ props/redux/provider/container component
○ 5 ルーティング設計
■ URL定義/パラメーター設定
○ 6 レンダリング設計
■ CSR/SSG/SSR
○ 7 SEO設計
■ メタ情報設定
● 実装
○ 8 UI実装
■ ページ & atomicコンポーネントの書く
■ tailwind & CSS moduleを書く
■ TS型定義
■ mockデータとstorybookファイル作成
■ i18n/アクセシビリティ実装
○ 9 ロジック実装
■ ステート管理
■ APIとの接続
○ 10 テスト実装
■ Unitテストを書く
■ E2Eテストを書く
○ 11 deploy
■ ビルドする
■ CI/CDを通じて動作確認
○ 12 QA
■ デザインQA・ブラウザ互換性・バグ修正
フロントエンドエンジニアの日々の業務。一機能追加するだけでも工数が多い
モダンフロントエンド開発現場での実装例
Next.jsの機能範囲
本書1章から抜粋
Tips: フロントエンドライブラリの世界的なトレンド
モダンフロントエンドエンジニア
に求められるスキル
コーディング面
● レガシーJavaScriptコード→TypeScript化への必要性(型定義を始めとした導入コストが高い)
● 新しいライブラリの学習コストが高い
● 報告される問題の総量が多くデバッグが大変 (UI側から問題報告は入りがちのため)
● サポートデバイス・ブラウザの対象が多い
設計面
● 学ぶべき知識の範囲が広い (CSS含めたUI/UXコンポーネント設計領域から, API・CDN/SSR, i18n, E2E etc.)
● サーバー通信・ステート管理のベストプラクティスの模索の必要
● フロントエンド内複数人開発における効果的な開発環境ツールの整備が複雑
組織面
● 関わる担当組織が多い(主に、企画担当者、UI/UXデザイナー、BE担当者、インフラ担当者、QA担当者)
● チーム内を構成するフロントエンドエンジニア同士のコミュニケーション(タスク分担・Sprint設計など)
フロントエンドエンジニアが抱える課題
ハードスキル面だけでなくソフトスキル面もバックエンドエンジニア以上に求められるケースが多い
React / Nextやwebpack / Viteなどのツー
ルを代表としたライブラリ固有の知識。長
期記憶のストックを増やすことで開発を効
率化に繋がる
ライブラリそのものの知識
ライブラリに依存しない
根本理解力・問題解決力
なぜ?を繰り返し、コードの根本を理解でき
る汎用的な実装スキル。ライブラリに依存し
ないコアロジックの開発やデバッグなどにお
ける高い問題解決能力につながる
フロントエンドコーディング以外
の知識 (サーバー・基盤など)
モダンフロントエンドに求められるハードスキルとソフトスキル
API・CDN・PWA・CI/CD・UI/UXなどなど
FEの領域が本来のFEだけに留まらず拡がっ
ている中で、さらにバリューを高められる
ハードスキル
未知の知識を幅広く・速く吸収
できる探索学習力
新しいものを学習して自身をアップデート
していく意欲・マインド。進化の早い領域
で市場価値を高く持つために重要となる素
質
他部署と共通認識をとれる
コミュニケーション力
特にUI/UX領域、サーバーサイドの必要な知
識を持ち合わせた上で他部署のエキスパート
および開発チーム内とコミュニケーションを
取り推進できる力
自分自身で考え実行できる力
流行っているから、と流されず、技術選定
など新しいものを自分自身で咀嚼した上で
意思決定ができる力。現場特性から最適な
ソリューションを合理的に判断・提案する
ことでチームの成功に導くことができる
● フロントエンドエンジニアの面談対策はコーディング面以外も判断するための対象要素が多い
○ ハードスキル面
■ コーディング能力を問う
● 簡単なアルゴリズムの問題など、JSコーディング試験
■ 知識を問う
● React Hooksはなんですか? Cookieとローカルストレージの違いはなんですか?
■ 設計力を問う
● Reduxのメリットはなんですか?どのようにコンポーネント設計を行いますか?
■ 問題解決力を問う
● その時に起こった問題を教えてください?どのように解決をしましたか?
○ ソフトスキル面
■ マインドを知る
● 今注目しているライブラリはありますか?新しい技術の習得はどのように行いますか?
■ コミュニケーション能力を知る
● チーム開発経験はありますか?ビジネスサイドと仕様策定に関わることはありますか?
■ 自分自身で考えられる力を問う
● 選択した技術スタックのメリット・デメリットは?テストを書かなかったのはなぜですか?
Tips: あなたがもし面接官だったら、どうやって判断する?
● 現状、以下フルスタックをフロントエンドエンジニアとして意味していることが多い
エンジニアロール マークアップエンジニア 例: tailwind・アニメーションなどHTML/CSS周りの実装
FEアプリケーションエンジニア 例: ステート・rendering設計含むアプリケーション実装/PWA開発
FE OSSエンジニア 例: React/Reduxなどフレームワーク自体の実装
BFFエンジニア 例: nodeレイヤー・SSR・SSG設計などサーバーと関連する実装
FEインフラエンジニア 例: ビルド / CI・CDレイヤー/CDN含む開発環境基盤周り
E2Eエンジニア 例: Cypress・Playwrightなどの設計・テストコード運用
マネージャーロール FEアーキテクト 例: 技術選定、設計・レビュー
FE EM 例: フロントエンドエンジニアのマネージメント
FE TPM 例: 他部署との連携重視のマネージメント
フロントエンドエンジニアのロールとキャリア
上記は極端な分類かもしれないが需要のさらなる拡大に伴いエンジニアの関心の強い分野で細分化されていくのは自然
- さらにその先は..?
○ レガシースタックのままでは、技術負債が蓄積され、企業としては技術者も採用できない状況になる
○ サーバーレス・PWAの普及によりフロントニーズがさらに加速する
○ モダンフロントエンド開発の共通基盤とそれぞれの技術要素領域の細分化に合わせて職種も定義されていく
○ バーティカル(AI, VR/AR, Web3, ネイティブアプリ)化が顕著になっていく
○ フロントエンドエンジニアのキャリアの設計もこれらの現状を俯瞰的考える必要性が高まる
- 現状 (本日の話まとめ)
○ TypeScript化を筆頭にモダンフロントエンドへの変遷期 (業界全体でモダナイズが進行)
○ 昨今のモダンフロントエンドの領域に伴い、フロントエンドエンジニアの仕事が広範囲になってきている
○ Next.jsはその一翼を担う存在になってきている
○ フロントエンド人材には広く深いハードスキル・ソフトスキルが必要になってきている
モダンフロントエンドの今後
まずはNext本を手に取って読んでみましょう
Thank you

More Related Content

What's hot

フロー効率性とリソース効率性、再入門 #devlove #devkan
フロー効率性とリソース効率性、再入門 #devlove #devkanフロー効率性とリソース効率性、再入門 #devlove #devkan
フロー効率性とリソース効率性、再入門 #devlove #devkan
Itsuki Kuroda
 
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
 
Pythonによる黒魔術入門
Pythonによる黒魔術入門Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
 
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
 
「今日から使い切る」 ための GNU Parallel による並列処理入門
「今日から使い切る」ための GNU Parallelによる並列処理入門「今日から使い切る」ための GNU Parallelによる並列処理入門
「今日から使い切る」 ための GNU Parallel による並列処理入門
Koji Matsuda
 
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのかDDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
 
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのかシリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
Atsushi Nakada
 
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Taku Miyakawa
 
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjugフロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
 
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
toshihiro ichitani
 
低レイヤー入門
低レイヤー入門低レイヤー入門
低レイヤー入門demuyan
 
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
Takahiro Inoue
 
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
Takuya Ueda
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
Yoshiki Hayama
 
エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
Reimi Kuramochi Chiba
 
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
 
AWSではじめるMLOps
AWSではじめるMLOpsAWSではじめるMLOps
AWSではじめるMLOps
MariOhbuchi
 
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLiveDXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
 
アプリを成長させるためのログ取りとログ解析に必要なこと
アプリを成長させるためのログ取りとログ解析に必要なことアプリを成長させるためのログ取りとログ解析に必要なこと
アプリを成長させるためのログ取りとログ解析に必要なこと
Takao Sumitomo
 

What's hot (20)

フロー効率性とリソース効率性、再入門 #devlove #devkan
フロー効率性とリソース効率性、再入門 #devlove #devkanフロー効率性とリソース効率性、再入門 #devlove #devkan
フロー効率性とリソース効率性、再入門 #devlove #devkan
 
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
 
Pythonによる黒魔術入門
Pythonによる黒魔術入門Pythonによる黒魔術入門
Pythonによる黒魔術入門
 
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
 
「今日から使い切る」 ための GNU Parallel による並列処理入門
「今日から使い切る」ための GNU Parallelによる並列処理入門「今日から使い切る」ための GNU Parallelによる並列処理入門
「今日から使い切る」 ための GNU Parallel による並列処理入門
 
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのかDDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
 
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのかシリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
 
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
 
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjugフロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
 
低レイヤー入門
低レイヤー入門低レイヤー入門
低レイヤー入門
 
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
 
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
 
エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
 
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
 
AWSではじめるMLOps
AWSではじめるMLOpsAWSではじめるMLOps
AWSではじめるMLOps
 
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLiveDXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
 
アプリを成長させるためのログ取りとログ解析に必要なこと
アプリを成長させるためのログ取りとログ解析に必要なことアプリを成長させるためのログ取りとログ解析に必要なこと
アプリを成長させるためのログ取りとログ解析に必要なこと
 

Similar to モダンフロントエンド開発者に求められるスキルとは

Next.js Storybook Driven Development
Next.js Storybook Driven DevelopmentNext.js Storybook Driven Development
Next.js Storybook Driven Development
Takuya Tejima
 
GAOGAO (ガオガオ) サービス事業概要 2018年8月
GAOGAO (ガオガオ) サービス事業概要 2018年8月GAOGAO (ガオガオ) サービス事業概要 2018年8月
GAOGAO (ガオガオ) サービス事業概要 2018年8月
Takuya Tejima
 
21-11-17 東大工学部 産業総論 問題把握・解決力を鍛え、将来を自分の手でつかむには?
21-11-17 東大工学部 産業総論 問題把握・解決力を鍛え、将来を自分の手でつかむには?21-11-17 東大工学部 産業総論 問題把握・解決力を鍛え、将来を自分の手でつかむには?
21-11-17 東大工学部 産業総論 問題把握・解決力を鍛え、将来を自分の手でつかむには?
ブレークスルーパートナーズ 赤羽雄二
 
GAOGAO事業のご紹介
GAOGAO事業のご紹介GAOGAO事業のご紹介
GAOGAO事業のご紹介
Takuya Tejima
 
LIGでのDocker活用
LIGでのDocker活用LIGでのDocker活用
LIGでのDocker活用
Hayashi Yuichi
 
kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道
Yusuke Amano
 
経験ゼロのWeb企業が機械学習に取り組んだ話
経験ゼロのWeb企業が機械学習に取り組んだ話経験ゼロのWeb企業が機械学習に取り組んだ話
経験ゼロのWeb企業が機械学習に取り組んだ話
Yoshihiko Shiraki
 
プログラミングを学ぶと何が良いのか
プログラミングを学ぶと何が良いのかプログラミングを学ぶと何が良いのか
プログラミングを学ぶと何が良いのか
Haruo Sato
 
GAOGAOゲート2期生サービス概要資料
GAOGAOゲート2期生サービス概要資料GAOGAOゲート2期生サービス概要資料
GAOGAOゲート2期生サービス概要資料
Takuya Tejima
 
ManuTech_for_Manufacturer_v1.1
ManuTech_for_Manufacturer_v1.1ManuTech_for_Manufacturer_v1.1
ManuTech_for_Manufacturer_v1.1
gCompass Inc
 
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことメンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
Mitsuru Ogawa
 
子供達と プログラミングをはじめよう
子供達と プログラミングをはじめよう子供達と プログラミングをはじめよう
子供達と プログラミングをはじめよう
Masao Niizuma
 
rakumoソーシャルスケジューラーの紹介
rakumoソーシャルスケジューラーの紹介rakumoソーシャルスケジューラーの紹介
rakumoソーシャルスケジューラーの紹介
Gigei rakumo
 
「コリビング&コワーキング / スキルアップ / ジョブマッチング / 起業支援」GAOGAO(ガオガオ)エンジニア事務所 18
 「コリビング&コワーキング / スキルアップ / ジョブマッチング / 起業支援」GAOGAO(ガオガオ)エンジニア事務所 18  「コリビング&コワーキング / スキルアップ / ジョブマッチング / 起業支援」GAOGAO(ガオガオ)エンジニア事務所 18
「コリビング&コワーキング / スキルアップ / ジョブマッチング / 起業支援」GAOGAO(ガオガオ)エンジニア事務所 18
Takuya Tejima
 
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
Yuta Matsumura
 
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
PIXTA Inc.
 
とりあえず30分でひととおり分かった気にはなれるアジャイル入門
とりあえず30分でひととおり分かった気にはなれるアジャイル入門とりあえず30分でひととおり分かった気にはなれるアジャイル入門
とりあえず30分でひととおり分かった気にはなれるアジャイル入門
陽一 滝川
 
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
PIXTA Inc.
 
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
Takuro Wada
 
マネージャーになってからの技術を磨く戦略と戦術
マネージャーになってからの技術を磨く戦略と戦術マネージャーになってからの技術を磨く戦略と戦術
マネージャーになってからの技術を磨く戦略と戦術
PIXTA Inc.
 

Similar to モダンフロントエンド開発者に求められるスキルとは (20)

Next.js Storybook Driven Development
Next.js Storybook Driven DevelopmentNext.js Storybook Driven Development
Next.js Storybook Driven Development
 
GAOGAO (ガオガオ) サービス事業概要 2018年8月
GAOGAO (ガオガオ) サービス事業概要 2018年8月GAOGAO (ガオガオ) サービス事業概要 2018年8月
GAOGAO (ガオガオ) サービス事業概要 2018年8月
 
21-11-17 東大工学部 産業総論 問題把握・解決力を鍛え、将来を自分の手でつかむには?
21-11-17 東大工学部 産業総論 問題把握・解決力を鍛え、将来を自分の手でつかむには?21-11-17 東大工学部 産業総論 問題把握・解決力を鍛え、将来を自分の手でつかむには?
21-11-17 東大工学部 産業総論 問題把握・解決力を鍛え、将来を自分の手でつかむには?
 
GAOGAO事業のご紹介
GAOGAO事業のご紹介GAOGAO事業のご紹介
GAOGAO事業のご紹介
 
LIGでのDocker活用
LIGでのDocker活用LIGでのDocker活用
LIGでのDocker活用
 
kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道
 
経験ゼロのWeb企業が機械学習に取り組んだ話
経験ゼロのWeb企業が機械学習に取り組んだ話経験ゼロのWeb企業が機械学習に取り組んだ話
経験ゼロのWeb企業が機械学習に取り組んだ話
 
プログラミングを学ぶと何が良いのか
プログラミングを学ぶと何が良いのかプログラミングを学ぶと何が良いのか
プログラミングを学ぶと何が良いのか
 
GAOGAOゲート2期生サービス概要資料
GAOGAOゲート2期生サービス概要資料GAOGAOゲート2期生サービス概要資料
GAOGAOゲート2期生サービス概要資料
 
ManuTech_for_Manufacturer_v1.1
ManuTech_for_Manufacturer_v1.1ManuTech_for_Manufacturer_v1.1
ManuTech_for_Manufacturer_v1.1
 
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことメンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
 
子供達と プログラミングをはじめよう
子供達と プログラミングをはじめよう子供達と プログラミングをはじめよう
子供達と プログラミングをはじめよう
 
rakumoソーシャルスケジューラーの紹介
rakumoソーシャルスケジューラーの紹介rakumoソーシャルスケジューラーの紹介
rakumoソーシャルスケジューラーの紹介
 
「コリビング&コワーキング / スキルアップ / ジョブマッチング / 起業支援」GAOGAO(ガオガオ)エンジニア事務所 18
 「コリビング&コワーキング / スキルアップ / ジョブマッチング / 起業支援」GAOGAO(ガオガオ)エンジニア事務所 18  「コリビング&コワーキング / スキルアップ / ジョブマッチング / 起業支援」GAOGAO(ガオガオ)エンジニア事務所 18
「コリビング&コワーキング / スキルアップ / ジョブマッチング / 起業支援」GAOGAO(ガオガオ)エンジニア事務所 18
 
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
 
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
 
とりあえず30分でひととおり分かった気にはなれるアジャイル入門
とりあえず30分でひととおり分かった気にはなれるアジャイル入門とりあえず30分でひととおり分かった気にはなれるアジャイル入門
とりあえず30分でひととおり分かった気にはなれるアジャイル入門
 
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
 
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
 
マネージャーになってからの技術を磨く戦略と戦術
マネージャーになってからの技術を磨く戦略と戦術マネージャーになってからの技術を磨く戦略と戦術
マネージャーになってからの技術を磨く戦略と戦術
 

More from Takuya Tejima

Nest.js Introduction
Nest.js IntroductionNest.js Introduction
Nest.js Introduction
Takuya Tejima
 
グローバルエンジニアキャリア はじめの一歩
グローバルエンジニアキャリア はじめの一歩グローバルエンジニアキャリア はじめの一歩
グローバルエンジニアキャリア はじめの一歩
Takuya Tejima
 
GAOGAO発表資料〜エンジニアギルドミートアップ〜
GAOGAO発表資料〜エンジニアギルドミートアップ〜GAOGAO発表資料〜エンジニアギルドミートアップ〜
GAOGAO発表資料〜エンジニアギルドミートアップ〜
Takuya Tejima
 
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーターLaravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
Takuya Tejima
 
エンジニア・コミュニティ・ドリブンで会社を成長させていくGAOGAO
エンジニア・コミュニティ・ドリブンで会社を成長させていくGAOGAOエンジニア・コミュニティ・ドリブンで会社を成長させていくGAOGAO
エンジニア・コミュニティ・ドリブンで会社を成長させていくGAOGAO
Takuya Tejima
 
Global Creators Workshop in Asia
Global Creators Workshop in AsiaGlobal Creators Workshop in Asia
Global Creators Workshop in Asia
Takuya Tejima
 
Global Startup Creators vol.5 - Facebook bot development handson
Global Startup Creators vol.5 - Facebook bot development handsonGlobal Startup Creators vol.5 - Facebook bot development handson
Global Startup Creators vol.5 - Facebook bot development handson
Takuya Tejima
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
 
Parseでちゃんとアプリを作るコツ
Parseでちゃんとアプリを作るコツParseでちゃんとアプリを作るコツ
Parseでちゃんとアプリを作るコツ
Takuya Tejima
 
DevMorning
DevMorningDevMorning
DevMorning
Takuya Tejima
 
React Canvasで作るFlappy Bird
React Canvasで作るFlappy BirdReact Canvasで作るFlappy Bird
React Canvasで作るFlappy Bird
Takuya Tejima
 

More from Takuya Tejima (12)

Nest.js Introduction
Nest.js IntroductionNest.js Introduction
Nest.js Introduction
 
グローバルエンジニアキャリア はじめの一歩
グローバルエンジニアキャリア はじめの一歩グローバルエンジニアキャリア はじめの一歩
グローバルエンジニアキャリア はじめの一歩
 
GAOGAO発表資料〜エンジニアギルドミートアップ〜
GAOGAO発表資料〜エンジニアギルドミートアップ〜GAOGAO発表資料〜エンジニアギルドミートアップ〜
GAOGAO発表資料〜エンジニアギルドミートアップ〜
 
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーターLaravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
 
エンジニア・コミュニティ・ドリブンで会社を成長させていくGAOGAO
エンジニア・コミュニティ・ドリブンで会社を成長させていくGAOGAOエンジニア・コミュニティ・ドリブンで会社を成長させていくGAOGAO
エンジニア・コミュニティ・ドリブンで会社を成長させていくGAOGAO
 
Global Creators Workshop in Asia
Global Creators Workshop in AsiaGlobal Creators Workshop in Asia
Global Creators Workshop in Asia
 
Global Startup Creators vol.5 - Facebook bot development handson
Global Startup Creators vol.5 - Facebook bot development handsonGlobal Startup Creators vol.5 - Facebook bot development handson
Global Startup Creators vol.5 - Facebook bot development handson
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
 
Parseでちゃんとアプリを作るコツ
Parseでちゃんとアプリを作るコツParseでちゃんとアプリを作るコツ
Parseでちゃんとアプリを作るコツ
 
DevMorning
DevMorningDevMorning
DevMorning
 
React Canvasで作るFlappy Bird
React Canvasで作るFlappy BirdReact Canvasで作るFlappy Bird
React Canvasで作るFlappy Bird
 

Recently uploaded

無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
Yuki Miyazaki
 
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
kitamisetagayaxxx
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
sugiuralab
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
ARISE analytics
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
Osaka University
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 

Recently uploaded (10)

無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
 
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 

モダンフロントエンド開発者に求められるスキルとは

  • 1. Takuya Tejima March 28th, 2023 モダンフロントエンド開発者に 求められるスキルとは
  • 2. ● 略歴 ○ 新卒でIBMソフトウェア開発研究所でソフトウェアエンジニア ○ LINEでフロントエンドエンジニア ○ 共同創業者兼CTOとして起業(東南アジアへ) ○ 現在2社目の起業としてGAOGAOを創業(シンガポールベース) ■ 「グローバル」を強みにした60名規模のエンジニアが参画する開発会社 ■ 最近はエンジニア業務以外に、大手企業のエンジニア組織立ち上げやマネージメント業務が多め ● 書籍執筆 ○ 共著: Vue.js入門 ○ 共著: TypeScriptとReact/Next.jsでつくる実践Webアプリケーション (1-2章 担当) About Me Takuya Tejima | GAOGAO Co-founder&CEO @tejitak
  • 5. jQuery全盛期 - jQueryが大多数のWebサイト・アプリケーションで使用されていた理由はブラウザの互換性解消が大きな理由だった - アプリケーション開発の多くの処理はサーバー側で実装されていた - コンポーネント指向ではなく、特定のDOMに対してグローバルに処理を追加していく形式だった - SPAの例は増えてきていたもののAjaxがメインで包括的なアプリケーションフレームワークなどは浸透していなかった jQuery全盛期からReact全盛期へ(モダンフロントエンド) React全盛期 (現在) - ブラウザの性能の向上と共に高いUI/UX・DX(Developer Experiece)を実現できるようになった - UI/UXの向上: コンポーネント設計、ステート設計、インフラ設計、パフォーマンス測定の重要性 - DXの向上: ビルドツールからデプロイ・テストまで周辺ツールの拡充 - 結果、サーバー・クライアント型Web開発において、フロントエンドの比重が大きくなってきた (参考: https://roadmap.sh/frontend) フロントエンド開発そのもののあり方が変わってきている
  • 7. ● 設計 ○ 1 要件/UX・UI定義 ■ Spec(UI・UX)の理解 (企画・デザイナーとのコミュ ニケーション) ○ 2 API設計 ■ インターフェース設計 (BEとのコミュニケーション) ○ 3 コンポーネント設計 ■ atomicデザイン設計 ○ 4 ステート設計 ■ props/redux/provider/container component ○ 5 ルーティング設計 ■ URL定義/パラメーター設定 ○ 6 レンダリング設計 ■ CSR/SSG/SSR ○ 7 SEO設計 ■ メタ情報設定 ● 実装 ○ 8 UI実装 ■ ページ & atomicコンポーネントの書く ■ tailwind & CSS moduleを書く ■ TS型定義 ■ mockデータとstorybookファイル作成 ■ i18n/アクセシビリティ実装 ○ 9 ロジック実装 ■ ステート管理 ■ APIとの接続 ○ 10 テスト実装 ■ Unitテストを書く ■ E2Eテストを書く ○ 11 deploy ■ ビルドする ■ CI/CDを通じて動作確認 ○ 12 QA ■ デザインQA・ブラウザ互換性・バグ修正 フロントエンドエンジニアの日々の業務。一機能追加するだけでも工数が多い モダンフロントエンド開発現場での実装例
  • 11. コーディング面 ● レガシーJavaScriptコード→TypeScript化への必要性(型定義を始めとした導入コストが高い) ● 新しいライブラリの学習コストが高い ● 報告される問題の総量が多くデバッグが大変 (UI側から問題報告は入りがちのため) ● サポートデバイス・ブラウザの対象が多い 設計面 ● 学ぶべき知識の範囲が広い (CSS含めたUI/UXコンポーネント設計領域から, API・CDN/SSR, i18n, E2E etc.) ● サーバー通信・ステート管理のベストプラクティスの模索の必要 ● フロントエンド内複数人開発における効果的な開発環境ツールの整備が複雑 組織面 ● 関わる担当組織が多い(主に、企画担当者、UI/UXデザイナー、BE担当者、インフラ担当者、QA担当者) ● チーム内を構成するフロントエンドエンジニア同士のコミュニケーション(タスク分担・Sprint設計など) フロントエンドエンジニアが抱える課題 ハードスキル面だけでなくソフトスキル面もバックエンドエンジニア以上に求められるケースが多い
  • 12. React / Nextやwebpack / Viteなどのツー ルを代表としたライブラリ固有の知識。長 期記憶のストックを増やすことで開発を効 率化に繋がる ライブラリそのものの知識 ライブラリに依存しない 根本理解力・問題解決力 なぜ?を繰り返し、コードの根本を理解でき る汎用的な実装スキル。ライブラリに依存し ないコアロジックの開発やデバッグなどにお ける高い問題解決能力につながる フロントエンドコーディング以外 の知識 (サーバー・基盤など) モダンフロントエンドに求められるハードスキルとソフトスキル API・CDN・PWA・CI/CD・UI/UXなどなど FEの領域が本来のFEだけに留まらず拡がっ ている中で、さらにバリューを高められる ハードスキル 未知の知識を幅広く・速く吸収 できる探索学習力 新しいものを学習して自身をアップデート していく意欲・マインド。進化の早い領域 で市場価値を高く持つために重要となる素 質 他部署と共通認識をとれる コミュニケーション力 特にUI/UX領域、サーバーサイドの必要な知 識を持ち合わせた上で他部署のエキスパート および開発チーム内とコミュニケーションを 取り推進できる力 自分自身で考え実行できる力 流行っているから、と流されず、技術選定 など新しいものを自分自身で咀嚼した上で 意思決定ができる力。現場特性から最適な ソリューションを合理的に判断・提案する ことでチームの成功に導くことができる
  • 13. ● フロントエンドエンジニアの面談対策はコーディング面以外も判断するための対象要素が多い ○ ハードスキル面 ■ コーディング能力を問う ● 簡単なアルゴリズムの問題など、JSコーディング試験 ■ 知識を問う ● React Hooksはなんですか? Cookieとローカルストレージの違いはなんですか? ■ 設計力を問う ● Reduxのメリットはなんですか?どのようにコンポーネント設計を行いますか? ■ 問題解決力を問う ● その時に起こった問題を教えてください?どのように解決をしましたか? ○ ソフトスキル面 ■ マインドを知る ● 今注目しているライブラリはありますか?新しい技術の習得はどのように行いますか? ■ コミュニケーション能力を知る ● チーム開発経験はありますか?ビジネスサイドと仕様策定に関わることはありますか? ■ 自分自身で考えられる力を問う ● 選択した技術スタックのメリット・デメリットは?テストを書かなかったのはなぜですか? Tips: あなたがもし面接官だったら、どうやって判断する?
  • 14. ● 現状、以下フルスタックをフロントエンドエンジニアとして意味していることが多い エンジニアロール マークアップエンジニア 例: tailwind・アニメーションなどHTML/CSS周りの実装 FEアプリケーションエンジニア 例: ステート・rendering設計含むアプリケーション実装/PWA開発 FE OSSエンジニア 例: React/Reduxなどフレームワーク自体の実装 BFFエンジニア 例: nodeレイヤー・SSR・SSG設計などサーバーと関連する実装 FEインフラエンジニア 例: ビルド / CI・CDレイヤー/CDN含む開発環境基盤周り E2Eエンジニア 例: Cypress・Playwrightなどの設計・テストコード運用 マネージャーロール FEアーキテクト 例: 技術選定、設計・レビュー FE EM 例: フロントエンドエンジニアのマネージメント FE TPM 例: 他部署との連携重視のマネージメント フロントエンドエンジニアのロールとキャリア 上記は極端な分類かもしれないが需要のさらなる拡大に伴いエンジニアの関心の強い分野で細分化されていくのは自然
  • 15. - さらにその先は..? ○ レガシースタックのままでは、技術負債が蓄積され、企業としては技術者も採用できない状況になる ○ サーバーレス・PWAの普及によりフロントニーズがさらに加速する ○ モダンフロントエンド開発の共通基盤とそれぞれの技術要素領域の細分化に合わせて職種も定義されていく ○ バーティカル(AI, VR/AR, Web3, ネイティブアプリ)化が顕著になっていく ○ フロントエンドエンジニアのキャリアの設計もこれらの現状を俯瞰的考える必要性が高まる - 現状 (本日の話まとめ) ○ TypeScript化を筆頭にモダンフロントエンドへの変遷期 (業界全体でモダナイズが進行) ○ 昨今のモダンフロントエンドの領域に伴い、フロントエンドエンジニアの仕事が広範囲になってきている ○ Next.jsはその一翼を担う存在になってきている ○ フロントエンド人材には広く深いハードスキル・ソフトスキルが必要になってきている モダンフロントエンドの今後 まずはNext本を手に取って読んでみましょう