【JavaScript】基礎まとめ | 初心者向け

今回は、JavaScriptの基礎についてまとめました。

JavaScriptは、Web開発をする際にかかせない知識となっています。

ぜひ最後までお読みください!

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型は、文字や文字列です。

例えば、以下のようなものが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演算子の使用例

【例:test.js】
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. オブジェクトの使用例

【例:test.js】
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. 配列の使用例

【例:test.js】
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

「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

「for…of」は、配列に対して繰り返し処理をおこなう際に使用します。

【例:test.js】
let animals = ["dog", "cat", "cow"];

for(let animal of animals) {
  console.log(animal);
}

7. おわりに

今回は、JavaScriptの基礎について簡単にまとめました。

JavaScriptは、Web開発をする際にかかせない知識となっています。

「JavaScriptについて、もっと知りたい!」と思ったら、ぜひ参考記事を読んだり、ご自身で調べてみたりしてください。