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
540
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
490
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 Programming
See All in Programming
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
650
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
5
1.2k
Gemini CLI のはじめ方
ttnyt8701
1
100
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
480
Go製CLIツールをnpmで配布するには
syumai
0
580
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.1k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.2k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
AIのメモリー
watany
11
1k
CDK引数設計道場100本ノック
badmintoncryer
2
580
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Raft: Consensus for Rubyists
vanstee
140
7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Statistics for Hackers
jakevdp
799
220k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
What's in a price? How to price your products and services
michaelherold
246
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Navigating Team Friction
lara
187
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Why Our Code Smells
bkeepers
PRO
337
57k
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