今回は、JavaScriptの基礎についてまとめました。
JavaScriptは、Web開発をする際にかかせない知識となっています。
ぜひ最後までお読みください!
【JavaScript】基礎まとめ | 初心者向け
1. JavaScriptとは
JavaScriptとは、Webページでよく使用されるスクリプト言語です。
現在JavaScriptは、ブラウザだけでなくサーバ上でも実行することができます。
JavaScript は、オブジェクト指向、命令型、宣言型(関数プログラミングなど)といったスタイルに対応しています。
似たような名前のプログラミング言語に「Java」がありますが、まったくの別物です。
2. データ型
JavaScript には8つの基本的なデータ型があります。
2-1. 1.Number型
Number型は、数値です。
整数、または浮動小数点数は、Number型になります。
例えば、以下のようなものがNumber型です。
・89
・3.15
2-2. 2.Bigint型
Bigint型は、長整数です。
int型では表現しきれない数を表現するために作成されました。
例えば、以下のようなものがBigint型です。
・98765432199254740992n
・123456789012345678901234567890n;
このように、Bigint型は値の末尾に n を追加することで作成されます。
2-3. 3.String型
例えば、以下のようなものがString型です。
・Hello
・Goodbye
String型は、’(シングルクォート)または”(ダブルクォート)で囲む必要があります。
[NG]
let str = Hello;
[OK]
let str = “Hello”;
2-4. 4.Boolean型
Boolean型は、論理値です。
Boolean型は、「true」と「false」の2つの値だけを持ちます。
2-5. 5.null
nullは、値が「存在しないこと」を意味する特殊なキーワードです。
2-6. 6.undefined
undefinedは、値が「未定義であること」を意味する特殊なキーワードです。
2-7. 7.Symbol
Symbolは、インスタンスが固有で不変となるデータ型です。ES2015から追加されました。
2-8. 8.Object
Objectとは、データとそのデータをやり取りするための命令が入ったデータ構造のことです。
これまでに紹介したデータ型以外がObjectです。
3. typeof演算子とは
typeof演算子は、引数の型を返します。
型の値を素早くチェックしたいときに役立ちます。
3-1. typeof演算子の構文
typeof 変数名または値
3-2. typeof演算子の使用例
console.log(typeof 10); // "number"
console.log(typeof 1000n); // "bigint"
console.log(typeof "Hello") ; // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"※
※この結果は、公式に認められているバグです。nullはobjectではありません。
4. オブジェクトとは
オブジェクトとは、関連するデータや機能の集合体のことです。
オブジェクトは波括弧{ }とプロパティの一覧でできています。
プロパティは 「key: value」 のペアです。keyは文字列(プロパティ名)で、valueの値は自由です。
4-1. オブジェクトの構文
let 変数名 = {
key: value
};
4-2. オブジェクトの使用例
let user = { // オブジェクト
name: "太郎", // キー "name" に値 "太郎" が格納される
age: 20 // キー "age" に値 20 が格納される
};
console.log(user.name); // 太郎
console.log(user[“age”]); // 20
4-3. オブジェクトのメソッド
オブジェクトを操作するメソッドには、以下のようなものがあります。
・Object.keys()
オブジェクトの「キー」を配列にして返す
・Object.values()
オブジェクトの「バリュー」を配列にして返す
・Object.entries()
オブジェクトの「キー」と「バリュー」を配列にして返す
5. 配列とは
配列とは、順序付けされたコレクションのことです。
配列に格納した値を「要素」といい、要素の位置を「インデックス」といいます。
5-1. 配列の構文
let 変数名 = ["値1", "値2", "値3"];
5-2. 配列の使用例
let animals = ["dog", "cat", "cow"];
console.log(animals[0]); // dog
5-3. 配列のメソッド
配列を操作するメソッドには、以下のようなものがあります。
・Array.prototype.push()
配列の「末尾に」要素を追加する
・Array.prototype.pop()
配列の「末尾から」要素を削除する
・Array.prototype.unshift()
配列の「先頭に」要素を追加する
・Array.prototype.shift()
配列の「先頭から」要素を削除する
6. for文
for文は、オブジェクトや配列に対して、繰り返し処理をおこなう際に使用します。
6-1. for…in
【例:test.js】
let user = {
name: "太郎",
age: 20
};
for(let key in user) {
console.log(key);
console.log(key[user]);
}
6-2. for…of
【例:test.js】
let animals = ["dog", "cat", "cow"];
for(let animal of animals) {
console.log(animal);
}
7. おわりに
今回は、JavaScriptの基礎について簡単にまとめました。
JavaScriptは、Web開発をする際にかかせない知識となっています。
「JavaScriptについて、もっと知りたい!」と思ったら、ぜひ参考記事を読んだり、ご自身で調べてみたりしてください。