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
190
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
360
クライアントサイドで大きなデータを扱うときのお話/Web Worker & IndexedDB
kazunorikimura
0
620
How freelance programmer works
kazunorikimura
0
100
moment.js
kazunorikimura
0
73
sequelize.pdf
kazunorikimura
0
540
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
LayerXにおけるAI活用事例とその裏側(2025年2月) バクラクの目指す “業務の自動運転” の例 / layerx-ai-deim2025
yuya4
2
600
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
540
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
130
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
340
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
370
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
320
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
1.1k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
780
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
240
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.6k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
590
アジリティを高めるテストマネジメント #QiitaQualityForward
makky_tyuyan
1
350
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
It's Worth the Effort
3n
184
28k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Why Our Code Smells
bkeepers
PRO
336
57k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
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