はじめてのTypeScriptプログラミング入門 30日コース | TypeScriptとプログラミング基礎 － Day 1：TypeScriptを始めよう

TypeScriptの基本構文を体系的に理解する30日

「TypeScriptの基本構文を体系的に理解する」ことに特化して、初心者が30日で「読める・書ける・修正できる」状態を目指す構成です。

Day 1：TypeScriptを始める

この30日コースのDay 1では、「TypeScriptってそもそも何者なのか」「JavaScriptとどう違うのか」「どうやって最初の一歩を踏み出すのか」を、雑誌記事を読むような感覚で、ゆっくり丁寧にたどっていきます。最後には、みなさん自身の手で「最初のTypeScriptプログラム」を動かすところまで行くことをゴールにします。

TypeScriptとは

TypeScript（タイプスクリプト）は、一言でいうと「JavaScriptに“型”という安全装置をつけた言語」です。JavaScriptでできることは基本的にすべてTypeScriptでもできますが、TypeScriptはそこに静的型付けという仕組みを加えることで、コードの間違いを早い段階で見つけやすくしています。

イメージとしては、こんな感じです。

• JavaScript：自由に走り回れる自転車
• TypeScript：補助輪とヘルメット付きの自転車

自由度は少し下がりますが、その代わり転びにくく、安全に遠くまで走れるようになります。「ちょっと慎重だけど、そのぶん安心してスピードを出せる」——そんな相棒がTypeScriptです。

TypeScriptは“JavaScriptの上に乗っている”

TypeScriptは「JavaScriptの上に乗った言語」です。つまり、

• 有効なJavaScriptコードは、そのまま有効なTypeScriptコードでもある
• TypeScriptで書いたコードは、最終的にJavaScriptに変換されてから実行される

開発者はTypeScriptで書き、ブラウザやNode.jsはJavaScriptとして実行する——この二段構えが、TypeScriptの基本的な構造になっています。

JavaScriptとの違い

共通点

まずは「似ているところ」から押さえておくと、違いが見えやすくなります。

• どちらもWeb開発でよく使われる言語です
• if や for、関数定義など、基本的な文法はほぼ同じです
• ブラウザやNode.jsの世界で動く、という意味では兄弟のような関係です

大きな違いは「型」と「コンパイル」

違いをざっくりまとめると、次の2つが大きなポイントになります。

• 型の扱い方
  • JavaScript：動的型付け（型をあまり意識せずに書ける）
  • TypeScript：静的型付け（型を明示して、コンパイル時にチェックする）
• 実行までの流れ
  • JavaScript：そのままブラウザやNode.jsで実行できる
  • TypeScript：コンパイルしてJavaScriptに変換してから実行する必要がある

コードで見てみる

// JavaScriptの例
let message;          // 型を書かない
message = "Hello";    // 文字列を代入
console.log(message);
message = 123;        // 数値を代入してもOK（エラーにはならない）
console.log(message);

// JavaScriptの例
let message;          // 型を書かない
message = "Hello";    // 文字列を代入
console.log(message);
message = 123;        // 数値を代入してもOK（エラーにはならない）
console.log(message);

// TypeScriptの例
let message: string;  // : string と書いて「文字列型」と宣言する
message = "Hello";    // 文字列はOK
console.log(message);

// message = 123;     // コンパイル時にエラーになる（string 以外はダメ）

// TypeScriptの例
let message: string;  // : string と書いて「文字列型」と宣言する
message = "Hello";    // 文字列はOK
console.log(message);

// message = 123;     // コンパイル時にエラーになる（string 以外はダメ）

JavaScriptは「とりあえず何でも入る」感じですが、TypeScriptは「ここには文字列だけ入れてください」と約束するイメージです。この約束があることで、後からコードを読んだときにも意図が分かりやすくなります。

静的型付け

静的型付けとは、「変数や関数の型を、実行前（コンパイル時）にチェックする仕組み」のことです。TypeScriptの一番大きな特徴であり、初心者にとっても重要なポイントです。

