カテゴリ: TypeScript 更新日: 2025/12/13

TypeScriptで数値・文字列・配列を扱う方法(型付き)をやさしく解説!

TypeScriptで数値・文字列・配列を扱う方法(型付き)
TypeScriptで数値・文字列・配列を扱う方法(型付き)

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptで数字や文字、いろんなデータを扱いたいんですけど、どうやって書くんですか?」

先生

「いいですね。TypeScriptでは数値(number)文字列(string)配列(array)といったデータをを使ってしっかり管理できます。」

生徒

「型ってなんですか?」

先生

「“型”とは、データの種類のことです。たとえば“数字か文字か”など、プログラムにデータの中身を教えてあげるための情報ですよ。それでは、詳しく見ていきましょう!」

1. 数値(number)の使い方

1. 数値(number)の使い方
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)の使い方

2. 文字列(string)の使い方
2. 文字列(string)の使い方

文字列とは「文章や言葉などの文字の集まり」のことです。TypeScriptでは、string型を使って表します。


let name: string = "たろう";
let message: string = "こんにちは、TypeScript!";

console.log(name);
console.log(message);

「"(ダブルクォーテーション)」または「'(シングルクォーテーション)」で囲んだ部分が文字列です。実行すると、下のように表示されます。


たろう
こんにちは、TypeScript!

3. 配列(array)の使い方

3. 配列(array)の使い方
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. 配列からデータを取り出す方法

4. 配列からデータを取り出す方法
4. 配列からデータを取り出す方法

配列から特定のデータを取り出したいときは、インデックス(順番の番号)を使います。インデックスは0から始まります。


let colors: string[] = ["赤", "青", "黄"];
console.log(colors[0]); // 1番目
console.log(colors[2]); // 3番目

赤
黄

colors[0]は「赤」、colors[2]は「黄」を意味します。

5. 配列にデータを追加する

5. 配列にデータを追加する
5. 配列にデータを追加する

新しくデータを配列に追加したいときは、pushという命令を使います。


let animals: string[] = ["ねこ", "いぬ"];
animals.push("うさぎ");
console.log(animals);

["ねこ", "いぬ", "うさぎ"]

pushは、配列の一番後ろにデータを足してくれる便利な命令です。

6. 型が違うとエラーになる

6. 型が違うとエラーになる
6. 型が違うとエラーになる

TypeScriptの良いところは、「まちがったデータを入れようとしたときに教えてくれる」ことです。


let age: number = 30;
// age = "三十"; ←これはエラーになります!

このように、数値に文字を代入しようとするとエラーになります。逆も同じです。これはプログラムのミスを防いでくれる大事な仕組みです。

7. 複数の型を使いたいときは?

7. 複数の型を使いたいときは?
7. 複数の型を使いたいときは?

配列にいろんな種類のデータ(たとえば文字と数値)を混ぜたい場合は、any型やユニオン型を使いますが、今回は1種類の型だけに限定して学びましょう。

複雑な型の組み合わせは次のステップで学ぶとして、まずは型ごとにデータを分けて使うことを意識してください。

まとめ

まとめ
まとめ

TypeScriptで数値や文字列、そして配列を扱う基本的な方法を学ぶことで、プログラム全体の見通しが大きく良くなります。とくに、number型string型、そして配列の型指定は、初心者がつまずきやすい反面、一度理解できればとても扱いやすく、実務でも頻繁に利用される重要な知識です。数値を扱うときには整数や小数を同じように管理し、文字列では名前やメッセージといった情報を整理できます。さらに配列を使えば複数のデータを順番にまとめて保存し、必要に応じて取り出すことができます。 とくに、配列のインデックス指定やpushによる追加は日常的に使う操作であり、JavaScriptと同じ書き方で動作するため理解しやすい部分です。ただし、TypeScriptでは型の整合性が非常に重要で、異なる種類のデータを入れようとするとエラーとして教えてくれるため、誤りを事前に防ぎやすいという利点があります。この安全性の高さが、TypeScriptが広く採用されている理由でもあります。 さらに、今回の記事で登場したように、コードの中にlet age: numberlet 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();

この例では、stringnumberstring[]といった基本の型だけでクラスを構成し、実際にデータをまとめて管理しています。こうした型付きコードを使うことでTypeScriptらしい堅牢な書き方ができ、エラーも少なく、再利用しやすいコードにつながります。基本をしっかり押さえておけば、アプリケーション開発でも自然に活かせる知識となるでしょう。 では最後に、生徒と先生による振り返りを通して、今回の理解をさらに深めていきましょう。

先生と生徒の振り返り会話

生徒

「今日の内容で、TypeScriptの型ってとても大事なんだなと思いました。とくに数値や文字列、配列にしっかり型をつけるだけでミスが減るんですね。」

先生

「その通りです。型を決めることでデータの管理がしやすくなり、プログラムの見通しも良くなります。配列の扱い方も覚えておくと、いろいろな場面で役に立ちますよ。」

生徒

「配列のインデックスが0からはじまる理由も分かりました! pushで追加する方法も便利ですね。」

先生

「そうですね。TypeScriptではJavaScriptと同じ配列操作ができるので、スムーズに学べます。ただし、型の厳しさがあることで安全に扱える点がとても重要なんです。」

生徒

「たしかに、違う型のデータを間違えて入れたときにエラーで教えてくれるのはありがたいです!」

先生

「その仕組みこそがTypeScriptの魅力です。これからオブジェクト型や関数の型なども学んでいけば、もっと自由に、もっと安全にプログラムを書けるようになりますよ。」

この記事を読んだ人からの質問

この記事を読んだ人からの質問
この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問/質問を解決します

TypeScriptで数値を扱うときはどの型を使えばいいですか?

TypeScriptで数値を扱う場合は、number型を使用します。number型は整数と小数の両方に対応しており、数値データを扱うための基本的な型です。
カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう