値の種類と宣言方法 / Learch

JavaScriptの値の種類と宣言方法

概要

JavaScriptにおける変数の種類と宣言方法の理解は、効果的なコーディングの基礎を築きます。この章では、異なるデータ型と、それらをどのように宣言し使用するかについて学びます。

1. データ型の説明

Javascriptでは、主にstring, number, boolean, symbol, object, null, undefinedという7つの基本的なデータ型があります。
特に、nullとundefinedの違い（nullは「値がない」を意味し、undefinedは「変数が定義されているが値が割り当てられていない」状態を示す）について明確にします。

文字列型 (`string`)

文字列はテキストデータを表します。ダブルクオート(" ")、シングルクオート(' ')、またはバックティック(`` )で囲まれます。
例: const string = 'Johny'; では'Johny'が文字列型です。

数値型 (`number`)

数値型は整数や小数点を含む数値を表します。
例: let integer = 24; では24が数値型です。

シンボル型 (`symbol`)

シンボルはES6で導入された、一意で変更不可能な値です。主にオブジェクトのプロパティキーとして使われます。
例: let symbol = Symbol(); で生成されたシンボルはユニークです。

真偽値型 (`boolean`)

真偽値はtrueまたはfalseのいずれかの値を取ります。
例: let boolean = true; ではtrueが真偽値型です。

オブジェクト型 (`object`)

オブジェクト型はキーと値のペアを格納する複合データ型です。配列もオブジェクトの一種です。
例: const array = [1, 2, 3, 4, 5]; と const object = { a: 'b', c: 0, d: string, e: !boolean }; はどちらもオブジェクト型です。

Null型 (`null`)

nullは明示的に「何もない」または「空」という値を表します。
例: const nullVariable = null; ではnullがNull型です。

未定義型 (`undefined`)

undefinedは値が未定義であることを表します。変数が宣言されているが値が割り当てられていない場合にこの値を取ります。
例: const undefinedVariable = undefined; ではundefinedが未定義型です。

NaN型 (`NaN`)

NaNは"Not-a-Number"の略で、数値計算の結果が数値ではないことを表します。
例: const notANumberVariable = NaN; ではNaNがNaN型です。

上記の説明は、提供されたコード内の各データ型の例を基にしています。JavaScriptではこれらのデータ型を理解し、適切に使用することが重要です。また、typeof演算子を使用して、変数のデータ型を確認することもできます（例: console.log(typeof(string)) // 'string'）。これにより、特定の変数がどのデータ型を持っているかを簡単に確認できます。

const string = 'Johny' //文字列型
let integer = 24 // 整数型
let symbol = Symbol() // シンボル型
let boolean = true // Boolean型
const array = [1, 2, 3, 4, 5] // 配列
const object = { a: 'b', c: 0, d: string, e: !boolean } // 連想配列 or オブジェクト
const nullVariable = null // null=何もないことを表す値
const undefinedVariable = undefined // undefined=不定であることを表す値
const notANumberVariable = NaN // NaN=数値ではないことを表す値

console.log(typeof(string)) // 'string'
console.log(typeof(integer)) // 'number'
console.log(typeof(symbol)) // 'symbol'
console.log(typeof(boolean)) // 'boolean'
console.log(typeof(array)) // 'object'
console.log(typeof(object)) // 'object'
console.log(typeof(nullVariable)) // 'object'
console.log(typeof(undefinedVariable)) // 'undefined'
console.log(typeof(notANumberVariable)) // 'number'
console.log(typeof(hogehoge)) // 'undefined'

2. 変数宣言 (`var`, `let`, `const`)

varは関数スコープを持ち、letとconstはブロックスコープを持ちます。これらの違いについて詳しく説明し、どの状況でどれを使うべきかを解説します。
constで宣言された変数は再代入できませんが、オブジェクトや配列のプロパティは変更可能であることを説明します。

変数宣言に関しては、JavaScriptでは主にvar, let, constの三つのキーワードを使用します。それぞれの特徴とコード例に基づいた説明を以下に示します。

`var`

varキーワードはES6以前のJavaScriptで一般的に使われていました。
varで宣言された変数は関数スコープを持ちます。これは、変数が関数内で宣言された場合、その関数内でのみアクセス可能であり、関数の外からはアクセスできないことを意味します。
varは再宣言が可能ですが、これは意図しないバグを引き起こす原因となることがあります。
例: var oldVar = "This is var";

`let`

letはES6で導入された変数宣言のキーワードで、主にブロックスコープ（{}で囲まれた範囲）を持ちます。
letで宣言された変数は、宣言されたブロック内、またはそのサブブロック内でのみアクセス可能です。
letで宣言された変数は再代入が可能ですが、同じスコープ内での再宣言は不可能です。
例: let integer = 24; では24を持つintegerという名前の変数が宣言されています。

`const`

