フロントエンド研修【MIXI 23新卒技術研修】

23新卒技術研修で実施したフロントエンド研修の講義資料です。

動画：https://youtu.be/KWdoijbWBbU

ハンズオン用リポジトリ：https://github.com/mixigroup/2023BeginnerTrainingFrontEnd

資料の利用について
公開している資料は勉強会や企業の研修などで自由にご利用頂いて大丈夫ですが、以下の形での利用だけご遠慮ください。
・受講者から参加費や授業料などを集める形での利用（会場費や飲食費など勉強会運営に必要な実費を集めるのは問題ありません）
・出典を削除または改変しての利用

Transcript

1. ２３新卒
   フロントエンド研修
   

   View Slide

2. Web の特徴
   誰でも
   情報を公開できる
   2
   

   View Slide

3. Web の特徴
   リンクによって
   あらゆるページが繋がる
   3
   

   View Slide

4. Web の特徴
   ブラウザさえあれば
   全てのユーザーが
   情報にアクセスできる
   4
   

   View Slide

5. Web 開発で意識すること
   すべての
   ユーザー
   が使えること
   すべての
   デバイス
   で使えること
   ユーザーに
   操作ストレス
   を与えないこと
   ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと
   5
   

   View Slide

6. Web 開発で意識すること
   すべての
   ユーザー
   が使えること
   すべての
   デバイス
   で使えること
   ユーザーに
   操作ストレス
   を与えないこと
   ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと
   6
   

   View Slide

7. 全てのユーザーがコンテンツにアクセスするために
   音声リーダー
   拡大鏡
   キーボード
   bot
   ブラウザは、様々な個性を持ったユーザー
   がコンテンツにアクセスできるように
   様々な補助機能を用意している。
   7
   

   View Slide

8. 全てのユーザーがコンテンツにアクセスするために
   ブラウザの機能を十分に活かすには
   HTML のマークアップが意味論理的に正しくある必要がある。
   Point
   マークアップを適切にしよう
   8
   

   View Slide

9. 全てのユーザーがコンテンツにアクセスするために
   ブラウザが解釈しやすいHTMLを書く
   Topic
   HTMLとは
   Webページのコンテンツの構造を作るためのコード。
   WebページはDOMと呼ばれるElementや文字列をノードとしたツリー構造
   でコンテンツの構造を表現します。
   Element 化
   タグ
   9
   

   View Slide

10. 要素の役割を定義する。
    role=”navigation” は と同じ意味になる。
    要素に性質や意味論を追加する。
    ❌
    要素の現在の状態を定義する。
    aria-disabled=”true” は disabled=”true” と同じ
    意味になる。
    全てのユーザーがコンテンツにアクセスするために
    WAI-ARIA機能を活用してみよう
    Topic
    WAI-ARIA の要素
    Role
    Property
    State
    10
    

    View Slide

11. 全てのユーザーがコンテンツにアクセスするために
    WAI-ARIA機能を使ってみよう
    Try
    1 サンプルプロジェクトにアクセス
    2 スクリーンリーダーを起動
    Command + F5
    3 aria-label を設定してみる
    ❌
    4 スクリーンリーダーで読み上げてみる
    11
    

    View Slide

12. 要素の役割を定義する。
    role=”navigation” は と同じ意味になる。
    要素に性質や意味論を追加する。
    ❌
    要素の現在の状態を定義する。
    aria-disabled=”true” は disabled=”true” と同じ
    意味になる。
    全てのユーザーがコンテンツにアクセスするために
    アクセシビリティツリーを知ろう
    Topic
    WAI-ARIA の要素
    Role
    Property
    State
    12
    

    View Slide

13. 全てのユーザーがコンテンツにアクセスするために
    アクセシビリティツリーを見てみよう
    Try
    1 サンプルプロジェクトに Chrome でアクセス
    2 デベロッパーツールの表示
    Command + Option + i
    3 アクセシビリティツリーの表示
    13
    

    View Slide

14. 全てのユーザーがコンテンツにアクセスするために
    アクセシビリティツリーを見てみよう
    Try
    14
    DOM ＋ CSSOM = AOM
    アクセシビリティツリーは DOM と CSSOM（CSS から生成されるスタイルのツリー構造
    データ）を元に生成されます
    

    View Slide

