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

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

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

ゴール
  • React+TypeScriptの環境を作ることができる
  • Lintやコード整形用ライブラリを追加できる
  • React+TypeScriptの開発を始められる準備が整う
バージョン
  • node 14.0
  • yarn 1.22.4
  • create-react-app 3.3.0

準備

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

Node.jsの確認

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

$ node -v

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

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

yarnの確認

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

$ yarn -v

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

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

$ npm install -g yarn
メモ

npmやyarnはパッケージマネージャというもので、JavaScriptのライブラリを管理するものです。

npmはNode.jsをインストールすると使えるようになります。

yarnはnpmの上位互換的なポジションで、速かったり、依存関係を厳密に管理できたりします。(ただし、現在はそこまで差はないです。)

アプリケーションを作成

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

作成コマンドを実行

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

(sample-appはアプリ名です。ご自身の好きなアプリ名でOKです!)

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

Happy hacking! と出力されていれば完了です。

メモ

npxはインストールしなくてもライブラリを実行してくれるコマンドで、npm5.2.0から利用できます。

アプリを立ち上げる

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

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

$ cd sample-app

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

$ yarn start

http://localhost:3000 が立ち上がり、

こんな画面が表示されれば成功!

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

追加環境設定

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

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

  • ESLintを導入し構文チェック
  • Prettierを導入しコード整形
  • tsconfig.json(TypeScriptの設定ファイル)を修正し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"
}

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

メモ

ESLintもPrettierも設定ファイルによってルールを変更できるので、

現時点ではこの記事の記述をコピペし、時間があるときにいろいろ試してみてください!

tsconfig.jsonの設定

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

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

まとめ

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

参考になれば幸いです。

モグモグさん

不明点などがあれば、Twitterやコメントにて気軽に質問してね!

コメントを残す

メールアドレスが公開されることはありません。