TypeScriptとエコシステム

TypeScriptを学習するとき、TypeScriptそのものを理解することは不可欠です。しかし、それだけでは実務上不十分なことが多いです。実際の現場では、TypeScriptに数多くの技術スタックを組み合わせて、開発を行うからです。そのため、TypeScriptを知ると同時に、TypeScriptをとりまくエコシステムを知ることが重要になってきます。

前項のTypeScript誕生の背景が歴史学だとすると、本項は地理学です。フロントエンドの技術スタックを中心に、TypeScriptとの関わりや、各技術の役割について俯瞰的に学びます。

言語

JavaScriptの仕様を定義したのがECMAScriptです。ECMAScriptはJavaScriptのコア部分の仕様を扱います。ブラウザ関連のJavaScript仕様を定めるのがWHATWGです。また、XMLの構文をJavaScriptに書けるJSXという言語もあります。TypeScriptは、JavaScriptを拡張した言語です。JSXも取り込んでいます。したがって、TypeScriptの仕様には、ECMAScript由来のもの、WHATWG由来のもの、JSX、そして、TypeScript固有仕様が含まれることになります。

📄️ ECMAScript

ECMAScriptはJavaScriptの仕様です。TypeScriptもECMAScriptに準拠しています。ECMAScriptとは何なのか、仕様改定のプロセス、ECMAScriptとブラウザの関係がどのようになっているかについて解説します。

ライブラリ

UIライブラリ

HTML、CSS、JavaScriptを使えば、UIを持ったウェブアプリケーションを作ることができます。しかし、複雑なUIは素のJavaScriptだけで作るのは工数が大きくなりがちです。JavaScriptには、UIを作りやすくするライブラリが多くあります。その中でも特に人気なのが、React、Vue、Angular、Svelteです。UIライブラリを使うと、素のJavaScriptで書くよりも、少ないコード量で実装できたり、保守性の高いコードで書けたりとメリットがあります。

📄️ Reactでいいねボタンを作ろう

このチュートリアルでは、TypeScriptとReactの両方を用いて、SNSでよく見かける「いいねボタン」のUIを実装します。

フロントエンドフレームワーク

ウェブアプリケーション開発には多種多様な要件があるものの、どんなアプリケーションでも共通した要件、ファイル構成などある程度型にはめられるパターンがあります。フロントエンドフレームワークは、ウェブアプリケーション開発で、よくありがちな機能を車輪の再発明をすることなく開発に臨めるよう、ウェブアプリケーションの土台となるものです。

フロントエンドフレームワークには、よく使われるものとして、Next.js、Nuxt、Gatsbyなどがあります。これらを使うと、シングルページアプリケーション(SPA)や静的サイト生成、サーバーサイドレンダリングなど、フロントエンドで必要とされる機能基盤を自分で実装しなくてもよくなります。

📄️ Next.jsで猫画像ジェネレーターを作ろう

Next.jsの概要

型定義ファイル

TypeScriptは型をチェックすることで、プログラムの不具合がチェックできます。しかし、JavaScriptだけで作られたライブラリには、TypeScriptコンパイラーがチェックの材料にする型情報がついていません。

JavaScript純正のライブラリに型情報を持たせる機能として、TypeScriptには型定義ファイルというものがあります。型定義ファイルは、ライブラリの型情報を記したファイルです。

JavaScript純正のライブラリを使いたいときは、ライブラリとは別途、型定義ファイルを入手すると、JavaScriptのライブラリであっても、TypeScriptで型チェックができるようになります。型定義ファイルの多くは、DefinitelyTypedというプロジェクトが公開しています。

実行環境

JavaScriptの実行環境は大きく分けて、ブラウザとサーバーの2種類があります。ブラウザは画面描画を行うコンポーネントとして、レンダリングエンジンを持ちます。レンダリングエンジンには、BlinkやWebkit、Geckoなどがあります。

さらに、レンダリングエンジンの内部にJavaScriptエンジンがあります。JavaScriptコードはこのエンジンで評価され実行されます。JavaScriptエンジンには、V8、SpiderMonkey、JavaScriptCoreがあります。

