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.3k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.5k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
670
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Technology
See All in Technology
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
150
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
210
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
2
140
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
14
2.3k
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
200
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
0
140
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
1
200
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
kuralab
5
840
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
170
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
200
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
470
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
BBQ
matthewcrist
89
9.7k
The Language of Interfaces
destraynor
158
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
We Have a Design System, Now What?
morganepeng
52
7.6k
4 Signs Your Business is Dying
shpigford
184
22k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Docker and Python
trallard
44
3.4k
Building Applications with DynamoDB
mza
95
6.5k
Code Reviewing Like a Champion
maltzj
524
40k
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*͚ͩͰ࣮ݱͰ͖ͳ͍͔ߟ͑Δ