この講座はYouTubeで動画形式でも用意しています。合わせてご覧ください。

はじめに

前回は、Next.jsを使うメリットなどを学んだ後、さまざまな開発ツールが既に導入されているテンプレートを用いてプロジェクトを作成しました。今回は、次の開発ツールについて学びましょう。

TypeScript
ESLint
Prettier
VScode拡張機能

TypeScriptの導入

TypeScriptとは

https://www.typescriptlang.org/https://www.typescriptlang.org/

TypeScriptは、Microsoftがオープンソースで開発しているAltJSです。AltJSというのはJavaScriptを直接記述するよりも開発体験を上げることを目的に作られたJavaScriptの代替となる言語のことです。コンパイルによってJavaScriptに変換することによりブラウザで利用できるようになります。

TypeScriptの特徴として、JavaScriptの機能がそのまま使える上で便利な機能が加わった言語である（スーパーセット、上位互換）ことが挙げられます。これによってJavaScriptの経験者は簡単にTypeScriptへ入門できます。また、まだ主要ブラウザが対応していない段階のJavaScriptの先進的な機能を利用できるのも魅力です。

そして最も重要なのが、JavaScriptは実行時に変数の型が決定される動的型付け言語ですが、TypeScriptは、コンパイルの時点で型を決定する静的型付け言語です。この違いは実際にコードを見た方がわかりやすいのでこのあと紹介します。私たち開発者にとっては、型チェックによってブラウザで実行する前にバグを削減できるほか、エディタによる強力な補完機能を使うことができるといったメリットがあります。また、実装の把握のしやすさにもつながります。

JavaScriptとTypeScriptの違い

2つの数を和を求める関数をJavaScriptのアロー関数を用いると次のようになります。

const sum = (a, b) => a + b;

この関数は、引数 a と b に数値を取れば、その和の数値が返ってくるわけです。

const result = sum(1, 2);
console.log(result);        // 3

ところが、うっかり文字列の"a"なんかを渡してしまうと、意図しない結果になってしまいます。

const result = sum(1, "a");
console.log(result);        // "1a"

これは、先ほど当然のように「引数 a と b に数値を取れば、その和の数値が返ってくるわけです」と説明しましたが、この情報は一切コードの中には書かれていないため、コードを見て察するしかありません。しかし今回のようにうっかりしてしまうと意図しない結果になりますが、実際に実行してみないとこれに気付くことができません。

では、TypeScriptではどうでしょうか。

const sum = (a: number, b: number) => a + b;

引数に数値(number)という型を指定できます。これによって「引数 a と b は数値を取る」ということを表すことができます。

先ほどのように、うっかり文字列を渡してしまうとどうなるでしょうか。型の情報をもとに、エディタには赤線でエラーが表示されます。これによって事前にバグを潰すことができるようになります。

型エラー

さて、関数が数値を返すことを表すには次のように書きます。

const sum = (a: number, b: number): number => a + b;

ところが、TypeScriptには型推論という機能があるため、この記述は省略できます。aとbは共にnumberですから、返り値a + bはnumberであろうと推定してくれます。同様に、resultの型も型推論によってnumberとなっています。

型推論

TypeScriptを使う

実際にTypeScriptを用いるための準備を見ていきます。Next.jsでは最初からTypeScriptが使用できるため基本的に設定が不要ですが、開発を進めるうちにこれらの知識が必要になることもあるため確認しておきましょう。

tsconfig.jsonの設置

tsconfig.jsonは、TypeScriptのコンパイラの設定ファイルです。コードの形式やディレクトリなど、さまざまなコンパイル条件を指定します。

TypeScriptのインストール

当然ですが、TypeScript自体をインストールする必要があります。

型定義ファイルのインストール

ライブラリを使用する際には、そのライブラリの型情報が必要になります。ところが、JavaScriptで実装されたライブラリにはTypeScriptの型情報がないため、別途そのライブラリの型定義ファイルを追加することでTypeScriptの恩恵にあずかることができます。

ESLintの導入

ESLintとは

ESLintは、JavaScriptの静的検証ツールです。ソースコードが定められたルールに沿って記述されているかをチェックしてくれます。ESLintには標準で備わっている多くのルールに加え、プラグインによってコーディング規約に沿ったルールの導入や、他のツールとの連携をできます。

例えば、未使用の変数を禁止するルールによって、使用されていない変数を検出して警告を表示できます。

eslintの警告が表示される様子

ESLintを使う

今回は既にセットアップされたテンプレートを用いますが、ESLintの導入方法も学習しておきましょう。

ESLintは、対話形式でセットアップを行うことができます。プロジェクトのルートディレクトリで次のコマンドを入力します。

npx eslint --init

以下に設置例を示します（Node.js環境でTypeScriptを使う場合）

初回はNeed to install the following packagesと聞かれることがあります。Enterキーを押して続行しましょう。

How would you like to use ESLint?
- 2番目の To check syntax and find problems を選択すると良いでしょう。
- ここでは、コーディング規約に関するプラグインを導入できます。Airbnb、Google、JavaScript Standard Styleといった有名なスタイルに沿って開発する場合は、enforce code styleを含む選択肢を選ぶと良いでしょう。
What type pf modules does your project use?
- JavaScript modulesを選択すると良いでしょう。
Which framework does your project use?
- フレームワークを用いない場合はNone of theseを選択すると良いでしょう
Does your project use TypeScript?
- YesでTypeScriptに関するプラグインを導入できます。
Where does your code run?
- Nodeのみチェック
What format do you want your config file to be in?
- JavaScriptを選択

選択した結果によって、Would you like to install them now with npm?と聞かれるので"Yes"を選択して必要なライブラリを導入します。

これでESLintの初期化が完了し、利用できます。

Prettierの導入

Prettierとは

Prettierは、コードの書式を整えてくれるコードフォーマッターです。指定したルールに沿ってソースコードを整形できます。ESLintと組み合わせることで、ルールに沿っていない箇所に警告を出すといったことが可能になります。

Prettierを使う

ESLintと組み合わせて使う際には、ESLintとPrettierで競合する設定を無効化するためにeslint-config-prettierというプラグインを導入します。

VSCode拡張機能の導入

VSCode拡張機能とは

VSCode拡張機能をインストールすると、エディタであるVSCodeから導入したツールを利用できるようになります。具体的には、TypeScriptの型エラーや、ESLintによる解析結果をエディタ上に表示できます。

VSCode拡張機能を使う

基本的には拡張機能をインストールするだけで利用できます。拡張機能の設定ファイルをプロジェクトに含めておくと、チーム開発の際には設定をメンバー間で共有できて便利です。ワークスペース用の設定ファイルは.vscodeフォルダ内に保存されます。

まとめ

React × Next.jsの開発を便利にする開発ツールを紹介しました。次回はReactの基礎について学習します。

React × Next.js 実践開発入門 #2 開発ツールを導入しよう(TypeScript、ESLint、Prettier、VScode拡張機能)