Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

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

MIXI ENGINEERS

May 01, 2023
Tweet

More Decks by MIXI ENGINEERS

Other Decks in Technology

Transcript

  1. Web 開発で意識すること すべての ユーザー が使えること すべての デバイス で使えること ユーザーに 操作ストレス

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

    を与えないこと ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと 6
  3. 要素の役割を定義する。 role=”navigation” は <nav> と同じ意味になる。 要素に性質や意味論を追加する。 <button aria-label=”閉じる”>❌</button> 要素の現在の状態を定義する。 aria-disabled=”true”

    は disabled=”true” と同じ 意味になる。 全てのユーザーがコンテンツにアクセスするために WAI-ARIA機能を活用してみよう Topic WAI-ARIA の要素 Role Property State 10
  4. 全てのユーザーがコンテンツにアクセスするために WAI-ARIA機能を使ってみよう Try 1 サンプルプロジェクトにアクセス 2 スクリーンリーダーを起動 Command + F5

    3 aria-label を設定してみる <button aria-label=”閉じる”>❌</button> 4 スクリーンリーダーで読み上げてみる 11
  5. 要素の役割を定義する。 role=”navigation” は <nav> と同じ意味になる。 要素に性質や意味論を追加する。 <button aria-label=”閉じる”>❌</button> 要素の現在の状態を定義する。 aria-disabled=”true”

    は disabled=”true” と同じ 意味になる。 全てのユーザーがコンテンツにアクセスするために アクセシビリティツリーを知ろう Topic WAI-ARIA の要素 Role Property State 12
  6. Web 開発で意識すること すべての ユーザー が使えること すべての デバイス で使えること ユーザーに 操作ストレス

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

    を与えないこと ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと 27
  8. ユーザーに操作ストレスを与えないために ページを表示するまでの処理を知る Topic 1 ブラウザに アドレスを入力 2 DNSサーバーに 問合せ 3

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

    3 HTMLのパース後、 DOMツリーを生成 4 CSSのパース後、 CSSOMツリーを 生成 5 スタイルを DOM に適用す る 6 JavaScriptの パース&実行 ブラウザがページを表示するまで 34
  10. ユーザーに操作ストレスを与えないために SPA のメリットを知ろう Topic SPAとMPAの比較 1 更新差分データ 取得 2 新データを反映

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

    HTML element element </> HTML </> HTML Point SPAならページを0から組み立て直す必要なくUIを更新することができる 37
  12. ユーザーに操作ストレスを与えないために SPAの実現にポイントとなる要素 仮想DOM 差分検知 宣言的UI SPA のメリットを知ろう Topic DOMツリーをオブジェクトで擬似的に表現して、描画する DOM構造をJavaScriptのランタイム上で管理する手法

    異なる参照のオブジェクト同士で差分比較を行う手法。一般 的には shallow equal と呼ばれる比較が使われる UIを構築するための手法。最終的に構築するUIを宣言的に表 現することでViewの可読性を担保することができる。 40
  13. 宣言型 手続き型 ユーザーに操作ストレスを与えないために Topic 宣言的UIとは SPA のメリットを知ろう サンプルユーザー Hello world!

    これを作りたい Point 宣言型はDOMツリー構造を宣言してUIを組み立てられるので人間に優しい 41
  14. ユーザーに操作ストレスを与えないために UI 構築ライブラリを知ろう Topic Reactとは 47 コンポーネント志向 様々な場所で動く 宣言的な View

    View をコンポーネントとしてカプセル化することができ る。UI パーツごとでコンポーネント化するなどできる。 React で書かれた View は Web だけでなく、ネイティブア プリや様々な場所でも動かすことができる。 状態ごとの View を JS 上で定義することで、状態の更新を 検知して、関連するコンポーネントだけを再描画する。
  15. ユーザーに操作ストレスを与えないために 演習プロジェクトを立ち上げよう 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
  16. ユーザーに操作ストレスを与えないために スタイリング手法を知ろう Topic CSS in JS 52 JavaScript 上で動的にスタイルを管理する手法。通常はランタイ ム時に最終的なスタイリングが展開されるが、ゼロランタイム

    に対応した CSS in JS であればビルド時にあらかじめスタイリン グを展開するなどして、処理コストを減らすことができる。 Point 処理コストを最小限に抑えることでUIの描画を軽くしよう
  17. ユーザーに操作ストレスを与えないために 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
  18. Web 開発で意識すること すべての ユーザー が使えること すべての デバイス で使えること ユーザーに 操作ストレス

    を与えないこと ※ここでいう「使える」とはコンテンツにアクセスできる状態のこと 60