フロントエンド研修【ミクシィ22新卒技術研修】

22新卒技術研修で実施したフロントエンド研修の講義資料です。
動画：https://youtu.be/xVNDJjsaW-0

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

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