Web完全に理解した

Webに関する基礎知識を完全に理解したと勘違いしながら昔作りました。

1. Web完全に理解した ＠akariwtnk
2. ※ 画像なしです（ゴメンネ）！ ＠akariwtnk
3. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
4. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
5. 1.Webアプリケーションとは 明確な定義はないが、⼤まかにいえば、「Webブラウザ上で動作するアプリケーションソ フト」 のこと。 Webアプリケーションでは、インターネット上のWebサーバーと、パソコンのWebブラ ウザとの間で、通信を⾏いながら処理を進め、データの保存や検索の処理はデータベース エンジンに依頼するのが⼀般的。 ＠akariwtnk
6. 1.Webアプリケーションとは Webサーバー ⼊⼒されたデータの管理や、データに基づいて出⼒する情報を組み⽴てる処理をする役割 を担っている。 Webブラウザ Google Chrome、Safari、Internet Explorer、Microsoft Edgeなどのこと。 ユーザーが情報を⼊⼒したり、出⼒された情報を画⾯に表⽰したりなど、UIの処理をする 役割を担っている。 データベースエンジン Webサーバー上のプログラムは、データベースを管理するシステム(データベースエンジ ン)と連携して動作し、データの保存や検索の処理はそちらに依頼する形になっているこ とが⼀般的。 ＠akariwtnk
7. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
8. 2.Webサーバーとクライアントの関係 Webサーバー サーバーは、情報やサービスを提供する側。送る側。 serve(奉仕する、尽くす) + er(「〜する⼈」という名詞化)でserver。 コーヒーを提供するのはコーヒーサーバー。 Webに関するサービスを提供しているからWebサーバー。 クライアントからの指⽰を受け取り、その内容に応じた情報を送り返す。 ＠akariwtnk
9. 2.Webサーバーとクライアントの関係 クライアント クライアントは、情報やサービスを受け取る側。 client(お客さん)。 ブラウザはユーザーの⼿元で動くものであり、情報を受け取るツールであるためクライア ント側。 ＠akariwtnk
10. 2.Webサーバーとクライアントの関係 Webアプリケーションについて考えていくあたって、その対象となるものが「クライアン ト側」なのか、「サーバー側」なのかを意識していくことが⼤切。 「この処理はクライアント側で動かすべき処理なのか、サーバー側で動かすべき処 理なのか」「この⾔語のメインはクライアント側なのか、サーバー側なのか」な ど。 更に⾔えば、「何から⾒て何がクライアント側/サーバー側なのか」というのも意識 していく必要が出てくる。クライアント側/サーバー側というのは絶対的なものでは なく、何を視点で⾒るかによって相対的に変わるものであるため。 はじめはピンと来ないかもしれないが、ピンと来ないながらもとにかく意識し続けるのが ⼤切。 ＠akariwtnk
11. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
12. 3.Webを⽀える仕組み〜URL〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk
13. 3.Webを⽀える仕組み〜URL〜 URL:データの位置を⽰した書式 URL(Uniform Resource Locator) 統⼀した形で（Uniform）Web上の情報資源の（Resource）位置（Locator）を⽰し た書式。 情報がどこにあるのかを⽰すインターネット上の住所のようなもの。 ＠akariwtnk
14. 3.Webを⽀える仕組み〜URL〜 URL:データの位置を⽰した書式 URLの構⽂ スキーム http: オーソリティ //www.example.jp:80 パス /path/index.php クエリ ?page=1&count=2 フラグメント #sec1 絶対URL、相対URL 絶対URL スキーム、オーソリティ、パスをすべて含む 相対URL パスしか含まない ＠akariwtnk
15. 3.Webを⽀える仕組み〜URL〜 URL:データの位置を⽰した書式 良いURLの条件 ドメイン名は覚えやすくタイプしやすいものを選ぶ 短いURLにする ⼊⼒しやすいURLにする サイト構造を反映したURLにする 改造(ハック)しやすいURLにする 変わらないURLにする 拡張⼦はコンテンツの種類を表すようにする ＠akariwtnk
16. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
17. 4.Webを⽀える仕組み〜HTTP〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk
18. 4.Webを⽀える仕組み〜HTTP〜 HTTP:データの通信⼿順(プロトコル) プロトコルとは？ コンピューター同⼠が通信する際には、通信の⼿順を決めておいて、両⽅のコンピ ューターがそれに従ってデータをやり取りすることが必要。 この「通信の⼿順」のことを「プロトコル(Protocol)」と呼ぶ。 ＠akariwtnk
19. 4.Webを⽀える仕組み〜HTTP〜 HTTP:データの通信⼿順(プロトコル) HTTPとは？ WebブラウザとWebサーバーが通信する際には、「HTTP」というプロトコルを使 って通信するようになっている。 HTTP(Hyper Text Transfer Protocol) 関連する情報と情報とを相互につなぐデータ構造(Hyper Text)を、送る (Transfer)、プロトコル(Protocol)。 元々は後述のHTMLのデータを通信するために定められたプロトコルだが、現在で はHTMLの送受信に限らずさまざまな場⾯で⽤いられる。 ＠akariwtnk
20. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
21. 5.Webを⽀える仕組み〜HTML〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk
22. 5.Webを⽀える仕組み〜HTML〜 HTML:データの⽂書構造を記述する⾔語 Webページは、「HTML」という⽂法に従って記述されている。 HTML(HyperText Markup Language) 関連する情報と情報とを相互につなぐデータ構造(Hyper Text)を、マークアップする (Markup)、⾔語(Language)。 拡張⼦は.html。 マークアップ⾔語はHTMLの他にMarkdownなどもある。Markdownは軽量マークア ップ⾔語と呼ばれており、HTMLよりも諸々がシンプル。 ＠akariwtnk
23. 5.Webを⽀える仕組み〜HTML〜 HTML:データの⽂書構造を記述する⾔語 ⼀般的な⽂章の中には⾒出しや段落などがあるが、HTMLではそれらの各部分を「要素」 と呼ぶ。 要素には、「開始タグ」と「終了タグ」をつけて意味を持たせる。 基本的な書き⽅： < タグ名> 要素の内容</ タグ名> 例： <h1> ⾒出し</h1> ＠akariwtnk
24. 5.Webを⽀える仕組み〜HTML〜 HTML:データの⽂書構造を記述する⾔語 Webアプリケーションは、Webページをもとにして作られる。 Webアプリケーションを作るうえでは、このWebページの仕組みを理解することが重 要。 ＠akariwtnk
25. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
26. 6.Webを⽀える仕組み〜CSS〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk
27. 6.Webを⽀える仕組み〜CSS〜 CSS:Webページのデザインを記述する⾔語 CSS(Cascading Style Sheets) 階層式(Cascading)のスタイルシート(Style Sheets) 拡張⼦は.css。 基本的な書き⽅： セレクタ{ プロパティ: 値; プロパティ: 値;} 例： p{font-size:20px; color:red;} ＠akariwtnk
28. 6.Webを⽀える仕組み〜CSS〜 CSS:Webページのデザインを記述する⾔語 初期のWebページにおいてはHTMLのタグや属性にてデザイン関係の内容も指定してい たが、HTMLの中に⽂書構造とデザインが同居するかたちになっていると、ページのデザ インを変えることが難しくなってしまう。 そこで、⽂書の構造とデザインを分離して、⽂書構造はHTMLで、デザインはスタイルシ ート(主流なのがCSS)で管理する仕組みが取られるようになった。 ＠akariwtnk
29. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
30. 7.Webを⽀える仕組み〜JavaScript〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk
31. 7.Webを⽀える仕組み〜JavaScript〜 JavaScript：Webページの動作を記述する⾔語 HTMLがWebページの⽂書構造を記述する⾔語、 CSSがWebページのデザインを記述する⾔語なのに対して、 JavaScriptはWebページの動作を記述する⾔語。 拡張⼦は.js。 動作というのは例えば、ポップアップ表⽰を出したりなど。 ＠akariwtnk
32. 7.Webを⽀える仕組み〜JavaScript〜 JavaScript：Webページの動作を記述する⾔語 JavaScriptは、基本的にはクライアント側で動作させる⾔語。 Javaとは別物で、⽂法に互換性は無い。 佐々⽊希と佐々⽊朗希くらい違う(気になったら調べてください) 公開当初は「LiveScript」という名前で発表予定だったが、Javaが⼈気を集めていた時期 だったため、便乗して「JavaScript」と名付けたそう。 ＠akariwtnk
33. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
34. 8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk
35. 8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk
36. 8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 ユーザーがWebページのURLを指定すると、WebブラウザはそのWebページを読み込む ために、Webサーバーに対して「HTTPリクエスト」という情報を送信する。 ＠akariwtnk
37. 8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk
38. 8.WebブラウザがWebページを表⽰させる⼿順 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 WebサーバーはWebブラウザからHTTPリクエストを受信すると、それに基づいて必要な 処理を⾏う。 ＠akariwtnk
39. 8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk
40. 8.WebブラウザがWebページを表⽰させる⼿順 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 WebサーバーはHTTPリクエストに基づいた処理の結果を、「HTTPレスポンス」として Webブラウザに送信する。 ＠akariwtnk
41. 8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk
42. 8.WebブラウザがWebページを表⽰させる⼿順 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ WebブラウザはWebサーバーからHTTPレスポンスを受信し、その中からWebページの HTMLを取り出して解釈し、画⾯に表⽰させる。 ＠akariwtnk
43. Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 ＠akariwtnk
44. 9.参考⽂献 藤本壱『これだけは知っておきたい Webアプリケーションの常識』技術評論社、2008年。 ＠akariwtnk