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

4.

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.参考⽂献

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サーバーとクライアントの関係＠akariwtnk 3.Webを⽀える仕組み〜URL〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

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〜＠akariwtnk 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

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

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〜＠akariwtnk 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

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〜＠akariwtnk 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

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〜＠akariwtnk 7.Webを⽀える仕組み〜JavaScript〜 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

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〜＠akariwtnk 8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献

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

34.