このアプリを作った理由
最近は、レベルの高低はともかくとして、
Reactを使って自作アプリを作ることにはある程度慣れてきたため、
次のステップとしてBaaSを活用したアプリ開発に挑戦してみたいと考え、
Udemyの講座を受講しながら、実際に簡易的なSNSアプリを作成してみました。
もともとReact自体の学習に苦戦していたこともあり、
これまではデータベースを活用した開発にまでなかなか意識が向かなかったのですが、
あらためてバックエンドの基礎を学びたいと思い、
ハンズオン形式でアプリ制作に取り組みました。
アプリの基本機能紹介
📝 1. 新規登録（サインアップ）画面
ユーザーは名前、メールアドレス、パスワードを入力して、新しくアカウントを作成できます。
🔐 2.ログイン画面
登録済みのユーザーは、メールアドレスとパスワードを入力してログインできます。
ログイン後は、自動的に投稿画面へリダイレクトされ、
認証済みユーザーのみが投稿機能を利用できる仕組みになっています。
📝 3. 投稿機能
ログイン後、投稿フォームが表示され、好きな内容を投稿することができます。
投稿すると、投稿一覧の先頭に新しい投稿が即時反映されます。
また、投稿はログイン済みユーザーであれば誰でも可能ですが、削除はその投稿を行った本人のみが行えるように、
Supabase側でポリシーを設定する方法も学びました。
🔓 4. ログアウト機能
画面右上の「ログアウト」ボタンをクリックすると、
ログイン画面へリダイレクトされる仕組みになっています。
一般的なSNSと同様に、ログアウト後は投稿ページなどの機能にアクセスできなくなります。
このアプリを作ることで学んだこと
Supabaseを使った認証機能の実装
今回初めてSupabaseの認証機能を使い、ユーザー登録、ログイン、ログアウトの処理を実装しました。
使った関数など
- signUp()：新規ユーザーの登録
- signInWithPassword()：メールアドレスとパスワードによるログイン
- getSession()：ログイン状態の取得、保持
- signOut()：ログアウト処理
まだまだ理解は完全ではありませんが、Supabaseにはこうした便利な関数が用意されており、
フロントエンド側から簡単にユーザー管理機能を構築できるという点は非常に勉強になりました。
認証状態の使い回しにはContext API
今回の開発では、ログインユーザーの情報を、Homeページ、SideMenu、投稿機能など、
複数のコンポーネントで使い回す必要がありました。
そこで学んだのが、ReactのContext APIを使って、
ユーザー情報を「グローバルに管理、共有」するという方法です。
以前に作った自作アプリでは、状態をpropsで渡し続けていたため、
コンポーネントの階層が深くなるたびに受け渡しがどんどん煩雑になっていました。
今回は、あらかじめ定義したSessionProviderでApp全体を囲むだけで
どの階層のコンポーネントからでもアクセスできる仕組みに触れ、
props地獄を回避する方法についても理解を深めることができました。
Context API実装のサンプルコード
SessionProvider.jsで「ログイン状態の使い回し」を定義
// SessionProvider.js
const SessionContext = createContext();
const SessionProvider = (props) => {
const [currentUser, setCurrentUser] = useState(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const setSession = async () => {
const user = await authRepository.getCurrentUser();
setCurrentUser(user);
setIsLoading(false);
};
setSession();
}, []);
if (isLoading) return <div />;
return (
<SessionContext.Provider value={{ currentUser, setCurrentUser }}>
{props.children}
</SessionContext.Provider>
);
};
export { SessionContext, SessionProvider };このSessionProviderでmain.jsxのApp全体を囲むことで…
// main.jsx
<React.StrictMode>
<SessionProvider>
<App />
</SessionProvider>
</React.StrictMode>
アプリ内のどのコンポーネントからでもuseContextを使って、
ログインユーザーの情報にアクセスできるようになりました。
今回のように「グローバルに共有したい値」がある場合には、
ぜひ参考にして取り入れていきたいと思います。
最後に：今回の開発を通じて得た学びのまとめ
今回の開発を通して、Supabaseを用いた認証機能の実装や、
ReactのContext APIを使った認証状態のグローバル管理など、
実践的に多くのことを学ぶことができました。
まだまだ理解が浅い部分もありますが、今回の経験を土台にしながら、
今後もバックエンドの分野も学習を深めていきたいと思います。
最後までご覧いただき、ありがとうございました！