見出し画像

Next.js＆SupabaseでTodoアプリを作ろう

ケン吉

アプリケーションがどのように作られているかやデータの流れがどのようになっているかを把握することはとても大事です。現代のフロントエンド技術とBaaS (Backend As A Service)の提供により、アプリケーション開発がこれまで以上に手軽になっています。

これらのツールを使用することで、開発プロセスが迅速かつ効率的に行えるようになり、開発者はより短い時間で高品質なプロダクトを提供できるようになりました。

今回はフロントエンド開発では一般的な選択肢となりつつあるTypeScriptとNext.js、簡単に整ったUIが作れるMaterial UI、バックエンドがあっという間に設定できるBaaS (Backend As A Service)であるSupabaseを使ってTODOアプリ認証付きのTDOOアプリを作成しました。

こんな方におすすめ

  • プログラミング学習だけじゃ物足りない方

  • 短時間でモダンなフロントエンド開発を習得したい方

  • BaaSの使い方を習得したい方

どうやってプログラミング実装しているか分かるように動画を作成したのでよかったらみて見てください！

新しい技術を活用することで、頭の中にあるサービスを表現できるチャンスです。ぜひ挑戦していってくださいね！


TODOアプリ概要

データの流れ

下の図はユーザーがサイトへアクセスしてからページが表示されるまでの基本的なデータの流れです。これを把握しておくことでどこからデータを取得しているのかやどのようにデータを加工すればいいかが分かります。

データの流れ

  1. ユーザーがアプリにアクセスします。

  2. アプリ内の処理機能からSupabaseに認証確認します。

  3. 認証されたらユーザー情報を処理機能に返します。

  4. 認証完了後、画面に表示するデータをSupabaseにリクエストします。

  5. Supabaseがデータを返します。

  6. 処理機能で取得したデータを画面用に加工して画面へ渡します。

  7. データが当てはまられた画面をブラウザに反映します。

ちなみにこの図の書き方はシーケンス図と呼ばれ、システムの機能同士がどのような処理をしているのかを時系列順に可視化できるので使い方を知っておくのがおすすめです。

作成するTODOアプリの画面説明

画面の説明

アプリケーションを開発する上で最小限かつ実用的な画面を作っていきます。

トップ画面（認証画面）
トップ画面ではメールアドレスを送信するフォームを作成します。フォームはSupabaseが用意している認証機能を使います。
メールアドレスを送るとリンクが貼り付けられているメールが届きます。そのリンクをクリックすると認証が完了し、TODOリスト画面へ遷移します。

一覧画面
認証が完了したユーザーはTODOリストを表示できます。認証がない場合は認証画面に遷移されます。
登録したTODOが一覧となって表示され、TODOの詳細ボタンをクリックすると詳細画面へ遷移します。

追加ボタンをクリックすると追加画面へ遷移します。
リストを追加ボタンをクリックすると追加画面へ遷移します。
TOPボタンをクリックすると一覧画面へ遷移します。

追加画面
TODOを追加するための画面です。タイトルと説明を入力して追加ボタンをクリックするとTODOを追加できます。

詳細画面
登録されたTODOを更新・削除できる画面です。画面左上に配置されている編集スイッチをオンにすることで内容を編集できます。このとき、削除ボタンはオフになり、削除できないようになります。
TODOを削除する場合は編集スイッチをオフにして削除ボタンをクリックします。

Supabaseとは？

バックエンドを簡単に作れるサービス

オープンソースのプラットフォームで、データベースと認証を提供するデータベースサービスです。このプラットフォームは、データベースのリアルタイムな更新や、REST APIを介したデータの取得・更新、ユーザー認証の管理などをサポートしています。

また、SupabaseはPostgreSQLをベースにしており、データベース操作においてSQLの柔軟性とパワーを提供しています。
Supabaseのようにバックエンドを提供してくれるサービスをBaaS (Backend As A Service)と言います。

BaaSを使うメリットは？

BaaSを使うとバックエンドやインフラ、認証機能などに頭を悩ませずに提供したいサービスの実装に集中できます。また、多くのBaaSプロバイダーは高度なセキュリティ対策をしているためデータの保護も心配ありません。

それだけでなく、アプリケーションを拡張したいときも設定を変えるだけで自動的にリソースを拡張できます。面倒なメンテナンスもBaaSプロバイダーに任せられるため大幅な工数削減が期待できます。

セットアップ

Next.jsのプロジェクト作成

Next.jsのプロジェクトを作成していきます。

shell

~/Desktop $ mkdir nextjs-supa-todo
~/Desktop $ cd nextjs-supa-todo

mkdir nextjs-supa-todo:
nextjs-supa-todoという名前の新しいディレクトリをデスクトップに作成します。このディレクトリが新しいNext.jsプロジェクトの作業ディレクトリになります。

cd nextjs-supa-todo
 カレントディレクトリを先ほど作成したnextjs-supa-todoディレクトリに変更します。このディレクトリ内でプロジェクトを設定します。

続いて、作成したディレクト内でNext.jsのプロジェクトを作成します。


~/Desktop/nextjs-supa-todo $ npx create-next-app .
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No 
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