constもES6で導入され、letと同様にブロックスコープを持ちます。
constで宣言された変数は再代入が不可能です。つまり、一度値を割り当てると、その変数には新しい値を割り当てることができません。
ただし、constで宣言されたオブジェクトや配列のプロパティは変更可能です（変数自体の再代入はできないが、その内容は変更可能）。
constで宣言された変数は宣言時に値を割り当てる必要があります。
例: const string = 'Johny'; では'Johny'を持つstringという名前の変数が宣言されています。

これらのキーワードは、変数のスコープや再代入の可否を制御するために使われます。一般的には、再代入が必要ない場合はconstを使い、そうでない場合はletを使うのが推奨されています。varはスコープの挙動が異なり、バグを生じやすいため、現代のJavaScriptではあまり使われません。

3. 関数の種類と書き方

アロー関数はthisの挙動が通常の関数と異なること（アロー関数は自身のthisを持たず、外部のスコープからthisを継承する）を説明します。
関数宣言（functionキーワードを使う方法）と関数式（変数に関数を代入する方法）の違いについても触れます。

通常の関数の定義方法（Function Declaration）

通常の関数はfunctionキーワードを用いて定義されます。
関数名を指定して定義し、後からその名前を使って関数を呼び出すことができます。
関数宣言はホイスティングされます。つまり、宣言より前に関数を呼び出すことができます。

例:

function func1_1() {
  console.log('Hello World')
}
func1_1(); // => "Hello World"

無名関数を変数に代入する方法（Function Expression）

無名関数（名前のない関数）を変数に代入して使用します。
関数式はホイスティングされません。つまり、宣言される前に呼び出すことはできません。

例:

const func1_2 = function () {
  console.log('Hello World')
};
func1_2(); // => "Hello World"

アロー関数（Arrow Function）

ES6で導入された新しい関数の書き方で、functionキーワードの代わりにアロー（=>）を使います。
アロー関数は短く書くことができ、thisの挙動が通常の関数とは異なります（アロー関数内のthisは、周囲のスコープのthisを継承します）。

例:

const func1_3 = () => {
  return false
};
console.log(func1_3()); // => false

返り値がある場合とない場合

関数はreturnステートメントを使用して値を返すことができます。returnがない場合、関数はundefinedを返します。
returnステートメントは関数の実行を終了させます。それ以降のコードは実行されません。

例:

const func1_4 = () => {
  console.log('Hello World');
  return;
};
const res1_4 = func1_4(); // => "Hello World"
console.log(res1_4); // => undefined

引数と引数の初期値

関数には引数を渡すことができます。引数には初期値を設定することも可能です。
初期値は、引数がundefinedまたは省略された場合に使用されます。

例:

const func1_6 = (x = 1) => {
  return 'result-' + x;
};
console.log(func1_6()); // => 'result-1'

関数の省略形

処理が返り値を返すだけなら=>以降に返り値のみを書いてreturn等を省略できます。

例:

const func1_7 = (x = 1) => 'result-' + x
// 上記は下記の書き方の省略形
// const func1_7 = (x = 1) => {
//   return 'result-' + x
// }

4. コーディングスタイルと命名規則

コーディングスタイルと命名規則は、コードの読みやすさと保守性を高めるために重要です。JavaScriptで一般的に採用されるスタイルと命名規則について説明します。

変数と関数の命名（Camel Case）

JavaScriptでは、変数名や関数名に「キャメルケース」（camelCase）を使用するのが一般的です。これは、最初の単語を小文字で始め、後続の単語の最初の文字を大文字で書くスタイルです。

例:

let boolean = true; // 変数名は小文字で始める
const func1_1 = function() { ... }; // 関数名も小文字で始める

定数の命名（Upper Case）

定数、特に変更されることのない値を持つ定数（マジックナンバーや環境構築値など）は、全て大文字で書き、単語間はアンダースコア（_）で区切ることが一般的です。

例:

const MAX_COUNT = 100; // 定数名は大文字で、アンダースコアで区切る

ブロックの使用

コードブロックは中括弧 {} で囲みます。JavaScriptでは、通常、開始中括弧は新しい行ではなく、宣言や制御文の同じ行に置きます。

例:

if (boolean) {
  console.log('True!');
}

インデント（タブまたはスペース）

コードの読みやすさを保つために、インデント（通常はスペース2つまたは4つ、またはタブ）を使用してコードブロックを整理します。

例:

function example() {
  if (boolean) {
    console.log('Indented');
  }
}

セミコロンの使用

JavaScriptでは、行の終わりにセミコロン（;）を置くことが推奨されます。これにより、ステートメントが明確に区切られ、意図しない結果を避けることができます。

例:

const name = 'Johny'; // 行末にセミコロンを置く

これらのルールは、コードの一貫性と予測可能性を高め、チームでの開発を容易にします。また、多くの場合、これらのスタイルガイドはプロジェクトやチームによって微調整され、適切なツール（例えば、ESLint）を使用して強制されることがあります。

Javascript概要

Javascript各種演算子