Web実装研修Phase1

1. Web実装研修 Phase1 〜Web開発の基本〜
2. 研修の流れ Web実装研修 全体の流れ 4つの段階に分けて研修を進めます 1. Web開発の基本 ← 今回はコレ 2. コンテンツの設計 - HTML 3. デザインの実装 - CSS 4. 品質の評価・改善（仮名）
3. 研修の流れ Phase1の流れ 1. Webページが表示されるまで 2. URLとWeb上のリソース 3. HTML、CSS、JavaScriptの役割 4. DevToolsを活用する
4. 1. Webページが表示されるまで
5. Webページが表示されるまで HTTPリクエスト / レスポンス https://developer.mozilla.org/ja/docs/Learn_web_development/Getting_starte d/Environment_setup/Browsing_the_web - ウェブの閲覧 - Web開発の学習 | MDN ※あくまでも概念図です 　TCP/IP・DNS・HTTP等は詳しく説明しません
6. 1ページ、複数リソース HTML ─┬─ CSS 　　 ├─ JavaScript 　　 ├─ 画像 　　 ├─ Webフォント 　　 └─ その他のデータ • index HTMLが読み込まれる → スタイル等複数リソースが読み込まれる •ブラウザがリソースを組み立てて、表示している Webページが表示されるまで
7. 2. URLとWeb上のリソース
8. URLとWeb上のリソース URL URL（Uniform Resource Locator）： インターネット上の固有のリソースのアドレス URLは様々な種類のリソースを示す • Webページ • CSS、JavaScriptファイル • 画像、動画、フォントファイル • APIが返すデータ https://sos26.sohosai.com/committee/forms/019?tab=answers https://developer.mozilla.org/ja/docs/Learn_web_development/Howto/Web_me chanics/What_is_a_URL - URLとは何か - Web開発の学習 | MDN
9. URLを分解する https://developer.mozilla.org/ja/docs/Learn_web_development/Howto/Web_me chanics/What_is_a_URL - URLとは何か - Web開発の学習 | MDN URLを構成要素に分けて眺めてみる • schema：アクセス方法。Webでは主にhttps（セキュア） • hostname：接続先を識別する名前 • path：接続先の中の対象 • query：検索や絞りこみなどの追加条件 • Anchor（fragment）：ページ内の位置 URLとWeb上のリソース
10. ドメインとサブドメイン サブドメインは、用途や接続先を分けるために使う • sohosai.com：公式Webサイト • sos26.sohosai.com：SOS • api.sos26.sohosai.com：SOSのAPI ここではDNSとかまでは扱わないよ www.example.com │ └──┬──┘ │ domain └ subdomain └───┬────┘ hostname URLとWeb上のリソース
11. localhostとport • localhost：自分のコンピュータを示すhostname • port：同じコンピュータ上のサービスを区別する番号 開発サーバを起動すると以下のようなURLが表示される http://localhost:3000 http://locaohost:5173 http://localhost:8080/ └─┬─┘ └┬┘ hostname port URLとWeb上のリソース
12. path Webサーバ上のリソースへのパス 現代ではpathがサーバ上の物理ファイルを直接示さないことがほとんど 例えば... /products/10：アプリケーションが商品ID 10のページを生成する https://example.com/products/10 └──┬──┘ path URLとWeb上のリソース
13. 絶対URLと相対URL 絶対URL：単独で接続先を特定できる 相対URL：基準となるURLから解決する 同じ相対URLでも、基準となるURLが違えば解決先が変わる https://example.com/images/logo.svg images/logo.svg ../images/logo.svg /images/logo.svg URLとWeb上のリソース
14. 相対URLの解決先例 基準URL： 開発でもCSSファイルや画像のリソースを指定するのに相対パスを使う https://example.com/company/about 記述 解決先 team.html /company/about/team.html ../team.html /company/team.html /team.html /team.html https://other.example.com/team.html 別の接続先のURL URLとWeb上のリソース
15. 3. HTML、CSS、JavaScriptの役割
16. HTML、CSS、JavaScriptの役割 Webを支える3つの技術 • HTML：コンテンツと構造を表す、記述する • CSS：レイアウトと装飾を制御する • JavaScript：動作、状態変化、処理を制御する 3つは別の役割を持ち、連携してWebページを構築する ※JavaScriptとJavaは全く違うので注意
17. HTML、CSS、JavaScriptの役割 HTML：コンテンツと構造 • 何が見出しか • 何が本文か • どの内容がまとまりか 具体的な要素の役割や使い分けはPhase2で扱う <article> <h2>研修のお知らせ</h2> <p>Phase1ではWebの仕組みを学びます</p> </article>
18. HTML、CSS、JavaScriptの役割 CSS：レイアウトと装飾 .article{ max-width: 48rem; border-radius: 10px; } • 色、文字、余白 • 大きさ、位置、並び方 • 画面幅による表示の変化 CSSの詳細はPhase3で扱う
19. HTML、CSS、JavaScriptの役割 JavaScript button.addEventListener("click", () => { menu.hidden = !menu.hidden; }) • ユーザー操作への反応 • 表示内容や状態の変更 • サーバーとの通信 今回の研修では構文は学ばず、役割だけを把握する
20. HTML、CSS、JavaScriptの役割 フレームワーク Webサイト/アプリケーションを作るための開発土台となる仕組み。 • ファイル構成やコードの組み立て方を提供する • 共通処理や開発に必要な機能を提供する • 開発から公開までの作業を支援する 嬉しいポイント： • 共通化・再利用：同じ部品を繰り返し使える • 一貫性：ページが増えても構造や表示を揃えやすい • 自動化：開発や公開に必要な処理を任せられる 開発・運用を続けやすくする ex）Astro（←今回使う）、React、Next.js、Hono など色々
21. HTML、CSS、JavaScriptの役割 今回使うAstro Astroは、コンテンツ中心のWebサイトを構築するためのWebフレームワーク • HTMLに近い記法で書ける • ページや共通部分をコンポーネントとして再利用できる • コンテンツをデータから繰り返し生成できる • 公開用HTMLなどを自動で生成できる 構文等の詳細は、実際に制作するときに扱う https://astro.build/ - Astro
22. HTML、CSS、JavaScriptの役割 Astroのビルドと最適化 .astroファイル HTML + CSS + JavaScript + コンポーネント ↓ Astroがビルドする ブラウザへ渡す HTML + CSS + 必要なJavaScript • 公開用のファイルを生成する • CSSやJavaScriptを軽量化する • 画像も適切なサイズや形式へ変換する などなど 具体的なビルドとか最適化の話はPhase4で扱う、かも🦆
23. 4. DevToolsを活用する
24. DevToolsを活用する DevToolsとは ブラウザに組み込まれた、Webページの開発・調査を支援する機能 • 表示中のページのHTMLやCSSを調べる • HTMLやCSSを一時的に変更して試す • レスポンシブ表示の検証 • 通信の結果やエラーを確認する 元のファイルを編集するのではなく、ブラウザ上の現在の状態を調べる
25. DevToolsを活用する DevToolsでできること パネル・機能 主に観察するもの Elements 現在のDOM Styles 関係するCSSルール Computed 計算ゴのCSS値 Network リクエストとレスポンス Device Mode viewportなどの表示条件 Console エラー、警告、ログ
26. DevToolsを活用する Elements・Styles・Computed デモ： • 画面上の要素を選び、DOMの親子関係やclassを確認する • テキストやCSSを一時変更する • 打ち消されたCSSと、最終的な幅や余白を確認する 変更は元ファイルへ保存されず、再読み込みすると元に戻る パネル 最低限知ること Elements 現在のDOMを見る Styles 関係するCSSと定義元を見る Computed 計算ゴの値とbox modelを見る
27. DevToolsを活用する Network ページが取得したリソースと通信結果を見る 最低限確認するもの： • Name / Request URL • Status • Type • Response / Preview デモ： • 再読み込みしてHTML、CSS、JavaScript、画像を確認する • 種類で絞り込み、リクエスト内容を見る • 存在しない画像を読み込み、404を確認する
28. DevToolsを活用する Device Mode・Console デモ： • viewportの幅を変え、レイアウトの変化を見る • Consoleでエラーの内容、ファイル、行番号を確認する viewportは実機の完全な再現ではない パネル 最低限知ること Device Mode viewportを変えて表示を確認する Console error、warning、logと発生元を確認する
29. DevToolsを活用する 調べたいことからパネルを選ぶ 調べたいこと 最初に見るパネル（例） 画面上の部品がどのHTMLか Elements 指定した見た目にならない Styles > Computed 余白や幅の原因が不明 Computed > box model 画像やCSSが読み込まれない Network、Console 画面幅によって表示が崩れる Device Mode > Elements エラーが発生する Network、Console
30. 参考文献 • Web開発の学習 | MDN https://developer.mozilla.org/ja/docs/Learn_web_development • 概要 | Chrome DevTools | Chrome for Developers https://developer.chrome.com/docs/devtools/overview • ブラウザ/ Browser - リクルート新人研修 https://speakerdeck.com/recruitengineers/browser-2023 • フロントエンド研修 - MIXI 23新卒技術研修 https://speakerdeck.com/mixi_engineers/2023-frontend-training • HTML5&CSS3 コーディングとサイト制作の教科書 技術評論社