【ITニュース解説】Introduction to Using Supabase with Node.js: Build a Simple Todo App

このニュース記事は、システムエンジニアを目指す初心者に向けて、SupabaseとNode.jsを使って簡単なTodoアプリを構築する具体的な手順を、ステップバイステップで解説している。Todoアプリは、日常のタスクを管理する基本的なアプリケーションであり、Web開発の基礎を学ぶのに最適な題材だ。

まず、Supabaseとは何かについて説明する。Supabaseはオープンソースのプラットフォームで、開発者がアプリケーションのバックエンド機能を迅速に構築できるよう支援する。具体的には、データの管理を行うリアルタイムデータベース、ユーザーのログインを扱う認証機能、画像やファイルなどを保存するストレージ機能、そしてサーバー側で特定の処理を実行するサーバーレス関数といった多岐にわたる機能を提供している。これらの機能は通常、開発者がゼロから構築する必要があるが、Supabaseを利用することでその手間を大幅に削減し、アプリケーションの核となる機能の開発に集中できるため、非常に効率的なツールと言える。

このプロジェクトを開始するにあたり、いくつかの準備が必要となる。まず、Node.jsがPCにインストールされている必要がある。Node.jsは、JavaScriptをWebブラウザの外で実行するための環境であり、サーバーサイドの開発で広く利用されている。次に、JavaScriptの基本的な知識が求められる。これはWeb開発における主要なプログラミング言語であり、Supabaseと連携するコードを記述する際に不可欠だ。最後に、Supabaseのアカウントを公式サイトで無料で作成しておく必要がある。

具体的な開発手順は、Supabaseプロジェクトの作成から始まる。Supabaseのダッシュボードにアクセスし、「New Project」を選択する。プロジェクト名とセキュリティのためのパスワードを設定し、プロジェクトが作成されるのを待つ。プロジェクトが立ち上がったら、「Settings」メニューの中にある「API」セクションへ移動し、「Project URL」と「Anon key」という二つの情報をコピーしておく。これらの情報は、後ほどNode.jsのコードからSupabaseのサービスに安全に接続するために必要となる。

次に、Todoアプリのタスクを保存するためのデータベーステーブルを作成する。Supabaseのダッシュボードで「Database」の「Tables」セクションへ進み、「New Table」をクリックする。テーブル名を「todos」とし、以下に示す三つのカラム（列）を追加する。一つ目は「id」で、各Todoタスクを一意に識別するためのIDを格納する。データ型は「uuid」とし、デフォルト値としてシステムが自動的にIDを生成するように設定する。二つ目は「task」で、Todoの内容をテキスト形式で保存する。データ型は「text」とする。三つ目は「inserted_at」で、タスクがデータベースに追加された日時を記録する。データ型は「timestamptz」とし、デフォルト値として現在の時刻が自動的に設定されるようにする。これらの設定を保存すれば、データベース側の準備は完了だ。

続いて、Node.jsプロジェクトのセットアップを行う。まず、ターミナル（コマンドラインツール）を開き、「mkdir supabase-todo」コマンドでプロジェクト用の新しいフォルダを作成し、「cd supabase-todo」でそのフォルダへ移動する。次に、「npm init -y」コマンドを実行し、Node.jsプロジェクトの初期設定を行う。これにより、プロジェクトの情報を管理する「package.json」ファイルが生成される。最後に、「npm install @supabase/supabase-js」コマンドを実行し、Node.jsアプリケーションからSupabaseサービスを操作するためのJavaScriptライブラリをインストールする。

準備がすべて整ったら、実際のコードを記述する。プロジェクトフォルダ内に「index.js」という名前のJavaScriptファイルを作成し、コードを記述していく。最初に、インストールした「@supabase/supabase-js」ライブラリを「require」関数を使って読み込む。次に、Supabaseプロジェクト作成時に控えておいた「Project URL」と「Anon key」をそれぞれ変数に設定する。これらの情報と「createClient」関数を使って、Supabaseサービスへの接続クライアントを初期化する。

コードの中では、主に二つの非同期関数が定義されている。一つ目は「addTodo()」関数で、新しいTodoタスクをデータベースの「todos」テーブルに追加する役割を担う。この関数内では、Supabaseクライアントの「from('todos')」メソッドで対象テーブルを指定し、「insert([{ task: 'Learn Supabase basics' }])」メソッドを使って、「Learn Supabase basics」という内容のタスクを挿入している。挿入処理が完了すると、その結果（追加されたデータと発生したエラー情報）がコンソールに出力される。二つ目は「fetchTodos()」関数で、データベースに保存されているすべてのTodoタスクを取得する役割を持つ。同様に「from('todos')」メソッドでテーブルを指定し、「select('*')」メソッドでテーブルの全カラムのデータを取得する。この関数の結果もコンソールに出力される。

最後に、これらの関数を実行するためのコードブロックがある。「(async () => { await addTodo(); await fetchTodos(); })();」という部分で、新しいタスクを追加する「addTodo()」関数を実行し、その後、追加されたタスクを含むすべてのタスクを取得する「fetchTodos()」関数を実行する一連の流れが記述されている。非同期処理の完了を待って次の処理へ進むために、「async/await」構文が利用されている。

コードの記述が完了したら、ターミナルで「node index.js」というコマンドを実行する。これにより、記述したJavaScriptコードがNode.js環境で実行される。もしすべてが正しく設定されていれば、コンソールには追加されたTodoタスクの情報（一意なID、タスクの内容、追加日時）がオブジェクトの配列形式で表示され、その下にエラーがないことを示す「null」が表示される。これは、Todoタスクが正常にデータベースに追加され、その後問題なく取得できたことを意味する。

今回の手順で、Todoタスクの追加と取得という基本的な機能が実現できたため、さらにアプリケーションを拡張する可能性も広がる。例えば、「addTodo()」関数を複数回呼び出して多くのタスクを追加したり、「fetchTodos()」関数で取得したデータを加工して、より見やすい形式で表示するWebインターフェースやコマンドラインインターフェースを構築したりすることも可能だ。Supabaseは認証機能やストレージ機能も提供しているため、ユーザーごとにタスクを管理したり、タスクに関連するファイルを保存したりといった、より高度な機能も比較的容易に実装できる。

結論として、SupabaseとNode.jsの組み合わせは、システムエンジニアを目指す初心者がバックエンド開発の基礎を学び、実践的なアプリケーションを構築する上で非常に強力な出発点となる。手軽にデータベースや認証などのバックエンドサービスを導入できるため、アイデアを素早く形にすることが可能となり、開発スキルを効率的に向上させることができる。