【入門】create-react-appでReactとTypeScript環境を構築

create-react-appを使って、ReactとTypeScript環境の作り方を解説します。

create-react-appは、バージョン2.0.1からコマンド1つでTypeScript環境を作れるようになったのでそれを使っていきます。

準備

まずはローカル環境の準備を行っていきます。

Node.jsの確認

ターミナルでコマンドを入力しNode.jsがインストールされているか確認

$ node -v

バージョンが出力された場合は、インストールされているので次にいきましょう！

バージョンが出力されていない場合は、公式サイトを参考にインストールをしましょう。

yarnの確認

ターミナルでコマンドを入力しyarnがインストールされているか確認

$ yarn -v

バージョンが出力された場合は、インストールされているので完了です！

バージョンが出力されていない場合は、下記コマンドでインストールします。

$ npm install -g yarn

アプリケーションを作成

準備が完了したので、アプリケーションを作っていきましょう！

作成コマンドを実行

下記コマンドを実行することで作成できます。

(sample-appはアプリ名です。ご自身の好きなアプリ名でOKです！ただ大文字が含まれていると怒られます。)

$ npx create-react-app sample-app --template typescript

諸々出力された後に、Happy hacking! と出力されていれば完了です。

アプリを立ち上げる

アプリを立ち上げてみましょう。

作成したアプリのディレクトリに移動

$ cd sample-app

立ち上げる(ビルド)コマンドを実行

$ yarn start

これで、ReactとTypeScriptの環境構築は完了です！

追加環境設定

ここまでで、React+TypeScriptの環境は構築できました。

ここからは、より良い開発環境を構築していくために下記を実行していきます！

ESLint導入

ESLintは構文チェックのためのライブラリです。

ライブラリをインストール

$ yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc.jsを作成

module.exports = {
  "plugins": ["prettier"],
  "extends": ["react-app", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
};

ESLintの設定ファイルのドキュメントはこちらです。

Prettier導入

Prettierは、コード整形のためのライブラリです。

ライブラリをインストール

$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

.prettierrcを作成

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "arrowParens": "always"
}

設定のドキュメントはこちらです。

tsconfig.jsonの設定

create-react-appをした時点で、tsconfig.jsonというTypeScriptの設定ファイルが生成されていると思います。

設定のドキュメントはこちらになりますので、こちらも時間があるときにいろいろ設定を触ってみてください！

まとめ

create-react-appでReactとTypeScriptの環境を構築する手順を解説しました。

参考になれば幸いです。