Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Hello world

15 マークアップによってアクセシビリティツリーに変化を与えよう

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Announce 休憩タイム 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Announce 休憩タイム 39

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Hello World!

生仮想DOM JSX Point Reactを使うことでJSXを使ってSPAが構築できる 46

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

ユーザーに操作ストレスを与えないために演習プロジェクトを立ち上げよう 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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Announce 休憩タイム 56

Slide 57

Slide 57 text

ユーザーに操作ストレスを与えないために 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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Yutaro Yoshikawa 