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
690
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
1.1k
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
470
Other Decks in Programming
See All in Programming
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
240
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.7k
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
390
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
C++20 射影変換
faithandbrave
0
560
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
330
Select API from Kotlin Coroutine
jmatsu
1
210
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
420
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Automating Front-end Workflow
addyosmani
1370
200k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Faster Mobile Websites
deanohume
307
31k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Visualization
eitanlees
146
16k
BBQ
matthewcrist
89
9.7k
Designing Experiences People Love
moore
142
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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