JavaScriptのデータ型（数値型、文字列型）を完全ガイド！初心者でもわかる基本
新人
「JavaScriptのデータ型って何ですか？数値型と文字列型の違いがよくわかりません。」
先輩
「データ型は、変数に保存できるデータの種類を示します。数値型は数値を、文字列型は文字やテキストを扱います。」
新人
「なるほど、では具体的にどのように使うんですか？」
先輩
「それでは、数値型と文字列型の違いや使い方を実際に見ていきましょう！」
1. JavaScriptのデータ型とは？
JavaScriptでは、さまざまなデータ型を使ってデータを管理します。代表的なものとして、数値型（number）と文字列型（string）があります。
数値型（number）は、計算に使用する数値を格納するために使います。例えば、整数や小数を扱います。
文字列型（string）は、文字や文章、記号などを格納するために使います。文字列は「"」または「'」で囲んで定義します。
2. 数値型（number）の使い方
数値型は、整数や小数を扱うデータ型です。JavaScriptでは、算術演算（足し算、引き算、掛け算、割り算など）を簡単に行うことができます。
例えば、次のコードでは、数値型の変数を使って加算を行い、その結果をページに表示します。
<script>
let num1 = 10; // 数値型の変数num1
let num2 = 5; // 数値型の変数num2
let sum = num1 + num2; // num1とnum2を足し算
document.write("合計: " + sum); // 結果を表示
</script>
このコードでは、変数num1とnum2にそれぞれ10と5を代入し、その合計をsumに格納しています。その後、document.write()を使って合計値を表示しています。
3. 文字列型（string）の使い方
文字列型は、テキストや文字を格納するためのデータ型です。文字列はダブルクォート（"）またはシングルクォート（'）で囲みます。
次のコードでは、文字列型の変数を使って、挨拶のメッセージを表示しています。
<script>
let greeting = "こんにちは、世界！"; // 文字列型の変数greeting
document.write(greeting); // 文字列をページに表示
</script>
このコードでは、greetingという変数に"こんにちは、世界！"という文字列を格納し、それをdocument.write()でページに表示しています。
4. 数値型と文字列型の違い
数値型と文字列型は、異なる種類のデータを扱いますが、JavaScriptでは文字列と数値を簡単に結合することもできます。
例えば、数値型のデータを文字列として結合することができます。次のコードでは、数値と文字列を組み合わせて表示しています。
<script>
let num1 = 10;
let num2 = 20;
let message = "合計は: " + (num1 + num2); // 数値を文字列と結合
document.write(message); // 結果を表示
</script>
このコードでは、num1とnum2という数値型の変数を足し算して、その結果を文字列型の変数messageに格納しています。最終的に、document.write()で"合計は: 30"がページに表示されます。
5. 数値型と文字列型の注意点
JavaScriptでは、数値型と文字列型を組み合わせて使うことができますが、注意しなければならない点もあります。
- 文字列型と数値型を足し算すると、文字列として結合されることがあります。例えば、"10" + 5は"105"となります。
- 数値と文字列を引き算や掛け算、割り算をすると、JavaScriptは自動的に型変換を行い、計算結果を返します。
次のコードでは、文字列と数値を足し算した場合の結果を確認できます。
<script>
let num1 = "10"; // 文字列型
let num2 = 5; // 数値型
let result = num1 + num2; // 文字列と数値を足すと文字列として結合される
document.write(result); // "105"が表示される
</script>
このコードでは、文字列型の"10"と数値型の5を足し算していますが、結果は"105"という文字列として表示されます。数値と文字列を扱う際には、この点を考慮する必要があります。
6. typeofでデータ型を確認する方法
JavaScriptでは、変数に入っているデータ型を確認するためにtypeofという演算子を使うことができます。これにより、数値型なのか文字列型なのかを簡単に判別できます。
次のコードでは、変数のデータ型を確認して表示しています。
<script>
let num = 100;
let text = "サンプル文字列";
document.write(typeof num + "<br>");
document.write(typeof text);
</script>
この例では、数値型はnumber、文字列型はstringと表示されます。データ型を正しく把握することは、エラーを防ぐためにも重要です。
7. 数値型と文字列型の変換方法
JavaScriptでは、数値型と文字列型を相互に変換することができます。例えば、文字列を数値に変換する場合にはparseIntやparseFloatを使用します。
次のコードでは、文字列を数値に変換して計算を行っています。
<script>
let str = "20";
let num = parseInt(str);
let result = num + 10;
document.write("計算結果: " + result);
</script>
このコードでは、文字列の"20"を数値に変換してから計算しているため、正しく30と表示されます。型変換は実務でもよく使う重要なポイントです。
8. テンプレート文字列を使った文字列の扱い
JavaScriptでは、テンプレート文字列を使うことで、数値や変数を簡単に文字列の中に埋め込むことができます。バッククォートを使うことで、より読みやすいコードを書くことができます。
次のコードでは、テンプレート文字列を使ってメッセージを作成しています。
<script>
let name = "田中";
let age = 25;
let message = `名前は${name}、年齢は${age}歳です。`;
document.write(message);
</script>
このようにテンプレート文字列を使うことで、文字列と数値を自然に組み合わせることができ、コードの可読性が向上します。