サーバーの実行環境にはNodeやDenoがあります。Nodeは、もっとも有名なJavaScript実行環境です。Denoは、TypeScriptがそのまま実行できることで近年注目を集める実行環境です。サーバー実行環境にはブラウザと異なりレンダリングエンジンがありませんが、JavaScriptエンジンはブラウザと共通のものを持ちます。

📄️ ECMAScript

ECMAScriptはJavaScriptの仕様です。TypeScriptもECMAScriptに準拠しています。ECMAScriptとは何なのか、仕様改定のプロセス、ECMAScriptとブラウザの関係がどのようになっているかについて解説します。

開発ツール

パッケージマネージャー

パッケージマネージャーは、JavaScriptのライブラリを管理するツールです。パッケージマネージャーを使うことで、JavaScriptのライブラリをインストールしたり、アップデートしたりできます。また、ライブラリ同士の依存関係の管理も行ってくれます。パッケージマネージャのうち、npmとYarnが広く使われています。npmは、Node package managerの略ですが、サーバーサイドJavaScriptのライブラリだけでなく、フロントエンド向けのライブラリも数多く取り扱います。

npmやYarnでインストールされるライブラリは、npmjs.comにホスティングされています。npmjs.comは中央集権型のレジストリです。

モジュールバンドラー

モジュールバンドラー(module bundler)は、複数のJavaScriptファイルをひとつのファイルに結合するためのツールです。複数のJavaScriptファイルに依存関係がある場合、それをそのままブラウザに読み込ませるには、慎重に読み込み順を指定しないと、アプリケーションが壊れてしまいます。このようなトラブルは、モジュールバンドラーを使うと回避できます。

また、フロントエンドでは、JavaScriptアプリケーションをブラウザにダウンロードさせる必要があります。数多くのファイルからなるアプリケーションは、モジュールバンドラーで1ファイルのほうが効率的にダウンロードできます。

モジュールバンドラーを使うと、CommonJSを採用しているサーバーサイド向けに作られたライブラリをブラウザで使えるといったメリットもあります。

タスクランナー

タスクランナー(task runner)は、ビルドなどの開発上の手続きを自動化するツールです。複数のビルドタスクを束ねたり、実行の順番を調整することができます。タスクランナーを使うと、複雑なビルドワークフローをコマンドひとつで実行できるようになります。

トランスパイラー

トランスパイラー(transpiler)は、あるプログラミング言語でかかれたコードを、別の言語に変換するツールです。トランスパイラーはコンパイラーの一種です。JavaScriptでは、新しいバージョンのJavaScriptから古いバージョンのJavaScriptに変換するトランスパイラーがあります。Babelやswcがこれにあたります。TypeScriptのtsc(TypeScript compiler)もトランスパイラーです。tscはTypeScriptからJavaScriptへの変換を行います。

コードフォーマッター

コードフォーマッター(code formatter)は、ソースコードのインデントや字下げスタイルを自動で整えてくれるツールです。コードフォーマッターを使うと、誰が書いても同じ見た目のコードに整形できます。よく使われるのが、Prettier(プリティア)です。

📄️ Prettierでコード整形を自動化しよう

このチュートリアルでは、コードフォーマッターの「Prettier」を使いTypeScriptのコードフォーマットを自動化することを学びます。

リンター

リンター(linter)は、コードがコーディング規約に準拠しているかをチェックするツールです。コーディング規約に沿ったコードを書くことは、保守性を高めることに繋がります。しかし、コードがコーディング規約に準拠しているかを手動でチェックするのは、大変な作業です。リンターを使うと、チェックを自動的に行えるので、開発者の生産性の向上が期待できます。リンターでよく使われるツールはESLint(イーエスリント)です。

📄️ ESLintでコーディング規約を自動化しよう

本章では、ESLintイーエスリントを使って、TypeScriptをチェックするためのノウハウをチュートリアル形式で学びます。

Gitフック

Gitフックは、Gitにコミットするタイミングや、プッシュするタイミングに、何らかのプログラムを実行する機能です。JavaScriptの開発現場では、Gitコミット時にTypeScriptのコンパイルで型チェックをしたり、リンターのチェックを起動したり、コードフォーマッターでコード整形をかけることがよくあります。Gitフックを手軽に利用できるようにするツールとして、huskyやlint-stagedがあります。

📄️ 🚧huskyでコミット前チェックを自動化しよう

執筆中