改めて理解するJavaScript Array / Understanding JavaScript Array

Slide 1

Slide 1 text

վΊͯཧղ͢Δ+BWB4DSJQU"SSBZ .BZ ॳՆͷ+BWB4DSJQUࡇ  !PLVOPLFOUBSP

Slide 2

Slide 2 text

୭ w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP w גࣜձࣾϐΫηϧάϦ ο υ

Slide 3

Slide 3 text

ࣥච w $PEF(SJE • https://www.codegrid.net/ w 5ZQF4DSJQU 3Y+4ͳͲ w "OHVMBSσϕϩούʔζΨΠ υ

Slide 4

Slide 4 text

OHKBQBO w "OHVMBSͱ8FCٕज़ʹؔ͢Δ  ೔ຊͷΧϯϑΝϨϯε • https://ngjapan.org/ w ݄೔ ౔ ౦ژ࿡ຊ໦

Slide 5

Slide 5 text

ࠓ೔ͷ࿩ w +BWB4DSJQU"SSBZ w ͦͷϥΠ ϒϥ Ϧ͸ຊ౰ʹඞཁ͔ ʁ w ਖ਼͍͠ϝ ιο υΛબ୒͢Δ

Slide 6

Slide 6 text

+BWB4DSJQUʹ͓͚Δ഑ྻ w ഑ྻ "SSBZ Λѻ͏ʹ͸  const fruits = ['Apple', 'Banana']; w ഑ྻ͔Β஋ΛऔΓग़͢ʹ͸  console.log(fruits[0]); // Apple

Slide 7

Slide 7 text

2഑ྻͷதͷ஋͢΂ͯΛഒ͠ͳ͍͞ w ͜ͷ഑ྻͷதͷ஋Λ͢΂ͯഒͯ͠৽͍͠഑ྻΛ࡞Δ  const arr = [1, 2, 3, 4, 5]; w Ͳ͏͢Δ͔ w GPSจΛ࢖͏ w̹ 2VFSZΛ࢖͏ w MPEBTIΛ࢖͏

Slide 8

Slide 8 text

ͲΕ΋࢖Θͳ͘ ͍͍ͯ w ഑ྻͷதͷ஋Λͻͱͭͣͭॲཧͯ݁͠ՌΛฦ͚ͩ͢ͳΒ͹ɺ   ϥΠ ϒϥ ϦΛ࢖͏ඞཁ΋ͳ͚Ε͹ɺ GPSจ΋ඞཁͳ͍ w [1, 2, 3, 4, 5].map(v => v * 2);    // [2, 4, 6, 8, 10]

Slide 9

Slide 9 text

"SSBZͷϝιο υ w +BWB4DSJQUͰͷ഑ྻͱ͸ɺ "SSBZΠϯελϯεͰ͋Δ w Array.prototype.xxxx()ͱ͍͏ ϝ ιο υΛ਺ଟ࣋ͪ͘  [0, 1, 2].xxxx()ͷΑ ͏ʹͯ͠࢖͑Δ • https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Array

Slide 10

Slide 10 text

ͦͷϥΠ ϒϥ Ϧɺ ຊ౰ʹඞཁ͔ ʁ

Slide 11

Slide 11 text

ͦͷϥΠ ϒϥ ϦཁΒͳ͍͔΋ w K2VFSZ MPEBTI 6OEFSTDPSFKT w ͳΜͱͳ͘ Ͱ࢖͍ͬͯͳ͍͔

Slide 12

Slide 12 text

&$."4DSJQU w +BWB4DSJQUʹ͸ݴޠ࢓༷ͷ൛ ʢόʔδϣϯʣ ͕ଘࡏ͢Δ͜ͱΛҙࣝ͢Δ w ೥&4 w ೥&4ˠ&4 ʢ͔͜͜Βຖ೥ʣ w ೥&4 w +BWB4DSJQU͸ຖ೥ਐԽ͍ͯ͠Δ

Slide 13

Slide 13 text

&4ʹ͸഑ྻૢ࡞͕๛෋ w &4ʹ͸ɺ ഑ྻૢ࡞ʹؔ͢Δϝ ιο υ͕ଟ͘௥Ճ͞Ε͍ͯΔ w #map(), #filter(), #forEach(), #some(), #every(), #reduce()ͳͲ w *&͕৺഑ ʁ   શϒϥ΢βରԠ ʢ೥ʹ͓͍ͯʣ

Slide 14

Slide 14 text

&4Ͱ΋഑ྻૢ࡞͕௥Ճ w #find(), #findIndex()ͳͲ w *&͕৺഑ ʁ   *&͸ແࢹ͢ΔίϯύΠ ϥΛ࢖͏ #BCFM 5ZQF4DSJQU

Slide 15

Slide 15 text

ඪ४͕େ൒ΛΧόʔ w K2VFSZ MPEBTI 6OEFSTDPSFKT w ͜ΕΒͷϥΠ ϒϥ Ϧ͕࣋ͭ഑ྻॲཧ͸ɺ େ൒͕ඪ४ͰඋΘ͍ͬͯΔ w ΄΅&4ͷ࣌఺ͰΧόʔͰ͖͍ͯΔ

Slide 16

Slide 16 text

ͨͱ͑͹NBQ ͸ • const arr = ['A', 'B', 'C']; • $.map(arr, function(v, i) {  return v + i;  }); • _.map(arr, function(v, i) {  return v + i;  }); • // ['A0', 'B1', 'C2']

Slide 17

Slide 17 text

ඪ४Λ࢖͏ ͱ • const arr = ['A', 'B', 'C']; • arr.map(function(v, i) {  return `${v}${i}`;  }); • arr.map((v, i) => `${v}${i}`); • // ['A0', 'B1', 'C2']

Slide 18

Slide 18 text

ͳͥϥΠ ϒϥ ϦΛ࢖Θͳ͍΄͏͕Α͍ͷ͔ w ґଘઌ͸গͳ͚Ε͹গͳ͍΄ͲΑ͍ w ࣗ෼ͷίʔ υ͸෗Δ͕ɺ ଞਓͷίʔ υ΋෗Δ w ґଘ͕ଟ͚Ε͹ଟ͍΄Ͳɺ ͦΕͧΕͷϥΠ ϒϥ ϦͷόʔδϣϯΛ  ߋ৽͢Δख͕ؒൃੜ w ϝϯςφϯε͞ΕΔظؒ͸ɺ ϥΠ ϒϥ ϦΑ Γඪ४ͷ΄͏͕ ʢগͳ͘ ͱ΋ʣ ௕͍

Slide 19

Slide 19 text

ύϑΥʔϚϯε্ͷ؍఺ w ඪ४͸ωΠςΟ ϒίʔ υͱͯ͠ಈ࡞ w ϥΠ ϒϥ Ϧ͸+BWB4DSJQUͱͯ͠ॻ͔Εɺ ϥϯλΠϜͰಈ࡞ w ϥΠ ϒϥ ϦΛ࢖Θͳ͍͜ͱͰɺ μ΢ϯϩʔ υ ʢ$%/ܦ༝ʣ ͷ࣌ؒͷ୹ॖ΍  8FCQBDLͰͷόϯ υϧ݁Ռͷ༰ྔ࡟ݮ

Slide 20

Slide 20 text

Ͳ͏ ͯ͠΋࢖͍͍ͨͳΒ w ͦΕͰ΋MPEBTIͷ_.isEqual()͚ͩ͸࢖͍͍ͨΜͩ ʂ   Έ͍ͨͳέʔε w npm i --save lodash  Ͱ͸ͳ͘  npm i --save lodash.isequal  ͱͯ͠ɺ ඞཁͳ΋ͷ͚ͩΠϯε τʔϧ͢Δͷ͕Α͍

Slide 21

Slide 21 text

ਖ਼͍͠ϝιο υΛબ୒͢Δ

Slide 22

Slide 22 text

഑ྻ಺͔Β֘౰ͷͻͱͭΛऔΓग़͢ w ࣮ࡍʹ͋ͬͨ࿩ w const fruits = ['Apple', 'Banana', 'Orange']; w Banana͚ͩऔΓग़͍ͨ͠  ʢԿݸ໨ʹ͋Δ͔͸෼͔͍ͬͯͳ͍΋ͷͱ͢Δʣ

Slide 23

Slide 23 text

ޡͬͨϝιο υબ୒͸ҙਤ͕఻ΘΓʹ͍͘ w fruits.filter(v => v === 'Banana')[0]; // Banana w #filter()ͯ͠[0]Λ͚ͭΔͱ͍͏΍ΓํͰ͸  ʮϑΟϧλʔ͍ͨ͠ͷ͔ʯ ɺ ʮͻͱ͚ͭͩऔΓग़͍ͨ͠ͷ͔ʯ   ίʔ υΛಡΉਓʹҙਤ͕఻ΘΓʹ͍͘

Slide 24

Slide 24 text

ҙਤͷ఻ΘΔϝιο υબ୒ w fruits.find(v => v === 'Banana'); // Banana w ͜ͷྫͰ͸#filter()͔ͯ͠Β[0]͢ΔͷͰ͸ͳ͘  #find()ͱ͍͏ద੾ͳϝ ιο υ͕ଘࡏ͢Δ

Slide 25

Slide 25 text

ίʔ υͱ͸ҙਤΛ఻͑Δ΋ͷ w ద੾ͳϝ ιο υͷ࢖༻Ͱɺ ॻ͖खͷҙਤΛద੾ʹಡΈखʹ఻͑Δ w ಈ͚͹͍͍΍Ͱ͸ͳ͍ w ಈ͔͢͜ͱΑ Γɺ ఻͑Δ͜ͱ͕ང͔ʹॏཁ w ඪ४"1*ʹͲΜͳϝ ιο υ͕͋Γɺ Ͳ͏͍͏࣌ʹ࢖͑͹࠷ద͔  ͍͍ͩͨ͸͓͍֮͑ͯͨ΄͏͕Α͍ ʢ͢΂ͯΛ҉ه͢Δඞཁ͸ͳ͍ʣ

Slide 26

Slide 26 text

ద੾ͳϝιο υબ୒Ͱ্ڃऀ΁ w ໭Γ஋͕͋Ε͹#map()Λɺ ͳ͚Ε͹#forEach()Λ࢖͏ w #forEach()ͷதͰΦϒδΣΫ τΛॻ͖׵͑ΔΑ ͏ͳΒ#reduce()Λ࢖͏ w #indexOf()ͷ݁Ռͱ-1Λൺֱͤͣʹ#includes()Λ࢖͏ ʢ&4ʣ

Slide 27

Slide 27 text

GPSจ͸ෆཁͳͷ͔ w ࢖Θͳ͍͜ͱ͸૿͕͑ͨɺ ෆཁͰ͸ͳ͍ w ͨͩ͠ ʮύϑ ΥʔϚϯεͷͨΊʹGPSจΛ࢖͑͹Α͍ʯ ͱ͍͏ೝࣝ͸  ΋͸΍աڈͷ΋ͷ w ్தͰϧʔϓΛൈ͚͍ͨ৔߹"SSBZͷϝ ιο υͰ͸ແཧͳͷͰ༗༻ w ࣮ࡍ͸GPSจΑ ΓGPSPGจͷํָ͕

Slide 28

Slide 28 text

نఆճ਺͚ͩ܁Γฦ͍ͨ͠ͱ͖ w GPSจΛ࢖Θͣʹنఆճ਺͚ͩॲཧΛ܁Γฦ͍ͨ͠ͱ͖ w [...Array(n)]ͱ͍͏ॻ͖ํ͕࢖͑Δ • [...Array(100)].forEach((_, i) => {  // ԿΒ͔ͷॲཧ  });

Slide 29

Slide 29 text

·ͱΊ w &$."4DSJQUͷ࢓༷ͱಈ޲ΛνΣοΫ͢Δ  ʢ·ͣ͸.%/Λಡ΋͏https://developer.mozilla.org/ja/ʣ w ϒϥ΢βͷ࣮૷ঢ়گΛνΣοΫ͢Δ w ϥΠ ϒϥ ϦΛ࢖Θͣʹඪ४ͷ"1*͚ͩͰ࣮ݱͰ͖ͳ͍͔ߟ͑Δ