Supabase


<p>最近、JavaScript(Next.js)とSupabaseでWEBサイトを作り始めました！</p>



<p>そこで今回は、JavaScriptでSupabaseを使う際のよく利用する処理をメモとして記載しています。</p>



<ul>
<li><a href="https://supabase.com/docs">Supabase Docs</a></li>
</ul>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">今回の前提</a><ul><li><a href="#i-2">使用するライブラリ</a></li><li><a href="#i-3">セットアップ</a></li><li><a href="#i-4">今回のデータベース構造</a></li></ul></li><li><a href="#1">1）特定テーブルのデータを取得する</a></li><li><a href="#2ID">2）特定テーブルの特定IDのデータを取得する</a></li><li><a href="#3">3）特定テーブルにデータを追加する</a></li><li><a href="#4">4）特定テーブルからデータを削除する</a></li><li><a href="#5">5）特定テーブルのデータを更新する</a></li></ul></div>
<h2><span id="i">今回の前提</span></h2>



<h3><span id="i-2">使用するライブラリ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install @supabase/supabase-js</code></pre></div>



<ul>
<li><a href="https://supabase.com/docs/reference/javascript/installing">Supabase Javascript Client</a>（インストール）</li>
</ul>



<h3><span id="i-3">セットアップ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>import { createClient } from &quot;@supabase/supabase-js&quot;;

const supabase = createClient(YOUR_SUPABASE_URL, YOUR_SUPABASE_ANON_KEY)</code></pre></div>



<ul>
<li><a href="https://supabase.com/docs/reference/javascript/initializing">Supabase Javascript Client</a>（セットアップ）</li>
</ul>



<h3><span id="i-4">今回のデータベース構造</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>`posts`テーブル

- `id`: 数値 (自動的にインクリメントされる主キー)
- `title`: 文字列 (投稿のタイトル)
- `description`: 文字列 (投稿の詳細説明)</code></pre></div>



<h2><span id="1">1）特定テーブルのデータを取得する</span></h2>



<p>例えば、<code>posts</code>テーブルから全てのデータを取得します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const { data, error } = await supabase
  .from(&#39;posts&#39;)
  .select(&#39;*&#39;)

console.log(data)

// [
//     {
//       &quot;id&quot;: 1,
//       &quot;title&quot;: &quot;Post 1&quot;,
//       &quot;description&quot;: &quot;This is post 1&quot;,
//     },
//     ...
// ]</code></pre></div>



<ul>
<li><a href="https://supabase.com/docs/reference/javascript/select">https://supabase.com/docs/reference/javascript/select</a></li>
</ul>



<h2><span id="2ID">2）特定テーブルの特定IDのデータを取得する</span></h2>



<p>例えば、<code>posts</code>テーブルから特定ID（例えば1）のデータを取得します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const { data, error } = await supabase
  .from(&#39;posts&#39;)
  .select(&#39;*&#39;)
  .eq(&#39;id&#39;, 1)

console.log(data)

// レスポンス：
// {
//   &quot;id&quot;: 1,
//   &quot;title&quot;: &quot;Post 1&quot;,
//   &quot;description&quot;: &quot;This is post 1&quot;,
// }</code></pre></div>



<h2><span id="3">3）特定テーブルにデータを追加する</span></h2>



<p>例えば、<code>posts</code>テーブルに新しいデータを追加します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const { data, error } = await supabase
  .from(&#39;posts&#39;)
  .insert([
    { title: &#39;New Post&#39;, description: &#39;Hello, world!&#39; }
  ])
  .select()

console.log(data)

// [
//   {
//     &quot;id&quot;: 2,
//     &quot;title&quot;: &quot;New Post&quot;,
//     &quot;description&quot;: &quot;Hello, world!&quot;
//   },
// ]</code></pre></div>



<ul>
<li><a href="https://supabase.com/docs/reference/javascript/insert">https://supabase.com/docs/reference/javascript/insert</a></li>
</ul>



<h2><span id="4">4）特定テーブルからデータを削除する</span></h2>



<p>例えば、<code>posts</code>テーブルから特定ID（例えば1）のデータを削除します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const { error } = await supabase
  .from(&#39;posts&#39;)
  .delete()
  .eq(&#39;id&#39;, 1)</code></pre></div>



<ul>
<li><a href="https://supabase.com/docs/reference/javascript/delete">https://supabase.com/docs/reference/javascript/delete</a></li>
</ul>



<h2><span id="5">5）特定テーブルのデータを更新する</span></h2>



<p>例えば、<code>posts</code>テーブルの特定ID（例えば1）のデータを更新します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const { data, error } = await supabase
  .from(&#39;posts&#39;)
  .update({ title: &#39;Updated Post&#39; })
  .eq(&#39;id&#39;, 1)

console.log(data)

// [
//   {
//     &quot;id&quot;: 1,
//     &quot;title&quot;: &quot;Updated Post&quot;
//     &quot;description&quot;: &quot;This is post 1&quot;,
//   },
// ]</code></pre></div>



<ul>
<li><a href="https://supabase.com/docs/reference/javascript/update">https://supabase.com/docs/reference/javascript/update</a></li>
</ul>


「Supabase」の記事一覧