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

はじめに

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

• TypeScript
• ESLint
• Prettier
• VScode拡張機能

TypeScriptの導入

TypeScriptとは

https://www.typescriptlang.org/

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

TypeScriptの特徴として、JavaScriptの機能がそのまま使える上で便利な機能が加わった言語である（スーパーセット、上位互換）ことが挙げられます。これによってJavaScriptの経験者は簡単にTypeScriptへ入門できます。

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

ESLintの導入

ESLintとは

ESLintは、JavaScriptの静的検証ツールです。ソースコードが定められたルールに沿って記述されているかをチェックしてくれます。

Prettierの導入

Prettierとは

Prettierは、コードの書式を整えてくれるコードフォーマッターです。指定したルールに沿ってソースコードを整形できます。

VSCode拡張機能の導入

VSCode拡張機能をインストールすると、エディタであるVSCodeから導入したツールを利用できるようになります。

まとめ

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