TypeScriptで数値・文字列・配列を扱う方法(型付き)をやさしく解説!
生徒
「TypeScriptで数字や文字、いろんなデータを扱いたいんですけど、どうやって書くんですか?」
先生
「いいですね。TypeScriptでは数値(number)や文字列(string)、配列(array)といったデータを型を使ってしっかり管理できます。」
生徒
「型ってなんですか?」
先生
「“型”とは、データの種類のことです。たとえば“数字か文字か”など、プログラムにデータの中身を教えてあげるための情報ですよ。それでは、詳しく見ていきましょう!」
1. 数値(number)の使い方
TypeScriptでは、number型を使って数値を扱います。整数(例:10)や小数(例:3.14)も同じように扱えます。次のように書きます。
let age: number = 25;
let height: number = 172.5;
console.log(age);
console.log(height);
このように: numberと書くことで、「これは数値ですよ」とTypeScriptに伝えています。
実行結果は以下のようになります。
25
172.5
2. 文字列(string)の使い方
文字列とは「文章や言葉などの文字の集まり」のことです。TypeScriptでは、string型を使って表します。
let name: string = "たろう";
let message: string = "こんにちは、TypeScript!";
console.log(name);
console.log(message);
「"(ダブルクォーテーション)」または「'(シングルクォーテーション)」で囲んだ部分が文字列です。実行すると、下のように表示されます。
たろう
こんにちは、TypeScript!
3. 配列(array)の使い方
配列とは、「データを順番に並べたグループ」のことです。TypeScriptでは、同じ種類のデータを1つにまとめて扱うときに使います。たとえば、複数の数値や文字列を1つの変数にまとめることができます。
3-1. 数値の配列
let scores: number[] = [80, 90, 100];
console.log(scores);
[80, 90, 100]
3-2. 文字列の配列
let fruits: string[] = ["りんご", "バナナ", "みかん"];
console.log(fruits);
["りんご", "バナナ", "みかん"]
配列の中には、[](角かっこ)を使ってデータを並べます。: number[]や: string[]と書くことで「これは数値(または文字列)の配列ですよ」と伝えています。
4. 配列からデータを取り出す方法
配列から特定のデータを取り出したいときは、インデックス(順番の番号)を使います。インデックスは0から始まります。
let colors: string[] = ["赤", "青", "黄"];
console.log(colors[0]); // 1番目
console.log(colors[2]); // 3番目
赤
黄
colors[0]は「赤」、colors[2]は「黄」を意味します。
5. 配列にデータを追加する
新しくデータを配列に追加したいときは、pushという命令を使います。
let animals: string[] = ["ねこ", "いぬ"];
animals.push("うさぎ");
console.log(animals);
["ねこ", "いぬ", "うさぎ"]
pushは、配列の一番後ろにデータを足してくれる便利な命令です。
6. 型が違うとエラーになる
TypeScriptの良いところは、「まちがったデータを入れようとしたときに教えてくれる」ことです。
let age: number = 30;
// age = "三十"; ←これはエラーになります!
このように、数値に文字を代入しようとするとエラーになります。逆も同じです。これはプログラムのミスを防いでくれる大事な仕組みです。
7. 複数の型を使いたいときは?
配列にいろんな種類のデータ(たとえば文字と数値)を混ぜたい場合は、any型やユニオン型を使いますが、今回は1種類の型だけに限定して学びましょう。
複雑な型の組み合わせは次のステップで学ぶとして、まずは型ごとにデータを分けて使うことを意識してください。
まとめ
TypeScriptで数値や文字列、そして配列を扱う基本的な方法を学ぶことで、プログラム全体の見通しが大きく良くなります。とくに、number型やstring型、そして配列の型指定は、初心者がつまずきやすい反面、一度理解できればとても扱いやすく、実務でも頻繁に利用される重要な知識です。数値を扱うときには整数や小数を同じように管理し、文字列では名前やメッセージといった情報を整理できます。さらに配列を使えば複数のデータを順番にまとめて保存し、必要に応じて取り出すことができます。
とくに、配列のインデックス指定やpushによる追加は日常的に使う操作であり、JavaScriptと同じ書き方で動作するため理解しやすい部分です。ただし、TypeScriptでは型の整合性が非常に重要で、異なる種類のデータを入れようとするとエラーとして教えてくれるため、誤りを事前に防ぎやすいという利点があります。この安全性の高さが、TypeScriptが広く採用されている理由でもあります。
さらに、今回の記事で登場したように、コードの中にlet age: numberやlet fruits: string[]のように型を明示的に書くことで、後から読み返したときにも「この変数は何を入れるためのものか」がひと目で分かります。プログラムが大きくなればなるほど、この読みやすさが重要になっていきます。配列操作や型の仕組みをしっかり理解しておけば、将来的にユニオン型やオブジェクト型、さらにはジェネリクスといった発展的な型システムへの理解もよりスムーズになるでしょう。
以下には、今回学んだ内容をふりかえるミニサンプルを書いておきます。同じようにclassやタグを使いながら、TypeScriptの型付きコードがどのように使われるのかもう一度確認してみてください。
サンプルプログラム(ふりかえり)
class UserInfo {
name: string;
age: number;
favorites: string[];
constructor(name: string, age: number, favorites: string[]) {
this.name = name;
this.age = age;
this.favorites = favorites;
}
showInfo() {
console.log(this.name);
console.log(this.age);
console.log(this.favorites);
}
}
let user = new UserInfo("はなこ", 22, ["りんご", "バナナ", "みかん"]);
user.showInfo();
この例では、stringやnumber、string[]といった基本の型だけでクラスを構成し、実際にデータをまとめて管理しています。こうした型付きコードを使うことでTypeScriptらしい堅牢な書き方ができ、エラーも少なく、再利用しやすいコードにつながります。基本をしっかり押さえておけば、アプリケーション開発でも自然に活かせる知識となるでしょう。
では最後に、生徒と先生による振り返りを通して、今回の理解をさらに深めていきましょう。
生徒
「今日の内容で、TypeScriptの型ってとても大事なんだなと思いました。とくに数値や文字列、配列にしっかり型をつけるだけでミスが減るんですね。」
先生
「その通りです。型を決めることでデータの管理がしやすくなり、プログラムの見通しも良くなります。配列の扱い方も覚えておくと、いろいろな場面で役に立ちますよ。」
生徒
「配列のインデックスが0からはじまる理由も分かりました! pushで追加する方法も便利ですね。」
先生
「そうですね。TypeScriptではJavaScriptと同じ配列操作ができるので、スムーズに学べます。ただし、型の厳しさがあることで安全に扱える点がとても重要なんです。」
生徒
「たしかに、違う型のデータを間違えて入れたときにエラーで教えてくれるのはありがたいです!」
先生
「その仕組みこそがTypeScriptの魅力です。これからオブジェクト型や関数の型なども学んでいけば、もっと自由に、もっと安全にプログラムを書けるようになりますよ。」