この記事の要点
- TypeScriptはJavaScriptの上位互換言語
- フロントエンド開発だけでなく、バックエンドやアプリ開発など幅広い開発が可能
- TypeScriptは静的型付けで、実行前にコンパイルが必要
TypeScriptは、JavaScriptの上位互換として近年注目を集める静的型付けのプログラミング言語です。
以前、TypeScriptの特徴や、JavaScriptとの比較についてご紹介していました。
フロントエンド開発だけでなくバックエンド、アプリケーション開発など、さまざまな開発現場で起用されています。
この記事では、「TypeScript入門」と題して、基本的な特徴と環境構築の方法、さらに簡単なWebアプリケーション作成について解説します。
目次
TypeScriptとは？
TypeScriptとは、Microsoftによって開発されたオープンソースのプログラミング言語です。
HTML/CSSとともに使われるJavaScriptを拡張し、フロントエンドのみならずバックエンドやアプリケーションなど幅広く使用することができます。
TypeScriptの特徴
TypeScriptの大きな特徴は、名称に「Type」と付いていることからもわかるように、「型」定義を明確にしている点です。
型とは、プログラミング言語でいうところの数値型（int/float/doubleなど）、文字列型（stringなど）のことを指します。
JavaScriptで変数の宣言を行うとき、型の指定をする必要がありませんが、TypeScriptで変数を宣言する際には、必ず型の指定を行います。
TypeScriptでできること
TypeScriptを使用すれば、さまざまなことができます。以下にできることの一例を示します。
- フロントエンド開発
- バックエンド開発
- デスクトップアプリケーション開発
- CLIアプリ
- ブラウザの拡張
TypeScriptで作られているサービス
TypeScriptは、MicrosoftやGoogleの標準開発言語に指定されているため、海外での導入事例は数多く確認できます。
国内企業でも近年TypeScriptによる開発が増えており、以下のサービスはTypeScriptで作られています。
- ビズリーチ
- ベネッセiキャリア
- はてなブログ
- グノシー
- BASE
JavaScriptとの違いについて
TypeScriptは、JavaScriptの上位互換言語です。
では、JavaScriptとTypeScriptの違いはどこにあるのでしょうか。簡単に見ていきましょう。
プログラミング言語の型付け
プログラミング言語は、型付けによって2種類に分類することができます。
- 動的型付け
- 静的型付け
これらの片付けは、型の決定するタイミングのことを指します。
動的型付け言語は、プログラムを実行したときに型が決定します。
JavaScriptは動的型付け言語です。ほかに、RubyやPython、PHPなどがこれに該当します。
静的型付け言語は、コンパイル時に型が決定するものです。
TypeScriptは静的型付け言語に当たります。ほかにはC言語やC++、C#、Javaなど、コンパイルしてから実行するプログラミング言語が該当します。
環境構築手順
TypeScriptの環境構築の手順についてご紹介します。
Node.jsをインストールする
Typescriptコンパイラはさまざまな方法でのインストールが可能ですが、初心者向けなのはNode.jsに同梱されているnpmコマンドを使用する方法です。
そのため、まずNode.jsをインストールすることから始めます。
※Node.jsとは
Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。
Node.js公式サイトよりインストーラーをダウンロードします。
インストーラーには「LTS（推奨版）」と「最新版」の2種類があります。
LTSとは「Long Term Support」を指し、長期サポートが約束されていることを意味します。
「最新版」には最新機能が含まれますが、同時に不具合も多いため、慣れていない間はLTSを選択したほうがよいでしょう。
インストールしてバージョン確認を行う
環境に応じたインストーラーを実行して、インストールをします。
インストールが完了したら、「Node.js command prompt」を立ち上げ、Node.jsのバージョンを確認します。
コマンドプロンプト：
$node -v
または
コマンドプロンプト：
$node --version
Node.jsのバージョンが表示されれば、TypeScriptの実行環境が整ったことになります。
Typescriptコンパイラをインストールする
引き続き、TypeScriptコンパイラをインストールしていきます。
コマンドプロンプト：
$npm install -g typescript
このコマンドは、Node.jsに同梱されている「npm」（Node Package Manager）と呼ばれるパッケージ管理ツールを利用して、TypeScriptをインストールするよう命令するものです。
Typescriptのバージョンを確認する
TypeScriptのバージョンを確認してみます。以下のコマンドを入力してください。
コマンドプロンプト：
$tsc -v
「tsc」コマンドがTypeScriptのコマンドになります。バージョンが表示されたらOKです。
簡単なWEBアプリケーション開発
では実際に、TypeScriptで簡単なWEBアプリケーションを作ってみましょう。
WebpackというJavaScript用ビルドツールを導入し、文字をWebブラウザ上に表示する仕組みを作ります。
まずは開発環境づくりから。
任意の場所にテスト用のプロジェクトフォルダを作成します。今回は例としてフォルダ名「test」で進めます。
WEBアプリケーションの概要
最終的に以下のようなプロジェクト構成になります。
順番に説明しますので、そのまま読み進めてください。
[test]
├─[dist]
│ └─index.html
├─[src]
│ ├─app.ts
│ └─language.ts
├─[node_modules]
│ └─各種パッケージ
│
├─package.json
├─package-lock.json
├─tsconfig.json
└─webpack.config.js
STEP1:環境構築
WEBアプリケーションが動作するための環境を構築します。
プロジェクトフォルダと「package.json」を作成する
以下のコマンドを実行し、プロジェクトフォルダ「test」を作成、併せて「package.json」という設定ファイルを作成します。
コマンドプロンプト：
$mkdir test $cd test $npm init --y
testの下に「package.json」が作成できればOKです。
ツールをインストールする
Webpackなどの必要なツールをインストールします。以下のコマンドを実行してください。
コマンドプロンプト：
$npm install typescript ts-loader webpack webpack-cli webpack-dev-server --save-dev
ここでは、TypeScriptコンパイラ、TypeScript用ローダー、webpack（JavaScript用ビルドツール）、サーバ機能をまとめてインストールしています。
testフォルダの下に「node_modules」フォルダおよび「package-lock.json」が作成されたらOKです。
なお、「package-lock.json」は今回特に使わないので無視してください。
設定ファイル「package.json」に追記する
設定ファイル「package.json」には、「scripts」プロパティに「build」と「start」の2行を追記します。
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=development",
"start": "webpack serve --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@webpack-cli/generators": "^2.5.0",
"ts-loader": "^9.4.1",
"typescript": "^4.8.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}
「build」には、"npm run build"コマンドによってwebpackのビルド処理ができるようにしています。
また「start」には、"npm start"コマンドによってwebpack-dev-serverを起動するように設定しているのです。
設定ファイル「webpack.config.js」を作成する
webpackで実際に稼働するディレクトリ構成などの設定を行います。
初心者は解読が難しいので、とりあえずコピペしてファイルを作成しておくとよいでしょう。
webpack.config.js
const path = require('path');
module.exports = {
// 指定できる値は、ファイル名の文字列や、それを並べた配列やオブジェクト
// 下記はオブジェクトとして指定した例
entry: {
bundle: './src/app.ts'
},
output: {
// "__dirname"はこのファイルが存在するディレクトリを表す node.js で定義済みの定数
path: path.join(__dirname,'dist'),
filename: '[name].js' // [name]はentryで記述した名前(この例ではbundle）が入る
},
// 例えば「 import Foo from './foo' 」と記述すると "foo.ts" という名前のファイルをモジュールとして探す
// デフォルトは['.js', '.json']
resolve: {
extensions:['.ts', '.js']
},
devServer: {
static: path.join(__dirname, 'dist')
},
module: {
rules: [
{
// 拡張子が .ts で終わるファイルに対して TypeScript コンパイラを適用する
test:/\.ts$/,loader: 'ts-loader'
}
]
}
}
「webpack.config.js」の記述方法を知りたい人は、webpack公式ドキュメントを参照してください。
コマンドでTypeScriptコンパイラ用設定ファイルを生成する
TypeScriptをコンパイルするための設定ファイルを、コマンドから生成します。
このファイルには、TypeScriptのファイルをJavaScriptのファイルに変換するための設定が書かれています。
コマンドプロンプト
$tsc --init
testフォルダの下に「tsconfig.json」が作成されたらOKです。
STEP2:プログラムの作成
環境構築が出来たところで、実際のTypeScriptプログラムを作成します。
フォルダを作成する
testフォルダの配下に「dist」「src」のフォルダを作成します。
コマンドプロンプト
$mkdir dist,src
distフォルダにHTMLを作成する
次に、HTMLファイルを作成します。今回は「index.html」の名称で進めます。
dist\index.html
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset="utf-8">
<title>TypeScript Sample Program</title>
</head>
<body>
<div id="output"></div>
<script src="bundle.js"></script>
</body>
</html>
プログラム内に書かれている「bundle.js」が、webpackによりビルドされたJavaScriptプログラムです。
TypeScriptファイルを作成する
TypeScriptのプログラムを作成していきます。
「プログラミング言語」のクラスオブジェクトを作成し、それをもとにさまざまな言語を画面出力するプログラムです。
src\language.ts
export class Language {
constructor(
private rank: number,
private name: string,
private latestVersion: string
){}
public write(elem : HTMLElement | null) : void {
// 引数がnullでない場合のみ処理を行う
if (elem){
elem.innerHTML +=
'順位：' + this.rank
+ '/言語名:' + this.name
+ '/最新バージョン: ' + this.latestVersion
+ '<br>';
}
}
}
「Language」クラスには引数として数値型の「rank」、文字列型の「name」「latestVersion」が渡されます。
また、同クラスはwriteメソッドを持ち、引数をHTMLElementとして画面出力します。
srs\apps.ts
import {Language} from './language';
let elem = document.getElementById('output');
let aLanguage = new Language(1, 'JavaScript','ECMAScript 2022');
aLanguage.write(elem);
let bLanguage = new Language(2, 'Python','Python 3.8.5');
bLanguage.write(elem);
let cLanguage = new Language(3, 'Java','Java18');
cLanguage.write(elem);
実行ファイル「apps.ts」は、実際に表示する値をLanguageクラスに渡します。
STEP3:プログラム実行
すべての準備が整ったので、プログラムを実行していきます。
Webpackサーバを起動する
以下のコマンドを実行すると、webpack-dev-serverという実行環境が起動します。
コマンドプロンプト
$npm start
startコマンドは、TypeScriptファイルをコンパイルしてからサーバ起動を行います。
今回の設定では、プログラムを修正した際に再コンパイル・自動リロードまで行うようにしています。
プログラムに何らかの不具合がある場合、このタイミングでコマンドライン上にエラーが表示されます。
必要に応じてプログラムを修正し、保存し直しましょう。
「successfully」の文字が表示されていれば、サーバは問題なく起動しています。
画面で確認する
Chromeなどのブラウザで以下のURLにアクセスしてください。
http://localhost:8080
プログラム言語トレンド1位から3位が表示されていれば成功です。
おすすめの学習方法
TypeScriptを独学で学習する方法についてご紹介します。
おすすめの動画教材
TypeScriptはWebサイトやテキストでも学習できますが、特におススメなのは動画教材です。
視覚的に分かりやすく解説されるため、あまり立ち止まることなく学習を進めることができます。
Udemyのおすすめ講座
Udemy（ユーデミー）は、「学びたい人、教えたい人のためのオンラインのマーケットプレイス」（公式サイトより）です。
204000以上あるコースのなかから、興味のあるものを選んで受講することができます。
「【世界で7万人が受講】Understanding TypeScript 日本語版」
TypeScriptの基本から応用までを包括的に学べるコースです。
WebpackやReact、ExpressとNode.jsの組合せなど、実際の開発現場でも役立つ実践的な知識を習得できます。
「超TypeScript入門 完全パック」
「入門」と言いながら、基礎だけでなく実践的な応用知識までが詰め込まれたコースです。
ジェネリクス、デコレーター、モジュール、Webpack、React、Node.jsを使った開発なども解説されています。
Youtubeのおすすめ動画
完全無料で動画学習を進めるなら、Youtubeを利用しましょう。
「本格的に学習する前に、どんな感じか知りたい」という人にもおすすめです。
「【Typescript入門】本当の初心者からTypescript×Webpackの開発環境構築までをハンズオン形式で学ぼう！」
初心者が躓きやすい環境構築までを解説している動画です。
説明が分かりやすく、学習を無理なく進められます。
「日本一わかりやすいTypeScript入門【基礎編】」
TypeScriptの入門的な内容を細かく解説している動画リストです。
無料ながら50分のボリュームある内容が含まれ、型や関数、オブジェクト指向などの内容も丁寧に解説されています。
おすすめの書籍
動画教材と合わせて、書籍をベースに学習することで応用力が身に付きます。
おすすめの書籍を３つご紹介しましょう。
「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」
実際の開発現場でよく利用されているReact/Next.jsとTypeScriptを用いて、Webアプリケーションを開発するための入門書です。
モダンなWebフロントエンドに関心がある人やReact/Next.jsを本番に導入したい人などにおすすめです。
「プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで (Software Design plus)」
TypeScriptの基礎知識がしっかり学べる一冊。
言語の根幹であるJavaScriptの仕様や機能はもちろん、TypeScript独自の仕様や機能についても詳細に解説しています。
「プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発」
TypeScriptの基礎から応用までがまとめられています。
エラー処理の手法や非同期プログラミングのほか、各種フレームワークの利用法、既存のJavaScriptプロジェクトのTypeScript移行の方法など、TypeScriptを総合的に学習することができます。
まとめ
TypeScriptは、次世代のIT社会を担うコンパクトかつ万能なプログラミング言語です。
これからITエンジニアを目指す人、あるいはITエンジニアとして新たなスキルを求めている人は、ぜひTypeScriptを学習しましょう。
基本的な仕組みを理解したら、フレームワークなどを活用した学習もおすすめです。
また、動画での学習は映像で学べるので初心者におすすめな学習法の1つなので、他の記事でもおすすめな学習動画をご紹介しています。
こちらの記事はJavaScriptのおすすめ動画ですので、参考にしてください。
