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
550
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
500
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
430
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.5k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
uruha
1
1.4k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
720
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
Testing Trophyは叫ばない
toms74209200
0
830
Design Foundational Data Engineering Observability
sucitw
3
190
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
AIエージェント開発、DevOps and LLMOps
ymd65536
1
390
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
170
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
500
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.1k
個人軟體時代
ethanhuang13
0
320
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
7
3.1k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Featured
See All Featured
It's Worth the Effort
3n
187
28k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
GitHub's CSS Performance
jonrohan
1032
460k
Scaling GitHub
holman
463
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
A better future with KSS
kneath
239
17k
What's in a price? How to price your products and services
michaelherold
246
12k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Documentation Writing (for coders)
carmenintech
74
5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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