TypeScriptの基礎を初心者向けに徹底解説！元ぼっち大学生のフリーランスエンジニアがおすすめの本を紹介しつつ詳しく説明します
今回はプログラミング初心者のぼっち大学生のみなさんに向けて、大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスエンジニアとして独立した経歴を持つ僕が、TypeScriptの基礎知識について、できるだけ分かりやすく解説していきます。TypeScript初心者におすすめの本も何冊か紹介しますので、興味のあるぼっち大学生はぜひ一度読んでいってください。
たっちゃん
ぼっちユニバーシティの運営者です。
大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスのWebエンジニアとして独立。
本業はWebアプリケーションやWebサイトの受託開発がメインですが、最近はFlutterにハマっています。
趣味はバックパッカー旅行と立ち飲み屋さん巡り。
現在は都内でひとり法人を経営しながら、現役のぼっち大学生のみなさんへお役立ち情報を発信しています。
0. はじめに
ぼっち大学生のみなさんこんにちは！
今回は、TypeScriptの概要に始まり、基本的な文法やTypeScriptならではの機能や、JavaScriptの違いなどについて、プログラミング初心者のぼっち大学生にも、できるだけ理解しやすくなるように解説してみました。
ただし、記事がだいぶ冗長になってしまったので、途中で読むのに疲れてしまうぼっち大学生もいらっしゃるかと思います…。
しかし、この記事の内容さえ押さえておけば、TypeScriptの基礎知識を大体カバーできますので、興味のあるぼっち大学生はぜひ読んでいってくださいね！
1. TypeScriptとは？
プログラミングを学ぶぼっち大学生みなさんは、TypeScriptについてはご存じでしょうか？
TypeScriptは、近年フロントエンド界隈を中心に、採用される機会が増え続けているホットなプログラミング言語の1つです。
1-1. TypeScriptの概要
1-1-1. スーパーセット言語
TypeScriptは、JavaScriptの上に作られたプログラミング言語で、スーパーセットと呼ばれます。
スーパーセットとは、ある言語のすべての機能を含んでいる上、さらに追加の機能がある言語のことです。
つまり、JavaScriptで書かれたコードは、なんとそのままTypeScriptでも動いてしまうんですね。
例えば、以下のJavaScriptのコードは、そのままTypeScriptでもちゃんと動きます。
function sayHello(name) { console.log("こんにちは、" + name + "さん！");}sayHello("太郎");1-1-2. 静的型付け
TypeScriptの大きな特徴の一つは、「静的型付け」というものです。
静的型付けとは、プログラムが実行される前に、変数や関数の引数にどんな種類のデータが入るかを指定しておくことができる機能です。
これによって、コードが間違っているところを早く見つけることができます。
例えば、以下のTypeScriptのコードでは、sayHello関数の引数nameに文字列型（string）を指定しています。
function sayHello(name: string) { console.log("こんにちは、" + name + "さん！");}sayHello("太郎");1-2. TypeScriptが生まれた理由
1-2-1. JavaScriptの課題
JavaScriptは、こちらの記事でも解説した通り、もともと小さなウェブサイトにちょっとした動きをつけるために作られた言語です。
しかし、インターネットが発展するにつれ、JavaScriptで大きなプロジェクトを作ることが増えました。
そのため、JavaScriptの持っているいくつかの問題が大きな課題となりました。
例えば、型がないために、コードが複雑になると間違いが見つけにくくなることがあります。
1-2-2. 大規模プロジェクトのニーズ
大規模なプロジェクトでは、たくさんの人が一緒にコードを書くことがあります。
そんなとき、TypeScriptのような静的型付けがあると、他の人が書いたコードを理解しやすくなり、間違いも見つけやすくなります。
また、TypeScriptにはクラスやインターフェースといった機能があり、より整理されたコードを書くことができます。
これによって、大規模プロジェクトでも効率的に開発を進めることができるんですね。
TypeScriptは、JavaScriptの持っている課題を解決しつつ、開発者がより安心してコードを書けるようになる言語です。
これからのプログラミングの世界で、TypeScriptはますます重要な存在になっていくことでしょう。
2. TypeScriptの特徴
この章では、TypeScriptの特徴について説明していきたいと思います！
TypeScriptには、JavaScriptには無いいくつかの特徴があります。
それでは、それぞれの特徴をみていきましょう。
2-1. 型が付けられる
2-1-1. 基本型
TypeScriptでは、変数や関数の引数に型を付けることができます。
型にはいくつかの種類がありますが、ここでは基本的な型をいくつか紹介しますね。
- number: 数字です。例えば、10や3.14など。
- string: 文字列です。例えば、“こんにちは”や’太郎’など。
- boolean: 真偽値です。true（真）かfalse（偽）のどちらか。
例えば、以下のように型を付けることができます。
let age: number = 10;let name: string = "太郎";let isStudent: boolean = true;2-1-2. 複合型
基本型のほかにも、複数の型を組み合わせた複合型があります。
ここでは、配列やオブジェクトなどの代表的な複合型を紹介します。
- 配列: 複数の要素をまとめて扱う型です。例えば、number[]は数字の配列です。
- オブジェクト: キーと値のペアをまとめて扱う型です。例えば、{ name: string; age: number }は、nameとageというキーを持つオブジェクトです。
例えば、以下のように複合型を使うことができます。
let scores: number[] = [100, 90, 80];let person: { name: string; age: number } = { name: "太郎", age: 10,};2-2. より安全なコードを書ける
2-2-1. 型チェック
TypeScriptでは、コードが実行される前に型チェックが行われます。
これによって、間違った型のデータを扱おうとしている箇所を見つけることができます。
例えば、以下のコードでは、sayHello関数に数値型の引数が渡されているため、型チェックでエラーになります。
function sayHello(name: string) { console.log("こんにちは、" + name + "さん！");}sayHello(123); // エラー: 数値型は文字列型が必要なところに渡されています。2-2-2. エディターのサポート
TypeScriptの型情報は、エディターでも活用されます。
例えば、Visual Studio CodeなどのエディターでTypeScriptを使うと、関数の引数やオブジェクトのプロパティが何の型なのかを表示してくれるため、コードを書くときにとても便利です。
また、エディターの自動補完機能も、型情報をもとにして適切な候補を提案してくれます。
2-3. JavaScriptとの互換性
2-3-1. 既存のJavaScriptコードとの連携
TypeScriptはJavaScriptのスーパーセットであるため、既存のJavaScriptコードと連携することができます。
たとえば、TypeScriptの中でJavaScriptのライブラリを使うことも可能です。
その場合、型定義ファイル（*.d.ts）を使って、JavaScriptのコードに型情報を追加することができます。
これによって、TypeScriptの型チェックやエディターのサポートが活かされるので、安全にコードを書くことができます。
2-3-2. JavaScriptへのトランスパイル
TypeScriptのコードは、実際にブラウザやNode.jsで動かす前に、JavaScriptに変換されます。
この変換のことを「トランスパイル」と呼びます。
TypeScriptのトランスパイラは、TypeScriptの型情報を取り除いて、JavaScriptのコードに変換してくれます。
また、トランスパイルの際に、古いバージョンのJavaScriptにも対応するように変換することもできます。
例えば、以下のTypeScriptのコードは、トランスパイルによってJavaScriptに変換されます。
function sayHello(name: string) { console.log("こんにちは、" + name + "さん！");}sayHello("太郎");トランスパイル後のJavaScriptコードは以下のようになります。
function sayHello(name) { console.log("こんにちは、" + name + "さん！");}sayHello("太郎");これで、TypeScriptの特徴についての説明が終わりました。
TypeScriptを学ぶことで、より安全で分かりやすいコードを書くことができるようになります。
ぼっち大学生のみなさんもぜひ、TypeScriptを使って素晴らしいウェブアプリケーションを開発できるようになってくださいね。
3. TypeScriptの開発環境の準備
TypeScriptを使ってプログラムを書くためには、まず開発環境を整える必要があります。
ここでは、TypeScriptの開発環境を整える手順を説明しますね。
3-1. Node.jsのインストール
3-1-1. Node.jsのダウンロード
Node.jsは、JavaScriptをブラウザ以外で実行できる環境です。
TypeScriptの開発にはNode.jsが必要なので、まずはNode.jsをインストールしましょう。
Node.jsの公式サイトから、自分のコンピュータに合ったバージョンをダウンロードしてください。
3-1-2. Node.jsのインストール手順
ダウンロードしたファイルを実行すると、インストールが始まります。
画面の指示に従ってインストールを進めていきましょう。
インストールが終わったら、コマンドプロンプト（Windows）またはターミナル（macOS）を開いて、 node -v と入力して、Node.jsが正しくインストールされたか確認してください。
3-2. TypeScriptのインストール
3-2-1. npmを使ったインストール方法
TypeScriptは、Node.jsのパッケージマネージャーであるnpmを使ってインストールします。
コマンドプロンプト（Windows）またはターミナル（macOS）を開いて、以下のコマンドを入力してください。
npm install -g typescriptこれで、TypeScriptがグローバルにインストールされます。
3-2-2. グローバルインストールとローカルインストールの違い
TypeScriptをインストールする方法には、グローバルインストールとローカルインストールがあります。
グローバルインストールは、コンピュータ全体でTypeScriptを使えるようにする方法で、上記のコマンドでインストールできます。
一方、ローカルインストールは、特定のプロジェクトだけでTypeScriptを使えるようにする方法です。
ローカルインストールをする場合は、以下のコマンドをプロジェクトのフォルダで実行してください。
npm install --save-dev typescript3-3. VSCodeでのTypeScript設定
3-3-1. 拡張機能の追加
VSCodeは、TypeScriptの開発におすすめのエディタです。
VSCodeでTypeScriptを使いやすくするために、拡張機能を追加しましょう。
VSCodeの左側のバーサイドバーにある拡張機能のアイコンをクリックして、検索ボックスに「TypeScript」と入力します。
検索結果に表示される「TypeScript」という拡張機能をインストールしてください。
これにより、TypeScriptの構文がハイライトされたり、自動補完が効くようになります。
3-3-2. 設定ファイルの作成と編集
TypeScriptを使うプロジェクトでは、tsconfig.jsonという設定ファイルが必要です。
このファイルには、TypeScriptのコンパイルオプションや、どのファイルをコンパイル対象にするかなどの情報が書かれます。
プロジェクトのルートディレクトリで、 tsconfig.json という名前のファイルを作成し、以下の内容を記述してください。
{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "esModuleInterop": true, "outDir": "dist" }, "include": ["src/**/*.ts"]}上記の設定では、src ディレクトリ内のTypeScriptファイル（*.ts）をコンパイル対象にし、コンパイル結果をdistディレクトリに出力するように指定しています。
また、strictオプションを true に設定することで、より厳密な型チェックが行われるようになります。
これで、TypeScriptの開発環境の準備が完了しました。
これからTypeScriptを使ってプログラムを書くときは、プロジェクトの src ディレクトリ内にTypeScriptファイルを作成して、コードを書いていきましょう。
コードを書いたら、コマンドプロンプト（Windows）またはターミナル（macOS）でtscコマンドを実行して、TypeScriptをJavaScriptにコンパイルしてください。
コンパイルが成功すると、 dist ディレクトリにJavaScriptファイルが生成されます。
これをブラウザやNode.jsで実行することができます。
これで、TypeScriptの開発環境についての説明が終わりました。
これからTypeScriptを学んでいく中で、さまざまな機能を使いこなして、より良いコードを書いていくことができるようになりましょう。
4. 型の基本
型は、変数が持つ値の種類を決めるものです。
TypeScriptでは、型を指定することで、より安全にコードを書くことができます。
この章では、型の基本について学びましょう。
4-1. 変数に型を付ける方法
4-1-1. 型アノテーション
型アノテーションは、変数や関数の引数、戻り値に型を明示的に指定する方法です。
以下のコードを見てください。
let name: string = "太郎";let age: number = 12;上記のコードでは、 name 変数に string 型、 age 変数に number 型を指定しています。
これにより、 name には文字列、 age には数値しか代入できなくなります。
4-1-2. オブジェクトの型定義
オブジェクトに型を指定する場合は、以下のように書きます。
type Person = { name: string; age: number;};let person: Person = { name: "太郎", age: 12,};このコードでは、 Person という型を定義し、 person 変数にその型を指定しています。
これにより、 person 変数には name と age プロパティが必須になります。
4-2. 型推論とは？
4-2-1. 型推論の仕組み
型推論とは、TypeScriptが自動的に変数や関数の型を判断する機能です。以下のコードを見てください。
let name = "太郎";let age = 12;このコードでは、型アノテーションを使わずに変数を定義していますが、TypeScriptは name の型を string 、 age の型を number と推論してくれます。
4-2-2. 型推論のメリット
型推論のメリットは、型アノテーションを省略できるため、コードが簡潔になることです。
また、型が明確であれば、エディタの補完機能も有効になります。
4-3. 型エイリアスの使い方
4-3-1. 型エイリアスの定義方法
型エイリアスは、新しい型名を既存の型につける機能です。
以下のコードを見てください。
type Age = number;let age: Age = 12;このコードでは、 number 型に Age という名前
を付けています。これにより、age 変数には Age 型を指定できます。
Age 型は、実際には number 型と同じですが、意味合いがわかりやすくなります。
4-3-2. 型エイリアスの活用例
型エイリアスは、以下のように複雑な型を簡潔に書くのにも役立ちます。
type StringOrNumber = string | number;function print(value: StringOrNumber) { console.log(value);}function print(value: StringOrNumber) { console.log(value);}print("太郎"); // 文字列も指定できるprint(12); // 数値も指定できるこのコードでは、 StringOrNumber という型エイリアスを作成し、 string 型と number 型のどちらかの値を受け取ることができます。
print関数には、 StringOrNumber 型の引数が指定されているため、文字列と数値のどちらも渡すことができます。
型エイリアスを使うことで、型の意味合いを明確にし、複雑な型定義を簡潔に表現できます。
このように、TypeScriptでは型をうまく活用することで、より安全でわかりやすいコードを書くことができます。
5. TypeScriptの基本構文
5-1. 変数宣言と定数宣言
5-1-1. letとconstの違い
TypeScriptでは、変数を宣言するときに let と const のどちらかを使います。
let は値を変更できる変数を宣言するときに使用し、const は値が変更できない定数を宣言するときに使用します。
let age = 10; // 値を変更できる変数age = 12; // 値を変更できますconst name = "太郎"; // 値が変更できない定数name = "花子"; // エラー！値を変更することはできません5-1-2. 型付けの方法
変数や定数には型を付けることができます。
型を付けることで、変数や定数にどのような値が入るかを明確にすることができます。
let age: number = 10; // 数値型const name: string = "太郎"; // 文字列型5-2. 条件分岐
5-2-1. if文
条件によって処理を分ける場合は、if文を使います。
if 文では、条件式が true のときに実行する処理を記述します。
let age: number = 18;if (age >= 20) { console.log("成人です");} else { console.log("未成年です");}5-2-2. switch文
複数の条件を判断する場合は、 switch 文を使うと便利です。
switch 文では、条件に合致する case を実行します。
let day: number = 1;switch (day) { case 1: console.log("月曜日"); break; case 2: console.log("火曜日"); break; // 以下、caseを追加 default: console.log("不明な曜日");}5-3. 繰り返し処理
5-3-1. for文
繰り返し処理を行う場合は、for 文を使います。
for 文では、繰り返し回数を指定して処理を繰り返します。
for (let i = 1; i <= 5; i++) { console.log(`${i}回目の繰り返しです`);}5-3-2. while文
条件が true の間、処理を繰り返す場合は、 while 文を使います。
let i = 1;while (i <= 5) { console.log(`${i}回目の繰り返しです`); i++;}5-3-3. forEachとmap
配列の要素に対して繰り返し処理を行う場合は、 forEach や map を使います。
forEach は、配列の各要素に対して処理を実行します。
map は、配列の各要素に対して処理を実行し、新しい配列を作成します。
let fruits: string[] = ["りんご", "みかん", "ぶどう"];fruits.forEach((fruit) => { console.log(fruit);});let fruitsWithPrefix: string[] = fruits.map((fruit) => { return "おいしい" + fruit;});console.log(fruitsWithPrefix); // ["おいしいりんご", "おいしいみかん", "おいしいぶどう"]5-4. 関数の定義と呼び出し
5-4-1. 関数宣言と関数式
TypeScriptでは、関数を定義する方法として関数宣言と関数式があります。
関数宣言では、 function キーワードを使って関数を定義します。
関数式では、変数に関数を代入する形で関数を定義します。
// 関数宣言function greet(name: string) { console.log("こんにちは、" + name + "さん");}// 関数式let greet2 = function (name: string) { console.log("こんにちは、" + name + "さん");};5-4-2. アロー関数
アロー関数は、関数式をより短く書く方法です。
アロー関数では、 => を使って関数を定義します。
let greet3 = (name: string) => { console.log("こんにちは、" + name + "さん");};5-4-3. 引数と戻り値の型
TypeScriptでは、関数の引数と戻り値にも型を付けることができます。
引数に型を付けることで、関数内で期待する値が渡されることを保証できます。
また、戻り値の型を付けることで、関数が期待する値を返すことが確認できます。
function add(a: number, b: number): number { return a + b;};let result: number = add(1, 2); // 36. クラスとインターフェース
6-1. クラスの作り方
6-1-1. コンストラクタ
TypeScriptでは、クラスを使ってオブジェクト指向プログラミングができます。
クラスにはコンストラクタという特別なメソッドがあり、オブジェクトが作成されるときに自動的に呼び出されます。
class Animal { constructor(public name: string) {} sayName() { console.log("私の名前は" + this.name + "です。"); }}let dog = new Animal("ポチ");dog.sayName(); // 私の名前はポチです。6-1-2. メソッド
クラスにはメソッドを定義して、そのクラスのオブジェクトが持つべき機能を実装します。
メソッドはクラス内で定義します。
class Animal { constructor(public name: string) {} sayName() { console.log("私の名前は" + this.name + "です。"); } sleep() { console.log(this.name + "は寝ています。"); }}let dog = new Animal("ポチ");dog.sayName(); // 私の名前はポチです。dog.sleep(); // ポチは寝ています。6-1-3. プロパティ
クラスのオブジェクトが持つデータは、プロパティとして定義します。
プロパティはクラス内で定義し、 public や private といったアクセス修飾子で、プロパティへのアクセス制限をかけることができます。
class Animal { private age: number; constructor(public name: string, age: number) { this.age = age; } getAge() { return this.age; }}let dog = new Animal("ポチ", 3);console.log(dog.name); // ポチconsole.log(dog.getAge()); // 36-2. インターフェースの作り方
6-2-1. インターフェースの定義
インターフェースは、オブジェクトが持つべき構造を定義します。
インターフェースには、プロパティやメソッドの型だけを定義します。
interface IAnimal { name: string; age: number; sayName(): void;}6-2-2. インターフェースの継承
インターフェースは、他のインターフェースを継承することができます。
これにより、既存のインターフェースの型を拡張して新しいインターフェースを作成できます。
interface IMammal extends IAnimal { hasFur: boolean;}6-3. クラスとインターフェースの関係
6-3-1. クラスがインターフェースを実装する方法
クラスがインターフェースを実装すると、インターフェースで定義された型に従ってクラスを定義する必要があります。
これにより、コードの品質が向上し、エラーが発生しにくくなります。
クラスでインターフェースを実装するには、 implements キーワードを使用します。
interface IAnimal { name: string; age: number; sayName(): void;}class Animal implements IAnimal { constructor(public name: string, public age: number) {} sayName() { console.log("私の名前は" + this.name + "です。"); }}let dog = new Animal("ポチ", 3);dog.sayName(); // 私の名前はポチです。6-3-2. インターフェースを使ったプログラム設計
インターフェースを使うことで、クラス間の関係や機能が明確になり、コードの可読性が向上します。
また、インターフェースを使って抽象化を行うことで、柔軟なプログラム設計が可能になります。
例えば、動物の鳴き声を出力する関数 makeNoise があるとします。
インターフェースを使わずに実装すると、この関数は Animal クラスに依存してしまい、他の動物クラスで使いづらくなります。
しかし、インターフェースを使って実装すると、どんな動物クラスでも使えるようになります。
interface IAnimal { name: string; makeNoise(): void;}class Dog implements IAnimal { constructor(public name: string) {} makeNoise() { console.log(this.name + "はワンワンと鳴く。"); }}class Cat implements IAnimal { constructor(public name: string) {} makeNoise() { console.log(this.name + "はニャーと鳴く。"); } }function outputNoise(animal: IAnimal) { animal.makeNoise();}let dog = new Dog("ポチ");let cat = new Cat("タマ");outputNoise(dog); // ポチはワンワンと鳴く。outputNoise(cat); // タマはニャーと鳴く。以上で、TypeScriptのクラスとインターフェースについて説明しました。
インターフェースを活用することで、より堅牢で柔軟なコードを書くことができます。
7. TypeScriptでのDOM操作
TypeScriptでは、JavaScriptと同様にDOM（HTMLの要素）を操作することができます。
今回は、TypeScriptでDOMを操作する方法を説明します。
7-1. HTML要素の取得方法
HTMLの要素を取得する方法はいくつかありますが、主に getElementById と querySelector を使って要素を取得します。
7-1-1. getElementById
getElementById は、HTML要素のid属性を使って要素を取得する方法です。
以下の例では、idが”my-element”の要素を取得しています。
const element = document.getElementById("my-element") as HTMLElement;console.log(element);7-1-2. querySelector
querySelector は、CSSセレクタを使って要素を取得する方法です。
以下の例では、classが”my-class”の最初の要素を取得しています。
const element = document.querySelector(".my-class") as HTMLElement;console.log(element);7-2. イベントリスナーの登録方法
イベントリスナーを登録することで、要素のクリックやマウスオーバーなどのイベントに対応した処理を行うことができます。
7-2-1. addEventListener
addEventListener を使ってイベントリスナーを登録します。
以下の例では、idが”my-button”の要素がクリックされたときに、メッセージを表示するようにしています。
const button = document.getElementById("my-button") as HTMLButtonElement;button.addEventListener("click", () => { console.log("ボタンがクリックされました。");});7-2-2. イベントオブジェクトの扱い方
イベントリスナーのコールバック関数には、イベントオブジェクトが渡されます。
このオブジェクトを使って、イベントの詳細情報を取得することができます。
button.addEventListener("click", (event: MouseEvent) => { console.log("クリックされた座標:", event.clientX, event.clientY);});7-3. HTML要素の属性やスタイルの変更方法
要素の属性やスタイルを変更することで、動的にページの見た目や挙動を変えることができます。
7-3-1. 属性の操作方法
setAttribute や removeAttribute を使って、要素の属性を操作できます。
以下の例では、idが”my-image”の要素の src 属性を変更しています。
const image = document.getElementById("my-image") as HTMLImageElement;image.setAttribute("src", "new-image.jpg");image.removeAttribute("alt");7-3-2. スタイルの操作方法
要素の style プロパティを使って、スタイルを変更できます。
以下の例では、 id が”my-text”の要素の文字色を赤に変更しています。
const text = document.getElementById("my-text") as HTMLElement;text.style.color = "red";これらの方法を組み合わせることで、TypeScriptを使ってHTMLの要素を取得し、イベントを追加して、属性やスタイルを変更することができます。
これにより、ウェブページをよりインタラクティブにし、ユーザーエクスペリエンスを向上させることができます。
今回は、TypeScriptでDOM操作を行う方法について説明しました。
TypeScriptを使ってウェブアプリケーションを開発する際は、このようなDOM操作を駆使して、効果的にインタラクションを実現しましょう。
8. TypeScriptとJavaScriptの違い
8-1. コードの書き方の違い
8-1-1. 型アノテーションの有無
TypeScriptでは、変数や関数の引数に型を指定できます。
これにより、誤った型の値が代入されることを防ぎ、バグを減らすことができます。
一方、JavaScriptでは型アノテーションはありません。
【TypeScript】
let name: string = "Taro";【JavaScript】
let name = "Taro";8-1-2. クラス構文の違い
TypeScriptでは、クラスに対してアクセス修飾子を使用できます。
これにより、クラス内のプロパティやメソッドのアクセス範囲を制限できます。
一方、JavaScriptではアクセス修飾子はありません。
【TypeScript】
class Person { private name: string; constructor(name: string) { this.name = name; }}【JavaScript】
class Person { constructor(name) { this.name = name; }}8-2. 実行環境の違い
8-2-1. ブラウザでの実行
TypeScriptは、そのままの状態ではブラウザで実行できません。
TypeScriptコードは、先にJavaScriptにトランスパイル（変換）する必要があります。
一方、JavaScriptはブラウザでそのまま実行できます。
8-2-2. Node.jsでの実行
TypeScriptもJavaScriptも、Node.js環境では実行できますが、TypeScriptは事前にトランスパイルが必要です。
8-3. 開発者にとってのメリットとデメリット
8-3-1. エラー検出の容易さ
TypeScriptは静的型付けにより、コードのエラーを開発段階で検出しやすくなります。
これにより、バグを早期に発見し修正できるため、開発効率が向上します。
一方、JavaScriptではエラー検出が難しく、実行時に問題が発覚することが多いです。
8-3-2. 学習コスト
TypeScriptはJavaScriptのスーパーセットであり、型システムやクラス機能など追加された機能があります。
そのため、TypeScriptの学習コストはJavaScriptより高いと言えます。
しかし、その分、開発効率やコードの品質が向上することも期待できます。
9. TypeScriptのトランスパイル
9-1. トランスパイルとは？
9-1-1. トランスパイルの目的
トランスパイルとは、あるプログラミング言語で書かれたコードを別のプログラミング言語に変換することです。
TypeScriptはそのままブラウザで実行できないため、実行可能なJavaScriptに変換する必要があります。
この変換作業をトランスパイルと呼びます。
9-1-2. TypeScriptからJavaScriptへの変換
TypeScriptのコードは、トランスパイルによって対応するJavaScriptコードに変換され、ブラウザやNode.jsで実行できるようになります。
トランスパイルによって型情報が削除され、実行時に型チェックを行わないJavaScriptコードになります。
9-2. トランスパイルの方法
9-2-1. コマンドラインでのトランスパイル
TypeScriptコードをJavaScriptにトランスパイルするには、コマンドラインでtscコマンドを使用します。
例えば、 main.ts というTypeScriptファイルをトランスパイルする場合、以下のコマンドを実行します。
tsc main.tsこれにより、 main.js というJavaScriptファイルが生成されます。
9-2-2. 自動化ツールを使ったトランスパイル（webpackなど）
webpackをはじめとするビルドツールを使うことで、複数のTypeScriptファイルをまとめてトランスパイルしたり、変更を検知して自動でトランスパイルを行うことができます。
これにより、開発効率が向上します。
9-3. トランスパイル時の設定ファイル(tsconfig.json)
9-3-1. tsconfig.jsonの役割
tsconfig.json は、TypeScriptのプロジェクトでトランスパイルの設定を行うファイルです。
このファイルによって、トランスパイル時のオプションや対象ファイルの指定ができます。
9-3-2. 主要な設定項目
tsconfig.json には様々な設定項目がありますが、主要なものをいくつか紹介します。
- compilerOptions: トランスパイラーの設定を指定するオブジェクトです。
- target: 生成されるJavaScriptのバージョンを指定します。例: “es5”, “es2015”
- module: モジュール形式を指定します。例: “CommonJS”, “ESModule”
- strict: 型チェックを厳格に行うかどうかを指定します。trueにすることで、より安全なコードが書けるようになります。
- outDir: トランスパイルされたJavaScriptファイルが出力されるディレクトリを指定します。例: “dist”
- include: トランスパイル対象のファイルやディレクトリを指定する配列です。例: [“src/**/*.ts”]
- exclude: トランスパイルから除外するファイルやディレクトリを指定する配列です。例: [“node_modules”]
これらの設定項目を組み合わせることで、プロジェクトごとに柔軟なトランスパイル設定が可能になります。
詳細な設定は、公式ドキュメントを参照してください。
以上で、TypeScriptのトランスパイルについての説明を終わります。
これらの知識を使って、TypeScriptを活用して効率的で安全なコードを書きましょう！
10. プログラミング初心者のぼっち大学生におすすめしたいJavaScript本を紹介します
ここでは、TypeScriptに興味のある読者のぼっち大学生のみなさんに、現役エンジニアの僕がおすすめしたい書籍を紹介しておきます。
今回はプログラミング初心者のぼっち大学生はもちろん、JavaScriptの経験があるぼっち大学生に至るまで、幅広い学習者におすすめできる書籍を選んでみましたので、TypeScriptの学習にお役立ていただけたらと思います。
10-1. ゼロからわかる TypeScript入門
© 技術評論社
数あるTypeScriptを解説した書籍の中で、僕が最も初心者に優しい本であると感じたのが、こちらの「ゼロからわかる TypeScript入門」。
TypeScriptの書籍というのは、基本的にJavaScriptを仕事でゴリゴリ書いてるエンジニアに向けられたものがほとんど…。
しかし、今回紹介する「ゼロからわかる TypeScript入門」は、プログラミング初心者や本職プログラマーではない方を対象に，TypeScriptの基本的な文法とプログラミング方法が丁寧に解説されています。
そのため、プログラミング初心者のぼっち大学生や、JavaScriptを一通り学んだので、この勢いでTypeScriptも学習してみたいというぼっち大学生にも、しっかりおすすめできる書籍と言えるでしょう。
10-2. プログラミングTypeScript スケールするJavaScriptアプリケーション開発
© O’REILLY
続いては、みんな大好きオライリーから、「プログラミングTypeScript スケールするJavaScriptアプリケーション開発」を紹介します。
ちなみに著者は Meta社で働く凄腕エンジニアのBoris Chernyさん。
オライリーから出ている本は、内容こそエンジニアにとっては素晴らしものばかりなのですが、いずれも初心者向けとは言い難いところがあります…。
しかし、この「プログラミングTypeScript スケールするJavaScriptアプリケーション開発」に限らず、オライリー本に触れることによって、世界のトップオブトップのエンジニアの考えを窺い知ることができます。
「プログラミングTypeScript スケールするJavaScriptアプリケーション開発」は、これからプログラミングを習得して、実際にエンジニアとして働きたいと考えるぼっち大学生のみなさんに、特におすすめしたい書籍と言えるでしょう。
11. まとめ
今回は、プログラミング初心者のぼっち大学生向けに、TypeScriptの基礎知識を解説させていただきました。
TypeScriptのスキルは、現代のWebアプリケーション開発に関わるうえで、学んでおいて損はないというか、ほぼ必須と言っても過言ではありません。
現に僕がフリーランスエンジニアとして、フロントエンドの常駐案件を探すような場合、TypeScriptの経験はそこそこ高い確率で求められます。
これからプログラミングを学んでエンジニアとしてキャリアを積んでいこうと考えているぼっち大学生のみなさんは、ぜひこの記事の内容を参考にしていただき、TypeScriptの知識をしっかりと身につけていって欲しいと思います。
最後に、これからTypeScriptを学んでみようと考えるぼっち大学生のみなさんに、おすすめのプログラミングスクールを紹介させていただきます。
ぼっち大学生のみなさんは、サブスク型プログラミングスクールのSAMURAI TERAKOYA（侍テラコヤ）であれば、飲み会1回分ほどの費用で、TypeScriptを効率的かつ確実に学ぶことが可能です！
SAMURAI TERAKOYA（侍テラコヤ）の詳細については、こちらの記事で詳しく解説していますが、
- 40種類以上に及ぶ学び放題の教材
- 平均回答スピード30分以内のQ&A掲示板
- 月1回〜の現役エンジニアとのオンラインレッスン
- プログラミング学習を継続できる学習ログ
を、月額2,980円〜という破格の料金で利用することができます。
もちろん、独学でTypeScriptを習得することは不可能ではありません。
しかし、実際に業務でTypeScriptを書いているエンジニアのメンターに、TypeScriptについて直接質問ができる環境で学んだほうが、ぼっち大学生のみなさんのTypeScriptを習得するスピードは圧倒的に速くなります。
TypeScriptの学習に興味があり、プログラミングスクールで学ぶことも視野に入れていたが、費用面がネックとなり、なかなか学習に手を付けられなかったというぼっち大学生のみなさんは、ぜひ一度このSAMURAI TERAKOYA（侍テラコヤ）に無料で相談してみてはいかがでしょうか？
