何でも学習記録（ただのメモです）

vscodeで子要素を複数個持っているディレクトリを移動させる方法

移動できないので新しいディレクトリを作成してそこにコピペする

Next.js13 [id]の使い方

ディレクトリ構成
foo/
├── [id]/
│ ├── page.jsx
│ └── hoge/
│ └── page.jsx

foo/1
foo/1/hoge

(foo)ディレクトリ内のlayoutは外部に影響を及ぼさない

├── (top)/
│ ├── hoge/
│ │ └── page.jsx
│ └── layout.jsx
├──このディレクトリに(top)/layoutは影響しない foo/
└── page.jsx

cssでできることはcssに任せるべき

JSでアニメーションを作ることはできるが、cssでできるのであればcssの方が圧倒的に速度が速い

GPT：アニメーションは、できるだけ CSS を使用する方が効果的です。ブラウザはアニメーションの最適化を得意としており、ハードウェアアクセラレーションを活用できます。
自分の解釈：簡単に言うとハードウェアアクセラレーションはCPUの役割をGPUに分散させる仕組みのこと

jsでもハードウェアアクセラレーションを使うことはできるが、特定のライブラリなどを使う必要がある

shadcnUIはコンポーネントライブラリ
react aria components はヘッドレスなコンポーネントライブラリ
ヘッドレスなコンポーネントとはUIの振る舞いやロジックに焦点を当て、デザインは自由にユーザーが変えることができるライブラリ

日本語フォントは重い

w-[fit-content]
linkの押せる範囲がscreenサイズになっている時などに、テキストのサイズに合わせてくれる

marginを使わない理由
marginというのは子要素が親要素に影響を与えるので、逆のことをしてしまうから良くないことが起こることがあります。paddingだと親要素が子要素に影響を与えるので使っていきましょうってことでした

Error: (0 , react_intersection_observer__WEBPACK_IMPORTED_MODULE_4__.useInView) is not a function or its return value is not iterable

"use client"がないだけ

※自分なりの考え方
propsの命名の考え方、受け取る値で何をするのかで決める
オブジェクトをprospに渡し、その中のtextのみを使うのであればtextにする

TypeScriptを使って感じたメリット
prospに型を付けることで、コンポーネントに何を渡せば良いのかが一目でわかる

subgrid

   <div className="grid grid-flow-col">
        <div className="row-span-2 grid grid-rows-subgrid">
          <div>1</div>
          <div className="row-start-2">06</div>
        </div>
        <div className="row-span-2 grid grid-rows-subgrid">
          <div className="row-start-2">06</div>
        </div>
      </div>

RLS disabled - supabase

RLSがセキュリティに関すること
disabledになっていると無効になっている、つまり誰でもアクセス可能になっている
これをenable状態にすることができる、
例えばデータの追加だけを許可する、データの読み込みだけを許可するのような
ポリシーを設定することができる

テンプレートを使用してPolicyを作成したい方はGet started quicklyを選択し、完全に0からPolicyを作成したい方はFor full customizationを選択します。

prisma.post.findMany()

prisma.post.findMany()は、Prismaが自動生成したメソッドを呼び出して、データベース内のすべての投稿を取得します。

replace 置換

カンマ区切りの文字列を数値に変換
第一引数を第二引数で置換する

export const commaToNum = (str: string) => {
  const noCommaStr = str.replaceAll(",", "");//Allなので全てのカンマを置換
  return Number(noCommaStr);
};

replace() //Allではない場合は最初に見つけたものだけを置換
replace("apple","")//appleを無くす、applaeみたいに一部だけ違う場合は置換できない

propsが橋渡しになっている場合に考えること

無駄なコンポーネントを削除して階層を上げることでpropsが一回だけで済む

型定義した値をpropsで渡すとanyになる

propsで渡されたデータの型はprops名:親で定義した型とする(mapしたもの)