Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
意外と曖昧なwebの基礎
Search
kigawa
December 15, 2024
Technology
0
71
意外と曖昧なwebの基礎
URLやHTMLなど何気なく使っているWEBの基礎でも分解して見ると意外と知らないことがあるかもしれません。
kigawa
December 15, 2024
Tweet
Share
More Decks by kigawa
See All by kigawa
自宅で立てるkubernetes
kigawa
0
61
Other Decks in Technology
See All in Technology
多様なデジタルアイデンティティを攻撃からどうやって守るのか / 20251212
ayokura
0
170
Overture Maps Foundationの3年を振り返る
moritoru
0
150
[CMU-DB-2025FALL] Apache Fluss - A Streaming Storage for Real-Time Lakehouse
jark
0
110
Playwrightのソースコードに見る、自動テストを自動で書く技術
yusukeiwaki
13
4.7k
MapKitとオープンデータで実現する地図情報の拡張と可視化
zozotech
PRO
1
120
Noを伝える技術2025: 爆速合意形成のためのNICOフレームワーク速習 #pmconf2025
aki_iinuma
2
2k
Microsoft Agent 365 を 30 分でなんとなく理解する
skmkzyk
1
1k
ログ管理の新たな可能性?CloudWatchの新機能をご紹介
ikumi_ono
0
460
手動から自動へ、そしてその先へ
moritamasami
0
280
モダンデータスタック (MDS) の話とデータ分析が起こすビジネス変革
sutotakeshi
0
400
Challenging Hardware Contests with Zephyr and Lessons Learned
iotengineer22
0
120
品質のための共通認識
kakehashi
PRO
2
200
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Faster Mobile Websites
deanohume
310
31k
Documentation Writing (for coders)
carmenintech
76
5.2k
Embracing the Ebb and Flow
colly
88
4.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
[SF Ruby Conf 2025] Rails X
palkan
0
490
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Building Applications with DynamoDB
mza
96
6.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Transcript
意外と曖昧なweb の基礎 by kigawa
AboutMe { name =“kigawa” favorite { language = Kotlin.jvm os
= Debian region = LibraryDevelopment game = Minecraft } sns { X =“@kigawa20” GitHub =“kigawa01” } }
URL
Uniform Resource Locatorの略。 インターネット上の固有のリソースのアドレス。 URLとは HTML、CSS、画像などのアドレス。
http://example.com:80/path/to/file.html ?key=value&k=v#heading | Authority | Scheme Domain Port Path Parameters
Anchor
http://example.com:80/path/to/file.html ?key=value&k=v#heading Scheme
Scheme http://example.com:80/path/to/file.html ?key=value&k=v#heading Scheme プロトコル。データを転送するための方法。 http,https,mailto,ftpなど。
http://example.com:80/path/to/file.html ?key=value&k=v#heading | Authority | Domain Port
Authority //の後に続く。ドメインとポートからなる。 localhost:3000など。 http://example.com:80/path/to/file.html ?key=value&k=v#heading | Authority | Domain Port
Domain Webサーバーの場所を示す。IPアドレスの場合もある。 localhost,127.0.0.1,example.comなど。 http://example.com:80/path/to/file.html ?key=value&k=v#heading | Authority | Domain
ループバックアドレスという。 自身を表すアドレスのこと。 localhost/127.0.0.1とは? 例えば、http://localhostにアクセスすると、アクセスしたコンピューターと同 じコンピューターに接続される。
Port 出入口の番号。プロトコルの標準ポートは省略できる。 3000,80,443など。 http://example.com:80/path/to/file.html ?key=value&k=v#heading | Authority | Port
http://example.com:80/path/to/file.html ?key=value&k=v#heading Path
Path リソースへのパス。サーバー上のファイルの場所。 /index.html,/hello/index.phpなど http://example.com:80/path/to/file.html ?key=value&k=v#heading Path
http://example.com:80/path/to/file.html ?key=value&k=v#heading Parameters
引数(Parameters) キーと値を紐づけた追加の引数。Queryと言う場合もある。 Key=value,q=hello,sort=dateなど http://example.com:80/path/to/file.html ?key=value&k=v#heading Parameters
http://example.com:80/path/to/file.html ?key=value&k=v#heading Anchor
Ancher 見出しを指定できる。サーバーに送られることはない。 #index,#linkなど http://example.com:80/path/to/file.html ?key=value&k=v#heading Anchor
HTTP
リソースを読み取るためのプロトコル。 Webにおけるデータ交換に使われる。 HTTPとは HTML、CSS、画像などを送受信する。
リクエストのデータ client server • メソッド • URL • バージョン •
ヘッダー • Body
レスポンスのデータ client server • バージョン • ステータスコード • ステータスメッセージ •
ヘッダー • Body
client server • メソッド リクエスト
HTTPリクエスト・レスポンスの動作を指定する。 GET,POST,PUT,DELETE,PATCHを使うことが多い。 メソッド ほかにはCONNECT,HEAD,OPTIONS,TRACEなどがある。
リソースを取得する。 データを送信はしてはいけない。 GETメソッド
サーバーにリソースを送信する。 リソースを追加するなど。 POSTメソッド
client server • ヘッダー リクエスト • ヘッダー レスポンス
追加の情報を送信するための物。 Content-Type,Authorizationなどを使うこと が多い。 ヘッダー ほかにはAccept,Access-Control-Allow-Originなどがある。
client server • ステータスコード レスポンス
HTTPリクエストが正常に終了したかを表す。 200,201,404,401,418,503など多くある。 ステータスコード 1xx(情報),2xx(成功),3xx(リダイレクト),4xx(クライアントエラー), 5xx(サーバーエラー)に分けられる。
client server • Body リクエスト • Body レスポンス
POSTやPUTリクエストの際に送信するデータ。 Form Data,Json,xmlなどの形式が使える。 Request Body データの形式はContent-Typeヘッダーで指定することができる。
GET、POST問わずHTMLなどクライアントに送信 するデータ。 Json,xmlなどの形式も使える。 Reponse Body データの形式はContent-Typeヘッダーで指定することができる。
まとめ 普段使っているURLやHTTPも、何気なく使ってる技術でも分解して 見ることができる