Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
Kotaro Chiba
August 29, 2020
Programming
1
230
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
JavaScript のデータ型を見てみようという内容。今回はプリミティブ型の解説です。
Kotaro Chiba
August 29, 2020
Tweet
Share
More Decks by Kotaro Chiba
See All by Kotaro Chiba
JavaScript を書き始める前に知っておきたい JavaScript のこと #05
uruha
1
230
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
280
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.2k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
uruha
1
1.1k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
460
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
880
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
230
Other Decks in Programming
See All in Programming
CakePHPの内部実装 から理解するPSR-7
boro1234
0
250
Deep Dive Into Google Zanzibar and its Concepts for Authorization Scenarios
dschenkelman
1
140
即、New Relic / New Relic NOW!
uzulla
0
330
Get Ready for Jakarta EE 10
ivargrimstad
0
2.6k
Oracle REST Data Service: APEX Office Hours
thatjeffsmith
0
780
Licences open source : entre guerre de clochers et radicalité
pylapp
2
510
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
470
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
0
250
What's new in Android development tools まとめ
mkeeda
0
370
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.9k
engineer
spacemarket
0
2.7k
Let's keep Commodore 64 alive for the next 40 years
mehowte
1
110
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Done Done
chrislema
174
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
11k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Debugging Ruby Performance
tmm1
65
10k
How to train your dragon (web standard)
notwaldorf
58
3.9k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Designing for Performance
lara
597
63k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Transcript
JavaScript を書き始める前に知 っておきたい JavaScript のこ と #04 Kanazawa.js Remote Meetup
#05 千葉 弘太郎 1 1
千葉 弘太郎(ちば こうたろう) Kotaro Chiba Twitter: @ur_uha Github: uruha Work:
DMM.com LLC 2 2
前回 JavaScript を書き始める前に知っておきたい JavaScript のこと #03 JavaScript の実⾏順に迫る イベントループ の仕組み
3 3
今回 JavaScript の データ型 について知ろう(プリミティブ型 編) ! 4 4
JavaScript は 動的型付け の⾔語 5 5
let mutableVar = 'Hello'; // => String Type // substitution
mutableVar = 42; // => Number Type // substitution mutableVar = true; // => Boolean Type 6 6
Mutable な変数を定義した場合、 動的にその変数の型を変更することができる。 7 7
_⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈_ > JavaScript にも型はあります <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ 8 8
型の種類 9 9
プリミティブ型 String Number Boolen Undefined Null Symbol (ES6~) BigInt (ES10~
new) Object 10 10
プリミティブ型 JavaScript の情報において⼀番低いレイヤの単位。 これ以上別の型には分解できません。 対局に Object 型 が存在します。 プリミティブ型の値を プリミティブ値
と⾔います。 11 11
プリミティブ型の紹介 12 12
String const str = 'Hello World :)'; 16 ビット符号なし整数値の 要素
の集合体 各要素は⽂字列の位置を指します 'Hello World :)' では最初の⽂字を index 0, 次を index 1... とする 13 13
Number const num = 1919; 「倍精度 64 ビット形式による IEEE 754
値」 (-(2^53-1) から 2^53-1 の間の数値) Number.MAX_SAFE_INTEGER (9007199254740991) で取得可能 『整数』というわけではないでないことに注⽬! これより⼤きい数値を扱いたい場合はどうすれば... 14 14
BigInt const bigNum = 2n ** 54n; // 18014398509481984n const
morebiggerNum = bigNum + 100n; // 18014398509482084n ES10(ES2020) で策定 Number.MAX_SAFE_INTEGER 以上の数値を安全に扱える Number と混同して仕様することができない 15 15
Boolean const thisIsTrue = true; const thisISFalse = false; 16
16
Undefined const unDefined; console.log(unDefined); // undefined const obj = {};
console.log(obj.foo); // undefined 以下の時に⾃動的に割り当てられます。 . 宣⾔されている変数に値が割り当てられていない . 任意のオブジェクトのプロパティが定義されていない 17 17
Null const nullnull = null; undefined と違い、明⽰的に値を割り当てていないことを宣 ⾔します。 また、その変数などは今後別の値が割り当てられることを⽰唆 していることも意味します。
18 18
Symbol const newSymbol = Symbol('new symbol'); newSymbol.toString(); // => 'Symbol(new
symbol)' newSymbol.description // => 'new symbol' const preSymbol = Symbol('new symbol'); newSymbol === preSymbol // => false Symbol を宣⾔する値は、固有のID(シンボル)を持つ値とし て区別されます。 上記のようにシンボルには任意の description を宣⾔でき ますが、内容が同じでも⼀度作成したシンボルは固有のものと して存在するため⽐較をしても false が返ります。 19 19
値の⽣成 リテラルとコンストラクタ関数の宣⾔で⾏えます。 コンストラクタ関数に new 演算⼦をつけて宣⾔すると Object型になるので注意しましょう。 20 20
// Literal const literalNum = 'stringggggggggg'; // Constractor const constractorNum
= String('stringggggggggg'); // Object const newString = new String('stringggggggggg'); typeof literalNum // => string typeof constractorNum // => string typeof newString // => object 21 21
値の⽐較 プリミティブ型の値は「値そのもの」を⽐較します。 ⽐較には 同値 等値 の2種類が存在します。 22 22
// 同値 1 === 1 // true 1 === '1'
// false 1 === new Number(1) // false null === undefined // false // 等値 1 == 1 // true 1 == '1' // true 1 == new Number(1) // true null == undefined // true 同値 : 型と値、両⽅を⽐較 等値 : 値を⽐較し型はスルーする 23 23
まとめ JavaScript のデータ型にはプリミティブ型とObject型があ る プリミティブ型は現在7種類 型から値を⽣成するにはリテラルとコンストラクタ関数を⽤ いて⾏える プリミティブ値は「値そのもの」を⽐較できる 同値 等値
の2種類の⽐較ができる 24 24
次回 データ型をもう少し詳しくやっていき! 25 25