Gizanbeak

こんにちは！Syuu（ @syuu_n18）です。

今回はこれからプログラミングを始める初心者かたに向けて、TypeScriptのチュートリアルをご紹介します。
わかりやすく、楽しみながら学べるハンズオン形式で進めていきますのでどうぞお楽しみください！

TypeScriptの準備と環境設定 ✨

これから説明するように自分のPCで環境を整えるのも大事ですが、まず軽く触ってみたい方は TypeScript Playground を使うのもおすすめです！

まずはTypeScriptの開発環境を整えましょう。

Node.jsとnpmがインストールされていることを確認し、次のコマンドでTypeScriptをインストールします。

npm install -g typescript

これでTypeScriptのコンパイラが使えるようになりました！

次にエディタの設定です。
基本的にはVisual Studio Codeを使うことをおすすめしますが、他のエディタでも大丈夫です。

適切なプラグインをインストールして、TypeScriptのシンタックスハイライトや自動補完が利用できるようにしましょう。

最初のTypeScriptプログラム 👶

それでは、最初のTypeScriptプログラムを書いてみましょう！

hello.ts というファイルを作成し次のコードを入力してください。

function hello(name: string): string {
  return `Hello, ${name}!`;
}

console.log(hello("TypeScript"));

このコードは、name という文字列を受け取り、Hello, ${name}! という文字列を返すhello関数を定義し、それを使って Hello, TypeScript! と出力するものです。

コードを書き終えたらターミナルで次のコマンドを実行してTypeScriptをJavaScriptにコンパイルしましょう。

tsc hello.ts

これで、hello.js というファイルが生成されます。
続けて次のコマンドで実行してみましょう。

node hello.js

Hello, TypeScript! と表示されたら成功です。
おめでとうございます！最初のTypeScriptプログラムが完成しました。

型の基本 📚

TypeScriptの大きな特徴は「型」です。

型とは変数や関数の引数が取りうる値の範囲を指定するもので、コードの品質や保守性を向上させます。
ここでは型の基本を学びましょう。

まずは以下のコードを見てください。

let age: number = 25;

このコードは age という変数を number 型で宣言し、25という値を代入しています。
number型は整数や小数を表す型です。

let message: string = "Hello, TypeScript!";

このコードは、message という変数を string 型で宣言し、"Hello, TypeScript!" という文字列を代入しています。
string 型は文字列を表す型です。

他にもいくつかの基本型があります。以下にそれらをまとめています。

• boolean: 真偽値（true または false ）を表す型
• null: null 値のみを表す型
• undefined: undefined 値のみを表す型
• any: 任意の型を表す型（型チェックが緩くなるためできるだけ使わないことが理想です）

TypeScriptの基本的な型については以上です。

配列とタプル 🧮

次に配列とタプルについて学びましょう。

配列

配列は複数の値をまとめて扱うためのデータ構造です。
TypeScriptでは以下のように型を指定して配列を定義できます。

let numbers: number[] = [1, 2, 3, 4, 5];

このコードは number 型の値の配列を宣言し、[1, 2, 3, 4, 5] という値を代入しています。

タプル

タプルは異なる型の値をまとめて扱うためのデータ構造です。
以下のように型を指定してタプルを定義できます。

let person: [string, number] = ["Alice", 30];

このコードは、string 型と number 型の値を持つタプルを宣言し、["Alice", 30] という値を代入しています。

関数と型 🔧

関数も同様に型を利用して引数や戻り値を明示的に指定できます。

以下のコードを見てください。

function add(x: number, y: number): number {
  return x + y;
}

このコードは、x と y という number 型の引数を受け取り、number 型の戻り値を返す add 関数を定義しています。

オブジェクトとインターフェース 📦

次に学ぶべきはオブジェクトとインターフェースです。

オブジェクトはキーと値のペアをまとめて扱うデータ構造です。

TypeScriptではインターフェースを使ってオブジェクトの型を定義することができます。

次のコードは、name と age というキーを持つ Person インターフェースを定義し、それに従ったオブジェクトを alice 変数に代入しています。

interface Person {
  name: string;
  age: number;
}

let alice: Person = {
  name: "Alice",
  age: 30
};

クラスと継承 👩‍👧

JavaScriptと同じようにTypeScriptではクラスを使ってオブジェクト指向プログラミングを行うこともできます。

まずは以下のコードを見てください。

class Animal {
  constructor(public name: string) {}

  speak(): void {
    console.log(`${this.name} は鳴き声を発する。`);
  }
}

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} は吠える。`);
  }
}

let dog = new Dog("Snoopy");
dog.speak();

このコードは、Animal クラスを定義し、そのサブクラスとして Dog クラスを定義しています。
Dog クラスは Animal クラスの speak メソッドをオーバーライドして独自の挙動を実装しています。

おわりに 🏁

これでTypeScriptの基本的な使い方を学びました！

基本的な型定義さえ覚えてしまえばJavaScriptよりも型安全に開発できるTypeScriptはとても優れています。

このチュートリアルでは、TypeScriptの基本的な概念と使い方を紹介しました。
これらの知識を応用して実際にアプリケーション開発にぜひ挑戦してみてください。

使いこなすと効率がアップするTypeScriptのユーティリティ型について以下で解説していますので合わせて読むと理解が深まると思います！

最後にこのチュートリアルが初心者の皆さんにとってわかりやすく楽しいものであったことを願っています。
これからもTypeScriptを使ったプログラミングを楽しみながらスキルを向上させていきましょう！