15. 全てのユーザーがコンテンツにアクセスするために
    アクセシビリティツリーに変化を与える
    Try
    1 サンプルプロジェクトにアクセス
    2 div を h1 に変えてみよう
    Hello world
    15
    マークアップによってアクセシビリティツリーに変化を与えよう
    

    View Slide

16. 全てのユーザーがコンテンツにアクセスするために
    アクセシビリティツリーに変化を与える
    Try
    16
    1 サンプルプロジェクトにアクセス
    2 h1 に display: none を設定
    h1 {
    display: none;
    }
    CSS によってアクセシビリティツリーに変化を与えよう
    

    View Slide

17. 全てのユーザーがコンテンツにアクセスするために
    アクセシビリティ達成基準を知ろう
    Topic
    アクセシビリティ Q&A
    Q
    アクセシビリティはどこまで気にすればいい？
    A
    W3CがWCAGという達成すべきアクセシビリティレベルの基準を
    設けているので、そこからどこまで達成するか選ぶといいです。
    Point
    WAI-ARIAの使用はあくまでも必要最低限に留めてください
    17
    

    View Slide

18. Web 開発で意識すること
    すべての
    ユーザー
    が使えること
    すべての
    デバイス
    で使えること
    ユーザーに
    操作ストレス
    を与えないこと
    ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと
    18
    

    View Slide

19. 全てのデバイスでコンテンツにアクセスできるために
    PC
    タブレット
    スマホ
    Web は色んな形のスクリーンサイズで
    閲覧できる。
    Point
    どんなスクリーンサイズでもコンテンツにアクセスできるようにしよう
    19
    

    View Slide

20. 全てのデバイスでコンテンツにアクセスできるために
    レスポンシブなWebを作ろう①
    Topic
    Media query
    スクリーンサイズによって、異なるCSSを適用することができる。
    レイアウト変更の区切りとなるスクリーンサイズのポイントのことを
    「ブレークポイント」という。
    20
    

    View Slide

21. 全てのデバイスでコンテンツにアクセスできるために
    レスポンシブなWebを作ろう①
    Topic
    レイアウト
    レスポンシブなWebではグリッド状にコンテンツを配置することが多い。
    デスクトップ用のCSSをベースにモバイル端末用のCSSを書くことを
    デスクトップファーストデザイン、モバイル用のCSSをベースにデスクトップ端末用
    のCSSを書くことをモバイルファーストデザインという。
    Flex Grid
    21
    

    View Slide

22. 全てのデバイスでコンテンツにアクセスできるために
    Media query を使ってみよう
    Try
    1 サンプルプロジェクトにアクセス
    2 Media query でレイアウトを変えてみる
    22
    

    View Slide

23. 全てのデバイスでコンテンツにアクセスできるために
    レスポンシブなWebを作ろう②
    Topic
    Container query
    Container query とはコンポーネントが持つサイズをブレークポイントの値として
    スタイルの切り替えを定義できる CSS セレクタ
    23
    

    View Slide

24. 全てのデバイスでコンテンツにアクセスできるために
    レスポンシブなWebを作ろう②
    Topic
    Container query
    Viewport(ページ幅)ではなく、親要素のサイズによってスタイルを決定したい場合に
    使う
    24
    Media query Container query
    

    View Slide

25. 全てのデバイスでコンテンツにアクセスできるために
    Container query を使ってみよう
    Try
    1 サンプルプロジェクトにアクセス
    2 Container query でレイアウトを変えてみる
    25
    

    View Slide

26. Announce
    休憩タイム
    26
    

    View Slide

27. Web 開発で意識すること
    すべての
    ユーザー
    が使えること
    すべての
    デバイス
    で使えること
    ユーザーに
    操作ストレス
    を与えないこと
    ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと
    27
    

    View Slide

28. ユーザーに操作ストレスを与えないために
    BBCは、ページの読み込みにかかる時間が１秒増えるだけで
    ページから離れるユーザー数が１０％増えることが
    わかったそうです。
    Point
    ユーザーを極力待たすことがないWebを作ろう
    28
    

    View Slide

