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 を書き始める前に知っておきたい JavaScript のこと #05
Search
Kotaro Chiba
September 26, 2020
Technology
1
490
JavaScript を書き始める前に知っておきたい JavaScript のこと #05
JavaScript のデータ型を見てみようという内容。今回はオブジェクトの解説です。
Kotaro Chiba
September 26, 2020
Tweet
Share
More Decks by Kotaro Chiba
See All by Kotaro Chiba
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
uruha
1
540
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
420
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.5k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
uruha
1
1.4k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
700
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
1.1k
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
480
Other Decks in Technology
See All in Technology
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
microCMSではじめるAIライティング
himaratsu
0
150
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
270
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
ClaudeCodeにキレない技術
gtnao
1
860
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
Featured
See All Featured
Faster Mobile Websites
deanohume
308
31k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How GitHub (no longer) Works
holman
314
140k
Navigating Team Friction
lara
187
15k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Designing Experiences People Love
moore
142
24k
Why Our Code Smells
bkeepers
PRO
337
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A Modern Web Designer's Workflow
chriscoyier
695
190k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
JavaScript を書き始める前に知 っておきたい JavaScript のこ と #05 Kanazawa.js Remote Meetup
#06 千葉 弘太郎 1 1
千葉 弘太郎(ちば こうたろう) Kotaro Chiba Twitter: @ur_uha Github: uruha Work:
DMM.com LLC 2 2
前回 JavaScript を書き始める前に知っておきたい JavaScript のこと #04 JavaScript の データ型 について知ろう(プリミティブ型
編) ! 3 3
今回 JavaScript の データ型 について知ろう(オブジェクト 編) ! 4 4
おさらい 5 5
プリミティブ型 String Number Boolen Undefined Null Symbol (ES6~) BigInt (ES10~
new) Object <= 今⽇はこれ 6 6
オブジェクト (複合型) 1つ以上のプリミティブ値を格納できるレイヤ。 プリミティブ値と違い、メモリサイズを特定できない。 複合オブジェクト 参照型 とも呼ばれる。 7 7
const myObject = { num: 1, text: 'Yes! プリキュア!', isTrue:
false, nullpo: null, // ... }; 8 8
「複合」はわかるけど、なぜ「参照」 9 9
const obj_01 = {}; const obj_02 = obj_01; obj_01.foo =
1; console.log(obj_01.foo, obj_02.foo); // => 1, 1 10 10
11 11
⽣成されたオブジェクトを操作する場合、 オブジェクトのコピーは値をコピーするのではなく、 「参照先」をコピーする。 cf. プリミティブ値は値そのものが渡される 12 12
また、オブジェクトのプロパティは動的に更新が可能。 参照先を共有しているオブジェクト⾃体のプロパティが更新 されると全てのオブジェクトのプロパティが更新される。 13 13
オブジェクト⽣成時の特徴 14 14
オブジェクトの⽣成時には constructor プロパティにア クセスできるようになる(プリミティブ値も同じ) constructor プロパティの特定は instanceof 演算⼦ で判定できる 15
15
オブジェクトにはネイティブコンストラクタを持つオブジェク トがいくつか存在する。 16 16
Object Array Funciton Date Error RegExp 17 17
const obj = new Object(); const arr = new Array();
const date = new Date(); console.log(obj instanceof Object); console.log(arr instanceof Array); console.log(date instanceof Date); // => 全て true が返る obj.constructor === Object; arr.constructor === Array; date.constructor === Date; // => 上記と結果が同じ ネイティブコンストラクタはリテラルでも⽣成できる。 18 18
プリミティブ値とネイティブコンストラクタは別物。 配列などはプリミティブ値でないため注意!(意外に知らない で判定を⾏う⼈が多い) typeof Array は存在しない 19 19
ただ、 instanceof は iframe では動作しないため、 Array などの判定は instanceof より Array.isArray()
が推奨されている。 20 20
⽐較について 21 21
オブジェクト⾃体の⽐較は、⽐較対象のオブジェクトが「同じ 型」で「同じ(プロパティの)値」を持っているかどうかで判 断できない。 const cf_01 = { foo: 'bar' };
const cf_02 = { foo: 'bar' }; cf_01 === cf_02 // => false const cf_03 = cf_01; // 参照先が同じものは⽐較(というか同じなので)できる cf_03 === cf_01 // => true 22 22
つまりオブジェクトそのものが型も値も同じであるかの判定は 別の⽅法を使⽤する必要がある。 23 23
代替法 その1 isEqual const stooge = { name: 'moe', luckyNumbers:
[13, 27, 34] }; const clone = { name: 'moe', luckyNumbers: [13, 27, 34] }; stooge === clone; // => false _.isEqual(stooge, clone); // => true 24 24
代替法 その2 assert.deepStrictEqual const stooge = { name: 'moe', luckyNumbers:
[13, 27, 34] }; const clone = { name: 'moe', luckyNumbers: [13, 27, 34] }; assert.deepStrictEqual(stooge, clone); // => OK 25 25
ビルトインではオブジェクトの⽐較するためのメソッドや演算 ⼦はないため、ライブラリなどを使う。 TypeScript を使⽤している場合はオブジェクト⾃体のIFを型で 定義できるので Lint やコンパイル時に検出できる。 26 26
まとめ 1つ以上のプリミティブ値を格納できるレイヤ 複製する場合は参照渡しになる プロパティは動的に変更が可能 ⽣成されたオブジェクトはコンストラクタプロパティにアク セスができる コンストラクタの判定は instanceof で検出できる オブジェクトそのものは⽐較はできない
別途ライブラリのメソッドなどを使⽤する 27 27
次回 どうしようかな... 28 28