React 【React】Suspenseのすごさ（Streaming HTML と Selective Hydration）
Suspenseはすごいです！
Next.jsでSSRでアプリを作ったものの、初回レンダリング時何も表示されない画面の待機時間が長く、UX悪すぎだろ！それならCSRで作るわ！とSSRの使用を諦めてしまってませんか？
はい、私が...
プログラミング
React 
React 【React】TanStack QueryとSuspenseを使って、data fetch, loading, errorの表示
2023年1月時点、TanStack Queryの最新バージョンはv4です。v3までは名前がReact Queryでしたがv4より変更となっておりますのでお間違いなく。
環境
react @18.2.0
...
React 【React × TypeScript】childrenとonClickイベントがある場合のButtonのComponent化
ReactのComponent化は習得した、childrenの使い方もわかった、onClickイベントの使い方もTypeSciptもある程度わかるようになった。
がしかし！onClickイベントを含んだButtonのComponen...
Flutter 【Flutter × Firebase】連携手順
FlutterプロジェクトとFirebaseを連携する手順をまとめました。
従来の連携手順が公開されていたサイトにアクセスしたところ以下のように最新のドキュメントを見ろと言われ、手順が変わったようなので、最近の連携手順をまとめること...
Next.js 【Next.js】Imageコンポーネント サイズ不明画像での記述法
Next.jsのImageコンポーネントで画像の表示サイズ調整に手こずったので解決法をまとめました。
2023年1月11日追記。Next.js 13のアップデートにより書き方が少し変わりましたのでその内容を最後に追記しました。
...
Next.js 【Next.js】ページ遷移リンク
Next.jsでのページ遷移リンクの方法についてまとめました。
結論、非常に簡単に作ることができます。
環境
Next.js @12.3.1
React @18.2.0
リンクの種類
Next.js...
React 【React】useContextの使い方 JavaScriptとTypeScriptの違いも
Reactの代表的なhooks、useStateとuseEffectに次ぐ基本のhooksであるuseContext。
そんな基本のhooksでありながら、いまいち理解できなかったため超わかりやすいように、useContextの使い...
AWS 【Amplify】(Solved) Resource is not in the state stackUpdateComplete
schema.graphqlのテーブル構成を変更し、schemaの破壊的な更新を行うべく以下コマンドを実行したらエラーとなったので解決法をまとめました。
実行したコマンド
% amplify push --allow-dest...
Next.js 【Next.js】初期設定 src作成 tailwindCSS適用まで
Next.jsをcreate-next-appした素の状態で使おうとしていませんか？ちょっと待ってください！
後々のことを考えると、最初に諸々の設定をした方がよく、その設定が結構厄介なため、手順をまとめることにしました。
以下...
AWS 【Amplify】React 静的 ホスティング (S3 + CloudFrontの構築はもう不要)
静的サイトのホスティングの定番である、S3 + CloudFront の構成を、AWS Amplifyを使用することで爆速で構築できることを知りましたので手順をまとめました。
めちゃくちゃ簡単です！
ホスティング手順
A...