はじめての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(JSMT5PLZP
   1JYFM(SJE*OD!UBDBNZ
   

   View Slide

2. ࣗݾ঺հ
   ࢁాܟඒʢ!UBDBNZʣ
   ϐΫηϧάϦου

   ϑϩϯτΤϯυɾΤϯδχΞʢ৽ଔ೥໨ʣ
   )5.-$44ྺ೥
   +BWB4DSJQUྺ೥
   

   View Slide

3. ձࣾ঺հ
   

   View Slide

4. ୅දऔక໾தଜڗհ
   ʠϐΫηϧάϦου͸+BWB4DSJQUͷձࣾͰ͢ɻʡ
   

   View Slide

5. ʁʁʁ
   

   View Slide

6. ࢲͷ+BWB4DSJQUྺ
   ৬छ +BWB4DSJQU ظؒ
   ,":"$
   ϚʔΫΞοϓ

   ΤϯδχΞ
   ͙͢ʹ࠳ં ೥
   /"7&3
   ϚʔΫΞοϓ

   ΤϯδχΞ
   ߦ΋ॻ͍ͯͳ͍ ೥
   ઐ໳ֶߍ ແ৬ !IPLBDDIBʹΑΔमߦ
   ೥
   ʢमߦϲ݄ʣ
   1JYFM(SJE
   ϑϩϯτΤϯυ

   ΤϯδχΞ
   ݱࡏਐߦܗͰमߦத ೥໨
   

   View Slide

7. ࠓ೔ͷ࿩
   +BWB4DSJQUΛ·ͬͨ͘ॻ͚ͳ͔ͬͨਓ͕ɺ

   ϲ݄Ͱ+BWB4DSJQUͷձࣾʹೖΔ·Ͱͷ࿩
   ޮ཰తͳ+BWB4DSJQUษڧํ๏ͷώϯτʹ
   ڭ͑Δଆ͔Β͢Δͱɺ෼͔Βͳ͍ਓ͕

   Ͳ͜ʹҾ͔͔ͬΔ͔͕ཧղͰ͖Δ͔΋ʁ
   

   View Slide

8. ೖࣾ·ͰͷಓͷΓ
   ୈҰ࿩
   

   View Slide

9. ೥݄๭೔
   ࠓͷϨϕϧͰೖࣾͯ͠΋

   ͓ޓ͍ʹෆ޾ʹͳΔ͚͔ͩͩΒɺ

   ֶߍଔۀ·ͰͷؒʹɺͲΕ͚ͩ

   Ͱ͖ΔΑ͏ʹͳΔ͔Ͱ൑அ͠Α͏
   ೖࣾͨ͠ʔ͍
   ʢ˔ʈPʈ˔ʣ
   !UBDBNZ !IPLBDDIB
   0Iʜ
   

   View Slide

10. ͦͷͱ͖ͷࢲͷঢ়گ
    +BWB4DSJQUʹ͍ͭͯͷ஌ࣝθϩ
    ϓϩάϥϛϯάͷجૅ஌ࣝ΋θϩͰ

    ୀ৬ֶͯ͠ߍͰԼهΛֶΜͰ͍ͨ
    $ϓϩάϥϛϯάͷجૅͱΞϧΰϦζϜ
    +BWBΦϒδΣΫτࢦ޲
    

    View Slide

11. /PʂͦΕ͸ͨͩͷझຯʂ
    ී௨͸͜ΕͰ0,ʂ
    ͑ͬɺ+BWB4DSJQUΛ͍͚֮͑ͨͩͳͷʹɺ

    $ͱ͔+BWBΛ΍Βͳ͍ͱ͍͚ͳ͍ͷʁ
    

    View Slide

12. ϊϯϓϩάϥϚͷͨΊͷ

    +BWB4DSJQU͸͡ΊͷҰา
    ୈষ+BWB4DSJQUͷจ๏
    جຊతͳจ๏
    จࣈྻͱ਺஋
    ഑ྻͱΦϒδΣΫτ
    ৚݅൑ఆͷͨΊͷܕͱԋࢉࢠ
    ৚݅෼ذ
    ܁Γฦ͠
    ؔ਺
    1JYFM(SJE!IPLBDDIBஶ
    

    View Slide

13. ✄͔͜͜Βमߦ͕͸͡·Δ✄
    

    View Slide

14. +4ಠಛͷ࢓༷Λ

    ཧղͤΑʂ
    .JTTJPO
    

    View Slide

15. .JTTJPO಺༰
    !IPLBDDIBઌੜ͔Βຖिͭɺ

    +BWB4DSJQUʹؔ͢ΔΩʔϫʔυΛ΋Β͏
    ͦͷΩʔϫʔυʹ͍ͭͯࣗ෼Ͱௐ΂ͯ

    ؒҧͬͯͯ΋͍͍͔Βϒϩάʹ·ͱΊΔ͜ͱ
    ؒҧͬͯͨΒϒϩάͷίϝϯτͰ

    ࢦఠ΍ώϯτ͕΋Β͑Δ
    

    View Slide

16. ϓϩτλΠϓ
    +BWBͱൺֱͭͭ͠ɺ+BWB4DSJQUͷϓϩτλΠ
    ϓʹ͍ͭͯௐ΂ͯΈΔUBDBNZNFNP چ
    

    IUUQEIBUFOBOFKQUBDBNZ
    ϓϩτλΠϓνΣʔϯΛ΋ͬͱཧղ͢Δ
    UBDBNZCMPH

    IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
    

    View Slide

17. ཧղͨ͜͠ͱ
    +BWB4DSJQU͸ɺϓϩτλΠϓϕʔεͷ

    ΦϒδΣΫτࢦ޲
    ؔ਺͕ͦͷ··ίϯετϥΫλʹͳΔ
    ϓϩτλΠϓνΣʔϯʹΑΔܧঝͷ࢓૊Έ
    ࢀরͷίϐʔͱ஋ͷมߋͷ࢓૊Έ
    

    View Slide

18. είʔϓ
    +BWB4DSJQUͷείʔϓΛཧղ͢Δ
    UBDBNZCMPH

    IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
    +BWB4DSJQUͷείʔϓνΣʔϯͱΫϩʔδϟ
    Λཧղ͢ΔUBDBNZCMPH

    IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
    

    View Slide

19. ཧղͨ͜͠ͱ
    ؔ਺಺ͰͷΈείʔϓ͕ͭ͘ΒΕΔ

    +BWB4DSJQUʹϒϩοΫείʔϓ͸ͳ͍
    WBSΛলུ͢Δͱάϩʔόϧม਺ʹͳΔ
    ר্͖͕͛͋ΔͷͰؔ਺ͷઌ಄Ͱม਺Λએݴ
    ࢀর౉͠ͷ৔߹͸ؔ਺֎ʹӨڹΛ༩͑Δةݥ
    

    View Slide

20. ཧղͨ͜͠ͱ
    είʔϓνΣʔϯʹΑΔ໊લղܾํ๏
    ม਺ͷએݴͱࢀরͱ͸ɺ

    ม਺ΦϒδΣΫτͷಡΈॻ͖ͷ͜ͱ
    ΫϩʔδϟʹΑͬͯɺϩʔΧϧม਺ͷঢ়ଶΛ

    อ࣋Ͱ͖Δϝιου͕ͭ͘ΕΔ
    

    View Slide

21. UIJT
    +BWB4DSJQUͷUIJTΛཧղ͢ΔUBDBNZCMPH

    IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
    

    View Slide

22. ཧղͨ͜͠ͱ
    UIJT͸Πϯελϯεࣗ਎Λࢦ͢
    ؔ਺಺ͷUIJT͸ɺؔ਺Λఆٛͨ͠

    ΦϒδΣΫτͱ͸ؔ܎ͳ͠ʹɺ

    ؔ਺Λݺͼग़ͨ͠ΦϒδΣΫτΛࢦ͢
    ΠϕϯτϋϯυϥͰؔ਺Λݺͼग़ͨ͠৔߹ͷ

    UIJT͸ɺΠϕϯτͷൃੜݯͷΦϒδΣΫτΛࢦ͢
    

    View Slide

23. ϒϩάΛॻ͘ཧ༝
    ຊ΍8FCͷهࣄΛಡΉͷ΋ͻͱͭͷษڧํ๏
    Ͱ΋ɺ಄Ͱ෼͔ͬͨؾʹͳ͍ͬͯͯ΋ɺ

    ࣗ෼ͷݴ༿Ͱϒϩάʹ·ͱΊΒΕͳ͍
    ϒϩάʹ͢Δ͜ͱͰɺຊ౰ͷཧղʹܨ͕Δ
    ๨Εͯ΋͋ͱͰݟฦ͢͜ͱͰࢥ͍ग़ͤΔ
    

    View Slide

24. ϒϩάͷॻ͖ํ
    ௐ΂ͨ͜ͱΛͱʹ͔͘ྻڍͨ͠ͷͪ

    άϧʔϓ෼͚͢Δ
    ࣗ෼ͷݴ༿Ͱݴ͍׵͑ͯΈΔ
    ௐ΂ͨ͜ͱ͚ͩͰͳ͘ɺͳͥͦ͏ͳΔ͔Λ

    ࣗ෼Ͱߟ͑ͯߟ࡯Λ͚ͭΔ
    

    View Slide

25. ϒϩάͷεεϝ
    ͥͻࢲͱಉ͡Α͏ʹ΍ͬͯΈͯ΄͍͠
    ϓϩτλΠϓ
    είʔϓ
    UIJT
    Ұؾʹ+BWB4DSJQUͷཧղ౓্͕͕Γɺ

    ਓͷίʔυ͕ཧղͰ͖ΔΑ͏ʹͳΔ
    

    View Slide

26. ࣍͸ɺԿͰ΋͍͍͔ΒͱΓ͋͑ͣ

    K2VFSZϓϥάΠϯ࡞ͬͯΈͯ
    !
    ˞ϒϩά͸ଓ͚ͯͶ
    ϲ݄ޙʜ
    

    View Slide

27. ͱΓ͋͑ͣॻ͜͏

    K2VFSZϓϥάΠϯ
    .JTTJPO
    

    View Slide

28. .JTTJPO಺༰
    K2VFSZϓϥάΠϯΛॻ͍ͯ(JU)VCͰެ։
    ԿΛͭ͘Δ͔͸ࣗ༝ɺΧϯλϯͳ΋ͷ͔Β
    ෼͔ΔਓʹίʔυΛݟͯ΋Βͬͯɺ

    ؒҧ͍΍վળ఺Λ(JU)VCͷίʔυ্Ͱ

    ίϝϯτͯ͠΋Β͏
    

    View Slide

29. Ͱ΋໰୊͕ʜ
    ͦ΋ͦ΋ͭ͘Γ͍ͨ΋ͷͳΜͯͳ͍
    ͋·Γʹ΋෼͔Βͳ͗͢͞Δͱɺ

    Կ͔ΒͲ͏खΛ͚͍͍͔ͭͯ΋෼͔Βͣɺ

    खΛಈ͔͢͜ͱ͢ΒͰ͖ͳ͍
    ͦΜͳͱ͖ͷٹੈओ͕ʜ
    

    View Slide

30. 8FCσβΠφʔͷͨΊͷ

    K2VFSZೖ໳
    K2VFSZͷߟ͑ํΛ

    ؆ܿͰ෼͔Γ΍͘͢
    αϯϓϧίʔυ͕

    ๛෋ˍ͋Δ͋Δײ
    ͳͥ͜͏ॻ͘ͷ͔ͱ͍͏

    આ໌͕۩ମత
    1JYFM(SJE!5BLB[VEPஶ
    

    View Slide

31. ॻ͚ͳ͍৔߹͸ʁ
    αϯϓϧʹࡌ͍ͬͯΔ΋ͷΛύΫΔ
    ࠷ॳʹ౴͑Λݟͯɺ૊Έཱͯํ͕Πϝʔδ

    Ͱ͖ͨΒɺ·ͣ͸ຊΛݟͳ͍Ͱॻ͍ͯΈΔ
    ٧·ͬͨΒຊΛݟΕ͹ਓͰਐΊΒΕΔ
    ݩίʔυʹͪΐͬͱͨ͠ػೳ௥Ճ΍վมΛ
    

    View Slide

32. ΋Β͑Δίϝϯτ
    UBDBNZK2VFSZ4UVEZ

    IUUQTHJUIVCDPNUBDBNZK2VFSZ4UVEZDPNNJU
    DGBBCGGGDBEG
    

    View Slide

33. ॻ͍ͯΈͯͷؾ෇͖
    +BWB4DSJQUͰ͸ɺΠϕϯτΛى఺ʹͯ͠

    ͢΂ͯͷॲཧ͕ߦΘΕΔͱؾͮ͘
    +BWB4DSJQUͷΦϒδΣΫτ͸͢΂ͯɺ

    ,FZͱ7BMVFͷ૊Έ߹Θͤͱؾ෇͖ɺ

    ΧϯϚ΍ηϛίϩϯ΍ΧοίͷҐஔͰ

    ࠞཚ͠ͳ͘ͳͬͨʢॳ৺ऀ͋Δ͋Δʁʣ
    

    View Slide

34. K2VFSZͷ՝୊͓ٳΈͯ͠ɺ

    ଔۀ੍࡞ͰɺK2VFSZͱ/PEFKTͰ

    8FCαʔϏεͭͬͯ͘Έ͍ͨʂ
    ϲ݄ޙʜ
    0,ʂ
    ˞ϒϩά͸ଓ͚ͯͶ
    

    View Slide

35. ͭͬͨ͘΋ͷ
    ಲϨʔεʢະ׬੒ʣ

    IUUQQJHSBDFIFSPLVBQQDPN
    ษڧ͸͡Ίͯϲ݄͘Β͍Ͱ

    ͜Ε͘Β͍ͳΒͰ͖ΔΑ͏ʹͳΔΑͷྫ
    

    View Slide

36. ϑϩϯτ࣮૷
    ʢ඼࣭͸͓͖ͯ͞ʣඞཁͳػೳ͸࣮૷Ͱ͖ͨ
    ΄͍͠ػೳ͕໌֬ʹͳΔͱɺ

    ඞཁͳॲཧͷྲྀΕΛࣗ෼ͷ಄Ͱߟ͑ΔͷͰ

    ίϐϖʹཔΒͳ͘ͳΔͷͰΑ͍
    

    View Slide

37. αʔόʔαΠυ
    ਖ਼௚ɺແ๳͗ͨ͢ʗ ?P?
    ʘ
    /PEFKTΛ)FSPLVͰಈ͔͢ͱ͜Ͱྗਚ͖ͨ
    /PEFKT&YQSFTTΛ)FSPLVͰಈ͔͢·Ͱͷखॱ·ͱΊ

    IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
    

    View Slide

38. ·ʔ͕Μ͹ͬͨ͠

    ೖࣾͯ͠΋͍͍Μ͡Όͳ͍ʁ
    ϲ݄ޙʜ
    ΍ͬͨʔʂʂʂ
    ͜Ε͔Β΋मߦ͕Μ͹Γ·͢ʂ
    

    View Slide

39. ೖࣾޙͷमߦ
    ୈೋ࿩
    

    View Slide

40. ࠷ॳͷࠒͷࣦഊஊ
    ෼͔Βͳ͍͜ͱ΋ࣗ෼Ͱௐ΂ͯɺ

    Ͳ͏ͯ͠΋μϝͳͱ͖ʮ͚ͩʯฉ͘ͷ͸ɺ

    ಈ͚͹0,ͳίʔυʹͳΓ͕ͪ
    ϊʔνΣοΫͰೲ඼͢Δةݥੑ

    ˞ձࣾͱͯ͠඼࣭Λ୲อͰ͖ͳ͍
    Ͱ΋ɺͲ͏ͯ͠΋࣭໰Λԕྀͯ͠͠·͏ʜ
    

    View Slide

41. ͦ͜ͰϓϧϦӡ༻
    

    View Slide

42. ϓϧϦͱ͸ʁ
    (JU)VCͷϓϧϦΫΤετͱ͍͏ػೳͷུޠ
    ʲࢀߟʳ

    QVMMSFRVFTUΛར༻ͨ͠։ൃϫʔΫϑϩʔ
    4QFBLFS%FDL

    IUUQTTQFBLFSEFDLDPNIPUDIQPUDIQVMMSFRVFTU
    XPMJZPOHTJUBLBJGBXBLVIVSP
    

    View Slide

43. ϓϧϦӡ༻ͷϧʔϧ
    ػೳผʹϒϥϯνΛ੾ͬͯ։ൃ
    ϓϧϦΛૹΔˠϝʔϧ͕ඈͿ
    $50ͱखͷۭ͍ͯΔਓ͕ίʔυϨϏϡʔ
    ϨϏϡʔ͕௨ͬͨ΋ͷͷΈϚʔδ
    ͲΜͳࡉ͔͍मਖ਼΋͢΂ͯΛϓϧϦʹ͢Δ
    

    View Slide

44. ϓϧϦͷϝϦοτ
    ԕྀ͢Δඞཁ͕ͳ͘ͳΔ
    ಈ͚͹0,͡Όͳͯ͘ɺ

    ΑΓΑ͍࣮૷ํ๏Λ஌Δ͜ͱ͕Ͱ͖Δ
    ձࣾͱͯ͠඼࣭Λ୲อͰ͖Δ
    ͓ޓ͍ϝϦοτ͔͠ͳ͍ʂΦεεϝʂ
    

    View Slide

45. ৴པͰ͖Δ৘ใݯ
    

    View Slide

46. ίϐϖʹ஫ҙ
    +BWB4DSJQUͷίʔυΛͲ͔͔ͬΒίϐϖ͢Δ

    ˠ΄΅ίϐϖͨ͠෦෼Λࢦఠ͞ΕΔ
    र͍৯͍ίʔυ͸৴༻ͯ͠͸͍͚ͳ͍
    ৴པͰ͖Δ৘ใݯͬͯʜʁ
    

    View Slide

47. $PEF(SJE
    ϐΫηϧάϦουͷ

    ΤϯδχΞ͕ࣥච
    ฤूऀ͕ݕূ্ͨ͠Ͱ

    ෼͔Γ΍͘͢ฤू
    աڈهࣄΞʔΧΠϒ
    ຖि໦༵഑৴ʢ݄ճʣ
    ݄ԁʢ೔ແྉʣ
    IUUQTBQQDPEFHSJEOFU
    

    View Slide

48. )5.-&YQFSUTKQ
    ʮ͢΂ͯͷهࣄ͕

    Ӭٱอଘ൛ʯΛ໨ࢦ͢

    8FCٕज़৘ใϝσΟΞ
    ஶऀͷεΩϧͷߴ͞
    ແྉͰಡΊΔ
    IUUQIUNMFYQFSUTKQ
    

    View Slide

49. ৘ใͷ໨ར͖ํ๏
    ୭͕ॻ͍͍ͯΔʁ

    ˠ਎ݩอূʹΑΓॻ͖खʹ੹೚ײ͕ੜ·ΕΔ
    ͍ͭͷ৘ใʁ

    ˠόʔδϣϯʹҧ͍͕͋Δ͔΋
    ͖ͪΜͱݕূ͞Εͨ৘ใʁ

    ˠಈ͔ͳ͔ͬͨͱ͖ͷ࣌ؒϩεΛߟ͑Α͏
    

    View Slide

50. $ISPNF&YUFOUJPO
    ͓·͚
    

    View Slide

51. $ISPNF&YUFOUJPO
    ࠓ೔(JSMTͷΈͳ͞Μ͕ͭ͘Δͦ͏ͳͷͰ

    ࢲ΋ͭͬͯ͘ΈͨΑʂ
    ָఱΧϯλϯૹྉදࣔʢ$ISPNF֦ுʣΛެ։ͨ͠Αʂ

    IUUQUBDBNZIBUFOBCMPHDPNFOUSZ
    

    View Slide

52. ·ͱΊ
    

    View Slide

53. +BWB4DSJQUඞউ๏
    ਓʹڭΘΔલஈ֊ͷجૅ͸ࣗྗͰ͕Μ͹Δ
    ֶΜͩΓڭΘͬͨ͜ͱ͸ϒϩάʹॻ͜͏
    ฉ͚Δਓ͕पΓʹ͍ͳ͍ʁ

    ࠓ೔͕+BWB4DSJQU༑ୡΛ૿΍͢νϟϯεʂ
    

    View Slide

54. ࣗ৴Λ࣋ͱ͏
    ஌ࣝθϩ͔Β͸͡Ίͯ΋

    ਺ϲ݄ͰΠν͔Βॻ͚ΔΑ͏ʹͳΔ
    ͪΐͬͱॻ͚ΔΑ͏ʹͳΔͱɺ

    ۤखͩͬͨ+BWB4DSJQU΋ָ͘͠ͳͬͯ͘Δ
    ࠓ೔ͷϋϯζΦϯͰۤखҙࣝΛࠀ෰͠Α͏
    

    View Slide

55. ΈΜͳͰҰॹʹ

    ͕Μ͹Ζ͏ʙ
    

    View Slide

56. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide