TypeScriptを学ぶ理由は、型システムによるバグ抑制とコードの堅牢化により、開発効率と信頼性を大幅に向上させ、長期的なコスト削減を実現できるからです。この記事の目的は、初心者にもわかりやすくTypeScriptの基礎から実践的な使い方までを解説し、TypeScriptを使ったコーディングに必要な知識を身につけてもらうことです。
TypeScriptとは?
TypeScriptは、Microsoftが開発したJavaScriptのスーパーセットです。つまり、JavaScriptのコードはすべてTypeScriptでも動作します。さらに、TypeScriptは型システムや最新のECMAScript機能のサポートなど、JavaScriptにはない機能を提供します。これらの機能により、大規模なアプリケーション開発において、より堅牢でメンテナンスしやすいコードを書くことができます。
JavaScriptとの関係性
TypeScriptは「JavaScriptに型を加える」ことで知られています。しかし、それだけではありません。TypeScriptは、開発者がより効率的にコードを書き、バグを早期に発見し、大規模プロジェクトをより簡単に管理できるようにするための多くの機能を備えています。
JavaScriptは、あらゆるブラウザやNode.jsで動作します。一方、TypeScriptはこれらの環境で動作するJavaScriptコードにコンパイルされます。
TypeScriptの機能
TypeScriptは、あなたが既に知っているJavaScriptに少しプラスαを加えたものです。このプラスαとは、主に「変数などにあらかじめ型を指定する」機能のことです。この機能により、プログラムがより安全に、予測可能な方法で動作するようになります。
JavaScriptとの主要な違い
-
型付け
TypeScriptでは、「変数などにあらかじめ型を指定する」ことができます。これにより、数値や文字列など、特定の種類のデータのみを変数に割り当てることが可能になり、エラーを減らすことができます。
-
高度な型機能
TypeScriptでは、より複雑で柔軟な型の指定が可能です。例えば、「ユニオン型」を使えば、変数に文字列または数値を許容するなど、柔軟な型指定ができます。
let id: number | string; id = 101; // OK id = "202"; // これもOK
-
モジュールシステム
TypeScriptは、コードをモジュールとして整理することをサポートしています。これにより、プロジェクトが大きくなっても、コードをきれいに整理しやすくなります。
型システムの利点
型システムには、以下のような多くの利点があります。
型システムの利点を示す表
利点 | 説明 |
---|---|
エラーの早期発見 | 型が合わない場合にプログラム実行前にエラーを検出できます。 |
コードがわかりやすくなる | 型が書かれていると、そのコードの目的や扱うデータの種類が明確になります。 |
リファクタリングが容易 | 型情報をもとに、コードの変更時の影響範囲を容易に把握できます。 |
コーディングのサポート | IDEが型情報を利用して、コード補完や提案を行います。 |
このように、TypeScriptはJavaScriptに対する安全な拡張機能を提供し、開発者がより効率的に、エラーの少ないコードを書くためのサポートをしてくれます。
TypeScriptの基礎
TypeScriptを使うと、変数や関数、さらにはクラスやインターフェースにまで型を指定することができます。これにより、コードがより読みやすく、エラーが減少します。ここでは、TypeScriptでの型の宣言方法と、基本的な演算子の使用例、そして関数、クラス、インターフェースの定義方法について見ていきます。
TypeScriptの基礎用語表
用語 | 説明 |
---|---|
型 | 変数や関数の内容をわかりやすく表すためのルール。例えると、箱に何を入れるのかを決めるようなもの。 |
コロン | 型宣言の際に、変数名と型名の間に記述する記号。 |
演算子 | 数値や文字列などの値に対して、計算や比較などの操作を行うための記号。 |
引数 | 関数に渡すデータ。 |
戻り値 | 関数から返されるデータ。 |
プロパティ | クラスのメンバー変数。 |
メソッド | クラスのメンバー関数。 |
インターフェース | オブジェクトが持つべき形を定義するためのもの。 |
2.1 変数、型、演算子
型の宣言方法
TypeScriptで変数を宣言する際には、変数名の後にコロン(:
)と型名を記述します。
let message: string = "Hello, TypeScript!"; // 文字列型の変数宣言
let total: number = 100; // 数値型の変数宣言
let isComplete: boolean = false; // 真偽値型の変数宣言
基本的な型
-
string
文字列を表す。
-
number
数値(整数及び浮動小数点)を表す。
-
boolean
真偽値(
true
またはfalse
)を表す。
演算子の使用例
TypeScriptではJavaScriptと同様に算術演算子や比較演算子、論理演算子を使用できます。
let message: string = "Hello, TypeScript!"; // 文字列型の変数宣言
let total: number = 100; // 数値型の変数宣言
let isComplete: boolean = false; // 真偽値型の変数宣言
2.2 関数、クラス、インターフェース
関数の型宣言
関数においては、引数と戻り値に型を指定できます。
function greet(name: string): string { // 引数と戻り値に型を指定
return "Hello, " + name + "!";
}
クラス
TypeScriptでクラスを定義する際には、プロパティやメソッドにも型を指定できます。
class Person {
name: string; // プロパティに型を指定
age: number; // プロパティに型を指定
constructor(name: string, age: number) { // コンストラクタで型を指定
this.name = name;
this.age = age;
}
greet(): string { // メソッドの戻り値に型を指定
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
}
インターフェース
インターフェースを使って、オブジェクトが持つべき形を定義できます。これはクラスに対しても、関数の引数に対しても使用できます。
interface IPerson {
name: string; // 必須のプロパティ
age: number; // 必須のプロパティ
greet(): string; // メソッドのシグネチャ
}
function introduce(person: IPerson): void { // インターフェースを使用して型を指定
console.log(person.greet());
}
const person: IPerson = { // インターフェースに沿ったオブジェクトを定義
name: "John",
age: 30,
greet() { // greetメソッドの実装
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
};
introduce(person); // インターフェース型のオブジェクトを関数に渡す
これらの基礎をマスターすることで、TypeScriptを使ったプログラミングの基本が身につきます。変数の型指定から始めて、徐々に関数やクラス、インターフェースの定義に慣れていくと良いでしょう。
TypeScript開発環境のセットアップ
おすすめのIDEとツール
-
Visual Studio Code (VS Code)
軽量で高速なエディタ。TypeScriptのサポートが組み込まれており、デバッグ機能、Git統合、シンタックスハイライト、インテリセンス(コード補完)、スニペットなどが利用可能。豊富な拡張機能でカスタマイズできる。 https://code.visualstudio.com/
-
WebStorm
JavaScript、TypeScriptに特化した強力なIDE。自動リファクタリング、コードナビゲーション、高度なコード解析機能を提供し、大規模なプロジェクトに適しています。 https://www.jetbrains.com/webstorm/
-
Atom, Sublime Text
拡張性に富んだテキストエディタ。プラグインをインストールすることでTypeScriptの開発環境を構築できる。軽量でカスタマイズ可能。 https://en.wikipedia.org/wiki/Atom https://www.sublimetext.com/
上記のIDE/ツールはそれぞれ異なる特徴を持つので、自分の開発スタイルやプロジェクト規模に合ったものを選ぶことが重要です。
-
初心者向け
VS Codeは比較的導入が簡単で、豊富な拡張機能によって使い勝手を向上できるため、初心者におすすめです。
-
大規模プロジェクト
WebStormは強力な機能が豊富に搭載されているため、大規模なプロジェクトや複雑なコードを扱う場合におすすめです。
-
カスタマイズ性
AtomやSublime Textは自由度の高いカスタマイズ性を持つため、自分の使いやすい環境を作りたい人におすすめです。
Node.jsとTypeScriptのインストール
Node.jsのインストール
Windows
-
Node.js公式ウェブサイトからダウンロード
-
ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを進めます。
macOS/Linux
ターミナルを開き、以下のコマンドを実行します。
brew install node
上記のコマンドは、macOSの場合です。Linuxの場合は、使用するディストリビューションに合わせてコマンドを適宜変更してください。
TypeScriptコンパイラ
Linux/macOS
ターミナルを開き、以下のコマンドを実行します。
sudo npm install -g typescript
sudo
コマンドは、管理者権限でコマンドを実行するものです。必要に応じてパスワードを入力してください。
Windows
コマンドプロンプトを開き、以下のコマンドを実行します。
npm install -g typescript
Windowsの場合、sudo
コマンドは不要です。
確認
Node.jsとTypeScriptコンパイラがインストールされていることを確認するには、以下のコマンドを実行します。
node -v
typescript -v
これらのコマンドを実行すると、それぞれNode.jsとTypeScriptコンパイラのバージョンが表示されます。
TypeScriptのコンパイル方法と設定
基本的なコンパイル方法
// hello.ts
function helloWorld() {
console.log("Hello, world!");
}
helloWorld();
上記はhello.ts
という名前のTypeScriptファイルです。このファイルをJavaScriptにコンパイルするには、以下のコマンドを実行します。
tsc hello.ts
このコマンドを実行すると、hello.js
という名前のJavaScriptファイルが生成されます。
// hello.js
function helloWorld() {
console.log("Hello, world!");
}
helloWorld();
生成されたJavaScriptファイルは、ブラウザやNode.jsで実行できます。
コンパイル時のオプション
上記のtsc hello.ts
コマンドは、デフォルトの設定でコンパイルを行います。コンパイル時にオプションを指定することで、出力ファイルの場所や形式などを変更できます。
オプション例
tsc hello.ts --outDir ./dist --target es5 --module commonjs
-
--outDir ./dist
コンパイル後のファイルを
./dist
ディレクトリに保存します。 -
--target es5
ES5形式のJavaScriptを生成します。
-
--module commonjs
CommonJSモジュールシステムを使用します。
tsconfig.jsonの設定
上記のように、コンパイル時に毎回オプションを指定するのは面倒です。そこで、tsconfig.json
という設定ファイルを使用して、コンパイルオプションをまとめて設定することができます。
設定例
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "./dist"
}
}
上記はtsconfig.json
ファイルの例です。target
、module
、outDir
などの設定項目があります。この設定により、TypeScriptコンパイラは指定されたオプションに従ってコンパイルを行います。
tsconfig.json
ファイルを作成したら、tsc
コマンドを実行するだけで、設定ファイルに基づいてコンパイルが行われます。
tsc
設定ファイルで指定したディレクトリにhello.jsファイルがコンパイルされていることが確認できます。
学んだことのまとめ
ここまでを通して、TypeScriptを使った開発の基礎を学びました。TypeScriptはJavaScriptに静的型付けの利点を加え、大規模プロジェクトでも生産性を維持できる言語です。以下にポイントをまとめます。
-
TypeScriptの概要
TypeScriptはJavaScriptのスーパーセットで、型付け、クラス、インターフェースなどの機能を追加しています。
-
推奨の開発環境
コード補完やデバッグ機能に優れたIDE(Visual Studio CodeやWebStormなど)を紹介しました。
-
環境設定
Node.jsのインストール方法と、TypeScriptコンパイラのインストール手順を解説しました。
-
コンパイル方法
基本的なコンパイルコマンド、オプション設定、プロジェクトレベルの設定方法を説明しました。
-
TypeScriptの基本
- 変数・型・演算子
- 関数・クラス・インターフェースの定義方法
この基礎を習得することで、安全で効率的なコーディングが可能になります。今後は、TypeScriptの高度な機能やフレームワーク(Angular、React)との連携なども学習すると良いでしょう。
参考資料
https://www.typescriptlang.org/docs/handbook/ https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
【番外編】USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話
プログラミング塾に半年通えば、一人前になれると思っているあなた。それ、勘違いですよ。「なぜ間違いなの?」「正しい勉強法とは何なの?」ITを学び始める全ての人に知って欲しい。そう思って書きました。是非読んでみてください。
「フリーランスエンジニア」
近年やっと世間に浸透した言葉だ。ひと昔まえ、終身雇用は当たり前で、大企業に就職することは一種のステータスだった。しかし、そんな時代も終わり「優秀な人材は転職する」ことが当たり前の時代となる。フリーランスエンジニアに高価値が付く現在、ネットを見ると「未経験でも年収400万以上」などと書いてある。これに釣られて、多くの人がフリーランスになろうとITの世界に入ってきている。私もその中の1人だ。数年前、USBも知らない状態からITの世界に没入し、そこから約2年間、毎日勉学を行なった。他人の何十倍も努力した。そして、企業研修やIT塾で数多くの受講生の指導経験も得た。そこで私は、伸びるエンジニアとそうでないエンジニアをたくさん見てきた。そして、稼げるエンジニア、稼げないエンジニアを見てきた。
「成功する人とそうでない人の違いは何か?」
私が出した答えは、「量産型エンジニアか否か」である。今のエンジニア市場には、量産型エンジニアが溢れている!!ここでの量産型エンジニアの定義は以下の通りである。
比較的簡単に学習可能なWebフレームワーク(WordPress, Rails)やPython等の知識はあるが、ITの基本概念を理解していないため、単調な作業しかこなすことができないエンジニアのこと。
多くの人がフリーランスエンジニアを目指す時代に中途半端な知識や技術力でこの世界に飛び込むと返って過酷な労働条件で働くことになる。そこで、エンジニアを目指すあなたがどう学習していくべきかを私の経験を交えて書こうと思った。続きはこちらから、、、、
エンベーダー編集部
エンベーダーは、ITスクールRareTECHのインフラ学習教材として誕生しました。 「遊びながらインフラエンジニアへ」をコンセプトに、インフラへの学習ハードルを下げるツールとして運営されています。
関連記事
2020.02.25
完全未経験からエンジニアを目指す爆速勉強法
USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話
- キャリア・学習法
- エンジニア
2024.04.14
エンジニアが副業をするにはどのくらいスキルが必要?
この記事では、「エンジニアやプログラマーが副業するのに必要なスキル」を紹介しています。
- キャリア・学習法
- エンジニア
2024.09.19
JavaScriptの基本、Fetch APIを理解しよう
この記事では、初めてFetch APIを使う方でも、使いこなせるようにわかりやすく解説していきます。この記事を通して、APIからデータを取得し、画面に表示する方法を学びます。基本を学び、JavaScriptの理解を深めていきましょう!
- JavaScript
- フロントエンド
2024.02.29
あなたは大丈夫?年収が上がらない量産型エンジニアの特徴
この記事では、「量産型エンジニアの特徴」を紹介しています。他にも「量産型エンジニアにならないためのポイント」も解説しているので、初学者の方や単価が上がらずに困っている方は、ぜひ参考にしてください。
- エンジニア