はじめてのJavaScript / JS Girls Tokyo #1

JS Girls Tokyo #1で、JavaScript初心者向けの勉強方法について話しました。

私自身、HTML/CSSはできてもJavaScriptが大の苦手でしたが、@hokaccha 先生による修行によって、なんとか理解できるようになりました。

その修業の中で、何をどうやって勉強したかを紹介することによって、同じように悩んでいる人へのヒントになればうれしいなと思って書いてみました。

スライド中のリンクをクリックしたい場合は、下記のSlideShareの方（内容はまったく同じ）でご覧くださいませ〜！

はじめてのJavaScript / JS Girls Tokyo #1
http://www.slideshare.net/tacamy/js-girls1-32102921

Transcript

1. ͸͡Ίͯͷ+BWB4DSJQU  4BU
   +4
   (JSMT
   5PLZP
   
   1JYFM(SJE
   *OD
   !UBDBNZ
   
2. ࣗݾ঺հ ࢁాܟඒʢ!UBDBNZʣ
   ϐΫηϧάϦου
 ϑϩϯτΤϯυɾΤϯδχΞʢ৽ଔ೥໨ʣ
   )5.-$44ྺ
   
   ೥
   +BWB4DSJQUྺ
   
   ೥
3. ձࣾ঺հ
4. ୅දऔక໾
   தଜڗհ ʠϐΫηϧάϦου͸+BWB4DSJQUͷձࣾͰ͢ɻʡ
5. ʁʁʁ
6. ࢲͷ+BWB4DSJQUྺ ৬छ
   +BWB4DSJQU ظؒ ,":"$ ϚʔΫΞοϓ
 ΤϯδχΞ ͙͢ʹ࠳ં ೥ /"7&3 ϚʔΫΞοϓ
 ΤϯδχΞ ߦ΋ॻ͍ͯͳ͍ ೥ ઐ໳ֶߍ ແ৬ !IPLBDDIBʹΑΔमߦ ೥
   ʢमߦ
   ϲ݄ʣ 1JYFM(SJE ϑϩϯτΤϯυ
 ΤϯδχΞ ݱࡏਐߦܗͰमߦத ೥໨
7. ࠓ೔ͷ࿩ +BWB4DSJQUΛ·ͬͨ͘ॻ͚ͳ͔ͬͨਓ͕ɺ
 ϲ݄Ͱ+BWB4DSJQUͷձࣾʹೖΔ·Ͱͷ࿩
   ޮ཰తͳ+BWB4DSJQUษڧํ๏ͷώϯτʹ
   ڭ͑Δଆ͔Β͢Δͱɺ෼͔Βͳ͍ਓ͕
 Ͳ͜ʹҾ͔͔ͬΔ͔͕ཧղͰ͖Δ͔΋ʁ
8. ೖࣾ·ͰͷಓͷΓ ୈҰ࿩
9. ೥݄๭೔ ࠓͷϨϕϧͰೖࣾͯ͠΋
 ͓ޓ͍ʹෆ޾ʹͳΔ͚͔ͩͩΒɺ
 ֶߍଔۀ·ͰͷؒʹɺͲΕ͚ͩ
 Ͱ͖ΔΑ͏ʹͳΔ͔Ͱ൑அ͠Α͏ ೖࣾͨ͠ʔ͍
   ʢ˔ʈPʈ˔ʣ !UBDBNZ !IPLBDDIB 0Iʜ
10. ͦͷͱ͖ͷࢲͷঢ়گ +BWB4DSJQUʹ͍ͭͯͷ஌ࣝθϩ
    ϓϩάϥϛϯάͷجૅ஌ࣝ΋θϩͰ
 ୀ৬ֶͯ͠ߍͰԼهΛֶΜͰ͍ͨ
    $
    
    ϓϩάϥϛϯάͷجૅͱΞϧΰϦζϜ
    +BWB
    
    ΦϒδΣΫτࢦ޲
11. /PʂͦΕ͸ͨͩͷझຯʂ
    ී௨͸͜ΕͰ0,ʂ ͑ͬɺ+BWB4DSJQUΛ͍͚֮͑ͨͩͳͷʹɺ
 $ͱ͔+BWBΛ΍Βͳ͍ͱ͍͚ͳ͍ͷʁ
12. ϊϯϓϩάϥϚͷͨΊͷ
 +BWB4DSJQU͸͡ΊͷҰา ୈষ
    +BWB4DSJQUͷจ๏
    جຊతͳจ๏
    จࣈྻͱ਺஋
    ഑ྻͱΦϒδΣΫτ
    ৚݅൑ఆͷͨΊͷܕͱԋࢉࢠ
    ৚݅෼ذ
    ܁Γฦ͠
    ؔ਺ 1JYFM(SJE
    !IPLBDDIB
    ஶ
13. ✄
    ͔͜͜Βमߦ͕͸͡·Δ
    ✄
14. +4ಠಛͷ࢓༷Λ
 ཧղͤΑʂ .JTTJPO
15. .JTTJPO಺༰ !IPLBDDIBઌੜ͔Βຖिͭɺ
 +BWB4DSJQUʹؔ͢ΔΩʔϫʔυΛ΋Β͏
    ͦͷΩʔϫʔυʹ͍ͭͯࣗ෼Ͱௐ΂ͯ
 ؒҧͬͯͯ΋͍͍͔Βϒϩάʹ·ͱΊΔ͜ͱ
    ؒҧͬͯͨΒϒϩάͷίϝϯτͰ
 ࢦఠ΍ώϯτ͕΋Β͑Δ
16. ϓϩτλΠϓ +BWBͱൺֱͭͭ͠ɺ+BWB4DSJQUͷϓϩτλΠ ϓʹ͍ͭͯௐ΂ͯΈΔ
    
    UBDBNZ
    NFNP
    چ 
 IUUQEIBUFOBOFKQUBDBNZ
    ϓϩτλΠϓνΣʔϯΛ΋ͬͱཧղ͢Δ
    
    UBDBNZCMPH
 IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
17. ཧղͨ͜͠ͱ +BWB4DSJQU͸ɺϓϩτλΠϓϕʔεͷ
 ΦϒδΣΫτࢦ޲
    ؔ਺͕ͦͷ··ίϯετϥΫλʹͳΔ
    ϓϩτλΠϓνΣʔϯʹΑΔܧঝͷ࢓૊Έ
    ࢀরͷίϐʔͱ஋ͷมߋͷ࢓૊Έ
18. είʔϓ +BWB4DSJQUͷείʔϓΛཧղ͢Δ
    
    UBDBNZCMPH
 IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
    +BWB4DSJQUͷείʔϓνΣʔϯͱΫϩʔδϟ Λཧղ͢Δ
    
    UBDBNZCMPH
 IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
19. ཧղͨ͜͠ͱ ؔ਺಺ͰͷΈείʔϓ͕ͭ͘ΒΕΔ
 +BWB4DSJQUʹϒϩοΫείʔϓ͸ͳ͍
    WBSΛলུ͢Δͱάϩʔόϧม਺ʹͳΔ
    ר্͖͕͛͋ΔͷͰؔ਺ͷઌ಄Ͱม਺Λએݴ
    ࢀর౉͠ͷ৔߹͸ؔ਺֎ʹӨڹΛ༩͑Δةݥ
20. ཧղͨ͜͠ͱ είʔϓνΣʔϯʹΑΔ໊લղܾํ๏
    ม਺ͷએݴͱࢀরͱ͸ɺ
 ม਺ΦϒδΣΫτͷಡΈॻ͖ͷ͜ͱ
    ΫϩʔδϟʹΑͬͯɺϩʔΧϧม਺ͷঢ়ଶΛ
 อ࣋Ͱ͖Δϝιου͕ͭ͘ΕΔ
21. UIJT +BWB4DSJQUͷUIJTΛཧղ͢Δ
    
    UBDBNZCMPH
 IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
22. ཧղͨ͜͠ͱ UIJT͸Πϯελϯεࣗ਎Λࢦ͢
    ؔ਺಺ͷUIJT͸ɺؔ਺Λఆٛͨ͠
 ΦϒδΣΫτͱ͸ؔ܎ͳ͠ʹɺ
 ؔ਺Λݺͼग़ͨ͠ΦϒδΣΫτΛࢦ͢
    ΠϕϯτϋϯυϥͰؔ਺Λݺͼग़ͨ͠৔߹ͷ
 UIJT͸ɺΠϕϯτͷൃੜݯͷΦϒδΣΫτΛࢦ͢
23. ϒϩάΛॻ͘ཧ༝ ຊ΍8FCͷهࣄΛಡΉͷ΋ͻͱͭͷษڧํ๏
    Ͱ΋ɺ಄Ͱ෼͔ͬͨؾʹͳ͍ͬͯͯ΋ɺ
 ࣗ෼ͷݴ༿Ͱϒϩάʹ·ͱΊΒΕͳ͍
    ϒϩάʹ͢Δ͜ͱͰɺຊ౰ͷཧղʹܨ͕Δ
    ๨Εͯ΋͋ͱͰݟฦ͢͜ͱͰࢥ͍ग़ͤΔ
24. ϒϩάͷॻ͖ํ ௐ΂ͨ͜ͱΛͱʹ͔͘ྻڍͨ͠ͷͪ
 άϧʔϓ෼͚͢Δ
    ࣗ෼ͷݴ༿Ͱݴ͍׵͑ͯΈΔ
    ௐ΂ͨ͜ͱ͚ͩͰͳ͘ɺͳͥͦ͏ͳΔ͔Λ
 ࣗ෼Ͱߟ͑ͯߟ࡯Λ͚ͭΔ
25. ϒϩάͷεεϝ ͥͻࢲͱಉ͡Α͏ʹ΍ͬͯΈͯ΄͍͠
    ϓϩτλΠϓ
    είʔϓ
    UIJT
    Ұؾʹ+BWB4DSJQUͷཧղ౓্͕͕Γɺ
 ਓͷίʔυ͕ཧղͰ͖ΔΑ͏ʹͳΔ
26. ࣍͸ɺԿͰ΋͍͍͔ΒͱΓ͋͑ͣ
 K2VFSZϓϥάΠϯ࡞ͬͯΈͯ
    ! ˞ϒϩά͸ଓ͚ͯͶ ϲ݄ޙʜ
27. ͱΓ͋͑ͣॻ͜͏
 K2VFSZϓϥάΠϯ .JTTJPO
28. .JTTJPO಺༰ K2VFSZϓϥάΠϯΛॻ͍ͯ(JU)VCͰެ։
    ԿΛͭ͘Δ͔͸ࣗ༝ɺΧϯλϯͳ΋ͷ͔Β
    ෼͔ΔਓʹίʔυΛݟͯ΋Βͬͯɺ
 ؒҧ͍΍վળ఺Λ(JU)VCͷίʔυ্Ͱ
 ίϝϯτͯ͠΋Β͏
29. Ͱ΋໰୊͕ʜ ͦ΋ͦ΋ͭ͘Γ͍ͨ΋ͷͳΜͯͳ͍
    ͋·Γʹ΋෼͔Βͳ͗͢͞Δͱɺ
 Կ͔ΒͲ͏खΛ͚͍͍͔ͭͯ΋෼͔Βͣɺ
 खΛಈ͔͢͜ͱ͢ΒͰ͖ͳ͍
    ͦΜͳͱ͖ͷٹੈओ͕ʜ
30. 8FCσβΠφʔͷͨΊͷ
 K2VFSZೖ໳ K2VFSZͷߟ͑ํΛ
 ؆ܿͰ෼͔Γ΍͘͢
    αϯϓϧίʔυ͕
 ๛෋ˍ͋Δ͋Δײ
    ͳͥ͜͏ॻ͘ͷ͔ͱ͍͏
 આ໌͕۩ମత 1JYFM(SJE
    !5BLB[VEP
    ஶ
31. ॻ͚ͳ͍৔߹͸ʁ αϯϓϧʹࡌ͍ͬͯΔ΋ͷΛύΫΔ
    ࠷ॳʹ౴͑Λݟͯɺ૊Έཱͯํ͕Πϝʔδ
 Ͱ͖ͨΒɺ·ͣ͸ຊΛݟͳ͍Ͱॻ͍ͯΈΔ
    ٧·ͬͨΒຊΛݟΕ͹ਓͰਐΊΒΕΔ
    ݩίʔυʹͪΐͬͱͨ͠ػೳ௥Ճ΍վมΛ
32. ΋Β͑Δίϝϯτ UBDBNZK2VFSZ4UVEZ
 IUUQTHJUIVCDPNUBDBNZK2VFSZ4UVEZDPNNJU DGBBCGGGDBEG
33. ॻ͍ͯΈͯͷؾ෇͖ +BWB4DSJQUͰ͸ɺΠϕϯτΛى఺ʹͯ͠
 ͢΂ͯͷॲཧ͕ߦΘΕΔͱؾͮ͘
    +BWB4DSJQUͷΦϒδΣΫτ͸͢΂ͯɺ
 ,FZͱ7BMVFͷ૊Έ߹Θͤͱؾ෇͖ɺ
 ΧϯϚ΍ηϛίϩϯ΍ΧοίͷҐஔͰ
 ࠞཚ͠ͳ͘ͳͬͨʢॳ৺ऀ͋Δ͋Δʁʣ
34. K2VFSZͷ՝୊͓ٳΈͯ͠ɺ
 ଔۀ੍࡞ͰɺK2VFSZͱ/PEFKTͰ
 8FCαʔϏεͭͬͯ͘Έ͍ͨʂ ϲ݄ޙʜ 0,ʂ
    ˞ϒϩά͸ଓ͚ͯͶ
35. ͭͬͨ͘΋ͷ ಲϨʔεʢະ׬੒ʣ
 IUUQQJHSBDFIFSPLVBQQDPN
    ษڧ͸͡Ίͯϲ݄͘Β͍Ͱ
 ͜Ε͘Β͍ͳΒͰ͖ΔΑ͏ʹͳΔΑͷྫ
36. ϑϩϯτ࣮૷ ʢ඼࣭͸͓͖ͯ͞ʣඞཁͳػೳ͸࣮૷Ͱ͖ͨ
    ΄͍͠ػೳ͕໌֬ʹͳΔͱɺ
 ඞཁͳॲཧͷྲྀΕΛࣗ෼ͷ಄Ͱߟ͑ΔͷͰ
 ίϐϖʹཔΒͳ͘ͳΔͷͰΑ͍
37. αʔόʔαΠυ ਖ਼௚ɺແ๳͗ͨ͢ʗ ?P? ʘ
    /PEFKTΛ)FSPLVͰಈ͔͢ͱ͜Ͱྗਚ͖ͨ
    /PEFKT
    
    &YQSFTT
    Λ
    )FSPLV
    Ͱಈ͔͢·Ͱͷखॱ·ͱΊ
 IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
38. ·ʔ͕Μ͹ͬͨ͠
 ೖࣾͯ͠΋͍͍Μ͡Όͳ͍ʁ ϲ݄ޙʜ ΍ͬͨʔʂʂʂ
    ͜Ε͔Β΋मߦ͕Μ͹Γ·͢ʂ
39. ೖࣾޙͷमߦ ୈೋ࿩
40. ࠷ॳͷࠒͷࣦഊஊ ෼͔Βͳ͍͜ͱ΋ࣗ෼Ͱௐ΂ͯɺ
 Ͳ͏ͯ͠΋μϝͳͱ͖ʮ͚ͩʯฉ͘ͷ͸ɺ
 ಈ͚͹0,ͳίʔυʹͳΓ͕ͪ
    ϊʔνΣοΫͰೲ඼͢Δةݥੑ
 ˞ձࣾͱͯ͠඼࣭Λ୲อͰ͖ͳ͍
    Ͱ΋ɺͲ͏ͯ͠΋࣭໰Λԕྀͯ͠͠·͏ʜ
41. ͦ͜ͰϓϧϦӡ༻
42. ϓϧϦͱ͸ʁ (JU)VCͷϓϧϦΫΤετͱ͍͏ػೳͷུޠ
    ʲࢀߟʳ
 QVMM
    SFRVFTU
    Λར༻ͨ͠։ൃϫʔΫϑϩʔ
    
    4QFBLFS
    %FDL
 IUUQTTQFBLFSEFDLDPNIPUDIQPUDIQVMMSFRVFTU XPMJZPOHTJUBLBJGBXBLVIVSP
43. ϓϧϦӡ༻ͷϧʔϧ  ػೳผʹϒϥϯνΛ੾ͬͯ։ൃ
     ϓϧϦΛૹΔ
    ˠ
    ϝʔϧ͕ඈͿ
     $50ͱखͷۭ͍ͯΔਓ͕ίʔυϨϏϡʔ
     ϨϏϡʔ͕௨ͬͨ΋ͷͷΈϚʔδ
    ͲΜͳࡉ͔͍मਖ਼΋͢΂ͯΛϓϧϦʹ͢Δ
44. ϓϧϦͷϝϦοτ ԕྀ͢Δඞཁ͕ͳ͘ͳΔ
    ಈ͚͹0,͡Όͳͯ͘ɺ
 ΑΓΑ͍࣮૷ํ๏Λ஌Δ͜ͱ͕Ͱ͖Δ
    ձࣾͱͯ͠඼࣭Λ୲อͰ͖Δ
    ͓ޓ͍ϝϦοτ͔͠ͳ͍ʂΦεεϝʂ
45. ৴པͰ͖Δ৘ใݯ
46. ίϐϖʹ஫ҙ +BWB4DSJQUͷίʔυΛͲ͔͔ͬΒίϐϖ͢Δ
 ˠ
    ΄΅ίϐϖͨ͠෦෼Λࢦఠ͞ΕΔ
    र͍৯͍ίʔυ͸৴༻ͯ͠͸͍͚ͳ͍
    ৴པͰ͖Δ৘ใݯͬͯʜʁ
47. $PEF(SJE ϐΫηϧάϦουͷ
 ΤϯδχΞ͕ࣥච
    ฤूऀ͕ݕূ্ͨ͠Ͱ
 ෼͔Γ΍͘͢ฤू
    աڈهࣄΞʔΧΠϒ
    ຖि໦༵഑৴ʢ݄ճʣ ݄ԁʢ೔ແྉʣ IUUQTBQQDPEFHSJEOFU
48. )5.-&YQFSUTKQ ʮ͢΂ͯͷهࣄ͕
 Ӭٱอଘ൛ʯΛ໨ࢦ͢
 8FCٕज़৘ใϝσΟΞ
    ஶऀͷεΩϧͷߴ͞
    ແྉͰಡΊΔ IUUQIUNMFYQFSUTKQ
49. ৘ใͷ໨ར͖ํ๏ ୭͕ॻ͍͍ͯΔʁ
 ˠ
    ਎ݩอূʹΑΓॻ͖खʹ੹೚ײ͕ੜ·ΕΔ
    ͍ͭͷ৘ใʁ
 ˠ
    όʔδϣϯʹҧ͍͕͋Δ͔΋
    ͖ͪΜͱݕূ͞Εͨ৘ใʁ
 ˠ
    ಈ͔ͳ͔ͬͨͱ͖ͷ࣌ؒϩεΛߟ͑Α͏
50. $ISPNF
    &YUFOUJPO ͓·͚
51. $ISPNF
    &YUFOUJPO ࠓ೔(JSMTͷΈͳ͞Μ͕ͭ͘Δͦ͏ͳͷͰ
 ࢲ΋ͭͬͯ͘ΈͨΑʂ
    ָఱΧϯλϯૹྉදࣔʢ$ISPNF֦ுʣΛެ։ͨ͠Αʂ
 IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
52. ·ͱΊ
53. +BWB4DSJQUඞউ๏ ਓʹڭΘΔલஈ֊ͷجૅ͸ࣗྗͰ͕Μ͹Δ
    ֶΜͩΓڭΘͬͨ͜ͱ͸ϒϩάʹॻ͜͏
    ฉ͚Δਓ͕पΓʹ͍ͳ͍ʁ
 ࠓ೔͕+BWB4DSJQU༑ୡΛ૿΍͢νϟϯεʂ
54. ࣗ৴Λ࣋ͱ͏ ஌ࣝθϩ͔Β͸͡Ίͯ΋
 ਺ϲ݄ͰΠν͔Βॻ͚ΔΑ͏ʹͳΔ
    ͪΐͬͱॻ͚ΔΑ͏ʹͳΔͱɺ
 ۤखͩͬͨ+BWB4DSJQU΋ָ͘͠ͳͬͯ͘Δ
    ࠓ೔ͷϋϯζΦϯͰۤखҙࣝΛࠀ෰͠Α͏
55. ΈΜͳͰҰॹʹ
 ͕Μ͹Ζ͏ʙ
56. ͋Γ͕ͱ͏͍͟͝·ͨ͠