JavaScript（動的型付け）の例

// JavaScriptの例（動的型付け）

function double(value) {
  // value に何が来るかは実行してみないと分からない
  return value * 2;
}

console.log(double(10));      // 20（数値なのでOK）
console.log(double("10"));    // 20（文字列でも * が動いてしまう）
console.log(double("hello")); // NaN（意味不明な結果になる）

// JavaScriptの例（動的型付け）

function double(value) {
  // value に何が来るかは実行してみないと分からない
  return value * 2;
}

console.log(double(10));      // 20（数値なのでOK）
console.log(double("10"));    // 20（文字列でも * が動いてしまう）
console.log(double("hello")); // NaN（意味不明な結果になる）

JavaScriptでは、間違った型を渡しても「とりあえず動いてしまう」ことが多く、バグに気づくのが遅くなりがちです。「なんか変な結果が出てるけど、どこが悪いんだろう…」と悩む時間が増えがちです。

TypeScript（静的型付け）の例

// TypeScriptの例（静的型付け）

// value: number -> この関数は「数値だけ受け付けます」と宣言している
// : number      -> 戻り値も数値であることを宣言している
function double(value: number): number {
  return value * 2;
}

console.log(double(10));      // OK
// console.log(double("10")); // コンパイル時にエラーになる

// TypeScriptの例（静的型付け）

// value: number -> この関数は「数値だけ受け付けます」と宣言している
// : number      -> 戻り値も数値であることを宣言している
function double(value: number): number {
  return value * 2;
}

console.log(double(10));      // OK
// console.log(double("10")); // コンパイル時にエラーになる

// ポイント
// - 間違った型（string など）を渡すと、コンパイル時にエラーになる
// - 実行前に「この使い方はおかしい」と教えてくれる

// ポイント
// - 間違った型（string など）を渡すと、コンパイル時にエラーになる
// - 実行前に「この使い方はおかしい」と教えてくれる

静的型付けのおかげで、「実行してみたら落ちた」という事故を減らせますし、「この関数は何を受け取って何を返すのか」が型によって明確になります。型は、コードの“取扱説明書”のようなものだと考えると分かりやすいです。

コンパイル

TypeScriptは、そのままではブラウザやNode.jsで実行できません。そこで必要になるのが「コンパイル」です。

コンパイルの流れ

1. TypeScriptファイル（.ts）を書く
2. TypeScriptコンパイラ（tsc）でコンパイルする
3. JavaScriptファイル（.js）が生成される
4. 生成された .js をブラウザやNode.jsで実行する

図にすると、こうなります。

TypeScriptコード（.ts） → コンパイル（tsc） → JavaScriptコード（.js） → 実行（ブラウザ / Node.js）

コンパイルの具体例

// hello.ts
// 最初のTypeScriptプログラムの例

// message という変数に文字列を入れる
let message: string = "Hello, TypeScript!";

// 画面（コンソール）に文字を出す命令
console.log(message);

// hello.ts
// 最初のTypeScriptプログラムの例

// message という変数に文字列を入れる
let message: string = "Hello, TypeScript!";

// 画面（コンソール）に文字を出す命令
console.log(message);

ターミナルで次のコマンドを実行します。

bash

tsc hello.ts   # TypeScriptコンパイラでコンパイルする

すると、同じフォルダに hello.js が生成されます。

// hello.js（コンパイル後のイメージ）
var message = "Hello, TypeScript!";
console.log(message);

// hello.js（コンパイル後のイメージ）
var message = "Hello, TypeScript!";
console.log(message);

この hello.js を node hello.js などで実行すると、実際にプログラムが動きます。「TypeScriptで書いて、JavaScriptとして走る」という二段構えを、ここで体感できるはずです。

.tsファイル

TypeScriptのソースコードは、拡張子が .ts のファイルに書きます。

.tsファイルの役割

• TypeScriptコードを書く場所です
• 型情報（: string, : number など）を含めることができます
• コンパイルの入力となり、対応する .js ファイルが生成されます

