【React】ReactでWebアプリを作るシリーズまとめ（随時更新）

React環境でWebアプリを作るためにやったことをここにまとめて行きます（随時更新）

※[大戦国・年表：南北合一から元和偃武までの戦国時代の年表（1392〜1616年）](#大戦国年表)（2022/09/13追加）

### スターターキット

#### React編

React + TypeScript + CSS in JS環境のスターターキットを作る（※2021/03/10追加）

※参考：[【React】React + TypeScript + CSS in JSスターターキットを作る（アプリ作る人に俺はなる！）](https://www.i-ryo.com/entry/2021/03/10/071252)

OtherページをAboutページに変更、ルーティング変更（2021/04/13追加）

※参考：[【React】OtherページをAboutページに変更、ルーティング変更（Reactスターターキット）](https://www.i-ryo.com/entry/2021/04/13/071820)

faviconの推奨サイズ、スマホ向け設定など（2021/04/14追加）

※参考：[【React】favicon画像の作成、推奨サイズ、スマホ向け設定など（Reactスターターキット）](https://www.i-ryo.com/entry/2021/04/14/054602)

SPAのOGP設定に四苦八苦。いったん下層ページは断念（2021/04/16追加）

※参考：[【React】OGPはつらいよ ーSPAでの動的OGP・失敗編ー（Reactアプリスターターキット）](https://www.i-ryo.com/entry/2021/04/16/072651)

#### Next.js編

ReactスターターキットをNext.jsで作り直す。今回は全体設定編。FOUC対策苦心したー（2021/05/01追加）

※参考：[【React】Nextスターターキットを作った-1. 全体設定編（Next + TypeScript + CSS in JS） ](https://www.i-ryo.com/entry/2021/05/01/184600)

コンポーネント&モジュール設定。async/awaitのおさらいやtry-catch、throw文など（2021/05/02追加）

※参考：[【React】Nextスターターキットを作った-2. コンポーネント編（Next + TypeScript + CSS in JS）](https://www.i-ryo.com/entry/2021/05/02/101424)

Nextスターターキット完結編！複数ページ構成、404ページも作った（2021/05/02追加）

※参考：[【React】Nextスターターキットを作った-3. ページファイル編（Next + TypeScript + CSS in JS）](https://www.i-ryo.com/entry/2021/05/02/102630)

### 文字ジャンプ率ジェネレーター

文字ジャンプ率ジェネレーターを作るシリーズ始動！構想と環境構築（2021/03/14追加）

※参考：[【React】文字ジャンプ率ジェネレーターを作るシリーズ始動！（環境構築編）](https://www.i-ryo.com/entry/2021/03/14/171321)

Aboutページ作成、input（type="range"）タグ配置（2021/03/17追加）

※参考：[【React】Aboutページ作成、input（type="range"）タグ配置（ジャンプ率ジェネレーター）](https://www.i-ryo.com/entry/2021/03/17/033243)


フックつかってonChangeイベントを設定。やっとツマミが動いたどー！（2021/03/19追加）

※参考：[【React】フックでonChangeイベントを設定、ツマミが動いた！（ジャンプ率ジェネレーター）](https://www.i-ryo.com/entry/2021/03/19/070944 )

独自フックで処理がコンパクトになった！ツマミが全部動いた！（2021/03/30追加）

※参考：[【React】独自フックで関数を抽出、全てのツマミが動いた！（ジャンプ率ジェネレーター）](https://www.i-ryo.com/entry/2021/03/30/061804)

styled-componentsの値を動的に変更、ジャンプ率ジェネレーター完成！ （2021/04/06追加）

※参考：[【React】styled-componentsにフックの値を設定し、動的にスタイルを変更（ジャンプ率ジェネレーター完成！](https://www.i-ryo.com/entry/2021/04/06/074030)

Next版ジャンプ率ジェネレーター、CSS in JSの挙動の違い以外はスムーズに移行完了！（2021/05/04追加）

※参考：[【React】ジャンプ率ジェネレーターをNext.jsで作り直した（Next.js + TypeScript + CSS in JS）](https://www.i-ryo.com/entry/2021/05/04/122147)

### アスペクト比ジェネレーター

アスペクト比によって画像サイズを変更してCSSの値を調べることができるジェネレーターを作った！（2021/05/16追記）

※参考：[【React】アスペクト比ジェネレーターを作った（画像の縦横比率を計算するツール）](https://www.i-ryo.com/entry/2021/05/16/180207)  

### 配色ジェネレーター

HSBでメインカラー、アクセントカラー、ベースカラーを割り出せる配色ジェネレーター（2021/08/16追加！）

※参考：[【React】配色ジェネレーターを作った（HSBでメインカラー、アクセントカラー、ベースカラーを割り出す！）](https://www.i-ryo.com/entry/2021/08/16/184713)

### ビートプレイヤー

Tone.jsを使ってビートとBPMを変更可能なビートプレイヤーを作った（2021/09/16追加）

※参考：[【React & Tone.js】ビートプレイヤーを作った（ビートとBPMを変更可能）](https://www.i-ryo.com/entry/2021/09/16/072438)

### コードプレイヤー

Tone.jsを使って鍵盤でいろいろなコードを調べるコードプレイヤーを作った（2021/10/27追加）

※参考：[【React & Tone.js】コードプレイヤーを作った（鍵盤でいろいろなコードを調べるアプリ）](https://www.i-ryo.com/entry/2021/10/27/064429)

### スケールプレイヤー

Tone.jsを使って鍵盤でいろいろなスケールを調べるスケールプレイヤーを作った（2021/11/28追加）
※参考： [【React & Tone.js】スケールプレイヤーを作った（いろいろなスケールを調べて音も聴けるアプリ）](https://www.i-ryo.com/entry/2021/11/28/153950)

### 三角関数しらべMath

p5.jsを使って三角関数の理解を深めるために作ったアプリ（**2021/12/31追加**）

※参考：[【React & p5.js】「三角関数しらべMath」を作った（三角関数の理解を深めるアプリ）](https://www.i-ryo.com/entry/2021/12/31/160217)

### ビートルズDB

ビートルズが結成から解散までにリリースした楽曲（1961〜1970年）のデータベース（2022/09/13追加）

※参考：[【React/Next.js】「ビートルズDB」を作った（ビートルズの楽曲を検索できるアプリ）](https://www.i-ryo.com/entry/2022/09/13/065345)

### 大戦国・年表

南北合一から元和偃武までの戦国時代の年表（1392〜1616年）（**2022/11/13追加**）

※参考：[【React/Next.js】大戦国・年表を作った（年表は随時追加中ー）](https://www.i-ryo.com/entry/2022/11/13/121556)

### Next.js + Three.js

こちらで更新中

※参考：[Next.js + Three.js](https://qiita.com/i-ryo/items/97d51d232b89e11f03c9#threejs--nextjs)