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
350
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
72
sequelize.pdf
kazunorikimura
0
540
Toward the world of "ready player one"
kazunorikimura
0
73
npmの便利なパッケージ: forever, winser
kazunorikimura
0
950
npmの便利なパッケージ: Jest
kazunorikimura
0
120
Other Decks in Technology
See All in Technology
What's new in Go 1.24?
ciarana
1
110
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.8k
実は強い 非ViTな画像認識モデル
tattaka
3
1.3k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
120
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
350
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
630
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
150
Share my, our lessons from the road to re:Invent
naospon
0
140
php-conference-nagoya-2025
fuwasegu
0
150
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
MIMEと文字コードの闇
hirachan
2
1.4k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.6k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A Philosophy of Restraint
colly
203
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Cult of Friendly URLs
andyhume
78
6.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Site-Speed That Sticks
csswizardry
4
410
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
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