LoginSignup
11

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-03-09

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

こちらで更新中

※参考:Next.js + Three.js

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11