React.js/Next.js【Next.js】さくらのレンタルサーバーへのデプロイを自動化する（GitHub Actions）
やりたいこと Next.jsで作成したwebサイト（SSG）を、さくらのレンタルサーバーにデプロイする作業を自動化する。 自動デプロイのタイミングは 手動でボタンを押す mainブランチへのマージ（厳密にはmainにpushされたとき） 環...
React.js/Next.js
React.js/Next.js
React.js/Next.js【Next.js】jestを使ったユニットテストを導入する（TypeScript利用）
環境 next 13.2.1 jest 29.5.0 参考ページ 今回の記事は、Next.jsのテストに関するページをもとに作成している。 テスト対象のコンポーネント 今回のテスト対象コンポーネントは以下。 ボタンと言いつつ、ただのh3タグ...
React.js/Next.js【Next.js】Chart.jsを導入してグラフを描画する
Chart.jsとは Chart.jsとは、上記の公式ページに載っているようなグラフを簡単に描画することができるライブラリ。 環境 Next.js 13.2.1 Node.js 18.0.0 導入手順 ①ライブラリのインストール React...
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 e...
React.js/Next.js【Next.js】SCSSを使う環境を構築する（TypeScript利用）
まずはnpm install こちらの公式ドキュメントに記載されている通り、sassのインストールを行う。 $ npm install sass scssファイルを作成 .scssの拡張子でcss modulesを作成する。 ./style...
React.js/Next.js【Next.js】Boostrapを導入する
Next.jsにBootstrapを導入するときの備忘録。基本的にはこちらに従って行うだけ。 まずは必要なパッケージをインストールする $ npm install react-bootstrap bootstrap 実装する import ...