Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
改めて理解するJavaScript Array / Understanding JavaScr...
Search
OKUNOKENTARO
May 19, 2018
Technology
10
3.1k
改めて理解するJavaScript Array / Understanding JavaScript Array
2018/5/19 初夏のJavaScript祭
https://javascript-fes.doorkeeper.jp/events/73314
にて発表したものです。
OKUNOKENTARO
May 19, 2018
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
190
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.4k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.6k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
680
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Technology
See All in Technology
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
170
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
320
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
970
Where will it converge?
ibknadedeji
0
180
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
バイブコーディングと継続的デプロイメント
nwiizo
2
430
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
0
260
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
270
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
130
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
470
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The World Runs on Bad Software
bkeepers
PRO
71
11k
A Tale of Four Properties
chriscoyier
160
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Rails Girls Zürich Keynote
gr2m
95
14k
How to train your dragon (web standard)
notwaldorf
96
6.3k
The Cult of Friendly URLs
andyhume
79
6.6k
Transcript
վΊͯཧղ͢Δ+BWB4DSJQU"SSBZ .BZ ॳՆͷ+BWB4DSJQUࡇ !PLVOPLFOUBSP
୭ w Ԟݡଠ!PLVOPLFOUBSP w גࣜձࣾϐΫηϧάϦ ο υ
ࣥච w $PEF(SJE • https://www.codegrid.net/ w 5ZQF4DSJQU 3Y+4ͳͲ w "OHVMBSσϕϩούʔζΨΠ
υ
OHKBQBO w "OHVMBSͱ8FCٕज़ʹؔ͢Δ ຊͷΧϯϑΝϨϯε • https://ngjapan.org/ w ݄ ౦ژຊ
ࠓͷ w +BWB4DSJQU"SSBZ w ͦͷϥΠ ϒϥ Ϧຊʹඞཁ͔ ʁ w
ਖ਼͍͠ϝ ιο υΛબ͢Δ
+BWB4DSJQUʹ͓͚Δྻ w ྻ "SSBZ Λѻ͏ʹ const fruits = ['Apple', 'Banana'];
w ྻ͔ΒΛऔΓग़͢ʹ console.log(fruits[0]); // Apple
2ྻͷதͷͯ͢Λഒ͠ͳ͍͞ w ͜ͷྻͷதͷΛͯ͢ഒͯ͠৽͍͠ྻΛ࡞Δ const arr = [1, 2, 3, 4,
5]; w Ͳ͏͢Δ͔ w GPSจΛ͏ w̹ 2VFSZΛ͏ w MPEBTIΛ͏
ͲΕΘͳ͘ ͍͍ͯ w ྻͷதͷΛͻͱͭͣͭॲཧͯ݁͠ՌΛฦ͚ͩ͢ͳΒɺ ϥΠ ϒϥ ϦΛ͏ඞཁͳ͚Εɺ GPSจඞཁͳ͍ w
[1, 2, 3, 4, 5].map(v => v * 2); // [2, 4, 6, 8, 10]
"SSBZͷϝιο υ w +BWB4DSJQUͰͷྻͱɺ "SSBZΠϯελϯεͰ͋Δ w Array.prototype.xxxx()ͱ͍͏ ϝ ιο υΛଟ࣋ͪ͘
[0, 1, 2].xxxx()ͷΑ ͏ʹͯ͑͠Δ • https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Array
ͦͷϥΠ ϒϥ Ϧɺ ຊʹඞཁ͔ ʁ
ͦͷϥΠ ϒϥ ϦཁΒͳ͍͔ w K2VFSZ MPEBTI 6OEFSTDPSFKT w ͳΜͱͳ͘ Ͱ͍ͬͯͳ͍͔
&$."4DSJQU w +BWB4DSJQUʹݴޠ༷ͷ൛ ʢόʔδϣϯʣ ͕ଘࡏ͢Δ͜ͱΛҙࣝ͢Δ w &4 w &4ˠ&4 ʢ͔͜͜Βຖʣ
w &4 w +BWB4DSJQUຖਐԽ͍ͯ͠Δ
&4ʹྻૢ࡞͕๛ w &4ʹɺ ྻૢ࡞ʹؔ͢Δϝ ιο υ͕ଟ͘Ճ͞Ε͍ͯΔ w #map(), #filter(), #forEach(),
#some(), #every(), #reduce()ͳͲ w *&͕৺ ʁ શϒϥβରԠ ʢʹ͓͍ͯʣ
&4Ͱྻૢ࡞͕Ճ w #find(), #findIndex()ͳͲ w *&͕৺ ʁ *&ແࢹ͢ΔίϯύΠ ϥΛ͏
#BCFM 5ZQF4DSJQU
ඪ४͕େΛΧόʔ w K2VFSZ MPEBTI 6OEFSTDPSFKT w ͜ΕΒͷϥΠ ϒϥ Ϧ͕࣋ͭྻॲཧɺ େ͕ඪ४ͰඋΘ͍ͬͯΔ
w ΄΅&4ͷ࣌ͰΧόʔͰ͖͍ͯΔ
ͨͱ͑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']
ඪ४Λ͏ ͱ • const arr = ['A', 'B', 'C']; •
arr.map(function(v, i) { return `${v}${i}`; }); • arr.map((v, i) => `${v}${i}`); • // ['A0', 'B1', 'C2']
ͳͥϥΠ ϒϥ ϦΛΘͳ͍΄͏͕Α͍ͷ͔ w ґଘઌগͳ͚Εগͳ͍΄ͲΑ͍ w ࣗͷίʔ υΔ͕ɺ ଞਓͷίʔ υΔ
w ґଘ͕ଟ͚Εଟ͍΄Ͳɺ ͦΕͧΕͷϥΠ ϒϥ ϦͷόʔδϣϯΛ ߋ৽͢Δख͕ؒൃੜ w ϝϯςφϯε͞ΕΔظؒɺ ϥΠ ϒϥ ϦΑ Γඪ४ͷ΄͏͕ ʢগͳ͘ ͱʣ ͍
ύϑΥʔϚϯε্ͷ؍ w ඪ४ωΠςΟ ϒίʔ υͱͯ͠ಈ࡞ w ϥΠ ϒϥ Ϧ+BWB4DSJQUͱͯ͠ॻ͔Εɺ ϥϯλΠϜͰಈ࡞
w ϥΠ ϒϥ ϦΛΘͳ͍͜ͱͰɺ μϯϩʔ υ ʢ$%/ܦ༝ʣ ͷ࣌ؒͷॖ 8FCQBDLͰͷόϯ υϧ݁Ռͷ༰ྔݮ
Ͳ͏ ͍͍ͯͨ͠ͳΒ w ͦΕͰMPEBTIͷ_.isEqual()͚͍͍ͩͨΜͩ ʂ Έ͍ͨͳέʔε w npm i
--save lodash Ͱͳ͘ npm i --save lodash.isequal ͱͯ͠ɺ ඞཁͳͷ͚ͩΠϯε τʔϧ͢Δͷ͕Α͍
ਖ਼͍͠ϝιο υΛબ͢Δ
ྻ͔Β֘ͷͻͱͭΛऔΓग़͢ w ࣮ࡍʹ͋ͬͨ w const fruits = ['Apple', 'Banana', 'Orange'];
w Banana͚ͩऔΓग़͍ͨ͠ ʢԿݸʹ͋Δ͔͔͍ͬͯͳ͍ͷͱ͢Δʣ
ޡͬͨϝιο υબҙਤ͕ΘΓʹ͍͘ w fruits.filter(v => v === 'Banana')[0]; // Banana
w #filter()ͯ͠[0]Λ͚ͭΔͱ͍͏ΓํͰ ʮϑΟϧλʔ͍ͨ͠ͷ͔ʯ ɺ ʮͻͱ͚ͭͩऔΓग़͍ͨ͠ͷ͔ʯ ίʔ υΛಡΉਓʹҙਤ͕ΘΓʹ͍͘
ҙਤͷΘΔϝιο υબ w fruits.find(v => v === 'Banana'); // Banana
w ͜ͷྫͰ#filter()͔ͯ͠Β[0]͢ΔͷͰͳ͘ #find()ͱ͍͏దͳϝ ιο υ͕ଘࡏ͢Δ
ίʔ υͱҙਤΛ͑Δͷ w దͳϝ ιο υͷ༻Ͱɺ ॻ͖खͷҙਤΛదʹಡΈखʹ͑Δ w ಈ͚͍͍Ͱͳ͍ w
ಈ͔͢͜ͱΑ Γɺ ͑Δ͜ͱ͕ང͔ʹॏཁ w ඪ४"1*ʹͲΜͳϝ ιο υ͕͋Γɺ Ͳ͏͍͏࣌ʹ͑࠷ద͔ ͍͍͓͍֮ͩͨ͑ͯͨ΄͏͕Α͍ ʢͯ͢Λ҉ه͢Δඞཁͳ͍ʣ
దͳϝιο υબͰ্ڃऀ w Γ͕͋Ε#map()Λɺ ͳ͚Ε#forEach()Λ͏ w #forEach()ͷதͰΦϒδΣΫ τΛॻ͖͑ΔΑ ͏ͳΒ#reduce()Λ͏ w
#indexOf()ͷ݁Ռͱ-1Λൺֱͤͣʹ#includes()Λ͏ ʢ&4ʣ
GPSจෆཁͳͷ͔ w Θͳ͍͜ͱ૿͕͑ͨɺ ෆཁͰͳ͍ w ͨͩ͠ ʮύϑ ΥʔϚϯεͷͨΊʹGPSจΛ͑Α͍ʯ ͱ͍͏ೝࣝ աڈͷͷ
w ్தͰϧʔϓΛൈ͚͍ͨ߹"SSBZͷϝ ιο υͰແཧͳͷͰ༗༻ w ࣮ࡍGPSจΑ ΓGPSPGจͷํָ͕
نఆճ͚ͩ܁Γฦ͍ͨ͠ͱ͖ w GPSจΛΘͣʹنఆճ͚ͩॲཧΛ܁Γฦ͍ͨ͠ͱ͖ w [...Array(n)]ͱ͍͏ॻ͖ํ͕͑Δ • [...Array(100)].forEach((_, i) => {
// ԿΒ͔ͷॲཧ });
·ͱΊ w &$."4DSJQUͷ༷ͱಈΛνΣοΫ͢Δ ʢ·ͣ.%/Λಡ͏https://developer.mozilla.org/ja/ʣ w ϒϥβͷ࣮ঢ়گΛνΣοΫ͢Δ w ϥΠ ϒϥ
ϦΛΘͣʹඪ४ͷ"1*͚ͩͰ࣮ݱͰ͖ͳ͍͔ߟ͑Δ