Open5
React環境・他関連する環境の導入まとめ
ピン留めされたアイテム
![Anri](https://res.cloudinary.com/zenn/image/fetch/s--lzpnR_LW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/8d379ba00e.jpeg)
React環境導入
Vite+React+TypeScriptの環境を構築する。
Viteのコマンド1つで簡単に構築可能。
React+Viteで導入する
npmを利用
- node.jsをインストール
-
npm create vite
を実行→対話形式で設定する- ProjectNameを任意の名前でつける
- Reactを選択
- TypeScriptを選択
参考記事
公式
React環境構築
What is npm?
![Anri](https://res.cloudinary.com/zenn/image/fetch/s--lzpnR_LW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/8d379ba00e.jpeg)
ESLintとPrettierを導入する
VSCodeの拡張機能もあるが、基本はnpm install
で導入し、コマンドから実行する。
ESLint, Prettierの目的
- ESLint: 文法エラーを検知する。型や存在しないファイルなどのエラーを表示することで、記述の誤りに気づける。エラー・警告・無視の3通りでruleを設定できる。
- Prettier: フォーマットの整形を行う。整形することで可読性をあげられる。チームで共通の設定にすることで開発上のフォーマットを統一できる。
ESLint, Prettierの導入
ESLintの導入
Viteで構築した場合、ESLintはすでに導入されている。
以下3点を確認し、ファイルが在ることとコマンド実行が成功すればOK。
- package.jsonの
devDependencies
に"eslint": "^8.57.0",
(バージョンは任意)の記載がある -
.eslintrc.cjs
(eslintの設定ファイル)がある - 実行コマンド:
npm run lint
ない場合は以下記事を参考に導入するとよい。
Prettierの導入
デフォルトでは入っていない。設定ファイルは自作が必要。
以下記事を参考に導入していく。
VSCodeでPrettierを実行したい場合は、以下記事を参考に設定する。
- 実行コマンド:
-
npm run prettier
(package.json設定時) prettier . --write
-
- ※MacOSなど、直接
prettier
コマンドを実行できない場合はパスを通す。export PATH=$PATH:./node_modules/.bin
ESLint, Prettierの設定
ESLint rules設定
公式:https://eslint.org/docs/latest/rules/semi
ESLint セミコロン検知設定:https://gist.github.com/sigwyg/65b6733a72f317af72feca855fbb1343
Prettier ignores設定
公式:https://prettier.io/docs/en/ignore.html
参考記事
公式
入門
その他:VSCode拡張機能を導入する
- Auto Rename Tag:開始タグを編集後、閉じタグを自動変更
- ES7+ React/Redux/React-Native:Reactのスニペットを使用可能
- ESLint: JS,TSのコードエラー検出の他、フォーマット整形を行う
- Prettier - Code formatter:コードの整形を行う
![Anri](https://res.cloudinary.com/zenn/image/fetch/s--lzpnR_LW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/8d379ba00e.jpeg)
Storybookを導入する
npmで導入する
Storybookの目的
大きくは2つ
- UIカタログとして作成したコンポーネントの表示を確認する。
- どのコンポーネントがどんな描画をされるか?を一覧で確認できる。
- コンポーネントの簡易的な動作テストを行う。
- APIが未実装の場合でもデータを入れてテストを行える。
Storybookの導入方法
-
npm install
でnpmパッケージをインストール -
npm install storybook
でstorybookをインストール -
npx storybook init
でstorybookの初期化設定 -
npx start storybook
でstorybookを実行 -
localhost:6006
に接続することでStorybookのページが表示される
参考記事
公式
導入方法
入門
![Anri](https://res.cloudinary.com/zenn/image/fetch/s--lzpnR_LW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/8d379ba00e.jpeg)
ChakraUIを導入する
ChakraUIの目的
- UIコンポーネントライブラリとして活用する。「テキストエリアを作りたい」「アイコンのボタンを作りたい」など考えた時に、一から実装せずともChakra UIの提供するコンポーネントを呼び出すことで簡単に実装ができる。
- 基本的には公式のcomponentsを参照しながら実装すればOK。
ChakraUIの導入方法
以下コマンドを実行
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
参考記事
公式
入門本
入門記事
![Anri](https://res.cloudinary.com/zenn/image/fetch/s--lzpnR_LW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/8d379ba00e.jpeg)
Jestを導入する
(単体テストについて調べる過程で、別スクラップへ切り出すかも)
Jestの目的
- JavaScript向けの単体テストを行う
Jest導入方法
Jestをインストールする
npm install --dev jest @types/jest ts-jest
-
npm create jest@latest
- override: yes
- use TypeScript : yes
- Choose thet test envioronment: node
- to add coverage reports: yes
- Which provider should be used: babel
- Automatically clear: yes
参考記事
公式
入門