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
JavaScriptで学ぶAjax通信
Search
Toshinori Sugita
August 14, 2014
Programming
0
220
JavaScriptで学ぶAjax通信
Ajax通信って何か?をサンプルコードを準備しつつまとめました。初心者向けです。
(Project Compass)
Toshinori Sugita
August 14, 2014
Tweet
Share
More Decks by Toshinori Sugita
See All by Toshinori Sugita
50以上のマイクロサービスを支えるアプリケーションプラットフォームの設計・構築の後悔と進化 #CNDW2024 / regrets and evolution of application platform
toshi0607
5
3.8k
OPA and cloud resources
toshi0607
0
13k
KompalWeather: Serverless Sauna Service with Cloud Run
toshi0607
0
12k
Knativeで作るDIY FaaS / serverless days fukuoka 2019 knative workshop
toshi0607
0
4.9k
Knativeで作るDIY FaaS / serverless days tokyo 2019 knative workshop
toshi0607
4
11k
Knativeへの誘い / Go Go Knative!
toshi0607
3
5.5k
Build serverless application on top of Kubernetes #sdmel19
toshi0607
1
6.1k
Knativeで実現するKubernetes上のサーバーレスアーキテクチャ #CNDT2019 #1E3 / serverless architecture on the top of K8s with Knative
toshi0607
9
15k
技術書典で高めるせんとう力 #エンジニア銭湯 / Tech book fest loves sauna
toshi0607
1
6.9k
Other Decks in Programming
See All in Programming
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
180
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
350
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
500
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.2k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
200
iOSでQRコード生成奮闘記
ktcryomm
2
120
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
sappoRo.R #12 初心者セッション
kosugitti
0
280
バッチを作らなきゃとなったときに考えること
irof
2
550
Datadog Workflow Automation で圧倒的価値提供
showwin
1
300
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
1
200
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Git: the NoSQL Database
bkeepers
PRO
428
65k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
RailsConf 2023
tenderlove
29
1k
Building Your Own Lightsaber
phodgson
104
6.2k
Typedesign – Prime Four
hannesfritz
41
2.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Building Adaptive Systems
keathley
40
2.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Transcript
JavaScriptͰֶͿAjax௨৴ toshi0607.com 2014/8/16 @Tech Garden School Project Compass 1
͜ΕԿͷࢿྉʁ • ର ɹ− Ajax௨৴ͷ֓ཁΛཧղ͍ͨ͠ਓ ɹ− WEBαʔϏεͷUXΛߴΊ͍ͨਓ • ༰ͷϨϕϧ ɹ−
࡞ऀɿϓϩάϥϛϯάྺ8ϲ݄͘Β͍ ɹ− ֓ཁͱ؆୯ͳαϯϓϧ Project Compass 2
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 3
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 4
̍ɽAjax௨৴ͱ ʮAjaxʢAsynchronous JavaScript + XMLʣ ΛҰݴͰݴ͏ͳΒɺʮJavaScriptʢXML HttpRequestΦϒδΣΫτʣΛར༻ͯ͠αʔ όଆͱඇಉظ௨৴Λߦ͍ɺड͚औͬͨ݁Ռ ΛDOMʢDocumentObjectModelʣܦ༝Ͱ ϖʔδʹө͢Δ͘͠ΈͰ͢ɻʯ
ࢁాஶʰJavaScriptຊ֨ೖʱʢ2010ɺٕज़ධࣾʣΑΓ Project Compass 5
̍ɽAjax௨৴ͱ 6
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 7
̎ɽDEMO Project Compass 8 ©GitHub, Inc. ඦฉҰݟʹ͔ͣɻ ϩʔΧϧαʔό্Ͱ࣮ߦ͍ͯͩ͘͠͞ʂ αϯϓϧίʔυ https://github.com/toshi0607/Sato-Seminar
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 9
̏ɽAjax௨৴ͱʢৄࡉʣ αʔόͱͷ௨৴݁ՌΛߋ৽ՕॴͷΈʹө − ߴɾܰշͳڍಈ − ௨৴தૢ࡞ܧଓ ɹ Project Compass 10
ϦονͳUIߏஙʹෆՄܽͳٕज़
̏ɽAjax௨৴ͱʢৄࡉʣ ɾඇಉظ௨৴ Project Compass 11 શϖʔδߋ৽ ɾಉظ௨৴ ߋ৽ՕॴͷΈߋ৽
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 12
̐ɽJavaScriptʢjQueryͰͷ࣮ʣ Project Compass 13 AjaxΛ࣮͢ΔͨΊʹඞཁͳ3εςοϓ ※JavaScriptΛ༻ ᶃXMLHttpRequestΦϒδΣΫτΛੜ ɹ− ͜ͷΦϒδΣΫτ͕ඇಉظ௨৴Λ੍ޚ ᶄίʔϧόοΫؔΛొ
ɹ− αʔόԠ࣌ͷॲཧ༰ ɹ − ΦϒδΣΫτͷ௨৴ͷঢ়ଶมԽʹΑΓݺͼग़͞ΕΔ ᶅαʔόඇಉظ௨৴Λ։࢝
̐ɽJavaScriptʢjQueryͰͷ࣮ʣ Project Compass 14 αϯϓϧίʔυhw4-ajax-sample_js.html ᶃΦϒδΣΫτΛੜ ᶄίʔϧόοΫؔΛొ ᶅαʔόඇಉظ௨৴Λ։࢝
̐ɽJavaScriptʢjQueryͰͷ࣮ʣ Project Compass 15 αϯϓϧίʔυhw4-ajax-sample_js.html αϯϓϧίʔυhw4-ajax-sample_jq.html 40%ݮʂ JQueryͰΑΓ؆ܿʹ࠶ݱʂ
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 16
̑ɽ·ͱΊ Project Compass 17 ᶃૢ࡞ੑͷվળ ɹ− ௨৴ຖʹൃੜ͍ͯͨ͠ϖʔδνϥπΩΛղফ ɹ − αʔόͷॲཧதΫϥΠΞϯτଆͰॲཧܧଓ
ᶄύϑΥʔϚϯεͷ্ ɹ− ϖʔδͷඞཁͳ෦Λߋ৽͢ΔͷͰɺ௨৴ྔ࠷খԽ ɹ − αʔόͷॲཧ͕ͪͳ͘ɺମײ্͕ ᶅ։ൃੜ࢈ੑʗӡ༻ੑͷ্ ɹ − ϦονͳUIΛඪ४తͳٕज़͚ͩͰߏங ɹ − ಈ࡞ʹඞཁͳผͳϓϥάΠϯ͕ෆཁͰɺಋೖ͕༰қ −
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 18
̒ɽࢀߟࢿྉ Project Compass 19 ɾࢁాஶʰJavaScriptຊ֨ೖʱ ɹʢ2010ɺٕज़ධࣾʣ ɹ− ଟஶॻ͋Γɻ୯ʹಈ͚͍͍ʂͱ͍͏Θ͚Ͱͳ͘ɺ ɹɹٕज़ొͷഎܠ͔Βղઆ͕ΈͬͪΓͰ͢ɻେ͖Ͱ͢ɻ ɾാҰഅஶʰWeb੍࡞ͷݱͰ͏jQueryσβΠϯೖʱ
ɹʢ2013ɺWEB PROFESSIONALʣ ɹ − WebσβΠφʔ͚ͱ͍͏ׂΓΓ͕͋Γɺ ɹɹ߅ͳ͘આ໌͕಄ʹೖ͖ͬͯ·͢ɻ ɾYuta Motishige࡞ʰݟ͍͢ϓϨθϯࢿྉͷ࡞Γํʱ ɹʢhttp://www.slideshare.net/yutamorishige50/how-to-present-betterʣ ɹ − ύϫϙ࡞ηϯε0ɺࡢಉҰࢿྉ41ճ࡞Γ͠ͷ ɹɹͦͷޙʹ͜ͷࢿྉΛΓ·ͨ͠…ɻ