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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
ぐんちゃ
September 08, 2019
Technology
0
100
Web完全に理解した
Webに関する基礎知識を完全に理解したと勘違いしながら昔作りました。
ぐんちゃ
September 08, 2019
Tweet
Share
More Decks by ぐんちゃ
See All by ぐんちゃ
BPP行脚_しんすく(け)さん
guncha
0
130
BPP行脚_第4回_よしたけさん
guncha
0
84
BPP行脚_第3回_なそさん
guncha
0
73
BPP行脚_第5回_みずのりさん
guncha
0
89
BPP行脚_第2回_リナさん
guncha
0
150
BPP行脚_第1回_Mayさん
guncha
0
250
JaSST nano vol.25 ぼくたちが考える最強の 「正常系、異常系、 ハッピーパス、ワンパス」
guncha
0
250
ぼくたちが考える最強の 「正常系、異常系、 ハッピーパス、ワンパス」分科会ワーク前
guncha
0
400
QAの世界Part1 オープニング
guncha
0
1.5k
Other Decks in Technology
See All in Technology
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
aeonpeople
1
260
StrandsとNeptuneを使ってナレッジグラフを構築する
yakumo
1
130
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.6k
Context Engineeringが企業で不可欠になる理由
hirosatogamo
PRO
3
660
Tebiki Engineering Team Deck
tebiki
0
24k
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
markie1009
0
170
生成AIと余白 〜開発スピードが向上した今、何に向き合う?〜
kakehashi
PRO
0
150
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
slsops
2
270
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
15
93k
学生・新卒・ジュニアから目指すSRE
hiroyaonoe
2
760
プロポーザルに込める段取り八分
shoheimitani
1
630
Agent Skils
dip_tech
PRO
0
130
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3k
GraphQLとの向き合い方2022年版
quramy
50
14k
Odyssey Design
rkendrick25
PRO
1
500
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
How to train your dragon (web standard)
notwaldorf
97
6.5k
Navigating Weather and Climate Data
rabernat
0
110
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.7k
How to make the Groovebox
asonas
2
1.9k
Designing for Timeless Needs
cassininazir
0
130
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.6k
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