動的型付け

INDEX

JavaScriptは動的型付け（Dynamic Typing）を採用しているプログラミング言語です。動的型付けとは、変数に型を明示的に指定する必要がなく、実行時に代入された値によって型が決まる仕組みです。

そのため、同じ変数に文字列、数値、オブジェクトなど異なる型の値を代入できます。柔軟にプログラムを書ける反面、意図しない型変換によるバグが発生することもあるため、動作を理解しておくことが重要です。

動的型付けとは？

動的型付けでは、変数自体に型があるのではなく、代入された値が型を持っています。そのため、同じ変数へ異なる型の値を代入できます。

let variable = "Hello"; // 文字列

variable = 42;          // 数値

variable = true;        // 真偽値

この例では、variableへ文字列・数値・真偽値を順番に代入しています。変数の型を書き換えているのではなく、代入される値の型が変わっているため、このような記述が可能です。

現在どの型の値が入っているかは、typeof演算子で確認できます。

let value = "Hello";

console.log(typeof value); // string

value = 100;

console.log(typeof value); // number

動的型付けと言語と静的型付け言語では、型の扱い方が大きく異なります。

静的型付けでは型が決まっているため、コンパイル時に多くの型エラーを発見できます。一方、動的型付けでは柔軟に記述できますが、実行して初めてエラーが見つかることがあります。

なお、TypeScriptはJavaScriptへ静的型付けを追加した言語です。最終的にはJavaScriptへ変換（トランスパイル）されて実行されます。

JavaScriptでは、値に応じて型が決まるため、同じ変数へさまざまな型の値を代入できます。

同じ変数へ異なる型の値を代入できます。

let dynamicVar = 10;

dynamicVar = "Hello";

dynamicVar = {
    name: "John"
};

dynamicVar = [1, 2, 3];

このように、数値・文字列・オブジェクト・配列など、さまざまな型へ自由に変更できます。

一方で、同じ変数へ異なる型を何度も代入すると、コードが読みにくくなります。実際の開発では、できるだけ1つの変数には同じ種類の値を代入し続ける方が保守しやすくなります。

JavaScriptでは、異なる型同士で演算を行うと、自動的に型変換（型強制）が行われることがあります。

const result = "5" + 3;

console.log(result); // "53"

文字列が含まれているため、数値の3も文字列へ変換され、文字列の連結になります。

一方、演算子によっては数値へ変換されることもあります。

console.log("5" - 3); // 2

console.log("5" * 3); // 15

console.log("5" / 5); // 1

+演算子は文字列連結にも使用されるため文字列を優先しますが、-、*、/では数値へ変換されて計算が行われます。

この挙動は初心者が最も混乱しやすい部分の一つです。数値として扱いたい場合は、Number()などを使用して明示的に型変換することをおすすめします。

const value = "5";

console.log(Number(value) + 3); // 8

JavaScript以外にも、PythonやRubyなど多くの言語が動的型付けを採用しています。ただし、JavaScriptは暗黙の型変換（型強制）が比較的多く行われる点が特徴です。

例えば、Pythonでは文字列と数値をそのまま加算するとエラーになりますが、JavaScriptでは文字列として連結されます。

言語	特徴
JavaScript	動的型付け。暗黙の型変換が多く行われる。
Python	動的型付け。型変換は基本的に明示的に行う。
Ruby	動的型付け。暗黙の型変換は少なく、型の扱いは比較的厳格。

例えば、Pythonでは次のような処理はエラーになります。

一方、JavaScriptでは"53"になります。この違いを理解しておくことで、思わぬバグを防ぐことができます。

動的型付けには、多くのメリットがある一方で、注意すべき点もあります。

動的型付けは便利ですが、実際の開発では次の点に注意すると、安全で読みやすいコードになります。

特に初心者は、==による暗黙の型変換で予期しない結果になることが多いため、基本的には厳密比較である===を使用することをおすすめします。

console.log(5 == "5");   // true

console.log(5 === "5");  // false

===は値だけでなく型も比較するため、意図しない比較結果を防ぐことができます。