TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 Forkwell Library https://forkwell.connpass.com/event/277304/

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

3. モダンフロントエンドとは
(本書1章の内容+α)

4. 世界的なフロントエンドのトレンド
“Frontend Engineer”というキーワードのGoogle検索トレンドの推移

5. jQuery全盛期
- jQueryが大多数のWebサイト・アプリケーションで使用されていた理由はブラウザの互換性解消が大きな理由だった
- アプリケーション開発の多くの処理はサーバー側で実装されていた
- コンポーネント指向ではなく、特定のDOMに対してグローバルに処理を追加していく形式だった
- SPAの例は増えてきていたもののAjaxがメインで包括的なアプリケーションフレームワークなどは浸透していなかった
jQuery全盛期からReact全盛期へ(モダンフロントエンド)
React全盛期 (現在)
- ブラウザの性能の向上と共に高いUI/UX・DX(Developer Experiece)を実現できるようになった
- UI/UXの向上: コンポーネント設計、ステート設計、インフラ設計、パフォーマンス測定の重要性
- DXの向上: ビルドツールからデプロイ・テストまで周辺ツールの拡充
- 結果、サーバー・クライアント型Web開発において、フロントエンドの比重が大きくなってきた
（参考: https://roadmap.sh/frontend）
フロントエンド開発そのもののあり方が変わってきている

6. 本書1章から抜粋
モダンフロントエンドを構成する要素

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・ブラウザ互換性・バグ修正
フロントエンドエンジニアの日々の業務。一機能追加するだけでも工数が多い
モダンフロントエンド開発現場での実装例

8. Next.jsの機能範囲
本書1章から抜粋

9. Tips: フロントエンドライブラリの世界的なトレンド

10. モダンフロントエンドエンジニア
に求められるスキル

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本を手に取って読んでみましょう

16. Thank you