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

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

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

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

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

Transcript

1. ２３新卒 フロントエンド研修
2. Web の特徴 誰でも 情報を公開できる 2
3. Web の特徴 リンクによって あらゆるページが繋がる 3
4. Web の特徴 ブラウザさえあれば 全てのユーザーが 情報にアクセスできる 4
5. Web 開発で意識すること すべての ユーザー が使えること すべての デバイス で使えること ユーザーに 操作ストレス を与えないこと ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと 5
6. Web 開発で意識すること すべての ユーザー が使えること すべての デバイス で使えること ユーザーに 操作ストレス を与えないこと ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと 6
7. 全てのユーザーがコンテンツにアクセスするために 音声リーダー 拡大鏡 キーボード bot ブラウザは、様々な個性を持ったユーザー がコンテンツにアクセスできるように 様々な補助機能を用意している。 7
8. 全てのユーザーがコンテンツにアクセスするために ブラウザの機能を十分に活かすには HTML のマークアップが意味論理的に正しくある必要がある。 Point マークアップを適切にしよう 8
9. 全てのユーザーがコンテンツにアクセスするために ブラウザが解釈しやすいHTMLを書く Topic HTMLとは Webページのコンテンツの構造を作るためのコード。 WebページはDOMと呼ばれるElementや文字列をノードとしたツリー構造 でコンテンツの構造を表現します。 Element 化 タグ 9
10. 要素の役割を定義する。 role=”navigation” は <nav> と同じ意味になる。 要素に性質や意味論を追加する。 <button aria-label=”閉じる”>❌</button> 要素の現在の状態を定義する。 aria-disabled=”true” は disabled=”true” と同じ 意味になる。 全てのユーザーがコンテンツにアクセスするために WAI-ARIA機能を活用してみよう Topic WAI-ARIA の要素 Role Property State 10
11. 全てのユーザーがコンテンツにアクセスするために WAI-ARIA機能を使ってみよう Try 1 サンプルプロジェクトにアクセス 2 スクリーンリーダーを起動 Command + F5 3 aria-label を設定してみる <button aria-label=”閉じる”>❌</button> 4 スクリーンリーダーで読み上げてみる 11
12. 要素の役割を定義する。 role=”navigation” は <nav> と同じ意味になる。 要素に性質や意味論を追加する。 <button aria-label=”閉じる”>❌</button> 要素の現在の状態を定義する。 aria-disabled=”true” は disabled=”true” と同じ 意味になる。 全てのユーザーがコンテンツにアクセスするために アクセシビリティツリーを知ろう Topic WAI-ARIA の要素 Role Property State 12
13. 全てのユーザーがコンテンツにアクセスするために アクセシビリティツリーを見てみよう Try 1 サンプルプロジェクトに Chrome でアクセス 2 デベロッパーツールの表示 Command + Option + i 3 アクセシビリティツリーの表示 13
14. 全てのユーザーがコンテンツにアクセスするために アクセシビリティツリーを見てみよう Try 14 DOM ＋ CSSOM = AOM アクセシビリティツリーは DOM と CSSOM（CSS から生成されるスタイルのツリー構造 データ）を元に生成されます
15. 全てのユーザーがコンテンツにアクセスするために アクセシビリティツリーに変化を与える Try 1 サンプルプロジェクトにアクセス 2 div を h1 に変えてみよう <h1>Hello world</h1> 15 マークアップによってアクセシビリティツリーに変化を与えよう
16. 全てのユーザーがコンテンツにアクセスするために アクセシビリティツリーに変化を与える Try 16 1 サンプルプロジェクトにアクセス 2 h1 に display: none を設定 h1 { display: none; } CSS によってアクセシビリティツリーに変化を与えよう
17. 全てのユーザーがコンテンツにアクセスするために アクセシビリティ達成基準を知ろう Topic アクセシビリティ Q&A Q アクセシビリティはどこまで気にすればいい？ A W3CがWCAGという達成すべきアクセシビリティレベルの基準を 設けているので、そこからどこまで達成するか選ぶといいです。 Point WAI-ARIAの使用はあくまでも必要最低限に留めてください 17
18. Web 開発で意識すること すべての ユーザー が使えること すべての デバイス で使えること ユーザーに 操作ストレス を与えないこと ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと 18
19. 全てのデバイスでコンテンツにアクセスできるために PC タブレット スマホ Web は色んな形のスクリーンサイズで 閲覧できる。 Point どんなスクリーンサイズでもコンテンツにアクセスできるようにしよう 19
20. 全てのデバイスでコンテンツにアクセスできるために レスポンシブなWebを作ろう① Topic Media query スクリーンサイズによって、異なるCSSを適用することができる。 レイアウト変更の区切りとなるスクリーンサイズのポイントのことを 「ブレークポイント」という。 20
21. 全てのデバイスでコンテンツにアクセスできるために レスポンシブなWebを作ろう① Topic レイアウト レスポンシブなWebではグリッド状にコンテンツを配置することが多い。 デスクトップ用のCSSをベースにモバイル端末用のCSSを書くことを デスクトップファーストデザイン、モバイル用のCSSをベースにデスクトップ端末用 のCSSを書くことをモバイルファーストデザインという。 Flex Grid 21
22. 全てのデバイスでコンテンツにアクセスできるために Media query を使ってみよう Try 1 サンプルプロジェクトにアクセス 2 Media query でレイアウトを変えてみる 22
23. 全てのデバイスでコンテンツにアクセスできるために レスポンシブなWebを作ろう② Topic Container query Container query とはコンポーネントが持つサイズをブレークポイントの値として スタイルの切り替えを定義できる CSS セレクタ 23
24. 全てのデバイスでコンテンツにアクセスできるために レスポンシブなWebを作ろう② Topic Container query Viewport(ページ幅)ではなく、親要素のサイズによってスタイルを決定したい場合に 使う 24 Media query Container query
25. 全てのデバイスでコンテンツにアクセスできるために Container query を使ってみよう Try 1 サンプルプロジェクトにアクセス 2 Container query でレイアウトを変えてみる 25
26. Announce 休憩タイム 26
27. Web 開発で意識すること すべての ユーザー が使えること すべての デバイス で使えること ユーザーに 操作ストレス を与えないこと ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと 27
28. ユーザーに操作ストレスを与えないために BBCは、ページの読み込みにかかる時間が１秒増えるだけで ページから離れるユーザー数が１０％増えることが わかったそうです。 Point ユーザーを極力待たすことがないWebを作ろう 28
29. ユーザーに操作ストレスを与えないために JavaScript は基本的にはシングルスレッドで動作し、実行中の タスクが完了しない限り次のタスクは開始されません。 Point メインスレッドをブロックせずに処理するにはPromiseを使おう 29
30. ユーザーに操作ストレスを与えないために 非同期プログラミングを実践 Topic Promise Promiseを使うことで非同期処理の結果を返すことができます。JSの非同期処理 はメインスレッド上でメインタスクと並行で実行されます。非同期処理の成功値 は resolve() に渡し、例外が起きた場合には reject() を実行することで失敗を通 知することができます。 30
31. ユーザーに操作ストレスを与えないために Promiseとasync/awaitを使ってみる Try 1 2 setTimeout で非同期処理を実行してみる サンプルプロジェクト にアクセス 3 Promise で非同期処理の演算結果を使う 4 async/await でPromiseを同期的に書く 31
32. 読み込み完了 読み込み中 ユーザーに操作ストレスを与えないために layout shift を防ごう Topic layout shiftとは ページが読み込まれてから、ユーザーが意図しないコンテンツの表示位置のずれが生 じること。ずれ幅が大きいほどユーザー操作を邪魔するので操作ストレスを上げる。 layout shift 32
33. ユーザーに操作ストレスを与えないために ページを表示するまでの処理を知る Topic 1 ブラウザに アドレスを入力 2 DNSサーバーに 問合せ 3 サーバーにHTML ファイルをリクエ スト 4 リクエストがOK だったらHTTP200 とHTMLファイルを 返す 5 HTMLファイル 取得完了 6 HTMLファイル をパース ブラウザにアドレスを入力した後の処理 33
34. ユーザーに操作ストレスを与えないために ページを表示するまでの処理を知る Topic 1 HTMLファイル をパース 2 CSSファイルと JSファイルの参 照の解析 3 HTMLのパース後、 DOMツリーを生成 4 CSSのパース後、 CSSOMツリーを 生成 5 スタイルを DOM に適用す る 6 JavaScriptの パース&実行 ブラウザがページを表示するまで 34
35. ユーザーに操作ストレスを与えないために SPA のメリットを知ろう Topic SPAとは ページ数にかかわらず一つのHTMLファイルでページのコンテンツを全て管理して表 示する開発手法。一般的にはJavaScriptのDOM APIで最上位のElementの子要素を入 れ替えて表示を切り替える。history API を活用することで、同じHTMLファイルを使 用しながらブラウザの履歴情報を追加し、表示コンテンツごとにURLを表現できる。 35
36. ユーザーに操作ストレスを与えないために SPA のメリットを知ろう Topic SPAとMPAの比較 1 更新差分データ 取得 2 新データを反映 したElementの 生成 3 DOMツリーに 新しいElement の反映 1 新データを反映 したHTMLファ イルのリクエス ト 2 ページを０から 再構築 3 HTML,CSS,JS 全て のパースと実行が 完了してページが 描画 MPA SPA 36
37. DOM root ユーザーに操作ストレスを与えないために SPA のメリットを知ろう Topic SPAとMPAの比較 MPA SPA </> HTML element element </> HTML </> HTML Point SPAならページを０から組み立て直す必要なくUIを更新することができる 37
38. ユーザーに操作ストレスを与えないために SPA のメリットを知ろう Topic SPAのユースケースQ&A Q 一気にページ全体のDOMを入れ替えるようなケースしかないWeb サイトでSPAは活きるの？ A SPAは一般的にJSファイルのサイズが大きくなりがちな傾向にあ るので、トレードオフでMPAの方が速いケースもあり得ます。 Point Webページのパフォーマンスはまず計測しましょう 38
39. Announce 休憩タイム 39
40. ユーザーに操作ストレスを与えないために SPAの実現にポイントとなる要素 仮想DOM 差分検知 宣言的UI SPA のメリットを知ろう Topic DOMツリーをオブジェクトで擬似的に表現して、描画する DOM構造をJavaScriptのランタイム上で管理する手法 異なる参照のオブジェクト同士で差分比較を行う手法。一般 的には shallow equal と呼ばれる比較が使われる UIを構築するための手法。最終的に構築するUIを宣言的に表 現することでViewの可読性を担保することができる。 40
41. 宣言型 手続き型 ユーザーに操作ストレスを与えないために Topic 宣言的UIとは SPA のメリットを知ろう サンプルユーザー Hello world! これを作りたい Point 宣言型はDOMツリー構造を宣言してUIを組み立てられるので人間に優しい 41
42. ユーザーに操作ストレスを与えないために SPA のメリットを知ろう Topic 仮想DOMとは DOM構造の状態を全てJavaScriptで保持することによって、実際のDOMにアクセスす る回数を限りなく減らし、DOMの更新で高いパフォーマンスを実現することができ ます。 42
43. ユーザーに操作ストレスを与えないために SPA のメリットを知ろう Topic 差分検知とは 仮想DOMの一部のElementしか更新していないのに、差分を含まないElementごと全 て実DOMに再反映するのは効率が悪いので、新旧の仮想DOMで差分が含まれるかど うかチェックし、再反映の影響範囲を最小限に抑えます。 43
44. ユーザーに操作ストレスを与えないために SPA のメリットを知ろう Topic 差分検知とは JavaScript においてオブジェクト同士の等価チェックは、参照が同一かを見るので同 じプロパティ値でも参照が違えば「等価ではない」と判断されます。そこで、 shallow equal という比較方法で、プロパティ値が同一かチェックします。 const vDom1 = { element: “p”, innerText: “Hello World!”, } const vDom2 = { element: “p”, innerText: “Hello World!”, } ≠ 44
45. ユーザーに操作ストレスを与えないために 簡易的な仮想DOMを作ってみよう Try 1 2 仮想DOMからElementを作ってみる サンプルプロジェクト にアクセス 3 shallow equal 関数を作ってみる 4 差分が発生した時だけ再レンダリングする 45
46. ユーザーに操作ストレスを与えないために JSXを知ろう Topic JSXとは JavaScript を拡張して、仮想DOM をHTMLのような形式で記述できるようにしたも の。主に React というUI構築ライブラリで使われていて、JSX形式で記述したコード は生仮想DOMに変換してから実行する。 h(“p”, “Hello World!”); <p>Hello World!</p> 生仮想DOM JSX Point Reactを使うことでJSXを使ってSPAが構築できる 46
47. ユーザーに操作ストレスを与えないために UI 構築ライブラリを知ろう Topic Reactとは 47 コンポーネント志向 様々な場所で動く 宣言的な View View をコンポーネントとしてカプセル化することができ る。UI パーツごとでコンポーネント化するなどできる。 React で書かれた View は Web だけでなく、ネイティブア プリや様々な場所でも動かすことができる。 状態ごとの View を JS 上で定義することで、状態の更新を 検知して、関連するコンポーネントだけを再描画する。
48. ユーザーに操作ストレスを与えないために 状態管理の手法を知ろう Topic React Hooks とは React が提供する機能群の名称。 UIの状態を保持する機能・ 関数や計算コストの高いロジック の演算結果をキャッシュ（メモ化） する機能などを提供する。 48
49. ユーザーに操作ストレスを与えないために React Hooks に触れてみよう Try 1 2 カウンターを作ってみよう 49 サンプルプロジェクト にアクセス
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
51. ユーザーに操作ストレスを与えないために 検索ボックスを管理しよう Try 1 コンポーネントの送信イベントから検索キーワードを取得 2 useState に検索キーワードの値を反映する 51
52. ユーザーに操作ストレスを与えないために スタイリング手法を知ろう Topic CSS in JS 52 JavaScript 上で動的にスタイルを管理する手法。通常はランタイ ム時に最終的なスタイリングが展開されるが、ゼロランタイム に対応した CSS in JS であればビルド時にあらかじめスタイリン グを展開するなどして、処理コストを減らすことができる。 Point 処理コストを最小限に抑えることでUIの描画を軽くしよう
53. ユーザーに操作ストレスを与えないために キャッシュ戦略を知ろう Topic Stale While Revalidateとは ブラウザのキャッシュ戦略の一つ。「キャッシュを返しつつ、できるだけ最新の 情報を参照する」状態を指します。ユーザーをロード状態で待たせることなくで きるだけ最新の情報を提供します。 キャッシュ 更新リクエスト ①リクエスト ②レスポンス ①リクエスト 時に再検証 ③キャッシュ更新 ユーザー 53
54. ユーザーに操作ストレスを与えないために キャッシュ戦略を知ろう Topic APIデータのキャッシュ SWR React Query Stale While Revalidate を実現するためのライブラリがReactでも開発されています。 54
55. ユーザーに操作ストレスを与えないために コミュニティ詳細を表示しよう Try 1 useCommunity hook の実装 2 pages/communities/communityDetail.tsx のダミーデータ 置き換え 55
56. Announce 休憩タイム 56
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
58. ユーザーに操作ストレスを与えないために イベントを作成してみよう Try 1 useCreateCommunityEvent のAPI通信処理実装 2 フォーム送信時にコミュニティ作成処理追加 58
59. ユーザーに操作ストレスを与えないために コメント欄を作ってみよう Try 1 CommunityEventSummary コンポーネントにコメント欄の 実装 2 useListCommunityEventComment hook からコメント取得 59
60. Web 開発で意識すること すべての ユーザー が使えること すべての デバイス で使えること ユーザーに 操作ストレス を与えないこと ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと 60
61. Yutaro Yoshikawa