クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【React & Tone.js】スケールプレイヤーを作った(いろいろなスケールを調べて音も聴けるアプリ)

Reactアプリの続きです。前々回はビート・プレイヤー、前回はコードプレイヤーを作りました。今回は音楽系の第三弾、スケール・プレイヤーを作りました。これで音楽3要素(メロディ、ハーモニー、リズム)が揃います。今回もTone.jsを使っています。それでは…

【React & Tone.js】コードプレイヤーを作った(鍵盤でいろいろなコードを調べるアプリ)

Reactアプリの続きです。前回はTone.jsを使ってビートプレイヤーを作りました。今回も音楽アプリでコードプレイヤーを作りました。以前CodePenで作成したコードプレイヤーをReact/Next環境に移植し、新機能を追加しました。それではいきましょう!

【React & Tone.js】ビートプレイヤーを作った(ビートとBPMを変更可能)

Reactアプリの続きです。前回は配色ジェネレーターを作りました。今回からTone.jsを使った音楽アプリ編に入ります。以前CodePenで作成したビートプレイヤーをReact/Next環境に移植してみました。それではいきましょう!

【React】配色ジェネレーターを作った(HSBでメインカラー、アクセントカラー、ベースカラーを割り出す!)

Reactアプリの続きです。前回はアスペクト比ジェネレーターを作りました。 今回もデザイン系のアプリで配色ジェネレーターを作りました!HSBモードでメインカラー、アクセントカラー、ベースカラーの3色を割り出せる配色ジェネレーターです。そのソースコー…

【React】アスペクト比ジェネレーターを作った(画像の縦横比率を計算するツール)

Reactアプリの続きです。前回までは「ジャンプ率ジェネレーター」をNext.jsで作り直していました。今回は「アスペクト比ジェネレーター」に取り組みます。以前こちらでまとめた主要なアスペクト比による画像サイズのCSS数値を調べられるツールにります。それ…

【React】ジャンプ率ジェネレーターをNext.jsで作り直した(Next.js + TypeScript + CSS in JS)

