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
94
Web完全に理解した
Webに関する基礎知識を完全に理解したと勘違いしながら昔作りました。
ぐんちゃ
September 08, 2019
Tweet
Share
More Decks by ぐんちゃ
See All by ぐんちゃ
BPP行脚_しんすく(け)さん
guncha
0
110
BPP行脚_第4回_よしたけさん
guncha
0
67
BPP行脚_第3回_なそさん
guncha
0
68
BPP行脚_第5回_みずのりさん
guncha
0
81
BPP行脚_第2回_リナさん
guncha
0
140
BPP行脚_第1回_Mayさん
guncha
0
240
JaSST nano vol.25 ぼくたちが考える最強の 「正常系、異常系、 ハッピーパス、ワンパス」
guncha
0
240
ぼくたちが考える最強の 「正常系、異常系、 ハッピーパス、ワンパス」分科会ワーク前
guncha
0
340
QAの世界Part1 オープニング
guncha
0
1.5k
Other Decks in Technology
See All in Technology
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
290
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
470
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
730
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
150
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
120
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
370
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
140
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
240
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
3.6k
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.6k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Being A Developer After 40
akosma
90
590k
GitHub's CSS Performance
jonrohan
1031
460k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Producing Creativity
orderedlist
PRO
346
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Scaling GitHub
holman
459
140k
Adopting Sorbet at Scale
ufuk
77
9.4k
Become a Pro
speakerdeck
PRO
28
5.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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