シンプルな .ts ファイル例

// greeting.ts
// 名前に応じて挨拶を返す関数の例

// name: string -> 名前は文字列
function greet(name: string): string {
  // テンプレート文字列（`...`）でメッセージを作る
  return `Hello, ${name}!`;
}

// 関数を実際に呼び出してみる
const message: string = greet("TypeScript learner");

// 結果をコンソールに表示
console.log(message);

// greeting.ts
// 名前に応じて挨拶を返す関数の例

// name: string -> 名前は文字列
function greet(name: string): string {
  // テンプレート文字列（`...`）でメッセージを作る
  return `Hello, ${name}!`;
}

// 関数を実際に呼び出してみる
const message: string = greet("TypeScript learner");

// 結果をコンソールに表示
console.log(message);

この greeting.ts をコンパイルすると、型情報が取り除かれた greeting.js が生成されます。.ts は「開発者が書くファイル」、.js は「実行されるファイル」と覚えておくと整理しやすいです。

TypeScriptの基本構造

最初のうちは、TypeScriptのファイルが「どういう部品でできているか」をざっくり理解しておくと、後の学習がぐっと楽になります。

基本構造のイメージ

1. 変数宣言
2. 関数定義
3. 処理の呼び出し
4. 結果の表示（console.log() など）

// basic.ts
// TypeScriptファイルの基本構造の例

// 1. 変数宣言
let userName: string = "Alice";

// 2. 関数定義
function sayHello(name: string): string {
  return `Hello, ${name}!`;
}

// 3. 処理の呼び出し
const message: string = sayHello(userName);

// 4. 結果の表示
console.log(message);

// basic.ts
// TypeScriptファイルの基本構造の例

// 1. 変数宣言
let userName: string = "Alice";

// 2. 関数定義
function sayHello(name: string): string {
  return `Hello, ${name}!`;
}

// 3. 処理の呼び出し
const message: string = sayHello(userName);

// 4. 結果の表示
console.log(message);

// ポイント
// - 変数や関数に型を付けることで、コードの意図が明確になる
// - 「何をしているファイルなのか」が上から順に読みやすくなる

// ポイント
// - 変数や関数に型を付けることで、コードの意図が明確になる
// - 「何をしているファイルなのか」が上から順に読みやすくなる

この「変数 → 関数 → 呼び出し → 出力」という流れは、ほとんどのプログラムで共通する基本構造です。Day 1では、この形をなんとなく頭に入れておくだけで十分です。

console.log() とは

console.log() は、プログラムの結果や途中経過を画面（コンソール）に表示するための関数です。JavaScriptでもTypeScriptでも同じように使われます。

なぜ重要なのか

• プログラムが正しく動いているか確認するための「目」です
• デバッグ（バグ探し）のときに、変数の中身を確認するために使います
• 学習初期は「とりあえず console.log() で出してみる」が基本スタイルになります

具体例

// console-log.ts
// console.log() の使い方の例

let message: string = "Learning TypeScript";

// 変数の中身を表示する
console.log(message);

// 計算結果を表示する
let a: number = 5;
let b: number = 3;
let sum: number = a + b;

console.log("a + b の結果は:", sum);

// console-log.ts
// console.log() の使い方の例

let message: string = "Learning TypeScript";

// 変数の中身を表示する
console.log(message);

// 計算結果を表示する
let a: number = 5;
let b: number = 3;
let sum: number = a + b;

console.log("a + b の結果は:", sum);

// ポイント
// - console.log(message); のように、表示したい値をカッコの中に書く
// - 文字列と値を一緒に表示したいときは、カンマで区切るかテンプレート文字列を使う

// ポイント
// - console.log(message); のように、表示したい値をカッコの中に書く
// - 文字列と値を一緒に表示したいときは、カンマで区切るかテンプレート文字列を使う

console.log() は、プログラミング初心者にとっての「会話の相手」です。「今こういう値が入ってるよ」と教えてくれるので、安心してコードを書き進められます。

