Learning React #1 セットアップ

これって王道なのかしら。よく見かける組み合わせなので、少しづつ勉強したいと思い、その軌跡をつづっていきます。

React + TypeScriptの環境セットアップ

私はWindows環境を想定した環境をセットアップします。

使用するツールのバージョン確認

今回は以下の環境で実施します。それぞれ説明すると、

• node : JavaScript実行環境
• npm : nodeのパッケージマネージャ（Node Package Managerの略）
• yarn : npmの改良版。nodeモジュールの追加/削除、モジュール間の依存関係の解消も自動化
• npx : nodeコマンド実行ツール。node上で実行するコマンドで必要となるパッケージをインストールしなくても実行できるようにするコマンド
• create-react-app : Reactアプリケーション用のプロジェクトフォルダーを自動生成するコマンド

バージョン確認

satom@W1007018N182 MINGW64 ~
$ node -v
v12.16.1

satom@W1007018N182 MINGW64 ~
$ npm -v
6.13.7

satom@W1007018N182 MINGW64 ~
$ yarn -v
1.22.4

satom@W1007018N182 MINGW64 ~
$ npx -v
6.13.7

satom@W1007018N182 MINGW64 ~
$ create-react-app -V
3.4.0

ちなみにyarnはFacebook社が開発したパッケージマネージャーで、npmよりも高速だそうです。

コーディングツール

今回はVS Codeを使用します。
以下からダウンロードします。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ダウンロードしたらインストールします。
インストール後、以下のプラグインをインストールすると、より快適な開発環境になると思います。
特に私はvimを愛用してきたので、vim用のプラグインも入れてます。

• Prettier : コード自動整形ツール
• ESList : コード解析ツール
• stylelint-plus : スタイルシート用Lint
• Visual Studio IntelliCode : AI支援によるAPIサジェストの精度向上
• Bracket　Pair Coloizer : 対応する括弧を色で表示
• Debugger for Chrome : VSCode上でブレークポイントや変数の監視が可能になる
• VSCodeVim : VS Code用のvimエミュレータ

以上、環境セットアップはここまで。