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

339ae9d7dfa4cbfc3e907ab5fbee9e93?s=47 tacamy
March 08, 2014

はじめての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

339ae9d7dfa4cbfc3e907ab5fbee9e93?s=128

tacamy

March 08, 2014
Tweet

Transcript

  1. ͸͡Ίͯͷ+BWB4DSJQU  4BU  +4(JSMT5PLZP 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ͷϓϩτλΠ ϓʹ͍ͭͯௐ΂ͯΈΔUBDBNZNFNP چ 
 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ͷϓϧϦΫΤετͱ͍͏ػೳͷུޠ ʲࢀߟʳ
 QVMMSFRVFTUΛར༻ͨ͠։ൃϫʔΫϑϩʔ 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. ͋Γ͕ͱ͏͍͟͝·ͨ͠