開発環境

TypeScriptを快適に学ぶためには、最低限の開発環境を整える必要があります。ここでは、「これだけ入れておけばOK」という構成を紹介します。

必要なもの

• Node.js と npm TypeScriptをインストールするために必要です。インストール後、node --version と npm --version で確認できます。
• TypeScriptコンパイラ（tsc） npmでインストールします。
• コードエディタ（Visual Studio Codeなど） TypeScript対応が良く、補完やエラー表示が分かりやすいです。

TypeScriptのインストール

Node.jsが入っている前提で、次のコマンドを実行します。

bash

npm install -g typescript

インストール後、バージョン確認をします。

bash

tsc -v

バージョン番号が表示されれば、TypeScriptコンパイラの準備は完了です。これで「書く → コンパイルする → 実行する」の一連の流れに乗る準備が整いました。

エディタの設定（VS Codeを例に）

Visual Studio Code（VS Code）を使う場合、次のようなメリットがあります。

• TypeScriptの型エラーがリアルタイムで表示される
• 補完機能が強力で、関数名や変数名を入力しやすい
• ファイル間の移動や定義ジャンプが簡単

VS Codeを開いて index.ts を作り、実際にコードを書いてみると、赤い波線でエラーが表示されたり、入力補完が出てきたりして、「TypeScriptが守ってくれている」感覚をすぐに味わえるはずです。

実践：最初のTypeScriptプログラムを作る

ここからは、いよいよ実践です。テーマはシンプルに「Hello TypeScript」。でも、この一歩がすべての始まりになります。

ステップ1：フォルダを作る

ターミナル（コマンドプロンプト）で、次のように入力します。

bash

mkdir my-first-ts      # プロジェクト用フォルダを作成
cd my-first-ts         # そのフォルダに移動

ステップ2：TypeScriptファイルを作る

エディタで index.ts というファイルを作成します。

ステップ3：コードを書く

// index.ts
// 初めてのTypeScriptプログラム「Hello TypeScript」

// message という変数に文字列を入れる
// : string と書くことで「この変数は文字列ですよ」と宣言している
let message: string = "Hello TypeScript";

// 画面（コンソール）に表示する
console.log(message);

// index.ts
// 初めてのTypeScriptプログラム「Hello TypeScript」

// message という変数に文字列を入れる
// : string と書くことで「この変数は文字列ですよ」と宣言している
let message: string = "Hello TypeScript";

// 画面（コンソール）に表示する
console.log(message);

コメントも含めて、1行1行の意味を追いながら書いてみてください。「変数を用意して」「文字列を入れて」「表示する」——それだけで立派なプログラムです。

ステップ4：コンパイルする

ターミナルで次のコマンドを実行します。

bash

tsc index.ts   # index.ts をコンパイルして index.js を生成

同じフォルダに index.js が生成されます。

ステップ5：実行する（Node.jsの場合）

bash

node index.js

コンソールに Hello TypeScript と表示されれば成功です。これが、みなさんの「最初のTypeScriptプログラム」です。ここから先は、この一歩を少しずつ広げていく旅になります。

まとめ

Day 1では、TypeScriptとプログラミング基礎として次の内容を扱いました。

• TypeScriptとは何か（JavaScriptの拡張版であり、静的型付けを持つ言語である）
• JavaScriptとの違い（動的型付け vs 静的型付け、コンパイルの有無など）
• 静的型付けのメリット（実行前にエラーを検出できる、コードの意図が明確になる）
• コンパイルの流れ（.ts → tsc → .js → 実行）
• .ts ファイルと基本構造（変数・関数・呼び出し・出力）
• console.log() の役割（結果や途中経過を確認するための基本ツール）
• 開発環境の準備（Node.js、npm、TypeScript、VS Code）
• 実践として「Hello TypeScript」を自分の手で動かす

Day 1：TypeScriptを始める（復習）

この30日コースのDay 1では、「TypeScriptってそもそも何なのか」「JavaScriptとどう違うのか」「どうやって最初の一歩を踏み出すのか」を、雑誌記事を読むような感覚でゆっくりたどっていきます。 ゴールは、みなさん自身の手で「自分の名前・年齢・好きな言葉」を表示する、シンプルだけれど“ちゃんとした”TypeScriptプログラムを書いて動かすことです。

TypeScriptとは

TypeScript（タイプスクリプト）は、一言でいうと「JavaScriptに“型”という安全装置をつけた言語」です。 JavaScriptでできることは基本的にすべてTypeScriptでもできますが、TypeScriptはそこに静的型付けという仕組みを加えることで、コードの間違いを早い段階で見つけやすくしています。

TypeScriptのイメージ

• JavaScript：自由に走り回れる自転車
• TypeScript：補助輪とヘルメット付きの自転車

自由度は少し下がりますが、その代わり転びにくく、安全に遠くまで走れるようになります。 「ちょっと慎重だけど、そのぶん安心してスピードを出せる」——そんな相棒がTypeScriptです。

JavaScriptの上に乗る言語

TypeScriptは「JavaScriptの上に乗った言語」です。

• 有効なJavaScriptコードは、そのまま有効なTypeScriptコードでもあります
• TypeScriptで書いたコードは、最終的にJavaScriptに変換されてから実行されます

開発者はTypeScriptで書き、ブラウザやNode.jsはJavaScriptとして実行する——この二段構えが、TypeScriptの基本的な構造になっています。

JavaScriptとの違い

似ているところ

まずは「似ているところ」から押さえておくと、違いが見えやすくなります。

• どちらもWeb開発でよく使われる言語です
• if や for、関数定義など、基本的な文法はほぼ同じです
• ブラウザやNode.jsの世界で動く、という意味では兄弟のような関係です

大きな違いは「型」と「コンパイル」

違いをざっくりまとめると、次の2つが大きなポイントになります。

• 型の扱い方
  • JavaScript：動的型付け（型をあまり意識せずに書ける）
  • TypeScript：静的型付け（型を明示して、コンパイル時にチェックする）
• 実行までの流れ
  • JavaScript：そのままブラウザやNode.jsで実行できる
  • TypeScript：コンパイルしてJavaScriptに変換してから実行する必要がある

コードで見てみる

// JavaScriptの例
let message;          // 型を書かない
message = "Hello";    // 文字列を代入
console.log(message);
message = 123;        // 数値を代入してもOK（エラーにはならない）
console.log(message);

// JavaScriptの例
let message;          // 型を書かない
message = "Hello";    // 文字列を代入
console.log(message);
message = 123;        // 数値を代入してもOK（エラーにはならない）
console.log(message);

// TypeScriptの例
let message: string;  // : string と書いて「文字列型」と宣言する
message = "Hello";    // 文字列はOK
console.log(message);

// message = 123;     // コンパイル時にエラーになる（string 以外はダメ）

// TypeScriptの例
let message: string;  // : string と書いて「文字列型」と宣言する
message = "Hello";    // 文字列はOK
console.log(message);

// message = 123;     // コンパイル時にエラーになる（string 以外はダメ）

JavaScriptは「とりあえず何でも入る」感じですが、TypeScriptは「ここには文字列だけ入れてください」と約束するイメージです。 この約束があることで、後からコードを読んだときにも意図が分かりやすくなります。

静的型付け

静的型付けとは、「変数や関数の型を、実行前（コンパイル時）にチェックする仕組み」のことです。 TypeScriptの一番大きな特徴であり、初心者にとっても重要なポイントです。

JavaScript（動的型付け）の例

// JavaScriptの例（動的型付け）

function double(value) {
  // value に何が来るかは実行してみないと分からない
  return value * 2;
}

console.log(double(10));      // 20（数値なのでOK）
console.log(double("10"));    // 20（文字列でも * が動いてしまう）
console.log(double("hello")); // NaN（意味不明な結果になる）

