自分用メモ。
Reactプロジェクトのお手本で有名な bulletproof-react の、package.jsonで指定されているライブラリの説明を全部まとめてみた。
dependencies
| ライブラリ名 | 説明 |
|---|---|
| @craco/craco | Create React App の設定をカスタマイズするためのツール |
| @headlessui/react | アクセシビリティに優れた UI コンポーネントを提供するためのライブラリ |
| @heroicons/react | Heroicons SVG アイコンの React コンポーネントを提供するライブラリ |
| @hookform/resolvers | React Hook Form のバリデーション用のライブラリ |
| @tailwindcss/typography | Tailwind CSS のテキストスタイルに適用できるテキストスタイルを追加するライブラリ |
| @testing-library/jest-dom | Jest と一緒に使用するための DOM のアサーションユーティリティ |
| @testing-library/react | React のテストを容易にするためのユーティリティ |
| @testing-library/user-event | ユーザーアクションをシミュレートするためのユーティリティ |
| @types/jest | Jest の TypeScript 定義ファイル |
| @types/node | Node.js の TypeScript 定義ファイル |
| @types/react | React の TypeScript 定義ファイル |
| @types/react-dom | React DOM の TypeScript 定義ファイル |
| axios | HTTP クライアントライブラリ |
| clsx | CSS クラス名を動的に生成するためのユーティリティライブラリ |
| dayjs | 日付処理用ライブラリ |
| dompurify | セキュリティ上の問題を回避するための HTML エスケープツール |
| history | ブラウザ履歴を操作するためのライブラリ |
| intersection-observer | IntersectionObserver API を使用して要素がビューポート内に表示されたかどうかを検出するためのライブラリ |
| jsonwebtoken | JSON Web トークンを生成し、検証するためのライブラリ |
| lodash | 汎用ユーティリティ関数のコレクション |
| marked | Markdown を HTML に変換するためのライブラリ |
| nanoid | URL 安全なランダムな文字列を生成するためのライブラリ |
| react | React ライブラリ |
| react-dom | React の仮想 DOM の実装。Web ブラウザ上で React コンポーネントを表示するために必要 |
| react-error-boundary | React コンポーネント内でエラーが発生した場合にエラーをキャッチして、エラーが発生したコンポーネントを置き換えるためのコンポーネントを提供するライブラリ |
| react-helmet-async | React アプリケーションの head 要素を動的に変更するためのライブラリ |
| react-hook-form | React アプリケーションでフォームを簡単に扱うためのライブラリ |
| react-query | React アプリケーションでデータ取得のためのライブラリ。キャッシュや再試行、並列リクエストなどがサポートされている |
| react-query-auth | react-query を用いた認証機能を簡単に追加するためのライブラリ |
| react-router-dom | React アプリケーションでルーティングを扱うためのライブラリ |
| react-scripts | Create React App によって生成されたプロジェクトをビルド、開発するためのスクリプト |
| type-fest | TypeScript のための型定義を提供するライブラリ |
| typescript | TypeScript のコンパイラ。TypeScript で書かれたコードを JavaScript コードに変換するために必要 |
| web-vitals | Google が提供する Web ページのパフォーマンス指標を計測するためのライブラリ |
| zod | TypeScript で安全にバリデーションを行うためのライブラリ |
| zustand | React アプリケーションで状態管理を行うためのライブラリ。Redux よりもシンプルな API を提供している |
devDependencies
| ライブラリ名 | 説明 |
|---|---|
| @mswjs/data | モックサーバーを作成するためのライブラリ |
| @storybook/addon-actions | Storybookで、UIコンポーネントの操作をログに出力するアドオン |
| @storybook/addon-essentials | Storybookで、Storybookの開発を助ける便利なアドオンをまとめたパッケージ |
| @storybook/addon-links | Storybookで、異なるStorybook間のリンクを作成するアドオン |
| @storybook/node-logger | Storybookで、コンソールにログを出力するためのライブラリ |
| @storybook/preset-create-react-app | Storybookで、Create React Appで作成したアプリケーションをStorybookで表示するためのプリセット |
| @storybook/react | React用のStorybook。ReactアプリケーションのUIコンポーネントを作成し、テスト、文書化するためのツール |
| @testing-library/cypress | Cypressで@testing-library/reactのメソッドを使用できるようにするアダプタ |
| @testing-library/react-hooks | React Hooksのテストユーティリティを提供するライブラリ |
| @types/dompurify | dompurifyの型定義 |
| @types/faker | fakerの型定義 |
| @types/jsonwebtoken | jsonwebtokenの型定義 |
| @types/lodash | lodashの型定義 |
| @types/marked | markedの型定義 |
| @typescript-eslint/eslint-plugin | ESLint用TypeScriptプラグイン。TypeScriptの文法に関するESLintルールを提供 |
| @typescript-eslint/parser | ESLint用TypeScriptパーサー。TypeScriptの文法を理解し、ESLintに理解させるために使用 |
| autoprefixer | CSSプレフィックスを自動的に追加するためのPostCSSプラグイン |
| cross-env | 環境変数を設定するためのライブラリ |
| cypress | Cypressの実行に必要なライブラリ |
| eslint-config-prettier | PrettierとESLintを併用するための設定 |
| eslint-import-resolver-typescript | TypeScript用のESLintインポートリゾルバー |
| eslint-plugin-cypress | Cypressのテストコードにおいて、コード品質を担保するためのESLintプラグイン |
| eslint-plugin-import | インポート文に対して静的解析を行い、パスの解決や依存関係に関するエラーや警告を提供するESLintプラグイン |
| eslint-plugin-jest-dom | JestのDOMマッチャーをLintに取り入れ、スペルミスや誤った使用法に関する警告を提供するESLintプラグイン |
| eslint-plugin-jsx-a11y | JSXのaccessibility関連のルールを提供するESLintプラグイン |
| eslint-plugin-prettier | PrettierのフォーマットルールとESLintのルールを自動的に統合するESLintプラグイン |
| eslint-plugin-react | React関連のルールを提供するESLintプラグイン |
| eslint-plugin-react-hooks | React Hooksの使用に関するルールを提供するESLintプラグイン |
| eslint-plugin-testing-library | Testing Libraryの使用に関するルールを提供するESLintプラグイン |
| faker | テスト用のダミーデータを生成するためのJavaScriptライブラリ |
| husky | Gitのフックを簡単に設定するためのツール |
| is-ci | CI環境であるかどうかを判定するためのJavaScriptライブラリ |
| is-ci-cli | CI環境であるかどうかを判定するためのCLIツール |
| lint-staged | ステージングエリアにある変更にだけESLintを実行するためのツール |
| msw | APIモックを提供するためのJavaScriptライブラリ |
| npm-run-all | npmスクリプトを並列または直列に実行するためのツール |
| plop | コードジェネレータを作成するためのツール |
| postcss | CSSプリプロセッサの一種で、CSSの自動プリフィックスを付与するなどの処理が可能 |
| prettier | コードのフォーマットを自動化するためのJavaScriptライブラリ |
| react-test-renderer | ReactコンポーネントをテストするためのJavaScriptライブラリ |
| serve | 開発中の静的なWebサイトを簡単にローカルサーバーで配信するためのツール |
| start-server-and-test | Node.jsアプリを起動し、終了したらテストを実行するためのツール |
| tailwindcss | CSSフレームワークで、クラスベースのスタイリングを提供するためのJavaScriptライブラリ |
| tsconfig-paths-webpack-plugin | TypeScriptでパスのエイリアスを扱うためのWebpackプラグイン |
おしまい！