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

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

Transcript

1. ２５新卒 フロントエンド研修
2. Web の特徴 誰でも 情報を公開できる 2
3. Web の特徴 リンクによって あらゆるページが繋がる 3
4. Web の特徴 ブラウザさえあれば 全てのユーザー が 情報にアクセスできる 4
5. 本日の研修の内容 ユーザーを極力待たすことがないWebを作ろう 5 1. HTML/CSS/JavaScript 2. AltJS 3. バンドラー 4. Webページが表示されるまで 5. SPAとMPA 6. React 7. 非同期処理 8. 演習
6. Web技術のはじまり ユーザーを極力待たすことがないWebを作ろう 6 初期のHTMLでは 構造と見た目が混在 <font color=”red”>この文字は赤色です </font> <font size="5">この文字のサイズは 5です</font>
7. HTMLとCSSとJavaScriptの分業 ユーザーを極力待たすことがないWebを作ろう 7 HTMLで定義された構造にスタイルを適用し、見た目を整える Webページに動的な機能やインタラクティブ な要素を追加する HTML CSS JavaScrip t Webページの構造を定義する。 /but Point HTML, CSS, JavaScriptがそれぞれ異なる役割を持っている
8. HTMLとCSSとJavaScriptの分業 ユーザーを極力待たすことがないWebを作ろう 8 HTML CSS JavaScrip t Point HTMLはWebページの構造を定義するマークアップ言語
9. HTMLを触ってみよう 自己紹介ページを作成しよう Try 1 サンプルプロジェクト にアクセス 2 h1タグの中身を埋めて、タイトルを作ろう <h1>Hello world</h1> 9 3 pタグを作成し、自己紹介文を作ろう
10. HTMLとCSSとJavaScriptの分業 ユーザーを極力待たすことがないWebを作ろう 10 HTML CSS JavaScrip t Point CSSはWebページの見た目を装飾する言語
11. CSSを触ってみよう 自己紹介ページを作成しよう Try 1 サンプルプロジェクト にアクセス 2 h2タグの文章を赤色にしてみよう <h1>Hello world</h1> 11 3 pタグの文字の大きさを20pxにしてみよう
12. 12 Q 同じ種類のタグが二つあって、 それぞれに別のスタイルを当てたい時はどうするの？ A タグにclass名を指定して、それに対してCSSでスタイルを当てよう CSSについて
13. CSSでクラスに対してスタイルを当てよう 自己紹介ページを作成しよう Try 1 サンプルプロジェクト にアクセス 2 さっき作った p タグに class 名を指定し、 好きなスタイルを当ててみよう 13
14. HTMLとCSSとJavaScriptの分業 ユーザーを極力待たすことがないWebを作ろう 14 HTML CSS Point JavaScriptでクリックや入力に反応できる JavaScrip t
15. HTMLとCSSとJavaScriptの分業 JavaScriptを触ってみよう Try 1 サンプルプロジェクト にアクセス 2 テキストを元に戻すボタンを追加で作成してみよう <h1>Hello world</h1> 15
16. Announce 休憩タイム 16
17. AltJSの登場 17 Webブラウザが理解できるのはJavaScriptだけ しかし、JavaScriptには問題点が、、 • 動的型付け による予期せぬバグ • IDEやエディタでの開発支援の限界
18. AltJSの登場 18 JavaScriptの課題を解決するために登場 JavaScriptに変換されて、ブラウザなどで実行される CoffeeScript TypeScript Dart
19. TypeScriptの登場 ユーザーを極力待たすことがないWebを作ろう 19 開発支援 高い互換 性 静的型付け 型情報を活用することで、IDEやエディタの補完機能、 リファクタリング支援が強化され、開発効率アップ JavaScriptコードをそのままTypeScriptファイルとして扱え、 既存プロジェクトを段階的にTypeScriptに移行することが可能 変数や関数の引数、戻り値に型を明示的に指定することで、 コンパイル時に型の不一致を検出し、実行前にバグを防止 Point TypeScriptの登場で開発効率や保守性がアップ！
20. バンドルについて 20 複数のJavaScript、CSS、画像などのファイルを 1つまたは複数の最適化されたファイルにまとめるプロセ ス 以下のようなバンドルを行うバンドラーが存在 webpack Vite
21. バンドラーの役割 ユーザーを極力待たすことがないWebを作ろう 21 依存関係の自動管 理 コードの最適化 読み込み速度の向上 モジュールの依存関係 を解析し、正しい順序でバンドル 未使用のコードを除去（Tree Shaking）し、 ファイルサイズを削減 HTTPリクエストの数 を減らし、ページの表示速度を改善 Point バンドラーにより開発効率やパフォーマンスが改善
22. Webページが表示されるまでの流れ ページを表示するまでの処理を知る Topic 1 ブラウザに アドレスを入 力 2 DNSサーバー に問合せ 3 サーバーに HTMLファイルを リクエスト 4 リクエストがOK だったら HTTP200とHTML ファイルを返す 5 HTMLファイル 取得完了 6 HTMLファイル をパース ブラウザにアドレスを入力した後の処理 22
23. DOMについて 23 HTML文書を階層的なツリー構造として表現し、 各要素をノードとして扱うことで、 JavaScriptなどからのアクセスや操作を可能にするモデル ブラウザが HTMLを解析し DOMを生成 HTML
24. DOMについて 24 HTMLをDOMに変換 Point ブラウザはHTMLを解釈し、DOMに変換する！
25. オブジェクトモデルの構築 25 バイト → 文字 → トークン → ノード → DOM 引用: オブジェクトモデルの構築 | Articles | web.dev (URL: https://web.dev/articles/critical-rendering-path/constructing-the-object-model?hl=ja)
26. Webページが表示されるまでの流れ ページを表示するまでの処理を知る Topic 1 HTMLファイル をパース 2 CSSファイルと JSファイルの 参照の解析 3 HTMLのパース 後、DOMツリーを 生成 4 CSSのパース後、 CSSOMツリーを 生成 5 スタイルを DOM に 適用する 6 JavaScriptの パース&実行 ブラウザがページを表示するまで 26
27. Announce 休憩タイム 27
28. DOM root Webアプリケーションの構築方法 SPAとMPAについて知ろう Topic SPAとMPAの比較 MPA SPA </> HTML element element </> HTML </> HTML Point Webアプリケーションの構築方法としてSPAとMPAがある 28
29. MPAのページ取得の流れ MPA について知ろう Topic Point ユーザーがページ遷移するたびにサーバーからHTMLを取得 29 https://example.co mを アドレスバーに入力 HTML https://example.com/mypage に 画面遷移 HTML
30. SPAを理解しよう MPAとの違いを知ろう Topic SPAとは ページ数にかかわらず一つのHTMLファイルでページのコンテンツを全て管理して 表示する開発手法。 一般的にはJavaScriptのDOM APIで最上位のElementの子要素を入れ替えて、表示を 切り替える。 History API を活用することで、同じHTMLファイルを使用しながらブラウザの 履歴情報を追加し、表示コンテンツごとにURLを表現できる。 30
31. SPAのページ取得の流れ SPA について知ろう Topic Point ユーザーが画面を遷移するとJavaScriptが画面を書き換える 31 https://example.co mを アドレスバーに入力 HTML https://example.com/mypage に 画面遷移 HTML JavaScriptが画面を書き換え
32. DOM root SPAについて SPA と MPA の違いを知ろう Topic SPAとMPAの比較 MPA SPA </> HTML element element </> HTML </> HTML Point SPAならサーバーからHTMLを取得することなく画面遷移ができる 32
33. SPAのメリット・デメリット ユーザーを極力待たすことがないWebを作ろう 33 初回読み込みにかかる時間 高速なページ遷移 JavaScriptやHTML/CSSのリソースを一括で読み込むため、 むしろ時間がかかることもある 必要な部分だけ をJavaScriptで更新するので、 ページの切り替えで 画面全体を再読み込みしない Point SPAには大きなメリットがあるが、デメリットも存在 メリット デメリット
34. SPAについて 仮想 DOM 差分検 知 宣言的 UI SPAの実現にポイントとなる要素 Topic DOMツリーをオブジェクトで擬似的に表現して、 描画するDOM構造をJavaScriptのランタイム上で管理する手法 異なる参照のオブジェクト同士で差分比較を行う手法。 一般的には shallow equal と呼ばれる比較が使われる UIを構築するための手法。最終的に構築するUIを宣言的に表 現することでViewの可読性を担保することができる。 34
35. 宣言型 手続き型 手続き型と宣言型の違い Topic 宣言的UIとは SPA のメリットを知ろう サンプルユーザー Hello world! これを作りたい Point 宣言型はDOMツリー構造を宣言してUIを組み立てられるので人間に優しい 35
36. 仮想DOMについて SPA のメリットを知ろう Topic 仮想DOMとは DOM構造の状態を全てJavaScriptで保持することによって、 実際の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. Announce 休憩タイム 38
39. Reactについて UI 構築ライブラリを知ろう Topic Reactとは 39 Meta（旧Facebook）によって開発された UIを構築するためのJavaScriptライブラリ コンポーネントと呼ばれる 再利用可能なUIの部品を利用する SPAの構築に非常に適している
40. Reactについて UI 構築ライブラリを知ろう Topic Reactとは 40 コンポーネント志 向 様々な場所で動く 宣言的な View View をコンポーネントとしてカプセル化することができる。 UI パーツごとでコンポーネント化するなどできる。 React で書かれた View は Web だけでなく、 ネイティブアプリや様々な場所でも動かすことができる。 状態ごとの View を JS 上で定義することで、状態の更新を 検知して、関連するコンポーネントだけを再描画する。
41. Reactについて JSXについて知ろう Topic 41 ReactではJavaScriptの中にHTMLのような記述を埋め込める JSXという構文を利用することが多い JavaScriptのみで作成 JSXで作成 Point JSXを利用するとHTMLっぽく記述できる
42. Reactについて コンポーネントについて知ろう Topic コンポーネントとは 42 UIを構成する再利用可能な部品。 コンポーネントを組み合わせることで 複雑なUIが構築できる。 コンポーネントを利用する際にデータ を渡すことで、柔軟にUIを設計でき る。 作成されるUI
43. Reactについて 状態について知ろう Topic 状態とは 43 コンポーネントが保持するデータ 例） • カウンターの数値 • フォームの入力値 • チェックボックスの選択状態
44. Reactについて 状態について知ろう Topic 44 Q 状態と見出しなどの静的なデータの違いは？ A 見出しなどの静的なデータはページを開いた時から変わりません。 ユーザーの操作などに応じて変化する値を状態として管理します。 Point ユーザーの操作などに応じて動的に変わる値を状態として管理する
45. Reactについて 状態管理の手法を知ろう Topic React Hooks とは React が提供する機能群の名称。 UIの状態を保持する機能・ 関数や計算コストの高いロジック の演算結果をキャッシュ（メモ化） する機能などを提供する。 45
46. Reactについて 代表的なhooks useStateを知ろう Topic useStateとは 46 Reactで状態を管理するために利用する機 能 ユーザーの操作やイベントによって変化す るデータを「状態」として保持し、更新し ます
47. Reactについて 代表的なhooks useStateを知ろう Topic useStateの使い方 47 Point useStateを利用することで、Reactに「変わる可能性がある値」を伝える
48. Reactについて React Hooks に触れてみよう Try 1 2 カウンターが動作していないことを確認しよう 48 サンプルプロジェクト にアクセス 3 カウンターが動作するように修復しよう
49. Announce 休憩タイム 49
50. 非同期処理について BBCは、ページの読み込みにかかる時間が１秒増えるだけで ページから離れるユーザー数が１０％増えることが わかったそうです。 Point ユーザーを極力待たすことがないWebを作ろう 50
51. 非同期処理について JavaScript は基本的にはシングルスレッドで動作し、 実行中のタスクが完了しない限り次のタスクは開始されません。 Point メインスレッドをブロックせずに処理するにはPromiseを使おう 51
52. 非同期処理について 非同期プログラミングを実践 Topic Promise Promiseを使うことで非同期処理の結果を返すことができます。JSの非同期処理 はメインスレッド上でメインタスクと並行で実行されます。非同期処理の成功値 は resolve() に渡し、例外が起きた場合には reject() を実行することで失敗を通 知することができます。 52
53. 非同期処理について 非同期処理を体験しよう Try 1 2 setTimeout で非同期処理を実行してみる サンプルプロジェクト にアクセス 53
54. 非同期処理について 非同期プログラミングを実践 Topic 54 以下のような時間がかかる関数を非同期で取り扱う
55. 非同期処理について thenを利用した書き方 Point thenとcatchでPromiseの結果を取得している 55
56. 非同期処理について thenを使ってみる Try 1 2 then で非同期処理の演算結果を使う サンプルプロジェクト にアクセス 56
57. 非同期処理について async, awaitを 利用した書き方 Point awaitにより同期的な書き方で非同期処理を扱える 57
58. 非同期処理について 両方同じことをしている（Promiseの結果をどう取得するかの違い） メインスレッドをブロックせずに処理するにはPromiseを使おう 58
59. 非同期処理について 例）APIで取得したデータを利用して、もう一回APIを叩くケース 59 thenを何度もチェーンさせる必要がある
60. 非同期処理について async, awaitを使うと 60 Point async, awaitを使うと読みやすい！
61. 非同期処理について async, awaitを使ってみる Try 1 2 async, await で非同期処理の演算結果を使う サンプルプロジェクト にアクセス 61
62. Announce 休憩タイム 62
63. 演習 演習プロジェクトを立ち上げよう Try 1 GitHubリポジトリから clone $ git clone git@github.com:mixigroup/2025BeginnerTrainingFrontEnd.git 2 必要なライブラリをインストール $ cd 2025BeginnerTrainingFrontEnd $ npm i 63
64. 演習 演習プロジェクトを立ち上げよう Try 3 サーバーを立ち上げる $ node server.js 4 開発サーバーを立ち上げる $ npm run dev 64