Almonta

JavaScript

【GAS】覚えておきたい頻出メソッド集

業務の自動化を行うため、SpreadSheetでGASを使ったスクリプトをよく組んでいます。 しかし、何かを作るたびにググってとても効率が悪いことを繰り返しているのでこの度メソッドをまとめ、GASおまとめ集を作ることにしました。 ...
React

【React × Firebase】CRUDを学ぶ

本記事は、firebaseでのCRUDのクエリの書き方を手っ取り早く知りたい方のために書きました。 はじめに Reactで使用するFirebaseのJavaScriptのSDKは2021年8月25日にv8→v9へメジャーバージ...
Next.js

【Next.js】SWRとTanStack Queryの違いを比較

useEffectを使ったデータ取得から脱却し、高速化を図るイケてるライブラリであるよく似た2つ、"SWR"と"TanStack Query"を同じデータの取得を通し、違いの比較をしました。 この記事を見ていただくことで、両者の使い...
React

【React】Suspenseのすごさ(Streaming HTML と Selective Hydration)

Suspenseはすごいです! Next.jsでSSRでアプリを作ったものの、初回レンダリング時何も表示されない画面の待機時間が長く、UX悪すぎだろ!それならCSRで作るわ!とSSRの使用を諦めてしまってませんか? はい、私が...
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の使い...