web完全に理解した

Web完全に理解した ＠akariwtnk

※ 画像なしです（ゴメンネ）！ ＠akariwtnk

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

Table of contents 1.Webアプリケーションとは ＠akariwtnk 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

1.Webアプリケーションとは 明確な定義はないが、⼤まかにいえば、「Webブラウザ上で動作するアプリケーションソ フト」 のこと。 Webアプリケーションでは、インターネット上のWebサーバーと、パソコンのWebブラ ウザとの間で、通信を⾏いながら処理を進め、データの保存や検索の処理はデータベース エンジンに依頼するのが⼀般的。 ＠akariwtnk

1.Webアプリケーションとは Webサーバー ⼊⼒されたデータの管理や、データに基づいて出⼒する情報を組み⽴てる処理をする役割 を担っている。 Webブラウザ Google Chrome、Safari、Internet Explorer、Microsoft Edgeなどのこと。 ユーザーが情報を⼊⼒したり、出⼒された情報を画⾯に表⽰したりなど、UIの処理をする 役割を担っている。 データベースエンジン Webサーバー上のプログラムは、データベースを管理するシステム(データベースエンジ ン)と連携して動作し、データの保存や検索の処理はそちらに依頼する形になっているこ ＠akariwtnk とが⼀般的。

Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 ＠akariwtnk 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

2.Webサーバーとクライアントの関係 Webサーバー サーバーは、情報やサービスを提供する側。送る側。 serve(奉仕する、尽くす) + er(「〜する⼈」という名詞化)でserver。 コーヒーを提供するのはコーヒーサーバー。 Webに関するサービスを提供しているからWebサーバー。 クライアントからの指⽰を受け取り、その内容に応じた情報を送り返す。 ＠akariwtnk

2.Webサーバーとクライアントの関係 クライアント クライアントは、情報やサービスを受け取る側。 client(お客さん)。 ブラウザはユーザーの⼿元で動くものであり、情報を受け取るツールであるためクライア ント側。 ＠akariwtnk

2.Webサーバーとクライアントの関係 Webアプリケーションについて考えていくあたって、その対象となるものが「クライアン ト側」なのか、「サーバー側」なのかを意識していくことが⼤切。 「この処理はクライアント側で動かすべき処理なのか、サーバー側で動かすべき処 理なのか」「この⾔語のメインはクライアント側なのか、サーバー側なのか」な ど。 更に⾔えば、「何から⾒て何がクライアント側/サーバー側なのか」というのも意識 していく必要が出てくる。クライアント側/サーバー側というのは絶対的なものでは なく、何を視点で⾒るかによって相対的に変わるものであるため。 はじめはピンと来ないかもしれないが、ピンと来ないながらもとにかく意識し続けるのが ⼤切。 ＠akariwtnk

Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 ＠akariwtnk 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

3.Webを⽀える仕組み〜URL〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk

3.Webを⽀える仕組み〜URL〜 URL:データの位置を⽰した書式 URL(Uniform Resource Locator) 統⼀した形で（Uniform）Web上の情報資源の（Resource）位置（Locator）を⽰し た書式。 情報がどこにあるのかを⽰すインターネット上の住所のようなもの。 ＠akariwtnk

3.Webを⽀える仕組み〜URL〜 URL:データの位置を⽰した書式 URLの構⽂ ＠akariwtnk スキーム http: オーソリティ //www.example.jp:80 パス /path/index.php クエリ ?page=1&count=2 フラグメント #sec1 絶対URL、相対URL 絶対URL スキーム、オーソリティ、パスをすべて含む 相対URL パスしか含まない

3.Webを⽀える仕組み〜URL〜 URL:データの位置を⽰した書式 良いURLの条件 ドメイン名は覚えやすくタイプしやすいものを選ぶ 短いURLにする ⼊⼒しやすいURLにする サイト構造を反映したURLにする 改造(ハック)しやすいURLにする 変わらないURLにする 拡張⼦はコンテンツの種類を表すようにする ＠akariwtnk

Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 ＠akariwtnk 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

4.Webを⽀える仕組み〜HTTP〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk

4.Webを⽀える仕組み〜HTTP〜 HTTP:データの通信⼿順(プロトコル) プロトコルとは？ コンピューター同⼠が通信する際には、通信の⼿順を決めておいて、両⽅のコンピ ューターがそれに従ってデータをやり取りすることが必要。 この「通信の⼿順」のことを「プロトコル(Protocol)」と呼ぶ。 ＠akariwtnk

4.Webを⽀える仕組み〜HTTP〜 HTTP:データの通信⼿順(プロトコル) HTTPとは？ WebブラウザとWebサーバーが通信する際には、「HTTP」というプロトコルを使 って通信するようになっている。 HTTP(Hyper Text Transfer Protocol) 関連する情報と情報とを相互につなぐデータ構造(Hyper Text)を、送る (Transfer)、プロトコル(Protocol)。 元々は後述のHTMLのデータを通信するために定められたプロトコルだが、現在で はHTMLの送受信に限らずさまざまな場⾯で⽤いられる。 ＠akariwtnk

Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 ＠akariwtnk 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

5.Webを⽀える仕組み〜HTML〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk

5.Webを⽀える仕組み〜HTML〜 HTML:データの⽂書構造を記述する⾔語 Webページは、「HTML」という⽂法に従って記述されている。 HTML(HyperText Markup Language) 関連する情報と情報とを相互につなぐデータ構造(Hyper Text)を、マークアップする (Markup)、⾔語(Language)。 拡張⼦は.html。 マークアップ⾔語はHTMLの他にMarkdownなどもある。Markdownは軽量マークア ップ⾔語と呼ばれており、HTMLよりも諸々がシンプル。 ＠akariwtnk

5.Webを⽀える仕組み〜HTML〜 HTML:データの⽂書構造を記述する⾔語 ⼀般的な⽂章の中には⾒出しや段落などがあるが、HTMLではそれらの各部分を「要素」 と呼ぶ。 要素には、「開始タグ」と「終了タグ」をつけて意味を持たせる。 基本的な書き⽅： タグ名>要素の内容</タグ名> < 例： ⾒出し</h1> <h1> ＠akariwtnk

5.Webを⽀える仕組み〜HTML〜 HTML:データの⽂書構造を記述する⾔語 Webアプリケーションは、Webページをもとにして作られる。 Webアプリケーションを作るうえでは、このWebページの仕組みを理解することが重 要。 ＠akariwtnk

Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 ＠akariwtnk 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

6.Webを⽀える仕組み〜CSS〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk

6.Webを⽀える仕組み〜CSS〜 CSS:Webページのデザインを記述する⾔語 CSS(Cascading Style Sheets) 階層式(Cascading)のスタイルシート(Style Sheets) 拡張⼦は.css。 基本的な書き⽅： セレクタ{プロパティ:値; プロパティ:値;} 例： p{font-size:20px; color:red;} ＠akariwtnk

6.Webを⽀える仕組み〜CSS〜 CSS:Webページのデザインを記述する⾔語 初期のWebページにおいてはHTMLのタグや属性にてデザイン関係の内容も指定してい たが、HTMLの中に⽂書構造とデザインが同居するかたちになっていると、ページのデザ インを変えることが難しくなってしまう。 そこで、⽂書の構造とデザインを分離して、⽂書構造はHTMLで、デザインはスタイルシ ート(主流なのがCSS)で管理する仕組みが取られるようになった。 ＠akariwtnk

Table of contents 1.Webアプリケーションとは 2.Webサーバーとクライアントの関係 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 ＠akariwtnk 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

7.Webを⽀える仕組み〜JavaScript〜 URL:データの位置を⽰した書式 HTTP:データの通信⼿順(プロトコル) HTML:Webページの⽂書構造を記述する⾔語 CSS:Webページのデザインを記述する⾔語 JavaScript：Webページの動作を記述する⾔語 ＠akariwtnk

7.Webを⽀える仕組み〜JavaScript〜 JavaScript：Webページの動作を記述する⾔語 HTMLがWebページの⽂書構造を記述する⾔語、 CSSがWebページのデザインを記述する⾔語なのに対して、 JavaScriptはWebページの動作を記述する⾔語。 拡張⼦は.js。 動作というのは例えば、ポップアップ表⽰を出したりなど。 ＠akariwtnk

7.Webを⽀える仕組み〜JavaScript〜 JavaScript：Webページの動作を記述する⾔語 JavaScriptは、基本的にはクライアント側で動作させる⾔語。 Javaとは別物で、⽂法に互換性は無い。 佐々⽊希と佐々⽊朗希くらい違う(気になったら調べてください) 公開当初は「LiveScript」という名前で発表予定だったが、Javaが⼈気を集めていた時期 だったため、便乗して「JavaScript」と名付けたそう。 ＠akariwtnk

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ページを表⽰させる⼿順 ＠akariwtnk 9.参考⽂献

8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk

8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk

8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 ユーザーがWebページのURLを指定すると、WebブラウザはそのWebページを読み込む ために、Webサーバーに対して「HTTPリクエスト」という情報を送信する。 ＠akariwtnk

8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk

8.WebブラウザがWebページを表⽰させる⼿順 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 WebサーバーはWebブラウザからHTTPリクエストを受信すると、それに基づいて必要な 処理を⾏う。 ＠akariwtnk

8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk

8.WebブラウザがWebページを表⽰させる⼿順 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 WebサーバーはHTTPリクエストに基づいた処理の結果を、「HTTPレスポンス」として Webブラウザに送信する。 ＠akariwtnk

8.WebブラウザがWebページを表⽰させる⼿順 1. WebブラウザがWebサーバーにHTTPリクエストを送信 2. WebサーバーがWebブラウザにHTTPリクエストを受信、処理 3. WebサーバーがWebブラウザにHTTPレスポンスを送信 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ ＠akariwtnk

8.WebブラウザがWebページを表⽰させる⼿順 4. WebブラウザがWebサーバーにHTTPレスポンスを受信、解釈、表⽰ WebブラウザはWebサーバーからHTTPレスポンスを受信し、その中からWebページの HTMLを取り出して解釈し、画⾯に表⽰させる。 ＠akariwtnk

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

9.参考⽂献 藤本壱『これだけは知っておきたい Webアプリケーションの常識』技術評論社、2008年。 ＠akariwtnk