はてなブックマーク

はじめに 先日「Modal、Dialog、Drawer の違い」について解説した記事を書きました。 この記事の中で「モードレス」について軽く触れましたが、 「そもそもモードレスってなに？」 「モードレスな UI ってどんなものがあるの？」 と疑問をもった方が多いかと思います。 本記事ではモードレスにフォーカスを当て詳しく解説します。また、記事の後半では厳選した具体例 5 選を紹介します。 この記事を読み終えれば、現場で使えるためのエッセンスが身についているはずです。 モードレスとは モードレスは言い換えると「モードがない」「モードを持たない」となります。 ユーザが特定のタスクを強制されることなく、任意の UI オブジェクトを操作できる状態を指します。 モードレスな UI は自由に操作できるため、ユーザビリティを向上させます。 アクセシビリティの観点でも短期記憶に負荷をかけないため、ユーザに

ベン図で表すと以下のようになります。 （あまり一般的でない名称のコンポーネントも便宜上使用しています。） 以降、詳しく解説します。 Modal Modal は、ユーザに特定のアクションを求めるために、ユーザのインタラクション（操作）を中断させる UI コンポーネントです。 難しい表現をするならば、ユーザの操作を「モードに移行」させるコンポーネントと言えます。 もともと、「Modal」という英単語はこちらで言及されているように形容詞です。 そのため、「Modal な〇〇（名詞）」という意味が本来は適切な使い方です。例えば「Modal な Dialog」や「Modal な Drawer」などです。 今日では単に「Modal」だけで使われることが多いので注意が必要です。 Modal はユーザの操作を制限し、ユーザが特定のタスクに集中して対処しなければならない状態を作り出します。 ユーザは「モーダ

はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に

はじめに この記事では、Next.js × Convex × Clerk でフルスタックアプリを作る方法をハンズオン形式で紹介します。 Convex と Clerk を組み合わせることで、認証付きのフルスタックアプリを爆速で開発することができます。 完成物は、以下の GitHub リポジトリで公開しています。 Convex とは Convex は、Firebase のようなバックエンドアプリケーションプラットフォームです。リアルタイムデータベースやファイルストレージなどの機能を提供しています。 Firebase との違いは、以下の記事で詳しく解説されています。 Clerk とは Clerk は、認証・認可を提供するサービスです。Clerk と Convex を併用することで、認証・認可の実装を非常に簡単に行うことができます。 Next.js での認証といえば、NextAuth が思い浮かび