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のイベントを体感しよう
Search
256times
April 17, 2019
Programming
0
2.9k
JavaScriptのイベントを体感しよう
256times
April 17, 2019
Tweet
Share
More Decks by 256times
See All by 256times
256times 6週間の軌跡
256times
0
1.6k
256timesふりかえり
256times
0
1.5k
toraの256times
256times
0
1.5k
JS Lovers 愛はJavaScriptで掴め。
256times
0
3k
挫けてからはじまるアプリ開発
256times
0
3.2k
エラーで学ぶJavaScript
256times
1
3.1k
JavaScript初学者がスパルタ環境で頑張れた理由
256times
1
2.9k
今日も挑戦者ここで討たれり
256times
0
2.9k
Other Decks in Programming
See All in Programming
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
280
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
What We Can Learn From OSS
inouehi
0
400
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
300
Semantic search with Django and pgvector
pauloxnet
0
240
Code Reviews
bkuhlmann
4
880
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
120
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
GraphQLとの向き合い方2022年版
quramy
31
12k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Web Components: a chance to create the future
zenorocha
305
41k
How STYLIGHT went responsive
nonsquared
92
4.8k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Rails Girls Zürich Keynote
gr2m
91
13k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Transcript
256 times ZVLJ
ϓϩϑΟʔϧ • yukiʢ@sac_180822ʣ • WEB੍࡞ͷPMΛ4΄Ͳ͍ͬͯ·ͨ͠ɻݱࡏγεͰ͢ɻ • ϓϩάϥϛϯάܦݧ8ϲ݄Ͱ͢ɻ • ҭٳதʹͳʹ͔ҭࣇҎ֎ͷ͜ͱ͕Γͨ͘ͳͬͯϓϩάϥϛϯά Λ࢝ΊͯΈͨΒɺ໘നͯ͘໘ന͍ͯ͘༨ͬͯ256timesʹԠื͠
͍ͯ·ͨ͠ɻ
256 times ࢀՃલͷΘͨ͠ͱࠓͷΘͨ͠
256 times ࢀՃલɾɾɾ
υοτΠϯετʔϧ Progate Udemy Rails νϡʔτϦΞϧ νΣϦʔຊ ɾ ɾ ɾ ͱΓ͋͑ͣ༗໊ͳڭࡐΛ͍Ζ͍ΖͬͯΈͨ
͜͏͍͏ͷ࡞Γ͍ͨ ↓ άάΔ ↓ ͜ͷهࣄྑͦ͞͏ʂ ✖ ໌֬ͳཧ༝ͳ͍͚ͲͳΜ͔ྑͦ͞͏ ✖ ͳ͔ͥωοτʹܝࡌ͞Ε͍ͯΔίʔυશͯਖ਼ͩͱ৴͖͍ͬͯ͡Δ ✖
ͦͷίʔυ͕ݹ͍ॻ͖ํͰແବͳهड़͕ଟͯ͘ؾ͘ྗ͕ͳ͍ ↓ ΄΅ਅࣅͯ͠ॻ͘ ↓ ͜͜ͷίʔυͪΐͬͱΘ͔Βͳ͍͚Ͳಈ͍ͯΔ͔Β͍͔ͬ ↓ σβΠϯ͍ͬͯ͡ ↓ ͓ʔͰ͖ͨʂΘͨ͠࡞Εͨʂྗ͍͔ͭͨʂ
͜͏͍͏ͷΛ܁Γฦͯ͠ ྗ͕͍͍ͭͯΔͱࢥ͍ࠐΜͰ͍ͨ
256 times ͷ ాޱ͞ΜͱͷॳճϝϯλϦϯάͰɾɾɾ
ాޱ͞Μ ͡Ό͋·ͣϑΥʔϜ࡞ͬͯɺ Ϙλϯԡͨ͠Βೖྗ༰͕ग़Δͭ࡞ͬͯΈ·͠ΐ͏ Θͨ͠ ͍ʂ ాޱ͞Μ ςΩετೖྗͷ෦࡞͍ͬͯͩ͘͞ Θͨ͠ ʢϑΥʔϜɺϑΥʔϜɺͳΜͷλά͚ͩͬʁٽʣ ɾɾɾɾɾɾɾɾɾɾɾɾௐΕͰ͖·͢ɺͨͿΜ
ͳʹͰ͖ͳ͍ɾɾɾʂ
ాޱ͞Μ ʮௐͳ͍ͱͰ͖ͳ͍͜ͱɺ Ͱ͖Δͱݴ͑ͳ͍Ͱ͢Ͷʯ
ాޱ͞Μ ʮ͜Ε͘Β͍ͷ͜ͱ֮͑·͠ΐ͏ʯ
5ϲ݄ؒɺҰԠຖϓϩάϥϛϯάֶशΛ ͍ͯͨ͠ʢͭΓͩͬͨʣͷʹɺ ͳͥ<input>λά͢Βॻ͚ͳ͔ͬͨͷ͔ʁ
“֮͑Α͏”ͱ͍͏ҙࣝΛશ࣋ͨͣ͘ʹ औΓΜͰ͍ͨ
ʮϓϩάϥϛϯά֮͑ͳͯ͘ྑ͍ɺ άάΔྗ͕͋ΕOKʯ ͱ͍͏TwitterͰݟͨݴ༿Λͦͷ··ӏವΈʹ͍ͯͨ͠ ͦΜͳϫέͳ͔ͬͨʂ
Έཧղ͍ͯͯ͠ɺશવ͍֮͑ͯͳ͍ ↓ Կ͔Λݟͳ͍ͱԿॻ͚ͳ͍ਓʹͳ͍ͬͯͨ
ڭ܇̍ جຊతͳ͜ͱɺ֮͑ͨํ͕ྑ͍ʹܾ·ͬͯΔ ʢΑ͘ग़ͯ͘Δॻ͖ํͱ͔ϝιουͱ͔ʣ
ڭ܇̎ Α͔͘Βͳ͍··ௐ·ͬͯ͘ ͳΜ͔͍͢͝ͷΛ࡞ΔྗΑΓɺ ࣗྗͰجຊతͳͷΛ࡞ΔྗΛʹ͚ͭΔ
<input>λά͢Β ࣗྗͰॻ͚ͳ͔ͬͨΘͨ͠Ͱ͕͢ɺ 256times Λऴ͑ͨࠓɾɾɾ
ࣗͷ࡞Γ͍ͨͷΛ࣮͢ΔͨΊʹ Ͳ͏͍͏ίʔυΛॻ͚ྑ͍͔ ༧ଌͰ͖ΔΑ͏ʹͳͬͨʂ ͦͯͦ͠Ε͕͋Δఔಈ͘ͱ͜Ζ·Ͱ ࣗྗͰίʔυ͕ॻ͚ΔΑ͏ʹͳͬͨʂ
͋ͱɾɾɾ ՈిࣗಈԽγεςϜΛ͍ͬͯΔͱ ແҙࣝʹཪଆͷॲཧΛ૾͢ΔΑ͏ʹͳͬͨʂ ͨͱ͑ચ୕ػ ͜ͷϞʔυͰελʔτϘλϯԡ͢ͱɺ ͜͜·Ͱ͍ͭͱಉ͡ॲཧ͚ͩͲ ͜ͷλΠϛϯάͰ݅ذ͞Εͯɾɾɾ ͜Εాޱ͞Μ͕ݴ͍ͬͯͨ ʮݟ͑ͳ͍ઢ͕ݟ͑ΔΑ͏ʹͳΔ͜ͱʯ
JavaScriptͷΠϕϯτΛ ςʔϚʹͨ͠ΞϓϦ
ͦͦ’click’Πϕϯτ͔͠ ͬͨ͜ͱ͕ͳ͔ͬͨ
256times ͷجૅ࿅Ͱ’keyup’͕ొͯ͠ ’keydown’’keypress’ͷଘࡏΛΔ MDNΛݟͨΒଞʹͨ͘͞ΜΠϕϯτ͕ɾɾɾ
Α͘Α͘ߟ͑Δͱ webίϯςϯπͰى͜Δͯ͢ͷมԽ Πϕϯτ͕͖͔͚ͬʹͳ͍ͬͯΔ ͨ͘͞ΜΠϕϯτ͕͋Δͷೲಘʂ
ΫϦοΫͨ͠ΓεΫϩʔϧͨ͠ΓΩʔೖྗͨ͠Γɾɾɾ Ϣʔβʔͷಈ࡞ͻͱͭͻͱ͕ͭશͯΠϕϯτ Ϣʔβʔͷ༷ʑͳΠϕϯτΛΩϟονͯ͠ ԿΒ͔ͷॲཧΛߦ͍ͬͯΔ Button
ͲΜͳΠϕϯτ͕͋Δͷ͔͍ͬͯΔͱ ੍࡞ͷ෯͕͕Δͣ
͜ͷΠϕϯτɺͲͷλΠϛϯάͰൃՐ͢ΔΜͩΖɾɾɾ ࣅͨΑ͏ͳΠϕϯτ͕͍͔ͭ͋͘ΔͷͳΜͰʁ ඍົʹλΠϛϯά͕ҧ͏ͷʁ ͲͷΠϕϯτΛ͏ͷ͕ϕετͳͷ͔͔Βͳ͍ ͱʹ͔͘ṖͩΒ͚
ओཁͳΠϕϯτ͕ཏ͞Ε͍ͯͯ ͞Βʹʮ͍·ൃՐͨ͠ʯ͕ ࢹ֮తʹΘ͔ΔΞϓϦ͕΄͍͠ʂ
Event Labo IUUQTFWFOUMBCPZVLJL[DPN εϚϗͰݟΔͱTouchΠϕϯτମײͰ͖ΔΑʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