// JavaScriptの例（動的型付け）

function double(value) {
  // value に何が来るかは実行してみないと分からない
  return value * 2;
}

console.log(double(10));      // 20（数値なのでOK）
console.log(double("10"));    // 20（文字列でも * が動いてしまう）
console.log(double("hello")); // NaN（意味不明な結果になる）

JavaScriptでは、間違った型を渡しても「とりあえず動いてしまう」ことが多く、バグに気づくのが遅くなりがちです。

TypeScript（静的型付け）の例

// TypeScriptの例（静的型付け）

// value: number -> この関数は「数値だけ受け付けます」と宣言している
// : number      -> 戻り値も数値であることを宣言している
function double(value: number): number {
  return value * 2;
}

console.log(double(10));      // OK
// console.log(double("10")); // コンパイル時にエラーになる

// TypeScriptの例（静的型付け）

// value: number -> この関数は「数値だけ受け付けます」と宣言している
// : number      -> 戻り値も数値であることを宣言している
function double(value: number): number {
  return value * 2;
}

console.log(double(10));      // OK
// console.log(double("10")); // コンパイル時にエラーになる

// ポイント
// - 間違った型（string など）を渡すと、コンパイル時にエラーになる
// - 実行前に「この使い方はおかしい」と教えてくれる

// ポイント
// - 間違った型（string など）を渡すと、コンパイル時にエラーになる
// - 実行前に「この使い方はおかしい」と教えてくれる

静的型付けのおかげで、「実行してみたら落ちた」という事故を減らせますし、「この関数は何を受け取って何を返すのか」が型によって明確になります。 型は、コードの“取扱説明書”のようなものだと考えると分かりやすいです。

コンパイル

TypeScriptは、そのままではブラウザやNode.jsで実行できません。そこで必要になるのが「コンパイル」です。

コンパイルの流れ

1. TypeScriptファイル（.ts）を書く
2. TypeScriptコンパイラ（tsc）でコンパイルする
3. JavaScriptファイル（.js）が生成される
4. 生成された .js をブラウザやNode.jsで実行する

図にすると、こうなります。

TypeScriptコード（.ts） → コンパイル（tsc） → JavaScriptコード（.js） → 実行（ブラウザ / Node.js）

コンパイルの具体例

// hello.ts
// 最初のTypeScriptプログラムの例

// message という変数に文字列を入れる
let message: string = "Hello, TypeScript!";

// 画面（コンソール）に文字を出す命令
console.log(message);

// hello.ts
// 最初のTypeScriptプログラムの例

// message という変数に文字列を入れる
let message: string = "Hello, TypeScript!";

// 画面（コンソール）に文字を出す命令
console.log(message);

ターミナルで次のコマンドを実行します。

bash

tsc hello.ts   # TypeScriptコンパイラでコンパイルする

すると、同じフォルダに hello.js が生成されます。

// hello.js（コンパイル後のイメージ）
var message = "Hello, TypeScript!";
console.log(message);

// hello.js（コンパイル後のイメージ）
var message = "Hello, TypeScript!";
console.log(message);

この hello.js を node hello.js などで実行すると、実際にプログラムが動きます。 「TypeScriptで書いて、JavaScriptとして走る」という二段構えを、ここで体感できるはずです。

.tsファイル

TypeScriptのソースコードは、拡張子が .ts のファイルに書きます。

.tsファイルの役割

• TypeScriptコードを書く場所です
• 型情報（: string, : number など）を含めることができます
• コンパイルの入力となり、対応する .js ファイルが生成されます

シンプルな .ts ファイル例

// profile.ts
// 名前・年齢・好きな言葉を扱う例

// name: string -> 名前は文字列
// age: number  -> 年齢は数値
// favorite: string -> 好きな言葉は文字列
let name: string = "Alice";
let age: number = 25;
let favorite: string = "Keep learning";

// それぞれを表示してみる
console.log("名前:", name);
console.log("年齢:", age);
console.log("好きな言葉:", favorite);

