書籍用のフロントエンドアプリケーション用のダウンロードリポジトリです。
本書を引用する形でサンプルアプリケーションについて説明します。
今回はフロントエンドアプリケーションから、ユーザーのサインアップやログインを実施します。 ユーザー情報はデータベースに保管されており、TypeScript の型安全のしくみを十分発揮させるために O/R マッパを導入しています。 今回は Prisma1と呼ばれる O/R マッパを利用します。 Prisma のトップページには、「Next-generation ORM for Node.js and TypeScript」と記載されています。 今後のサーバーサイドの TypeScript 開発において非常に優秀な O/R マッパとなっています。 データベースのマイグレーション機能も備えており、サンプルアプリケーションのテーブル作成やサンプルデータ投入でも Prisma の機能を利用しています。
フロントエンドアプリケーションはダッシュボード形式の UI としています。 オフィスに導入したアイテムをアイテムリストとして表示して共有して閲覧するような UI をイメージしています。 バックエンドアプリケーションと通信するためのサンプルとして活用するために、アイテムの追加も可能としています。 本来であれば、ユーザーを新規登録可能とするにはドメイン制御をしたりメール認証等もすべきです。 今回はサンプルであるため、このような機能要件は省いています。 備えている画面は次の通りです。
- ログイン前トップページ(index.tsx)
- DB 接続なしで画面表示をするために用意した画面です。
- いわゆるウェルカムページの役割で、Hello world を表示するために利用します。
- ログインページ(auth/login.tsx)、サインアップページ(auth/signup.tsx)
- ユーザーログイン用途です。
- 現状はログインユーザーごとでログイン後画面の表示制御はしていないですが、認証済ユーザーでないとメインコンテンツページには遷移できないという意図で作成しています。
- アイテムリストページ(top.tsx)
- 認証済ユーザーがデータベースに追加したアイテム一覧を表示するためのページです。
- 気に入ったアイテムはお気に入りマークをつけることができます。本来、ユーザごとにお気に入りをしたアイテムを分けるべきですが、今回はその部分までつくりこんではおりません。
- さらに、新しいアイテムが登録できます。
- お気に入りページ(farovite.tsx)
- お気に入りマークがついたアイテムを表示するページです。
- 通知ページ(notification.tsx)
- 認証済ユーザーにお知らせをするための通知ページです。
- 未読通知を既読にできます。
本書の内容に沿って、ご利用ください。