はてなブックマーク

はじめに React Router は、React アプリケーションにおけるルーティングライブラリのデファクトスタンダードとして長年利用されてきました。v6 で Data API が導入され、フルスタックフレームワークとしての側面が強化されましたが、v7 ではさらに進化し、Vite との統合、Single Fetch、Lazy Loading といったモダンな機能がデフォルトで組み込まれ、より洗練された開発体験とパフォーマンスを提供します。 しかし、これらの機能がどのように連携し、ブラウザのリクエストがどのように処理され、最終的にページが表示されるのか、その内部構造は少し複雑に見えるかもしれません。 この記事では、React Router v7 で構築されたアプリケーションの動作フローを、主要なパッケージやコンポーネントの役割、データ取得の仕組み、レンダリングプロセスなどに焦点を当てて、内

React Router v7.3.0 で導入された「クライアントミドルウェア」機能を使って認証ガードをリファクタリングしてみました。この記事では、Firebase 認証を使った SPA アプリ「しずかな Remix SPA Example」での実際の使用例をもとに解説します。 TL;DR React Router v7.3.0 から unstable_clientMiddleware がサポートされました(リリースノート) ミドルウェアを使うと、各ルートに散らばっていた認証チェックを一箇所にまとめられます コンテキストを使ってユーザー情報を共有できるので、ルートローダーでの重複した認証処理が不要になります まだ unstable 機能ですが、コードがすっきりして可読性が上がるのでおすすめです 従来の認証実装の問題点 Firebase 認証を使った SPA アプリでは、通常、保護されたルー

デモサイト ソースコード はじめに Shadcn Admin Dashboard は、ShadcnUI と React Router v7 を使用して構築した、再利用可能な管理ダッシュボード UI のコレクションです。レスポンシブデザインとアクセシビリティに配慮して設計されています。 このプロジェクトは、satnaing 氏 による shadcn-admin をフォークした上で、React Router v7 で動くように書き換えたものです。オリジナルの作者に感謝いたします。 特徴 ライト/ダークモードの切り替え レスポンシブ対応 アクセシビリティ対応 再利用可能なサイドバーコンポーネント グローバル検索コマンド 10 以上のページ 追加のカスタムコンポーネント 技術スタック UI: ShadcnUI (TailwindCSS + RadixUI) ビルドツール: Vite ルーティング:

$ rye add fastapi "uvicorn[standard]" prisma Added fastapi>=0.103.0 as regular dependency Added uvicorn[standard]>=0.23.2 as regular dependency Added prisma>=0.10.0 as regular dependency $ rye sync Initializing new virtualenv in /Users/coji/progs/spike/python/fastapi-prisma-test/.venv Python version: cpython@3.11.3 Generating production lockfile: /Users/coji/progs/spike/python/fastapi-prisma-test/

2024年は Remix SPA モードで React フロントエンドを作るのが最適。 習作として「しずかなインターネット」の真似っこサイトを Firebaseで作ってみました。 clientLoader / clientAction で state ほぼ不要でシンプルに実装できるのでオススメです。 利用スタック フレームワーク: Remix SPA Mode remix-flat-routes の Hybrid Routesも使っています。 remix-routes を使って型安全にルーティングしています。 zodix を使って loader / action のパラメータバリデーションを簡単にしています。 ビルド環境: Remix Vite UIコンポーネント/スタイリング: shadcn-ui / tailwindcss フォーム: conform DB: firestore 認証:

これはなに? LINE が公開した日本語言語モデルをローカルで動かしたいけど、GPUがなくて動かなくて悲しかったのです。でも、huggingface に良い変換モデルを公開されてる方がいらして、それを試したら、いい感じで動きました。というご報告です。やったね! 結論: 動かす手順 homebrew で cmake をインストール mmngaさんが公開されている ggml 変換版の readme に従ってターミナルで以下を実行 git clone https://github.com/ggerganov/ggml.git cd ggml mkdir build && cd build cmake .. make -j mmngaさんが公開されているggml 変換版のモデルをダウンロード 保存先は 2. で mkdir した build ディレクトリに。 以下のコマンドで推論を実行 ./bin

SendGrid の送信ログを無料で7日間以上見られるように、BigQuery にリアルタイムで保存する これはなに? イマチケというAmazon Payでサクッと買える有料ネットライブのチケット販売サービスを開発・運営しています。 そこでは、SendGridを使って購入確認メールを送っているのですが、携帯キャリア系メールアドレスの迷惑メールブロックやら RFC違反のメールアドレスでやらで購入確認メールが送れないことがままあり、お客様からの問い合わせが来たときに調査が必要でした。 調査のために SendGrid のメールアクティビティを確認しますが、とりあえず無料のプランではじめているため、管理UI上で確認できるメール送信ログが7日間しか残りません。しかし、お客様からの問い合わせはチケットを買ってから、2週間後のライブ配信直前などに来ることがあり、調べるころには履歴が残っておらず、メールが