個人開発メモ
とうもろこし.../dummy?mode=edit のクエリパラメータ mode を取得したい
import { useSearchParams } from "next/navigation";
export const Page = () => {
const searchParams = useSearchParams();
const mode = searchParams.get("mode");
...
}
配列の find 関数で以下のように書いてしまい、検索結果がヒットしない凡ミス。
array.find((e) => {
e.id === currentId
})
以下のどちらかにしないと動かない。
array.find((e) => e.id === currentId);
array.find((e) => {
return e.id === currentId
})
型を調べる
const str = 'tori'
console.log(typeof str) // string
favicon.ico を適用するだけでは、iPhoneの「ホーム画面に追加」時のアイコンには反映されない。
こちらが参考になった。
とうもろこしtransition に複数プロパティ指定する方法。
.component {
transition: width 0.3s, height 0.3s;
}
CSSの animation で3つのオブジェクトをそれぞれ0〜30%, 30〜60%, 60〜90%のタイミングで入れ替わりで動かしたかったが、きっちり30%ずつ動かない。
例えば、オブジェクト1で0〜30%、オブジェクト2で30〜40%とすれば、実際に動いている時間は等しくなる。
とうもろこしemotionを導入しようとしたが、Client Componentsでのみ使えるとのことだった。
あとで不都合が生じるかもしれないのでやめた。
Next.jsがサポートを明言している他のCSS-in-JSだと、引数を渡すことができない？
とうもろこしフロントでパスパラメータとクエリパラメータの使い分け。
とうもろこしCSSで transition opacity を使って2つのオブジェクトをスムーズに入れ替えるアニメーションが、iOSのChromeでチラついた。PCのlocalhostでは問題なかった。
とうもろこしtransition に関する解決方法、opacity に関する解決方法を試したがうまくいかなかった。
ライブラリならブラウザごとの問題を解決してくれるかと思い、motion を導入。
実装してみたがやはりちらつく。アニメーションではなく、スクロールに関する問題かも。
とうもろこしmotion の useScroll で scrollY を取得してその値でstateをセットしてみた。
const { scrollY } = useScroll();
useMotionValueEvent(scrollY, "change", (latest) => {
if (latest > 157) {
setShowStickyIcon(true);
} else {
setShowStickyIcon(false);
}
});
ちらつきがなくなった！
とうもろこしメインの page.tsx に置いてstickyさせていたコンポーネントを、子コンポーネントとして別ファイルにしたら、stickyが効かなくなった。
スクロールさせながら getBoundingClientRect() で top を取得したら変化していないので、子コンポーネント内での位置の変化検知になっていそう。
とうもろこしcontainer と wrapper の違い。
とうもろこしfirestoreの addDocs で400エラー。
DBのセキュリティルールが初期状態では読み書き禁止になっているため、適切に修正する。
とうもろこしiOSはテキストフィールドのfont-sizeが16pxより小さいと、テキストフィールドにズームインするようになっている。
とうもろこしオブジェクトのシャローコピー
const obj = {index: 1, name: something}
const copy = {...obj}
「30回ループ」が構文エラーになり書き換えた。
// エラー
[...Array(30)].map(() => {
...
}
// 効いた
const arr = [...Array(30)].map((_, i) => i);
arr.map(() => {
...
}
firestoreのクエリ
とうもろこし期間指定
const q = query(
collection(db, collectionName),
orderBy("datetime", "desc"),
startAt([dayjs().subtract(6, "day").millisecond()])
);
戒めシリーズ
とうもろこしVSCode保存時のPrettier自動整形設定
とうもろこしNext.js/React開発で基本的に入れているライブラリ（随時更新）
- dayjs（日付）
- swr（データフェッチ）
- motion（アニメーション）
- zustand（状態管理）
とうもろこしスクロールバーを非表示にするためのブラウザ別CSS。
.component {
-ms-overflow-style: none; // IE,Edge
scrollbar-width: none; // Firefox
}
.component::-webkit-scrollbar {
display:none; // Chrome
}
数値入力用のテキストフィールドを <input type='number' /> で上下の矢印キーを非表示にして使っていたが、フォーカスを当てると勝手に謎の数字が入力される現象に見舞われた。
type='text' にして、テキスト変化時に数字または小数点以外を削除するように変更した。
const onChangeText = (value: string) => {
let newVal = value;
if (inputMode === "decimal") {
newVal = value.replace(/[^0-9|\.]/g, "");
if (newVal.length > 6) {
newVal = newVal.slice(0, 6);
}
}
setText(newVal);
onChangeValue(newVal);
};
PWA設定していない場合、iPhoneのChromeで「ホーム画面に追加」をすると、ホーム画面にアイコンが追加されてタップするとChromeの新規タブが開き該当サイトが表示される。
一方、AndroidのChromeでは「インストール」という項目になっており、実行するとホーム画面にアイコンが追加され、タップすると専用のChromeブラウザが開き、アプリのように表示される。
PWAのような挙動になるためか、以下の点で困った。
- アイコンタップ時に毎回リロードされるわけではないため、入力フォームの現在時刻がリセットされなかった。
- Cookieにログイン継続のための情報を期限付きで保持しているが、その期限を無視して勝手に削除される？
とうもろこしグラフ描画ライブラリ recharts で、 <XAxis /> の初期オプションでは、X軸のデータ点がカテゴリとみなされて均等に配置される。
例えば [1, 2, 2.5] というデータ配列を作った時に、1から2までの距離と、2から2.5までの距離が等しくなる。
数字と認識してもらうには、 <XAxis type='number' /> のオプションをつける。