React環境でWebアプリを作るためにやったことをここにまとめて行きます(随時更新)
※大戦国・年表:南北合一から元和偃武までの戦国時代の年表(1392〜1616年)(2022/09/13追加)
スターターキット
React編
React + TypeScript + CSS in JS環境のスターターキットを作る(※2021/03/10追加)
※参考:【React】React + TypeScript + CSS in JSスターターキットを作る(アプリ作る人に俺はなる!)
OtherページをAboutページに変更、ルーティング変更(2021/04/13追加)
※参考:【React】OtherページをAboutページに変更、ルーティング変更(Reactスターターキット)
faviconの推奨サイズ、スマホ向け設定など(2021/04/14追加)
※参考:【React】favicon画像の作成、推奨サイズ、スマホ向け設定など(Reactスターターキット)
SPAのOGP設定に四苦八苦。いったん下層ページは断念(2021/04/16追加)
※参考:【React】OGPはつらいよ ーSPAでの動的OGP・失敗編ー(Reactアプリスターターキット)
Next.js編
ReactスターターキットをNext.jsで作り直す。今回は全体設定編。FOUC対策苦心したー(2021/05/01追加)
※参考:【React】Nextスターターキットを作った-1. 全体設定編(Next + TypeScript + CSS in JS)
コンポーネント&モジュール設定。async/awaitのおさらいやtry-catch、throw文など(2021/05/02追加)
※参考:【React】Nextスターターキットを作った-2. コンポーネント編(Next + TypeScript + CSS in JS)
Nextスターターキット完結編!複数ページ構成、404ページも作った(2021/05/02追加)
※参考:【React】Nextスターターキットを作った-3. ページファイル編(Next + TypeScript + CSS in JS)
文字ジャンプ率ジェネレーター
文字ジャンプ率ジェネレーターを作るシリーズ始動!構想と環境構築(2021/03/14追加)
※参考:【React】文字ジャンプ率ジェネレーターを作るシリーズ始動!(環境構築編)
Aboutページ作成、input(type="range")タグ配置(2021/03/17追加)
※参考:【React】Aboutページ作成、input(type="range")タグ配置(ジャンプ率ジェネレーター)
フックつかってonChangeイベントを設定。やっとツマミが動いたどー!(2021/03/19追加)
※参考:【React】フックでonChangeイベントを設定、ツマミが動いた!(ジャンプ率ジェネレーター)
独自フックで処理がコンパクトになった!ツマミが全部動いた!(2021/03/30追加)
※参考:【React】独自フックで関数を抽出、全てのツマミが動いた!(ジャンプ率ジェネレーター)
styled-componentsの値を動的に変更、ジャンプ率ジェネレーター完成! (2021/04/06追加)
※参考:【React】styled-componentsにフックの値を設定し、動的にスタイルを変更(ジャンプ率ジェネレーター完成!
Next版ジャンプ率ジェネレーター、CSS in JSの挙動の違い以外はスムーズに移行完了!(2021/05/04追加)
※参考:【React】ジャンプ率ジェネレーターをNext.jsで作り直した(Next.js + TypeScript + CSS in JS)
アスペクト比ジェネレーター
アスペクト比によって画像サイズを変更してCSSの値を調べることができるジェネレーターを作った!(2021/05/16追記)
※参考:【React】アスペクト比ジェネレーターを作った(画像の縦横比率を計算するツール)
配色ジェネレーター
HSBでメインカラー、アクセントカラー、ベースカラーを割り出せる配色ジェネレーター(2021/08/16追加!)
※参考:【React】配色ジェネレーターを作った(HSBでメインカラー、アクセントカラー、ベースカラーを割り出す!)
ビートプレイヤー
Tone.jsを使ってビートとBPMを変更可能なビートプレイヤーを作った(2021/09/16追加)
※参考:【React & Tone.js】ビートプレイヤーを作った(ビートとBPMを変更可能)
コードプレイヤー
Tone.jsを使って鍵盤でいろいろなコードを調べるコードプレイヤーを作った(2021/10/27追加)
※参考:【React & Tone.js】コードプレイヤーを作った(鍵盤でいろいろなコードを調べるアプリ)
スケールプレイヤー
Tone.jsを使って鍵盤でいろいろなスケールを調べるスケールプレイヤーを作った(2021/11/28追加)
※参考: 【React & Tone.js】スケールプレイヤーを作った(いろいろなスケールを調べて音も聴けるアプリ)
三角関数しらべMath
p5.jsを使って三角関数の理解を深めるために作ったアプリ(2021/12/31追加)
※参考:【React & p5.js】「三角関数しらべMath」を作った(三角関数の理解を深めるアプリ)
ビートルズDB
ビートルズが結成から解散までにリリースした楽曲(1961〜1970年)のデータベース(2022/09/13追加)
※参考:【React/Next.js】「ビートルズDB」を作った(ビートルズの楽曲を検索できるアプリ)
大戦国・年表
南北合一から元和偃武までの戦国時代の年表(1392〜1616年)(2022/11/13追加)
※参考:【React/Next.js】大戦国・年表を作った(年表は随時追加中ー)
Next.js + Three.js
こちらで更新中