JavaScriptのイベントを体感しよう

Transcript

1. 256 times ZVLJ
2. ϓϩϑΟʔϧ • yukiʢ@sac_180822ʣ • WEB੍࡞ͷPMΛ4೥΄Ͳ΍͍ͬͯ·ͨ͠ɻݱࡏ͸৘γεͰ͢ɻ • ϓϩάϥϛϯάܦݧ͸8ϲ݄Ͱ͢ɻ • ҭٳதʹͳʹ͔ҭࣇҎ֎ͷ͜ͱ͕΍Γͨ͘ͳͬͯϓϩάϥϛϯά Λ࢝ΊͯΈͨΒɺ໘നͯ͘໘നͯ͘੎͍༨ͬͯ256timesʹԠื͠ ͍ͯ·ͨ͠ɻ
3. 256 times ࢀՃલͷΘͨ͠ͱࠓͷΘͨ͠
4. 256 times ࢀՃલ͸ɾɾɾ
5. υοτΠϯετʔϧ Progate Udemy Rails νϡʔτϦΞϧ νΣϦʔຊ ɾ ɾ ɾ ͱΓ͋͑ͣ༗໊ͳڭࡐΛ͍Ζ͍Ζ΍ͬͯΈͨ
6. ͜͏͍͏ͷ࡞Γ͍ͨ ↓ άάΔ ↓ ͜ͷهࣄྑͦ͞͏ʂ ✖ ໌֬ͳཧ༝͸ͳ͍͚ͲͳΜ͔ྑͦ͞͏ ✖ ͳ͔ͥωοτʹܝࡌ͞Ε͍ͯΔίʔυ͸શͯਖ਼ͩͱ৴͖͍ͬͯ͡Δ ✖ ͦͷίʔυ͕ݹ͍ॻ͖ํͰ΋ແବͳهड़͕ଟͯ͘΋ؾ෇͘ྗ͕ͳ͍ ↓ ΄΅ਅࣅͯ͠ॻ͘ ↓ ͜͜ͷίʔυͪΐͬͱΘ͔Βͳ͍͚Ͳಈ͍ͯΔ͔Β͍͔ͬ ↓ σβΠϯ͍ͬͯ͡ ↓ ͓ʔͰ͖ͨʂΘͨ͠࡞Εͨʂྗ͍͔ͭͨ΋ʂ
7. ͜͏͍͏ͷΛ܁Γฦͯ͠ ྗ͕͍͍ͭͯΔͱࢥ͍ࠐΜͰ͍ͨ
8. 256 times ͷ ాޱ͞ΜͱͷॳճϝϯλϦϯάͰɾɾɾ
9. ాޱ͞Μ ͡Ό͋·ͣ͸ϑΥʔϜ࡞ͬͯɺ Ϙλϯԡͨ͠Βೖྗ಺༰͕ग़Δ΍ͭ࡞ͬͯΈ·͠ΐ͏ Θͨ͠ ͸͍ʂ ాޱ͞Μ ςΩετೖྗͷ෦඼࡞͍ͬͯͩ͘͞ Θͨ͠ ʢϑΥʔϜɺϑΥʔϜɺͳΜͷλά͚ͩͬʁٽʣ ɾɾɾɾɾɾɾɾɾɾɾɾௐ΂Ε͹Ͱ͖·͢ɺͨͿΜ
10. ͳʹ΋Ͱ͖ͳ͍ɾɾɾʂ
11. ాޱ͞Μ ʮௐ΂ͳ͍ͱͰ͖ͳ͍͜ͱ͸ɺ Ͱ͖Δͱ͸ݴ͑ͳ͍Ͱ͢Ͷʯ
12. ాޱ͞Μ ʮ͜Ε͘Β͍ͷ͜ͱ͸֮͑·͠ΐ͏ʯ
13. 5ϲ݄ؒɺҰԠຖ೔ϓϩάϥϛϯάֶशΛ ͍ͯͨ͠ʢͭ΋Γͩͬͨʣͷʹɺ ͳͥ<input>λά͢Βॻ͚ͳ͔ͬͨͷ͔ʁ
14. “֮͑Α͏”ͱ͍͏ҙࣝΛશ࣋ͨͣ͘ʹ औΓ૊ΜͰ͍ͨ
15. ʮϓϩάϥϛϯά͸֮͑ͳͯ͘ྑ͍ɺ άάΔྗ͕͋Ε͹OKʯ ͱ͍͏TwitterͰݟͨݴ༿Λͦͷ··ӏವΈʹ͍ͯͨ͠ ͦΜͳϫέͳ͔ͬͨʂ
16. ࢓૊Έ͸ཧղ͍ͯͯ͠΋ɺશવ͍֮͑ͯͳ͍ ↓ Կ͔Λݟͳ͍ͱԿ΋ॻ͚ͳ͍ਓʹͳ͍ͬͯͨ
17. ڭ܇̍ جຊతͳ͜ͱ͸ɺ֮͑ͨํ͕ྑ͍ʹܾ·ͬͯΔ ʢΑ͘ग़ͯ͘Δॻ͖ํͱ͔ϝιουͱ͔ʣ
18. ڭ܇̎ Α͘෼͔Βͳ͍··ௐ΂·ͬͯ͘ ͳΜ͔͍͢͝΋ͷΛ࡞ΔྗΑΓɺ ࣗྗͰ௒جຊతͳ΋ͷΛ࡞ΔྗΛ਎ʹ͚ͭΔ
19. <input>λά͢Β ࣗྗͰॻ͚ͳ͔ͬͨΘͨ͠Ͱ͕͢ɺ 256times Λऴ͑ͨࠓ͸ɾɾɾ
20. ࣗ෼ͷ࡞Γ͍ͨ΋ͷΛ࣮૷͢ΔͨΊʹ Ͳ͏͍͏ίʔυΛॻ͚͹ྑ͍͔ ༧ଌͰ͖ΔΑ͏ʹͳͬͨʂ ͦͯͦ͠Ε͕͋Δఔ౓ಈ͘ͱ͜Ζ·Ͱ ࣗྗͰίʔυ͕ॻ͚ΔΑ͏ʹͳͬͨʂ
21. ͋ͱ͸ɾɾɾ Ոి΍ࣗಈԽγεςϜΛ࢖͍ͬͯΔͱ ແҙࣝʹཪଆͷॲཧΛ૝૾͢ΔΑ͏ʹͳͬͨʂ ͨͱ͑͹ચ୕ػ ͜ͷϞʔυͰελʔτϘλϯԡ͢ͱɺ ͜͜·Ͱ͸͍ͭ΋ͱಉ͡ॲཧ͚ͩͲ ͜ͷλΠϛϯάͰ৚݅෼ذ͞Εͯɾɾɾ ͜Ε΋ాޱ͞Μ͕ݴ͍ͬͯͨ ʮݟ͑ͳ͍ઢ͕ݟ͑ΔΑ͏ʹͳΔ͜ͱʯ
22. JavaScriptͷΠϕϯτΛ ςʔϚʹͨ͠ΞϓϦ
23. ͦ΋ͦ΋’click’Πϕϯτ͔͠ ࢖ͬͨ͜ͱ͕ͳ͔ͬͨ
24. 256times ͷجૅ࿅Ͱ’keyup’͕ొ৔ͯ͠ ’keydown’΍’keypress’ͷଘࡏΛ஌Δ MDNΛݟͨΒଞʹ΋ͨ͘͞ΜΠϕϯτ͕ɾɾɾ
25. Α͘Α͘ߟ͑Δͱ webίϯςϯπ಺Ͱى͜Δ͢΂ͯͷมԽ͸ Πϕϯτ͕͖͔͚ͬʹͳ͍ͬͯΔ ͨ͘͞ΜΠϕϯτ͕͋Δͷ΋ೲಘʂ
26. ΫϦοΫͨ͠ΓεΫϩʔϧͨ͠ΓΩʔೖྗͨ͠Γɾɾɾ Ϣʔβʔͷಈ࡞ͻͱͭͻͱ͕ͭશͯΠϕϯτ Ϣʔβʔͷ༷ʑͳΠϕϯτΛΩϟονͯ͠ ԿΒ͔ͷॲཧΛߦ͍ͬͯΔ Button
27. ͲΜͳΠϕϯτ͕͋Δͷ͔஌͍ͬͯΔͱ ੍࡞ͷ෯͕޿͕Δ͸ͣ
28. ͜ͷΠϕϯτɺͲͷλΠϛϯάͰൃՐ͢ΔΜͩΖɾɾɾ ࣅͨΑ͏ͳΠϕϯτ͕͍͔ͭ͋͘Δͷ͸ͳΜͰʁ ඍົʹλΠϛϯά͕ҧ͏ͷʁ ͲͷΠϕϯτΛ࢖͏ͷ͕ϕετͳͷ͔෼͔Βͳ͍ ͱʹ͔͘ṖͩΒ͚
29. ओཁͳΠϕϯτ͕໢ཏ͞Ε͍ͯͯ ͞Βʹʮ͍·ൃՐͨ͠ʯ͕ ࢹ֮తʹΘ͔ΔΞϓϦ͕΄͍͠ʂ
30. Event Labo IUUQTFWFOUMBCPZVLJL[DPN εϚϗͰݟΔͱTouchΠϕϯτ΋ମײͰ͖ΔΑʂ
31. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