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
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
OPENLOGI Company Profile
hr01
0
67k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
110
ビギナーであり続ける/beginning
ikuodanaka
3
750
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Code Review Best Practice
trishagee
69
18k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
Automating Front-end Workflow
addyosmani
1370
200k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Facilitating Awesome Meetings
lara
54
6.4k
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