意外と曖昧なwebの基礎

意外と曖昧なweb の基礎 by kigawa

AboutMe { name =“kigawa” favorite { language = Kotlin.jvm os
= Debian region = LibraryDevelopment game = Minecraft } sns { X =“@kigawa20” GitHub =“kigawa01” } }

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

リソースを読み取るためのプロトコル。 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も、何気なく使ってる技術でも分解して見ることができる

意外と曖昧なwebの基礎

意外と曖昧なwebの基礎

More Decks by kigawa

Other Decks in Technology

Featured

Transcript