// profile.ts
// 名前・年齢・好きな言葉を扱う例

// name: string -> 名前は文字列
// age: number  -> 年齢は数値
// favorite: string -> 好きな言葉は文字列
let name: string = "Alice";
let age: number = 25;
let favorite: string = "Keep learning";

// それぞれを表示してみる
console.log("名前:", name);
console.log("年齢:", age);
console.log("好きな言葉:", favorite);

この profile.ts をコンパイルすると、型情報が取り除かれた profile.js が生成されます。 .ts は「開発者が書くファイル」、.js は「実行されるファイル」と覚えておくと整理しやすいです。

TypeScriptの基本構造

Day 1の段階では、「TypeScriptのファイルはだいたいこんな形をしている」というざっくりしたイメージを持っておくだけで十分です。

基本構造のイメージ

1. 変数宣言
2. 関数定義
3. 処理の呼び出し
4. 結果の表示（console.log() など）

// basic-structure.ts
// TypeScriptファイルの基本構造の例

// 1. 変数宣言
let userName: string = "Alice";
let userAge: number = 25;

// 2. 関数定義
function buildProfile(name: string, age: number): string {
  return `Name: ${name}, Age: ${age}`;
}

// 3. 処理の呼び出し
const profileText: string = buildProfile(userName, userAge);

// 4. 結果の表示
console.log(profileText);

// basic-structure.ts
// TypeScriptファイルの基本構造の例

// 1. 変数宣言
let userName: string = "Alice";
let userAge: number = 25;

// 2. 関数定義
function buildProfile(name: string, age: number): string {
  return `Name: ${name}, Age: ${age}`;
}

// 3. 処理の呼び出し
const profileText: string = buildProfile(userName, userAge);

// 4. 結果の表示
console.log(profileText);

// ポイント
// - 変数や関数に型を付けることで、コードの意図が明確になる
// - 「何をしているファイルなのか」が上から順に読みやすくなる

// ポイント
// - 変数や関数に型を付けることで、コードの意図が明確になる
// - 「何をしているファイルなのか」が上から順に読みやすくなる

この「変数 → 関数 → 呼び出し → 出力」という流れは、ほとんどのプログラムで共通する基本構造です。

console.log() とは

console.log() は、プログラムの結果や途中経過を画面（コンソール）に表示するための関数です。 JavaScriptでもTypeScriptでも同じように使われます。

なぜ重要なのか

• プログラムが正しく動いているか確認するための「目」です
• デバッグ（バグ探し）のときに、変数の中身を確認するために使います
• 学習初期は「とりあえず console.log() で出してみる」が基本スタイルになります

複数の console.log() を使ってみる

// multi-log.ts
// console.log() を複数使う練習

let name: string = "Alice";
let age: number = 25;
let favorite: string = "Keep learning";

// 1つずつ表示
console.log("名前:", name);
console.log("年齢:", age);
console.log("好きな言葉:", favorite);

// まとめて表示（テンプレート文字列を使う）
console.log(`プロフィール: 名前=${name}, 年齢=${age}, 好きな言葉="${favorite}"`);

// multi-log.ts
// console.log() を複数使う練習

let name: string = "Alice";
let age: number = 25;
let favorite: string = "Keep learning";

// 1つずつ表示
console.log("名前:", name);
console.log("年齢:", age);
console.log("好きな言葉:", favorite);

// まとめて表示（テンプレート文字列を使う）
console.log(`プロフィール: 名前=${name}, 年齢=${age}, 好きな言葉="${favorite}"`);

// ポイント
// - console.log() は何度使ってもOK（呼び出すたびに1行表示されるイメージ）
// - 「1つずつ表示」と「まとめて表示」を両方試してみると、表現の幅が広がる

// ポイント
// - console.log() は何度使ってもOK（呼び出すたびに1行表示されるイメージ）
// - 「1つずつ表示」と「まとめて表示」を両方試してみると、表現の幅が広がる

開発環境

