5
Help us understand the problem. What are the problem?

posted at

updated at

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

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

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

スターターキット

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」を作った(三角関数の理解を深めるアプリ)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
5
Help us understand the problem. What are the problem?