ピン留めされたアイテム

React環境導入

Vite＋React＋TypeScriptの環境を構築する。
Viteのコマンド１つで簡単に構築可能。

React+Viteで導入する

npmを利用

node.jsをインストール
- https://nodejs.jp/
npm create viteを実行→対話形式で設定する
- ProjectNameを任意の名前でつける
- Reactを選択
- TypeScriptを選択

参考記事

公式

https://ja.react.dev/learn
https://ja.vitejs.dev/guide/

React環境構築

What is npm?

Anri

ESLintとPrettierを導入する

VSCodeの拡張機能もあるが、基本はnpm installで導入し、コマンドから実行する。

ESLint, Prettierの目的

ESLint: 文法エラーを検知する。型や存在しないファイルなどのエラーを表示することで、記述の誤りに気づける。エラー・警告・無視の３通りでruleを設定できる。
Prettier: フォーマットの整形を行う。整形することで可読性をあげられる。チームで共通の設定にすることで開発上のフォーマットを統一できる。

ESLint, Prettierの導入

ESLintの導入

Viteで構築した場合、ESLintはすでに導入されている。
以下３点を確認し、ファイルが在ることとコマンド実行が成功すれば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

参考記事

公式

https://eslint.org/
https://prettier.io/

入門

その他：VSCode拡張機能を導入する

Auto Rename Tag：開始タグを編集後、閉じタグを自動変更
ES7+ React/Redux/React-Native：Reactのスニペットを使用可能
ESLint: JS,TSのコードエラー検出の他、フォーマット整形を行う
Prettier - Code formatter：コードの整形を行う

Anri

Storybookを導入する

npmで導入する

Storybookの目的

大きくは２つ

UIカタログとして作成したコンポーネントの表示を確認する。
- どのコンポーネントがどんな描画をされるか？を一覧で確認できる。
コンポーネントの簡易的な動作テストを行う。
- APIが未実装の場合でもデータを入れてテストを行える。

Storybookの導入方法

npm installでnpmパッケージをインストール
npm install storybookでstorybookをインストール
npx storybook initでstorybookの初期化設定
npx start storybookでstorybookを実行
localhost:6006に接続することでStorybookのページが表示される

参考記事

公式

導入方法

入門

https://reffect.co.jp/html/storybook

Anri

ChakraUIを導入する

ChakraUIの目的

UIコンポーネントライブラリとして活用する。「テキストエリアを作りたい」「アイコンのボタンを作りたい」など考えた時に、一から実装せずともChakra UIの提供するコンポーネントを呼び出すことで簡単に実装ができる。
基本的には公式のcomponentsを参照しながら実装すればOK。
- https://v2.chakra-ui.com/docs/components

ChakraUIの導入方法

以下コマンドを実行
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

参考記事

公式

入門本

入門記事

https://reffect.co.jp/react/chakra-ui

Anri

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