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
Kazunori-Kimura
May 31, 2017
Technology
0
200
Webアプリケーションとは何か
2017-06-03 Java勉強会向け資料
Kazunori-Kimura
May 31, 2017
Tweet
Share
More Decks by Kazunori-Kimura
See All by Kazunori-Kimura
path-parser
kazunorikimura
0
360
objectのcloneを行う/How to clone of the object in js
kazunorikimura
0
370
クライアントサイドで大きなデータを扱うときのお話/Web Worker & IndexedDB
kazunorikimura
0
620
How freelance programmer works
kazunorikimura
0
100
moment.js
kazunorikimura
0
74
sequelize.pdf
kazunorikimura
0
550
Toward the world of "ready player one"
kazunorikimura
0
75
npmの便利なパッケージ: forever, winser
kazunorikimura
0
950
npmの便利なパッケージ: Jest
kazunorikimura
0
120
Other Decks in Technology
See All in Technology
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.2k
x86-64 Assembly Essentials
latte72
4
600
20250307_エンジニアじゃないけどAzureはじめてみた
ponponmikankan
2
200
RaspberryPi CM4(CM5も)面白いぞ!
nonnoise
1
180
遷移の高速化 ヤフートップの試行錯誤
narirou
6
2k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
240
完璧を捨てろ! “攻め”のQAがもたらすスピードと革新/20250306 Hiroki Hachisuka
shift_evolve
0
150
事業を差別化する技術を生み出す技術
pyama86
2
550
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
230
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
140
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.9k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Bash Introduction
62gerente
611
210k
Into the Great Unknown - MozCon
thekraken
35
1.7k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fireside Chat
paigeccino
35
3.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
A Philosophy of Restraint
colly
203
16k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Making Projects Easy
brettharned
116
6k
Transcript
/40 8FCΞϓϦέʔγϣϯ ͱԿ͔ʁ 2017/06/03 ⽊村 憲規 1
/40 ͡Ίʹ Webアプリケーションの開発をする前に 裏側の仕組みについて把握しましょう 2
/40 ΫϥΠΞϯταʔόʔϞσϧ Webブラウザ Webサーバー 3
/40 ΫϥΠΞϯταʔόʔϞσϧ Webブラウザ Webサーバー 1. リクエスト 4
/40 ΫϥΠΞϯταʔόʔϞσϧ Webブラウザ Webサーバー 1. リクエスト 2. レスポンス 5
/40 63-(Uniform Resource Locator) リソースの場所を表す リソース:HTMLや画像ファイルなど 6
/40 63-(Uniform Resource Locator) https://www.example.com/index.html プロトコル ホスト名 パス 7
/40 )551ͱ )5514 HTTP (HyperText Transfer Protocol) WebブラウザとWebサーバの間でHTMLなどの コンテンツの送受信に⽤いられる通信プロトコ ル
8
/40 )551ͱ )5514 HTTPS (HTTP over SSL/TLS) メッセージを平⽂のままで送受信する標準の HTTPと異なり、SSL/TLSプロトコルを⽤いて、 サーバの認証・通信内容の暗号化・改竄検出な
どを⾏う。 9
/40 )551ϦΫΤετ Webブラウザ Webサーバー 1. リクエスト 2. レスポンス 10
/40 )551ϦΫΤετ • HTTPリクエストの構成要素 • リクエストライン • ヘッダ • ボディ
11
/40 %&.0 • telnet で example.com に接続してみる 12
/40 %&.0 ղઆ リクエスト レスポンス 13
/40 %&.0 ղઆ リクエストライン ヘッダー GETメソッドではBody不要 空⾏ 14
/40 %&.0 ղઆ メソッド パス バージョン 15
/40 ϝιου GET POST PUT DELETE HEAD OPTION TRACE CONNECT
16
/40 ϝιου GET POST PUT DELETE HEAD OPTION TRACE CONNECT
17
/40 ϝιου GET POST PUT DELETE HEAD OPTION TRACE CONNECT
URLで⽰されたリソースを サーバーから取得する クライアントからサーバー へデータを投稿する 18
/40 )551Ϩεϙϯε Webブラウザ Webサーバー 1. リクエスト 2. レスポンス 19
/40 )551Ϩεϙϯε • HTTPレスポンスの構成要素 • レスポンスライン • ヘッダ • ボディ
20
/40 %&.0 ղઆ レスポンスライン ヘッダ 空⾏ ボディ 21
/40 εςʔλείʔυ ステータスコード 内容 100番台 情報 200番台 成功 300番台 リダイレクションメッセージ
400番台 クライアントエラー 500番台 サーバーエラー HTTP レスポンスコード - HTTP | MDN https://developer.mozilla.org/ja/docs/Web/HTTP/Status 22
/40 8FCϒϥβͷׂ HTTPレスポンスはテキストであり、 Webブラウザが適切に解釈し表⽰し ている 23
/40 8FCϖʔδΛߏ͢Δཁૉ • HTML • CSS • JavaScript 24
/40 )5.- • HyperText Markup Language • タグによって⽂章の意味付けや構造を定義する • タグに囲まれた⽂章を要素と呼ぶ
25
/40 $44 • Cascading Style Sheet • HTMLの要素に対して、フォントサイズや⾊、 背景⾊といった装飾をおこなう 26
/40 +BWB4DSJQU • Webブラウザが提供する DOM (Document Object Model) API を介して
HTML要素の操作 を⾏う • AjaxによりWebサーバーと⾮同期通信を⾏う 27
/40 8FCΞϓϦέʔγϣϯͱʁ Webブラウザ Webサーバー 28
/40 8FCΞϓϦέʔγϣϯͱʁ Webブラウザ Webサーバー 操作 29
/40 8FCΞϓϦέʔγϣϯͱʁ Webブラウザ Webサーバー 操作 リクエスト 30
/40 8FCΞϓϦέʔγϣϯͱʁ Webブラウザ Webサーバー レスポンス の⽣成 操作 リクエスト 31
/40 8FCΞϓϦέʔγϣϯͱʁ Webブラウザ Webサーバー レスポンス の⽣成 操作 リクエスト レスポンス 32
/40 8FCΞϓϦέʔγϣϯͱʁ Webブラウザ Webサーバー HTML CSS JavaScript レスポンス の⽣成 操作
リクエスト レスポンス 33
/40 8FCΞϓϦέʔγϣϯͱʁ Webブラウザ Webサーバー HTML CSS JavaScript レスポンス の⽣成 操作
表⽰ リクエスト レスポンス 34
/40 8FCΞϓϦέʔγϣϯͷఆٛ クライアントからのリクエストごと にサーバー側の処理で状況に合わせ たWebページが⽣成されることによ り、何かしらの機能が提供されるア プリケーション 35
/40 8FCΞϓϦέʔγϣϯ։ൃͷରൣғ Webブラウザ Webサーバー HTML CSS JavaScript レスポンス の⽣成 操作
表⽰ リクエスト レスポンス 36
/40 <ࢀߟ>ϒϥβͷ։ൃ ऀπʔϧʹ͍ͭͯ 37
/40 ΓͱΓͷதΛݟΔ ブラウザに組み込まれている「開発者ツール」 でHTTPのやりとりの中⾝を確認できます。 ブラウザによって起動⽅ 法や使い⽅は異なります 38
/40 ΓͱΓͷதΛݟΔ 1. ブラウザを起動し http://www.example.com を表⽰する 2. 開発者ツールを起動する (Google Chromeの場合は右クリックà検証)
3. ブラウザでスーパーリロード (Shift + F5) を ⾏う 39
/40 ΓͱΓͷதΛݟΔ リクエスト レスポンス 40