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 のこと #04
Search
Kotaro Chiba
August 29, 2020
Programming
1
400
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
390
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
350
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.4k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
uruha
1
1.2k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
550
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
1k
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
370
Other Decks in Programming
See All in Programming
Designing for tomorrow's programming workflows
honnibal
PRO
2
130
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
260
"config" ってなんだ? / What is "config"?
okashoi
0
240
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
Code Reviews
bkuhlmann
4
890
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
730
ScalarDBを用いたマイクロサービスにおけるデータ管理 (Database Engineering Meetup #2)
scalar
0
110
SIMD Parallel Programming with the Vector API
josepaumard
0
120
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Featured
See All Featured
Infographics Made Easy
chrislema
238
18k
The Pragmatic Product Professional
lauravandoore
25
5.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Clear Off the Table
cherdarchuk
84
310k
Designing for Performance
lara
601
67k
How to Ace a Technical Interview
jacobian
272
22k
A designer walks into a library…
pauljervisheath
200
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Automating Front-end Workflow
addyosmani
1356
200k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Rails Girls Zürich Keynote
gr2m
91
13k
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