29. ユーザーに操作ストレスを与えないために
    JavaScript は基本的にはシングルスレッドで動作し、実行中の
    タスクが完了しない限り次のタスクは開始されません。
    Point
    メインスレッドをブロックせずに処理するにはPromiseを使おう
    29
    

    View Slide

30. ユーザーに操作ストレスを与えないために
    非同期プログラミングを実践
    Topic
    Promise
    Promiseを使うことで非同期処理の結果を返すことができます。JSの非同期処理
    はメインスレッド上でメインタスクと並行で実行されます。非同期処理の成功値
    は resolve() に渡し、例外が起きた場合には reject() を実行することで失敗を通
    知することができます。
    30
    

    View Slide

31. ユーザーに操作ストレスを与えないために
    Promiseとasync/awaitを使ってみる
    Try
    1
    2 setTimeout で非同期処理を実行してみる
    サンプルプロジェクト にアクセス
    3 Promise で非同期処理の演算結果を使う
    4 async/await でPromiseを同期的に書く
    31
    

    View Slide

32. 読み込み完了
    読み込み中
    ユーザーに操作ストレスを与えないために
    layout shift を防ごう
    Topic
    layout shiftとは
    ページが読み込まれてから、ユーザーが意図しないコンテンツの表示位置のずれが生
    じること。ずれ幅が大きいほどユーザー操作を邪魔するので操作ストレスを上げる。
    layout shift
    32
    

    View Slide

33. ユーザーに操作ストレスを与えないために
    ページを表示するまでの処理を知る
    Topic
    1
    ブラウザに
    アドレスを入力
    2
    DNSサーバーに
    問合せ
    3
    サーバーにHTML
    ファイルをリクエ
    スト
    4
    リクエストがOK
    だったらHTTP200
    とHTMLファイルを
    返す
    5
    HTMLファイル
    取得完了
    6
    HTMLファイル
    をパース
    ブラウザにアドレスを入力した後の処理
    33
    

    View Slide

34. ユーザーに操作ストレスを与えないために
    ページを表示するまでの処理を知る
    Topic
    1
    HTMLファイル
    をパース
    2
    CSSファイルと
    JSファイルの参
    照の解析
    3
    HTMLのパース後、
    DOMツリーを生成
    4
    CSSのパース後、
    CSSOMツリーを
    生成
    5
    スタイルを
    DOM に適用す
    る
    6
    JavaScriptの
    パース&実行
    ブラウザがページを表示するまで
    34
    

    View Slide

35. ユーザーに操作ストレスを与えないために
    SPA のメリットを知ろう
    Topic
    SPAとは
    ページ数にかかわらず一つのHTMLファイルでページのコンテンツを全て管理して表
    示する開発手法。一般的にはJavaScriptのDOM APIで最上位のElementの子要素を入
    れ替えて表示を切り替える。history API を活用することで、同じHTMLファイルを使
    用しながらブラウザの履歴情報を追加し、表示コンテンツごとにURLを表現できる。
    35
    

    View Slide

36. ユーザーに操作ストレスを与えないために
    SPA のメリットを知ろう
    Topic
    SPAとMPAの比較
    1
    更新差分データ
    取得
    2
    新データを反映
    したElementの
    生成
    3
    DOMツリーに
    新しいElement
    の反映
    1
    新データを反映
    したHTMLファ
    イルのリクエス
    ト
    2
    ページを０から
    再構築
    3
    HTML,CSS,JS 全て
    のパースと実行が
    完了してページが
    描画
    MPA
    SPA
    36
    

    View Slide

37. DOM root
    ユーザーに操作ストレスを与えないために
    SPA のメリットを知ろう
    Topic
    SPAとMPAの比較
    MPA
    SPA
    >
    HTML
    element element
    >
    HTML
    >
    HTML
    Point
    SPAならページを０から組み立て直す必要なくUIを更新することができる
    37
    

    View Slide

38. ユーザーに操作ストレスを与えないために
    SPA のメリットを知ろう
    Topic
    SPAのユースケースQ&A
    Q 一気にページ全体のDOMを入れ替えるようなケースしかないWeb
    サイトでSPAは活きるの？
    A
    SPAは一般的にJSファイルのサイズが大きくなりがちな傾向にあ
    るので、トレードオフでMPAの方が速いケースもあり得ます。
    Point
    Webページのパフォーマンスはまず計測しましょう
    38
    

    View Slide

