React.js/Next.js【Next.js】jestを使ったユニットテストを導入する（TypeScript利用）
環境next 13.2.1jest 29.5.0参考ページ今回の記事は、Next.jsのテストに関するページをもとに作成している。テスト対象のコンポーネント今回のテスト対象コンポーネントは以下。ボタンと言いつつ、ただのh3タグが配置されてい...
React.js
React.js/Next.js React.js/Next.js【Next.js】Chart.jsを導入してグラフを描画する
Chart.jsとはChart.jsとは、上記の公式ページに載っているようなグラフを簡単に描画することができるライブラリ。環境Next.js 13.2.1Node.js 18.0.0導入手順①ライブラリのインストールReactでChart....
React.js/Next.js【環境構築】プロジェクトにprettierを導入する
やることプロジェクトを新規作成し、prettierを導入するところまで解説する。また、VSCodeの設定も行い、保存時に自動フォーマットされるようにする。Next.jsのプロジェクトで解説しているが、サンプルで利用しているだけなので他のプロ...
React.js/Next.js【React.js】useState,useRef,useEffectの使い分け簡易まとめ
久しぶりにReactを触ると、どのhooksがどんな機能か忘れてしまうのでまとめ。簡易的にしかまとめていないので、詳細は公式サイトなどを見てほしい。useState（個人的に）一番基本的な状態管理のためのhooks。アプリケーションで一番よ...
React.js/Next.js【Next.js/React.js】TypeScriptで書かれたプロジェクトにESLintとPrettierを導入する
概要Next.jsTypeScriptという条件のプロジェクトに、いい感じに静的解析ツールとコードフォーマッターを入れる。ESLint（静的解析ツール）の導入公式ページを参考に導入する。インストール$ npm install eslint ...
React.js/Next.js【Next.js】SCSSを使う環境を構築する（TypeScript利用）
まずはnpm installこちらの公式ドキュメントに記載されている通り、sassのインストールを行う。$ npm install sassscssファイルを作成.scssの拡張子でcss modulesを作成する。./style/abou...
React.js/Next.js【Next.js】Boostrapを導入する
Next.jsにBootstrapを導入するときの備忘録。基本的にはこちらに従って行うだけ。まずは必要なパッケージをインストールする$ npm install react-bootstrap bootstrap実装するimport 'boo...