TypeScriptを快適に学ぶためには、最低限の開発環境を整える必要があります。 ここでは、「これだけ入れておけばOK」という構成を紹介します。

必要なもの

• Node.js と npm
• TypeScriptコンパイラ（tsc）
• コードエディタ（Visual Studio Codeなど）

TypeScriptのインストール

Node.jsが入っている前提で、次のコマンドを実行します。

bash

npm install -g typescript

インストール後、バージョン確認をします。

bash

tsc -v

バージョン番号が表示されれば、TypeScriptコンパイラの準備は完了です。 これで「書く → コンパイルする → 実行する」の一連の流れに乗る準備が整いました。

練習：自分の情報を表示するプログラムを書く

ここからは、いよいよ実践です。 テーマは「自分の名前・年齢・好きな言葉」を表示するプログラム。シンプルですが、変数・型・console.log() の基本がぎゅっと詰まった練習になります。

ステップ1：フォルダを作る

ターミナル（コマンドプロンプト）で、次のように入力します。

bash

mkdir my-profile-ts      # プロジェクト用フォルダを作成
cd my-profile-ts         # そのフォルダに移動

ステップ2：TypeScriptファイルを作る

エディタで index.ts というファイルを作成します。

ステップ3：コードを書く（テンプレート）

// index.ts
// 自分のプロフィールを表示する最初のTypeScriptプログラム

// 1. 変数を用意する
// name: string -> 名前（文字列）
// age: number  -> 年齢（数値）
// favorite: string -> 好きな言葉（文字列）
let name: string = "ここに自分の名前";
let age: number = 0; // ここに自分の年齢
let favorite: string = "ここに好きな言葉";

// 2. 1つずつ表示してみる
console.log("名前:", name);
console.log("年齢:", age);
console.log("好きな言葉:", favorite);

// 3. 3つの情報をまとめて表示してみる
console.log(`プロフィール: 名前=${name}, 年齢=${age}, 好きな言葉="${favorite}"`);

// index.ts
// 自分のプロフィールを表示する最初のTypeScriptプログラム

// 1. 変数を用意する
// name: string -> 名前（文字列）
// age: number  -> 年齢（数値）
// favorite: string -> 好きな言葉（文字列）
let name: string = "ここに自分の名前";
let age: number = 0; // ここに自分の年齢
let favorite: string = "ここに好きな言葉";

// 2. 1つずつ表示してみる
console.log("名前:", name);
console.log("年齢:", age);
console.log("好きな言葉:", favorite);

// 3. 3つの情報をまとめて表示してみる
console.log(`プロフィール: 名前=${name}, 年齢=${age}, 好きな言葉="${favorite}"`);

ここに、みなさん自身の情報を入れてみてください。

• name に自分の名前
• age に自分の年齢
• favorite に、自分の好きな言葉や座右の銘

ステップ4：コンパイルする

ターミナルで次のコマンドを実行します。

bash

tsc index.ts   # index.ts をコンパイルして index.js を生成

同じフォルダに index.js が生成されます。

ステップ5：実行する（Node.jsの場合）

bash

node index.js

コンソールに、名前・年齢・好きな言葉が表示されれば成功です。 console.log() を複数使っているので、1行ずつ表示される様子も確認してみてください。

まとめ

Day 1では、TypeScriptとプログラミング基礎として次の内容を扱いました。

• TypeScriptとは何か（JavaScriptの拡張版であり、静的型付けを持つ言語である）
• JavaScriptとの違い（動的型付け vs 静的型付け、コンパイルの有無など）
• 静的型付けのメリット（実行前にエラーを検出できる、コードの意図が明確になる）
• コンパイルの流れ（.ts → tsc → .js → 実行）
• .ts ファイルと基本構造（変数・関数・呼び出し・出力）
• console.log() の役割（結果や途中経過を確認するための基本ツール）
• 開発環境の準備（Node.js、npm、TypeScript、VS Code）
• 練習として「自分の名前・年齢・好きな言葉」を表示するプログラムを書く