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

本スライドは、MIXIの2026年度新卒向け技術研修で使用された資料です。
　
MIXI 2026新卒技術研修
『WEBフロントエンド研修』
　
───────────────────────────────
※皆様へのお願い※ 資料・動画・リポジトリのご利用について
───────────────────────────────
公開している資料や動画は、是非、勉強会や社内の研修などにご自由にお使いいただければと思いますが、以下のような場でのご利用はご遠慮ください。
- 受講者から参加費や授業料など金銭を集めるような場での利用
（会場費や飲食費など勉強会の運営に必要な実費を集める場合は問題ありません）
- 出典を削除または改変しての利用

Transcript

1. ２６新卒 フロントエンド研修
4. 本日の研修の内容 4 基礎編: アプリケーション編: 1. Web の概要 5. SPAとMPA 2. 描画の仕組み 6. React の基本 3. ブラウザの仕組み 7. フロントエンドの開発環境 4. JavaScript の非同期処理 8. フロントエンドのデバッグ 9. 演習
5. 1. Web の概要
6. Web の特徴 誰でも 情報を公開できる 6
7. Web の特徴 リンク によって あらゆるページが繋がる 7
8. Web の特徴 ブラウザさえあれば 全てのユーザー が 情報にアクセスできる 8
9. サーバーとクライアント Web ではサーバーとクライアントが HTTP でリソースをやりとりする サーバー: HTTP リクエストを受けてレスポンスを返す • 用意されたファイルをそのまま返すもの (nginx, Apache など) • ロジックを実行してレスポンスを動的に生成するもの (Express, Flask, Rails など) クライアント: サーバーに HTTP リクエストを送る • 代表例がブラウザ (Chrome, Safari, Firefox など) • curl など、ブラウザ以外のクライアントもある この研修で扱う "フロントエンド" は主にブラウザ側の技術 9
10. ブラウザがページを表示する流れ 10
11. HTMLとCSSとJavaScriptの分業 HTML CSS JavaScrip t Webページの構造を定義する。 /but HTMLで定義された構造にスタイル を適用し、見た目を整える Webページに動的な機能やインタラクティブ な要素を追加する ユーザーを極力待たすことがないWebを作ろう Point 11 HTML, CSS, JavaScriptがそれぞれ異なる役割を持っている
12. HTMLとCSSとJavaScriptの分業 HTML CSS JavaScrip t Point 12 HTMLはWebページの構造を定義するマークアップ言語
13. HTMLとCSSとJavaScriptの分業 HTML CSS JavaScrip t Point 13 CSSはWebページの見た目を装飾する言語
14. HTMLとCSSとJavaScriptの分業 HTML CSS JavaScrip t Point 14 JavaScriptでクリックや入力に反応できる
15. ミニ演習: HTML, CSS, JavaScript を書いてみる 15 1 サンプルプロジェクト にアクセス 2 h1 のテキストを変える (HTML) 3 色やフォントサイズを変える (CSS) 4 ボタンクリック時の動作を変える (JS)
16. 2. 描画の仕組み
17. レンダリングパイプライン ブラウザは HTML と CSS を受け取ってから画面に描画するまで、以下のステップを踏む 17 1. HTML をパースして DOM ツリーを構築 2. CSS をパースして CSSOM ツリーを構築 3. DOM と CSSOM からレンダリングツリーを構築 4. レイアウト: 各ノードの位置とサイズを計算 5. ペイント: ピクセルを画面に描画
18. HTML → DOM ツリー ブラウザは HTML を解析して DOM (Document Object Model) ツリーを構築する DOM は文書をオブジェクトで表現するモデル 18 • HTML の各要素が DOM ノード (オブジェクト) になる • ノード間に親子関係があり、木を成す • ブラウザが提供する DOM API で、JS から操作できる
19. DOM への変換例 19
20. DOM 要素の参照 参考: Document - Web API | MDN 20
21. レンダリングツリーの構築 ブラウザはCSS も同様に解析して CSSOM (CSS Object Model) ツリーを構築する DOM ツリー、CSSOM ツリーを結合して、レイアウト計算の対象になるノードのみ からなるレンダリングツリーを作る 21 出典: “レンダリング ツリーの構築、レイアウト、ペイント” by Google, licensed under CC BY 4.0 https://web.dev/articles/critical-rendering-path/render-tree-construction (2026-04-17 参照)
22. DOM の変更がレンダリングを再実行する JS が DOM を更新すると、ブラウザはレンダリングツリーの構築以降を再実行する 22
23. DOM イベント 画面を動的に更新するには、DOM を変更する "きっかけ" が要る ブラウザはユーザー操作やページの状態変化を検知し、「イベント」を発生させる • ユーザー操作: click, input, submit, keydown, scroll など • ページの状態変化: load, DOMContentLoaded, resize など 参考: DOM イベント - Web API | MDN 23
24. イベントハンドラの登録 addEventListener でイベントが発生したときに実行する関数 (イベントハンドラ) を登録する 参考: EventTarget: addEventListener() メソッド - Web API | MDN 24
25. 状態管理の難しさ 状態を更新したとき、それに依存するすべての DOM を漏れなく更新するのは開発者の責任 更新処理が増えたら? 状態が増えたら? → 状態と UI を一貫させるのが難しくなる React などの UI ライブラリ/フレームワークがこの問題を解決する (講義後半で扱う) 状態 状態の更新 UI の更新 25
26. ミニ演習: 状態管理の複雑さを体験する 26 1 サンプルプロジェクト にアクセス 2 コメントに従って、 TODO アプリを完成させる
27. Announce 休憩タイム 27
28. 3. ブラウザの仕組み
29. ブラウザの構成要素 ブラウザは役割ごとの複数のコンポーネント で構成されている。 主要なブラウザの JavaScript エンジン: Chrome: V8 Firefox: SpiderMonkey Safari: JavaScriptCore 29 出典: “ブラウザの仕組み” by Google, licensed under CC BY 4.0 を改変 赤枠は当社で加筆 https://web.dev/articles/howbrowserswork (2026-04-17 参照)
30. Event Loop ブラウザ全体はマルチプロセス・マルチスレッドだが、 JS の実行・レンダリング・イベント処理などはメインスレッドの Event Loop で処理する 1. Task Queue からタスクを 1 つ取り出して実行 (ネットワーク・タイマーなど、メインスレッド以外のブラウザ内部機構が enqueue) 2. Microtask Queue が空になるまで dequeue & 実行 (JS エンジンが Promise 解決時などに enqueue。Promise については次章) 3. 必要ならレンダリング (60 fps なら約 16.7 ms ごと) 4. 次のサイクルへ 30
31. レンダリングブロック メインスレッドの処理イメージ JavaScript Rendering JavaScript Rendering JS の実行が長引くと、レンダリングをブロックする JavaScript 時間のかかる処理はメインスレッド外で非同期に実行したい 31 Renderin g
32. 非同期関数の例: setTimeout 「指定時間後にコールバックを Task Queue に入れる」とブラウザに依頼する Web API メインスレッドが 3 秒止まるのではなく、ブラウザがメインスレッドの外で タイマーを管理する コールバック 参考: Window: setTimeout() メソッド - Web API | MDN 32
33. setTimeout(fn, 0) 待ち時間が 0 ms でもコールバックは Task Queue を経由する 33
34. JavaScript Visualizer 9000 https://www.jsv9000.app/ 34
35. 発展: Task Queue は誰のもの? ここまで見た Task Queue は JS エンジン ではなく、ホスト環境 (ブラウザ) 側にある • • • ECMAScript は「言語」だけを定める タスクをいつ・どこに積むかは ホスト環境に委ねる (Host Hooks) JS エンジンは、ホスト環境が実装を注入 できる設計になっている 出典: “ブラウザの仕組み” by Google, licensed under CC BY 4.0 を改変 赤枠は当社で加筆 https://web.dev/articles/howbrowserswork (2026-04-17 参照) 35
36. 発展: V8 は TaskRunner 経由で Task Queue を操作する 継承 36
37. 発展: V8 への JS 関数の登録 37 この名前で JS から呼ぶ
38. ミニ演習: setTimeout・レンダリングブロック 38 1 サンプルプロジェクト にアクセス 2 コメントに従って実装
39. Announce 休憩タイム 39
40. 4. JavaScript の非同期処理
41. 復習: コールバック 非同期処理の基本形。「後で実行する処理」を渡す。 (いわゆる、CPS = Continuation-passing style) 41
42. コールバック地獄 コールバックだけでは再現なく入れ子が深くなる 42
43. Promise 非同期処理の結果を表すオブジェクト 状態は pending (処理中) から始まり、fullfilled (成功) / rejected (失敗) の どちらかに遷移する 他言語にも同様の概念がある。 Python: asyncio.Future, Kotlin: Deferred<T>, Swift: Task<Success, Failure> (ただし、JS の Promise はオブジェクト構築後に即時実行される) 参考: Promise() コンストラクター - JavaScript | MDN 43
44. Promise チェーン .then() に後続処理を渡す。コールバックは microtask として処理される。 .then() の戻り値も Promise なので連鎖できる。 44
45. async/await Promise を読みやすく書くための構文 async を付けた関数は Promise を返す (コード例だと Promise<void>) await は async 関数の中でのみ使える 45
46. await は .then() と等価な振る舞いをする await の後ろの処理は、.then() に渡したコールバックと同じタイミングで実行される (JS エンジンが内部で microtask として enqueue する) 見た目はその行で「待っている」が、メインスレッドはブロックしない 46
47. JavaScript Visualizer 9000 の “Microtask Queue” を見る 47
48. ミニ演習: fetch API 1 サンプルプロジェクト にアクセス 2 コメントに従って実装 参考: Window: fetch() メソッド - Web API | MDN 48
49. Announce 休憩タイム 49
50. 5. SPA と MPA
51. Webアプリケーションの構築方法 Topic SPAとReactについて知ろう 1. SPAとMPAの違い 2. SPAがどのように画面を切り替えるか 3. Reactについて 4. Reactの詳細 51 Webアプリケーションの構築方法としてSPAとMPAがある </> HTML
52. Webアプリケーションの構築方法 SPAとMPAについて知ろう Topic SPAとMPAの比較 MPA SPA </> HTML </> HTML DOM root element 52 element Point Webアプリケーションの構築方法としてSPAとMPAがある </> HTML
53. MPAのページ取得の流れ Topic MPA について知ろう HTML HTML https://example.com/mypage に 画面遷移 https://example.co mを アドレスバーに入力 Point 53 ユーザーがページ遷移するたびにサーバーからHTMLを取得
54. SPAを理解しよう Topic MPAとの違いを知ろう SPAとは ページ数にかかわらず一つのHTMLファイルでページのコンテンツを全て管理して 表示する開発手法。 54 History API を活用することで、同じHTMLファイルを使用しながらブラウザの 履歴情報を追加し、表示コンテンツごとにURLを表現できる。
55. SPAのページ取得の流れ Topic SPA について知ろう HTML https://example.co mを アドレスバーに入力 HTML https://example.com/mypage に 画面遷移 JavaScriptが画面を書き換え Point 55 ユーザーが画面を遷移するとJavaScriptが画面を書き換える
56. SPAについて SPA と MPA の違いを知ろう Topic SPAとMPAの比較 MPA SPA </> HTML </> HTML DOM root element 56 element Point SPAならサーバーからHTMLを取得することなく画面遷移ができる </> HTML
57. SPAのメリット・デメリット メリット 高速なページ遷移 必要な部分だけ をJavaScriptで更新するので、 ページの切り替えで 画面全体を再読み込みしない デメリット 初回読み込みにかかる時間 JavaScriptやHTML/CSSのリソースを一括で読み込むため、 むしろ時間がかかることもある Point 57 ユーザーを極力待たすことがないWebを作ろう SPAには大きなメリットがあるが、デメリットも存在
58. SPAについて Topic SPAを支える代表的なライブラリを知ろう React Meta（旧Facebook）によって開発された UIを構築するためのJavaScriptライブラリ コンポーネントと呼ばれる 再利用可能なUIの部品を利用する SPAの構築に非常に適している 58
59. 6. React の基本
60. Reactについて Topic UI 構築ライブラリを知ろう Reactとは 宣言的な View 60 状態ごとの View を JS 上で定義することで、状態の更新を 検知して、関連するコンポーネントだけを再描画する。 コンポーネント志 向 View をコンポーネントとしてカプセル化することができる。 UI パーツごとでコンポーネント化するなどできる。 様々な場所で動く React で書かれた View は Web だけでなく、 ネイティブアプリや様々な場所でも動かすことができる。
61. Reactについて Topic 61 宣言的 UI 仮想 DOM 差分検 知 Reactの特徴 UIを構築するための手法。最終的に構築するUIを宣言的に表 現することでViewの可読性を担保することができる。 DOMツリーをオブジェクトで擬似的に表現して、 描画するDOM構造をJavaScriptのランタイム上で管理する手法 異なる参照のオブジェクト同士で差分比較を行う手法。 一般的には shallow equal と呼ばれる比較が使われる
62. 手続き型と宣言型の違い Topic 宣言的UIとは React のメリットを知ろう 手続き型 宣言型 サンプルユーザー Hello world! これを作りたい 62 Point 宣言型はDOMツリー構造を宣言してUIを組み立てられるので人間に優しい
63. 仮想DOMについて Topic React のメリットを知ろう 仮想DOMとは 63 DOM構造の状態を全てJavaScriptで保持することによって、 実際のDOMにアクセスする回数を限りなく減らし、 DOMの更新で高いパフォーマンスを実現することができます。
64. 差分検知について Topic React のメリットを知ろう 差分検知とは const vDom1 = { element: “p”, innerText: “Hello World!”, } ≠ const vDom2 = { element: “p”, innerText: “Hello World!”, } JavaScript においてオブジェクト同士の等価チェックは、 参照が同一かを見るので同じプロパティ値でも参照が違えば「等価ではない」と判断されます。 そこで、 shallow equal という比較方法で、プロパティ値が同一かチェックします。 64
65. Reactについて Topic JSXについて知ろう ReactではJavaScriptの中にHTMLのような記述を埋め込める JavaScriptのみで作成 65 Point JSXを利用するとHTMLっぽく記述できる JSXという構文を利用することが多い JSXで作成
66. Reactについて Topic コンポーネントについて知ろう コンポーネントとは UIを構成する再利用可能な部品。 コンポーネントを組み合わせることで 複雑なUIが構築できる。 コンポーネントを利用する際にデータ を渡すことで、柔軟にUIを設計でき る。 66 作成されるUI
67. Reactについて Topic 状態について知ろう 状態とは コンポーネントが保持するデータ 例） 67 • カウンターの数値 • フォームの入力値 • チェックボックスの選択状態
68. Reactについて Topic 状態について知ろう Q 状態と見出しなどの静的なデータの違いは？ 見出しなどの静的なデータはページを開いた時から変わりません。 ユーザーの操作などに応じて変化する値を状態として管理します。 68 A Point ユーザーの操作などに応じて動的に変わる値を状態として管理する
69. Reactについて Topic 状態管理の手法を知ろう React Hooks とは React が提供する機能群の名称。 UIの状態を保持する機能・ 関数や計算コストの高いロジック の演算結果をキャッシュ（メモ化） する機能などを提供する。 69
70. Reactについて Topic 代表的なhooks useStateを知ろう useStateとは Reactで状態を管理するために利用する機 能 ユーザーの操作やイベントによって変化す るデータを「状態」として保持し、更新し ます 70
71. Reactについて Topic 代表的なhooks useStateを知ろう useStateの使い方 Point 71 useStateを利用することで、Reactに「変わる可能性がある値」を伝える
72. Reactについて Try 72 React Hooks に触れてみよう 1 サンプルプロジェクト にアクセス 2 カウンターが動作していないことを確認しよう 3 カウンターが動作するように修復しよう
73. 7. フロントエンドの開発環境
74. フロントエンドの開発環境 Topic フロントエンドの開発環境について知ろう 1. JavaScriptだけで開発すると何がつらいか 2. TypeScriptを使う理由 3. バンドラーが何をしているか 4. これらがモダンなフロントエンド開発をどう支えているか 74 Webアプリケーションの構築方法としてSPAとMPAがある </> HTML
75. JavaScriptの課題 Webブラウザが理解できるのはJavaScriptだけ しかし、JavaScriptには問題点が、、 75 • 動的型付け による予期せぬバグ • IDEやエディタでの開発支援の限界
76. TypeScriptの登場 JavaScriptの課題を補うために使われる TypeScriptで書いたコードは、JavaScriptに変換され てブラウザで実行される CoffeeScript 76
77. TypeScriptを使う理由 静的型付け 開発支援 変数や関数に型を付けることで、 実行前にミスに気付きやすくなる 型情報を使って、補完や定義ジャンプ、 リファクタリングがしやすくなる 高い互換 ユーザーを極力待たすことがないWebを作ろう 性 JavaScriptコードをそのままTypeScriptファイルとして扱え、 既存プロジェクトを段階的にTypeScriptに移行することが可能 Point 77 TypeScriptの登場で開発効率や保守性がアップ！
78. 複数ファイルによる開発で起こる困りごと モダンなフロントエンド開発では、 機能ごとにファイルを分けて開発することが一般的 78 • ファイルの読み込み順を意識する必要がある • ファイルが増えると管理が大変になる
79. バンドルについて 複数のJavaScript、CSS、画像などのファイルを 1つまたは複数の最適化されたファイルにまとめるプロセ ス 以下のようなバンドルを行うバンドラーが存在 webpack 79 Vite
80. バンドラーの役割 依存関係の自動管 理 モジュールの依存関係 を解析し、正しい順序でバンドル 読み込み速度の向上 HTTPリクエストの数 を減らし、ページの表示速度を改善 コードの最適化 未使用のコードを除去し、 ファイルサイズを削減 Point 80 ユーザーを極力待たすことがないWebを作ろう バンドラーにより開発効率やパフォーマンスが改善
81. 8. フロントエンドのデバッグ
82. フロントエンドのデバッグ Topic デバッグの方法を知ろう 1. Chrome DevTools で画面や通信を確認する 2. Playwright MCP で AI に E2E テストをさせる </> 82 Webアプリケーションの構築方法としてSPAとMPAがある HTML
83. Chrome の検証モード Elements HTML の構造や CSS を確認し、その場で見た目を試せる Console エラーメッセージを確認したり、簡単な JavaScript を実行できる Network API 通信や画像・JavaScript の読み込み状況を確認できる Point 83 ユーザーを極力待たすことがないWebを作ろう まずは検証モードで、画面・エラー・通信を見る
84. Chromeの検証モードについて Try Chrome の検証モードを使ってみよう 1 MIXIの公式サイト にアクセス 2 画面上で右クリックし、「検証」 を選ぶ 3 開いた検証モードで、Elements / Console / Network タブを 触ってみる Point 84 ユーザーを極力待たすことがないWebを作ろう Chrome の検証モードを使うと、画面の構造・通信などを確認できる
85. Playwright MCP について Playwright MCP を使うと、AI にブラウザを操作させて動作確認ができ る クリックや入力、画面遷移などを自動で確認できる Point 85 ユーザーを極力待たすことがないWebを作ろう AI にブラウザ操作を任せて、E2E テストを進められる
86. 9. 演習
87. 演習 Try 87 チームで Web アプリを作成しよう 1 チームごとの repository を clone する 2 README にしたがって環境構築を行う 3 10分以内に、チームで作成する Web アプリを決める 4 Web アプリを作成する