React
Tone.jsでシンセサイザーの音作りができるシンセジェネレーターを作りました。シンセサイザーの音の作り方を理解したい&Tone.jsでシンセサイザーの音作りがどこまでできるのかを検証する目的です。当初思い描いていたものは一通り実現できました！
Reactのドキュメントが新しくなりましたね。まだ日本語版はなく英語版のみで、翻訳ツールを使ってもいいのですが、英語の勉強も兼ねて自力で和訳していきます。まずはQuick Startの頭のところから。少しずつコツコツいきますー 【目次】 Reactドキュメント Q…
Three.jsがNext.js環境で動くか、試したところ、動きました！Three.jsのドキュメントのGet Startedがベースですが、個人的にやってみたかったこともいくつか追加。任意のタグの中にcanvasタグを配置、画面リサイズに対応してcanvasタグもリサイズ、ライティ…
前回つくった「ビートルズDB」をベースにして「大戦国・年表」もつくりました。これによってNext.jsの動的ページの詳細設定やスプレッドシートでの重複チェックの知見が増えました。大戦国・年表は南北合一から元和偃武までの戦国時代（1392〜1616年）の年表…
以前、Next.jsの中でFetch APIでいろいろなデータを読み込みました。これをベースにもっとたくさんのデータを読み込んで検索ができるアプリ「ビートルズDB」を作りました。今回、Next.jsの動的ページのルーティング、動的APIのルーティング、APIのデータ整形…
Reactの続きです。以前、React環境からFirebaseのRealtime DatabaseをFetch APIで読み込みました。今回はNext.js環境からRealtime Database、Firestore、ついでにスプレッドシート(Google Sheets API)のデータを読み込んでみます。完成品をデプロイしたVerce…
Reactアプリの続きです。前回のスケール・プレイヤーまではReactとtone.jsを連携して音楽系のアプリを作っていました。今回はReactとp5.jsを連携し三角関数の単位円の交点をグリングリンと動かしました。グラフィック、モーション、3Dの制作に多用される三角…
Reactアプリの続きです。前々回はビート・プレイヤー、前回はコードプレイヤーを作りました。今回は音楽系の第三弾、スケール・プレイヤーを作りました。これで音楽3要素（メロディ、ハーモニー、リズム）が揃います。今回もTone.jsを使っています。それでは…
Reactアプリの続きです。前回はTone.jsを使ってビートプレイヤーを作りました。今回も音楽アプリでコードプレイヤーを作りました。以前CodePenで作成したコードプレイヤーをReact/Next環境に移植し、新機能を追加しました。それではいきましょう！
Reactアプリの続きです。前回は配色ジェネレーターを作りました。今回からTone.jsを使った音楽アプリ編に入ります。以前CodePenで作成したビートプレイヤーをReact/Next環境に移植してみました。それではいきましょう！
Reactアプリの続きです。前回はアスペクト比ジェネレーターを作りました。 今回もデザイン系のアプリで配色ジェネレーターを作りました！HSBモードでメインカラー、アクセントカラー、ベースカラーの3色を割り出せる配色ジェネレーターです。そのソースコー…
Reactアプリの続きです。前回までは「ジャンプ率ジェネレーター」をNext.jsで作り直していました。今回は「アスペクト比ジェネレーター」に取り組みます。以前こちらでまとめた主要なアスペクト比による画像サイズのCSS数値を調べられるツールにります。それ…
ジャンプ率ジェネレーターの続きです。以前、React環境でいったん完成しましたが、この時実現できなかったページごとのOGP設定を実現すべく、前回作成したNextスターターキットで再度作り直しました。これによってReact環境とNext環境ではCSS in JS(Styled-c…
Nextの続きです。前回はNextスターターキットのコンポーネント&モジュールについてまとめました。今回は最終回、ページファイル編になります。Next.jsの複数ページ設定（/pagesフォルダ）を使った内容になります。それではいきましょう！
Nextの続きです。前回はNextスターターキットの全体設定編でした。今回はコンポーネントやモジュールの設定をまとめていきます。Reactアプリ作成でよく使う基本的な機能を組み入れました。それではいきましょう！
Nextの続きです。前回はCreate Next App + TypeScript + CSS in JS環境を作りました。今回は以前作ったReactスターターキットをNext.jsで作り直し、挫折していたOGP問題を解決しました！今回は全体にわたる環境設定編です。それではいきましょう！
Next.jsの続きです。前回はNext.jsのリンク設定（Link）、共通コンポーネント化、headタグ設定(Head）を行いました。今回はNext.jsが用意しているパッケージCreate Next Appを使ってみます。さらにTypeScriptとCSS in JS（styled-components）もインストール…
Next.jsの続きです。前回はNext.jsアプリをVercelにデプロイしました。今回はLinkによるリンク設定、ヘッダー・フッターなどの共通部分のコンポーネント化、Headコンポーネントによるheadタグ設定をそれではいきましょう！
Next.jsの続きです。前回はNext.jsを事始めでインストール、ページ設定、表示まで行いました。今回はクラウド上にデプロイします。Reactと同じくGitHub Pagesにデプロイしたかったのですが検討の結果、Vercelがシンプルに設定できました。それではいきましょ…
Reactの続きです。前回はReactのSPA環境で動的OGPを設定したがうまくいかず、Topページのみに静的OGPを設定しました。それで気になったのがNext.js。SSRだとサーバ上にNode環境が必要だがSSGならローカル環境で完結するかもしれない。それではいきましょう！
Reactスターターキットの続きです。前回はfavicon画像の作成、推奨サイズ、スマホ向け設定などを行いました。今回はSNSにシェアした時に表示されるOGPを設定します。helmetを使ってルーティングのページごとにOGPを設定しましたが、SPAでは動的なOGPはうまく…
Reactスターターキットの続きです。前回はOtherページをAboutページに変更し、ルーティング設定も変更しました。今回はこれまで後回しにしてきたCreate React App環境でのfavicon設定もしたく。推奨サイズやスマホ向けの設定方法などをおさらいできました。…
Reactの続きです。前回はstyled-componentsにフックの値を設定し、動的にスタイルを変更しました。ジャンプ率ジェネレーターが完成しました！この時、otherページをaboutページに作り替えたのですが、aboutページについては今後も使いそうなので、Reactスタ…
Reactジャンプ率ジェネレーターの続きです。前回は独自フックで関数を抽出し、全てのツマミが動いくようになりました。今回はこのツマミの値をstyled-componentsに埋め込んで、動的にCSSスタイルを変更させたく。それではいきましょう！
Reactジャンプ率ジェネレーターの続きです。前回はフックでonChangeイベントを設定しました。ようやく一つ目のinput(range)のツマミが動きました。今回は残りの二つも動かします。独自フックで共通した処理を関数として抽出しました。それではいきましょう！
Reactジャンプ率ジェネレーターの続きです。前回はAboutページ作成とinput（type="range"）タグの配置を行いました。しかしinputタグに初期値valueを入れたらツマミが動かなくなりました。今回はこのツマミを動かすべく、onChange設定をしたいきたく思います…
Reactジャンプ率ジェネレーターの続きです。前回は環境構築編でした。今回からは具体的な内容に入っていきます。まずotherページをaboutページに変更し、メインページにinputタグ（type = range）を配置しました。それではいきましょう！
Reactの続きです。前回はReact + TypeScript + CSS in JS環境のスターターキットを作りました。今回からこれを元にアプリ作りに入っていきます。最初に作りたいのは文字ジャンプ率ジェネレーター！今回は初回ということで、既存のGitHubリポジトリをクローン…
Reactの続きです。前回まで、メタ言語（EJS + Sass(SCSS) + TypeScript）スターターキットの内容をReact + TypeScript + CSS in JS環境で再現してきました。今回はこれをリファクタリングして、今後ReactでWebアプリを作るためのスターターキットを作りたい…
Reactの続きです。以前作成したReact + CSS in JS + TypeScript環境にReact Routerを使ってルーティング設定をして複数ページを遷移できるSPAにします。helmetを使ってコンテンツだけでなくheadタグも動的に変更。さらに下層ページに直接アクセスすると404に…
