Remix+CloudflareでWebサイトを作る 21（Prismaのincludeとselect・Access Policyのドメイン追加・rebase -i・画像の更新バリデーション）
saneatsu
【2024-03-31】Prismaでincludeとselectは併用できない
背景
元々以下のようにtableNameというテーブルから全てのカラムを取得して、それに加えてTagテーブルから紐づいているタグのid と name を取得するというコードを書いていた。
await client.tableName.findMany({
include: {
tags: {
include: {
tag: {
select: {
id: true,
name: true,
},
},
},
},
},
});
やりたいこと
tableName からすべてのカラムを取得するのではなく select を用いて特定のカラムを取得したい。
ということで以下のようにしてみる。
selectを書き始めるときはVSCodeでサジェストも表示されるのだが、書いてみると「'"Please either choose select or include."'.ts(2345)」というエラーが発生してしまう。
await client.tableName.findMany({
+ select: {
+ id: true,
+ name: true
+ },
include: {
tags: {
include: {
tag: {
select: {
id: true,
name: true,
},
},
},
},
},
});
解決策
以下のように全部selectを使うと解決
await client.tableName.findMany({
select: {
id: true,
name: true,
tags: {
include: {
tag: {
select: {
name: true,
},
},
},
},
},
});
【2024-04-01】デフォルトだとAccess Policyが *.pages.dev にしか効かないので設定を更新
背景
その4 > 【2024-02-08】Cloudlfare Pagesでデプロイして一時的に作成されたURLにアクセス制限をかける でAccess Policyを設定→設定解除していたが、再度設定してみる（前はGmailが誤BANされていたため、アクセス制限をかけたはいいもののメアドにセキュリコード送れなかったので設定を解除していた）。
現在はそれぞれ以下のようなURLになっている。
Production：appname.com
Staging：staging.appname.com
問題
Access Policyを設定すると想定通りCloudflare Zero Trustのページは表示される。
その後メアドを入れてメールに送られてきたセキュリティコードを入れるも、以下のようなページに遷移する。
理由
デフォルトだとAccess Policyが *.pages.dev しか対応していない。
修正
とても簡単でドメインを追加するだけ。
「Worker & Pages > アプリ名 > 管理」タブの「Accessポリシー」のところに「ポリシーを管理する」というボタンがあるのでクリックすると、Cloudflare Zero Trustのページに遷移する。
初めてアクセスするとPlanを選択させられると思うが適当にFree($0/月)とかにしておく。
すでに設定自体はあるはずなのでケバブメニューから「Configure」をクリック。
デフォルトだと左から2番目の「Policies」タブが選択されているという仕様になっている。
「Overview」タブを選択して「Application domain」に appname.com を追加するだけでOK。
staging.appname.com にアクセスすれば表示されるようになっている。
saneatsu毎日メアド入れてセキュリコード入力して...ってめんどいなぁと思ったけどデフォルトで24時間に設定されていた。
3日にカスタム、とかはできなさそうなので一旦24時間の次の1週間に設定。
saneatsu【2024-04-01】UUID(v4)の衝突確率
調べる
R2に画像アップロードする時にUUID使うことにしたけど衝突する確率ってどんなもんなんだろう？
1クラスに23人いるとき同じ誕生日のペア(以上)が存在する確率は50%以上
になるという理論です。
おもろ。
UUID(ver.4) は122ビットの乱数なので生成したUUIDが既存のものにぶつかるまでの回数の期待値は230京回となります。
へぇ。
230京回というのは 衝突確率 1/230京 ではなく, ある生成された UUID について
同値の UUID が次に生成されるまでの回数期待値が 230京回 になります.
これは生成されたそれぞれに対して適用されるためそれまでに何個生成されたかは関係ないのです.
さらに UUID4 で生成されうる値の総数は122ビット幅の乱数を用いるため
2^122 = 5澗3169溝1198穰3139𥝱6634垓9161京5228兆2411億2137万8304 個になります.
もう読み方もわからん。
その他
saneatsu
【2020-04-02】rebase -i のfixupとsquashの違いまた忘れた
今のチームでは git commit --fixup <COMMIT_HASH> を使う運用をしている。
開発作業から離れていて久しぶりにこのコマンド使ったら fixup! がついたCommitをまとめる時に使うrebase -iの使い方をまたしても忘れてしまった。
そしてまたしてもvi上でコミットログを入れ替えられるということを忘れて「どうやったら3つ前のものと統合できるんだっけ？」となってしまった。
fixup/squashの違い
fixup
対象のコミットをそのまま結合先のコミットに統合し、そのコミットメッセージを保持する。
ポイント
- 対象のコミットを別のコミットと結合する
- 具体的には、対象のコミットが修正コミットであり、その内容が別のコミットと結合しても問題ない場合に使用する
- そのコミットメッセージを継承するが、対象のコミット自体は維持されず、結合先のコミットにマージされる
squash
統合された変更内容を含む新しいコミットを作成し、結合先のコミットに統合される
ポイント
- 対象のコミットを結合先のコミットと結合し、1つのコミットにまとめる
- 対象のコミットの変更内容が結合先のコミットに統合され、新しいコミットメッセージを作成するプロンプトが表示される
- 結合後のコミットには、統合された変更内容が含まれ、元のコミットは削除される
viコマンドメモ
vi普段使わなさすぎて忘れる。
rebase -i する時に使うコマンドをメモ。
- モード
-
:cqキャンセル
-
- コマンド（並び替えるときに使う）
-
dd：1行カット -
p：ペースト
-
参考
saneatsu【2024-04-02】プロフアイコンとその他の項目を編集するページのバリデーションってどうやんの
やりたいこと
プロフィールページでアイコンとそれ以外の（名前などの）入力項目があるとする。
それらを更新したい時、バリデーションではファイルが入力されていることと、名前が入力されていることを担保したい。
そうなると、そのページにアクセスしてプロフィールアイコンの情報を取得した際に input タグにデフォルト値を入力しておきたい。
そして、更新時にアイコンのファイル情報が取得時と変化があれば更新し、そうでなければ更新処理はしたくない。
こういうのはどう実装すれば良いんだろうか？
調べる
まず、ページアクセスしたタイミングでinputタグにファイルの情報を入れることはできるのか？
ここをみるともセキュリティ上の理由で <input type="file" /> にvalueを設定することはできない。
他のサイトは？
なおさらどうやって実装すればわからんぞ。
あれ、そもそも他のサイトってどんな仕様なんだっけ？
Zenn
https://zenn.dev/settings/profile から編集できる。
アイコンの下の「変更する」から更新することができる。
青色の「更新する」を押さずともアイコンの更新がされた。
GitHub
https://github.com/settings/profile から編集できる。
アイコンの下の「Edit」ボタンから更新することができる。
その下（画像2枚目）にある緑色の「Update profile」を押さずともアイコンの更新がされる。
Zennと違うのは「Remove photo」が表示されること。
ファイルアップロード時点でアイコンは変更されるがもとに戻すことができる。
結論
プロフィールアイコンと他の入力項目とで、バリデーション・更新処理は別にする。
そうなるとめっちゃ簡単に実装できるな。