npx create-next-app .
現在のディレクトリに新しいNext.jsプロジェクトを作成します。create-next-appはNext.jsの公式ツールで、プロジェクトの初期設定を簡単に行うことができます。「.」は現在のディレクトリを示します。

✔ Would you like to use TypeScript? … Yes
プロジェクトでTypeScriptを使用することを選択します。TypeScriptは、JavaScriptに型付けを追加したもので、開発時のエラーを減らし、コードの保守性を向上させます。

Would you like to use ESLint? … Yes
プロジェクトでESLintを使用することを選択します。ESLintは、JavaScript/TypeScriptコードの静的解析ツールで、コードの一貫性を保ち、潜在的なバグを見つけるのに役立ちます。

✔ Would you like to use Tailwind CSS? … No
Tailwind CSSを使用しないことを選択します。Tailwind CSSはユーティリティファーストのCSSフレームワークで、迅速なスタイリングを可能にしますが、このプロジェクトではMaterial UIを使用するため選択しませんでした。

✔ Would you like to use `src/` directory? … No
プロジェクトのソースコードをsrc/ディレクトリに配置しないことを選択します。代わりに、ルートディレクトリにソースコードを配置します。

✔ Would you like to use App Router? (recommended) … Yes
App Routerを使用することを選択します。App Routerは、Next.jsのルーティング機能の一部で、新しいプロジェクトでは推奨されています。
App Routerを使うと、ファイルの構造がそのままアプリケーションのルーティング構造になるので直感的に設定できて便利です。また、動的ルートやAPIルートのサポートがあるので、フロントエンドとバックエンドのコードを同じプロジェクトで管理できます。

Would you like to customize the default import alias (@/*)? … No
デフォルトのインポートエイリアス（@/*）をカスタマイズしないことを選択します。これにより、Next.jsの標準的なインポートエイリアスを使用します。

ただ、インポートエイリアス（@/*）をカスタマイズを使用するとプロジェクト完成後の運用や保守、拡張が簡単になるという利点があるので、プロジェクトごとにカスタマイズするかを検討していきましょう。以下がインポートエイリアスを使用するメリットです。

  • 可読性の向上: 長い相対パスを避け、ファイルの位置が直感的にわかりやすくなります。

  • メンテナンスの容易化: ファイルの移動やディレクトリ構造の変更が容易になります。

  • 一貫性: インポートパスの一貫性を保つことで、チーム全体でのコードの理解と管理が容易になります。

プロジェクトが作成できたら、必要なライブラリをインポートしていきます。

shell

~/Desktop/nextjs-supa-todo $ npm install react@18.2.0 react-dom@18.2.0 @supabase/auth-helpers-nextjs@0.10.0 @supabase/auth-ui-react@0.4.7 @supabase/supabase-js@2.43.5 @supabase/auth-ui-shared date-fns
~/Desktop/nextjs-supa-todo $ npm install @mui/material @emotion/react @mui/icons-material  @emotion/styled

react
Reactはユーザーインターフェースを構築するためのJavaScriptライブラリです。バージョン18.2.0を指定しています。

react-dom
ReactコンポーネントをDOMにレンダリングするためのパッケージです。

@supabase/auth-helpers-nextjs
Supabaseの認証ヘルパーをNext.jsプロジェクトで使用するためのパッケージです。認証フローの簡素化を支援します。

@supabase/auth-ui-react
Supabaseの認証UIコンポーネントをReactで利用するためのパッケージです。標準的な認証UIを提供します。

@supabase/supabase-js
SupabaseのJavaScriptクライアントライブラリです。Supabaseの機能（認証、データベース操作など）をJavaScript/TypeScriptで使用するためのAPIを提供します。

date-fns
JavaScriptのデート処理ライブラリで、日付の操作を簡素化します。軽量でモジュール化されており、日付のフォーマットや計算を容易に行うことができます。

@mui/material
Material-UIは、GoogleのMaterial Designに基づいたReactコンポーネントライブラリです。UIの一貫性を保ちつつ、迅速に開発を進めるための多くのコンポーネントを提供します。

@emotion/react
Emotionは、CSS-in-JSのライブラリで、Reactコンポーネントのスタイリングを強力かつ柔軟に行うことができます。@mui/materialは内部でEmotionを使用しているため、このパッケージが必要です。

@mui/icons-material
Material-UIのアイコンセットです。多くのアイコンが含まれており、UIに視覚的な要素を追加するために使用されます。

@emotion/styled
Emotionのスタイリングユーティリティで、styledという関数を使用してコンポーネントのスタイリングを行います。Material-UIと共に使用することで、スタイルのカスタマイズが容易になります。

必要なライブラリをインストールできたらNext.jsのプロジェクトを起動します。

shell

~/Desktop/nextjs-supa-todo $ npm run dev

http://localhost:3000/にアクセスし、Next.jsの画面が表示されたら成功です。

Supabaseのデータベース作成

下のサムネイルからSupabaseにアクセスして「Start your project」ボタンをクリックします。

ここから先は

29,115字 / 24画像

¥ 980

サポートよろしくお願いいたします！ いただいたサポートの一部ははクリエイターとしての活動費に使わせていただきます！ ※　サポートの一部は子供たちの教育などの団体に寄付する予定です。