39. Announce
    休憩タイム
    39
    

    View Slide

40. ユーザーに操作ストレスを与えないために
    SPAの実現にポイントとなる要素
    仮想DOM
    差分検知
    宣言的UI
    SPA のメリットを知ろう
    Topic
    DOMツリーをオブジェクトで擬似的に表現して、描画する
    DOM構造をJavaScriptのランタイム上で管理する手法
    異なる参照のオブジェクト同士で差分比較を行う手法。一般
    的には shallow equal と呼ばれる比較が使われる
    UIを構築するための手法。最終的に構築するUIを宣言的に表
    現することでViewの可読性を担保することができる。
    40
    

    View Slide

41. 宣言型
    手続き型
    ユーザーに操作ストレスを与えないために
    Topic
    宣言的UIとは
    SPA のメリットを知ろう
    サンプルユーザー
    Hello world!
    これを作りたい
    Point
    宣言型はDOMツリー構造を宣言してUIを組み立てられるので人間に優しい
    41
    

    View Slide

42. ユーザーに操作ストレスを与えないために
    SPA のメリットを知ろう
    Topic
    仮想DOMとは
    DOM構造の状態を全てJavaScriptで保持することによって、実際のDOMにアクセスす
    る回数を限りなく減らし、DOMの更新で高いパフォーマンスを実現することができ
    ます。
    42
    

    View Slide

43. ユーザーに操作ストレスを与えないために
    SPA のメリットを知ろう
    Topic
    差分検知とは
    仮想DOMの一部のElementしか更新していないのに、差分を含まないElementごと全
    て実DOMに再反映するのは効率が悪いので、新旧の仮想DOMで差分が含まれるかど
    うかチェックし、再反映の影響範囲を最小限に抑えます。
    43
    

    View Slide

44. ユーザーに操作ストレスを与えないために
    SPA のメリットを知ろう
    Topic
    差分検知とは
    JavaScript においてオブジェクト同士の等価チェックは、参照が同一かを見るので同
    じプロパティ値でも参照が違えば「等価ではない」と判断されます。そこで、
    shallow equal という比較方法で、プロパティ値が同一かチェックします。
    const vDom1 = {
    element: “p”,
    innerText: “Hello World!”,
    }
    const vDom2 = {
    element: “p”,
    innerText: “Hello World!”,
    }
    ≠
    44
    

    View Slide

45. ユーザーに操作ストレスを与えないために
    簡易的な仮想DOMを作ってみよう
    Try
    1
    2 仮想DOMからElementを作ってみる
    サンプルプロジェクト にアクセス
    3 shallow equal 関数を作ってみる
    4 差分が発生した時だけ再レンダリングする
    45
    

    View Slide

46. ユーザーに操作ストレスを与えないために
    JSXを知ろう
    Topic
    JSXとは
    JavaScript を拡張して、仮想DOM をHTMLのような形式で記述できるようにしたも
    の。主に React というUI構築ライブラリで使われていて、JSX形式で記述したコード
    は生仮想DOMに変換してから実行する。
    h(“p”, “Hello World!”); Hello World!
    生仮想DOM JSX
    Point
    Reactを使うことでJSXを使ってSPAが構築できる
    46
    

    View Slide

47. ユーザーに操作ストレスを与えないために
    UI 構築ライブラリを知ろう
    Topic
    Reactとは
    47
    コンポーネント志向
    様々な場所で動く
    宣言的な View
    View をコンポーネントとしてカプセル化することができ
    る。UI パーツごとでコンポーネント化するなどできる。
    React で書かれた View は Web だけでなく、ネイティブア
    プリや様々な場所でも動かすことができる。
    状態ごとの View を JS 上で定義することで、状態の更新を
    検知して、関連するコンポーネントだけを再描画する。
    

    View Slide

48. ユーザーに操作ストレスを与えないために
    状態管理の手法を知ろう
    Topic
    React Hooks とは
    React が提供する機能群の名称。
    UIの状態を保持する機能・
    関数や計算コストの高いロジック
    の演算結果をキャッシュ（メモ化）
    する機能などを提供する。
    48
    

    View Slide