ジャンプ率ジェネレーターの続きです。以前、React環境でいったん完成しましたが、この時実現できなかったページごとのOGP設定を実現すべく、前回作成したNextスターターキットで再度作り直しました。これによってReact環境とNext環境ではCSS in JS(Styled-c…

【React】Nextスターターキットを作った-3. ページファイル編(Next + TypeScript + CSS in JS)

Nextの続きです。前回はNextスターターキットのコンポーネント&モジュールについてまとめました。今回は最終回、ページファイル編になります。Next.jsの複数ページ設定(/pagesフォルダ)を使った内容になります。それではいきましょう!

【React】Nextスターターキットを作った-2. コンポーネント編(Next + TypeScript + CSS in JS)

Nextの続きです。前回はNextスターターキットの全体設定編でした。今回はコンポーネントやモジュールの設定をまとめていきます。Reactアプリ作成でよく使う基本的な機能を組み入れました。それではいきましょう!

【React】Nextスターターキットを作った-1. 全体設定編(Next + TypeScript + CSS in JS)

Nextの続きです。前回はCreate Next App + TypeScript + CSS in JS環境を作りました。今回は以前作ったReactスターターキットをNext.jsで作り直し、挫折していたOGP問題を解決しました!今回は全体にわたる環境設定編です。それではいきましょう!

【React】Create Next App + TypeScript + CSS in JS環境を作る

Next.jsの続きです。前回はNext.jsのリンク設定(Link)、共通コンポーネント化、headタグ設定(Head)を行いました。今回はNext.jsが用意しているパッケージCreate Next Appを使ってみます。さらにTypeScriptとCSS in JS(styled-components)もインストール…

【React】Next.jsのリンク設定(Link)、共通コンポーネント化、headタグ設定(Head)

Next.jsの続きです。前回はNext.jsアプリをVercelにデプロイしました。今回はLinkによるリンク設定、ヘッダー・フッターなどの共通部分のコンポーネント化、Headコンポーネントによるheadタグ設定をそれではいきましょう!

【React】Next.jsのデプロイ:Vercelがまったく・カン・タンだ!

Next.jsの続きです。前回はNext.jsを事始めでインストール、ページ設定、表示まで行いました。今回はクラウド上にデプロイします。Reactと同じくGitHub Pagesにデプロイしたかったのですが検討の結果、Vercelがシンプルに設定できました。それではいきましょ…

【React】Next.jsを事始める(インストール、ページ設定、表示まで)

Reactの続きです。前回はReactのSPA環境で動的OGPを設定したがうまくいかず、Topページのみに静的OGPを設定しました。それで気になったのがNext.js。SSRだとサーバ上にNode環境が必要だがSSGならローカル環境で完結するかもしれない。それではいきましょう!

【React】OGPはつらいよ ーSPAでの動的OGP・失敗編ー(Reactアプリスターターキット)

Reactスターターキットの続きです。前回はfavicon画像の作成、推奨サイズ、スマホ向け設定などを行いました。今回はSNSにシェアした時に表示されるOGPを設定します。helmetを使ってルーティングのページごとにOGPを設定しましたが、SPAでは動的なOGPはうまく…

【React】favicon画像の作成、推奨サイズ、スマホ向け設定など(Reactスターターキット)

Reactスターターキットの続きです。前回はOtherページをAboutページに変更し、ルーティング設定も変更しました。今回はこれまで後回しにしてきたCreate React App環境でのfavicon設定もしたく。推奨サイズやスマホ向けの設定方法などをおさらいできました。…

【React】OtherページをAboutページに変更、ルーティング変更(Reactスターターキット)

Reactの続きです。前回はstyled-componentsにフックの値を設定し、動的にスタイルを変更しました。ジャンプ率ジェネレーターが完成しました!この時、otherページをaboutページに作り替えたのですが、aboutページについては今後も使いそうなので、Reactスタ…

【React】styled-componentsにフックの値を設定し、動的にスタイルを変更(ジャンプ率ジェネレーター完成!)

Reactジャンプ率ジェネレーターの続きです。前回は独自フックで関数を抽出し、全てのツマミが動いくようになりました。今回はこのツマミの値をstyled-componentsに埋め込んで、動的にCSSスタイルを変更させたく。それではいきましょう!

【React】独自フックで関数を抽出、全てのツマミが動いた!(ジャンプ率ジェネレーター)

Reactジャンプ率ジェネレーターの続きです。前回はフックでonChangeイベントを設定しました。ようやく一つ目のinput(range)のツマミが動きました。今回は残りの二つも動かします。独自フックで共通した処理を関数として抽出しました。それではいきましょう!

【React】フックでonChangeイベントを設定、ツマミが動いた!(ジャンプ率ジェネレーター)

Reactジャンプ率ジェネレーターの続きです。前回はAboutページ作成とinput(type="range")タグの配置を行いました。しかしinputタグに初期値valueを入れたらツマミが動かなくなりました。今回はこのツマミを動かすべく、onChange設定をしたいきたく思います…

【React】Aboutページ作成、input(type="range")タグ配置(ジャンプ率ジェネレーター)

Reactジャンプ率ジェネレーターの続きです。前回は環境構築編でした。今回からは具体的な内容に入っていきます。まずotherページをaboutページに変更し、メインページにinputタグ(type = range)を配置しました。それではいきましょう!

【React】文字ジャンプ率ジェネレーターを作るシリーズ始動!(環境構築編)

Reactの続きです。前回はReact + TypeScript + CSS in JS環境のスターターキットを作りました。今回からこれを元にアプリ作りに入っていきます。最初に作りたいのは文字ジャンプ率ジェネレーター!今回は初回ということで、既存のGitHubリポジトリをクローン…

【React】React + TypeScript + CSS in JSスターターキットを作る(アプリ作る人に俺はなる!)

Reactの続きです。前回まで、メタ言語(EJS + Sass(SCSS) + TypeScript)スターターキットの内容をReact + TypeScript + CSS in JS環境で再現してきました。今回はこれをリファクタリングして、今後ReactでWebアプリを作るためのスターターキットを作りたい…

【React】React RouterでSPAのルーティング設定(下層ページの404対策も)

Reactの続きです。以前作成したReact + CSS in JS + TypeScript環境にReact Routerを使ってルーティング設定をして複数ページを遷移できるSPAにします。helmetを使ってコンテンツだけでなくheadタグも動的に変更。さらに下層ページに直接アクセスすると404に…

【React】フックとRealtime DatabaseをFetch APIで連携(React + Firebase環境)

Reactの続きです。前回はフック(React Hooks)とjson-serverをFetch APIで連携しました。今回はフックとRealtime DatabaseをFetch APIで連携します。Create React App環境にFirebaseをインストールしてクラウド上のRealtime Databaseのデータを読み込めるよう…

【React】フックとjson-serverをFetch APIで連携(Reactライフサイクルの理解)

Reactの続きです。前回はフック(React Hooks)を事始めました。基本のフックuseState、useEffect、useContextを体験しました。今回はこのフックにFetch APIを使ってjson-serverのデータベースを連携してみました。最初、処理実行のタイミングがうまくいかず、…

【React】フック(React Hooks)事始め:useState、useEffect、useContext

Reactの状態管理シリーズの続きです。以前はステート、コンテクスト、Reduxなどいろいろやって来ましたが、フック(React Hooks)はまだやっていませんでした。コンテクストはクラスコンポーネントでしか使えませんでしたがフックは関数コンポーネントでも使え…

【React】ピュアなTypeScriptモジュールを追加してみる(Reactとメタ言語の比較-6)

Reactの続きです。前回はstyled-componentsのcss helperでスタイルを継承し、CSS設定を完成させました。今回はTypeScript編。以前メタ言語スターターキットで作ったTypeScriptのモジュールをReact環境に追加してみます。処理の対象はReactの仮想DOMです。そ…

【React】styled-componentsのcss helperでスタイルを継承(Reactとメタ言語の比較-5)

Reactの続きです。前回はstyled-componentsのcreateGlobalStyleでbodyタグにCSS設定をしました。今回はcss helperでスタイルを継承します。前回一回リセットされたCSSスタイルは今回復活できました♪Sass(SCSS)との比較も行います。それではいきましょう!

【React】styled-componentsのcreateGlobalStyleでbodyタグにCSS設定(Reactとメタ言語の比較-4)

Reactの続きです。前回はJSONデータをJSXに読み込んで表示しました。今回からはCSS編に入っていきます!メタ言語スターターキットのSass(SCSS)の設定をCSS in JSに組み込んでいきます。今回はstyled-componentsのcreateGlobalStyleでbodyタグにCSSを設定しま…

【React】JSONデータをJSXに読み込んで表示する(Reactとメタ言語の比較-3)

Reactの続きです。前回はreact-helmetでheadタグの中身を動的に打ち替えました。今回はHTMLのテキスト部分を外部JSONデータからJSXに読み込みます。インラインのタグを認識するためにdangerouslySetInnerHTMLを、JSX内でループするためにmap()を使いました。…