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
290
objectのcloneを行う/How to clone of the object in js
kazunorikimura
0
290
クライアントサイドで大きなデータを扱うときのお話/Web Worker & IndexedDB
kazunorikimura
0
540
How freelance programmer works
kazunorikimura
0
83
moment.js
kazunorikimura
0
57
sequelize.pdf
kazunorikimura
0
460
Toward the world of "ready player one"
kazunorikimura
0
58
npmの便利なパッケージ: forever, winser
kazunorikimura
0
810
npmの便利なパッケージ: Jest
kazunorikimura
0
93
Other Decks in Technology
See All in Technology
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
370
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
330
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
1
280
競技としてのKaggle、役に立つKaggle
yu4u
3
1.8k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
LLM開発・活用の舞台裏@2024.04.25
yushin_n
1
350
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
A Tale of Four Properties
chriscoyier
151
22k
What's new in Ruby 2.0
geeforr
337
31k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Making Projects Easy
brettharned
108
5.5k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
RailsConf 2023
tenderlove
4
540
Agile that works and the tools we love
rasmusluckow
325
20k
For a Future-Friendly Web
brad_frost
172
9k
Optimizing for Happiness
mojombo
370
69k
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