49. ユーザーに操作ストレスを与えないために
    React Hooks に触れてみよう
    Try
    1
    2 カウンターを作ってみよう
    49
    サンプルプロジェクト にアクセス
    

    View Slide

50. ユーザーに操作ストレスを与えないために
    演習プロジェクトを立ち上げよう
    Try
    1 GitHubリポジトリから clone
    $ git clone –recursive
    https://github.com/mixigroup/2023BeginnerTrainingFrontEnd.git
    2 データベースをマイグレート
    $ cd packages/api-server/submodules/spa_guide_sns_server
    $ npm i && npm run start_migrate && npm run start_release
    3 ビルド & dev サーバー立ち上げ
    $ cd packages/api-server
    $ npm i && npm run
    50
    

    View Slide

51. ユーザーに操作ストレスを与えないために
    検索ボックスを管理しよう
    Try
    1 コンポーネントの送信イベントから検索キーワードを取得
    2 useState に検索キーワードの値を反映する
    51
    

    View Slide

52. ユーザーに操作ストレスを与えないために
    スタイリング手法を知ろう
    Topic
    CSS in JS
    52
    JavaScript 上で動的にスタイルを管理する手法。通常はランタイ
    ム時に最終的なスタイリングが展開されるが、ゼロランタイム
    に対応した CSS in JS であればビルド時にあらかじめスタイリン
    グを展開するなどして、処理コストを減らすことができる。
    Point
    処理コストを最小限に抑えることでUIの描画を軽くしよう
    

    View Slide

53. ユーザーに操作ストレスを与えないために
    キャッシュ戦略を知ろう
    Topic
    Stale While Revalidateとは
    ブラウザのキャッシュ戦略の一つ。「キャッシュを返しつつ、できるだけ最新の
    情報を参照する」状態を指します。ユーザーをロード状態で待たせることなくで
    きるだけ最新の情報を提供します。
    キャッシュ
    更新リクエスト
    ①リクエスト
    ②レスポンス
    ①リクエスト
    時に再検証
    ③キャッシュ更新
    ユーザー
    53
    

    View Slide

54. ユーザーに操作ストレスを与えないために
    キャッシュ戦略を知ろう
    Topic
    APIデータのキャッシュ
    SWR React Query
    Stale While Revalidate を実現するためのライブラリがReactでも開発されています。
    54
    

    View Slide

55. ユーザーに操作ストレスを与えないために
    コミュニティ詳細を表示しよう
    Try
    1 useCommunity hook の実装
    2 pages/communities/communityDetail.tsx のダミーデータ
    置き換え
    55
    

    View Slide

56. Announce
    休憩タイム
    56
    

    View Slide

57. ユーザーに操作ストレスを与えないために
    React の再レンダリングを知ろう
    Topic
    Concurrent Rendering とは
    UIのチラつきによるユーザー体験劣化を防ぐため、再レンダリングをスロットリング
    したり、一瞬で解決されるPromiseなどで割り込みのsetStateを防止する機能。
    setState()
    setState()
    setState()
    スロットリング
    再レンダリング
    再レンダリング
    忙しいのでskip
    Promiseで中断
    setState()
    Promise解決
    してないのでskip
    setState()
    Promise解決した
    ので再レンダリング
    throw new Promise()
    resolve()
    setState()
    Promise解決
    してないのでskip
    57
    

    View Slide

58. ユーザーに操作ストレスを与えないために
    イベントを作成してみよう
    Try
    1 useCreateCommunityEvent のAPI通信処理実装
    2 フォーム送信時にコミュニティ作成処理追加
    58
    

    View Slide

59. ユーザーに操作ストレスを与えないために
    コメント欄を作ってみよう
    Try
    1 CommunityEventSummary コンポーネントにコメント欄の
    実装
    2 useListCommunityEventComment hook からコメント取得
    59
    

    View Slide

60. Web 開発で意識すること
    すべての
    ユーザー
    が使えること
    すべての
    デバイス
    で使えること
    ユーザーに
    操作ストレス
    を与えないこと
    ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと
    60
    

    View Slide

61. Yutaro Yoshikawa

    

    View Slide