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

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

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

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

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

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

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の構⽂スキーム http: オーソリティ //www.example.jp:80 パス /path/index.php クエリ
?page=1&count=2 フラグメント #sec1 絶対URL、相対URL 絶対URL スキーム、オーソリティ、パスをすべて含む相対URL パスしか含まない＠akariwtnk

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

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

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

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

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

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

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

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

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

Web完全に理解した

Web完全に理解した

ぐんちゃ

More Decks by ぐんちゃ

Other Decks in Technology

Featured

Transcript