Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web完全に理解した
Search
ぐんちゃ
September 08, 2019
Technology
0
78
Web完全に理解した
Webに関する基礎知識を完全に理解したと勘違いしながら昔作りました。
ぐんちゃ
September 08, 2019
Tweet
Share
More Decks by ぐんちゃ
See All by ぐんちゃ
BPP行脚_しんすく(け)さん
guncha
0
73
BPP行脚_第4回_よしたけさん
guncha
0
49
BPP行脚_第3回_なそさん
guncha
0
48
BPP行脚_第5回_みずのりさん
guncha
0
52
BPP行脚_第2回_リナさん
guncha
0
100
BPP行脚_第1回_Mayさん
guncha
0
210
JaSST nano vol.25 ぼくたちが考える最強の 「正常系、異常系、 ハッピーパス、ワンパス」
guncha
0
170
ぼくたちが考える最強の 「正常系、異常系、 ハッピーパス、ワンパス」分科会ワーク前
guncha
0
270
QAの世界Part1 オープニング
guncha
0
1.4k
Other Decks in Technology
See All in Technology
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.4k
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.4k
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
450
Amplify 🩷 Bedrock 〜生成AI入門〜
minorun365
PRO
10
1.1k
Cloud Service Mesh に触れ合う
phaya72
1
320
uvを使ってストレスフリーな Python開発をしよう!
r74tech
0
260
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
170
Secrets of a PowerShell "Guru"
guyrleech
1
110
シンプルなHITL機械学習と様々なタスクにおけるHITL機械学習
naohachi89
0
180
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
2
550
さらばあのボタンとは言わせない SORACOM LTE-M Button powerd by AWSをまだ使えるようにした(前編?)
miura55
0
110
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
190
Featured
See All Featured
It's Worth the Effort
3n
180
27k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
80
44k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Why Our Code Smells
bkeepers
PRO
331
56k
Agile that works and the tools we love
rasmusluckow
325
20k
4 Signs Your Business is Dying
shpigford
176
21k
Bash Introduction
62gerente
605
210k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Rails Girls Zürich Keynote
gr2m
91
13k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Transcript
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アプリケーションとは 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
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
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〜 4.Webを⽀える仕組み〜HTTP〜 5.Webを⽀える仕組み〜HTML〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜
8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 @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
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.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〜 6.Webを⽀える仕組み〜CSS〜 7.Webを⽀える仕組み〜JavaScript〜
8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 @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
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
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〜
8.WebブラウザがWebページを表⽰させる⼿順 9.参考⽂献 @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
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.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