translate docs/guides/with-svelte

web/.textlintignore

@@ -41,7 +41,6 @@ docs/guides/hosting/docker.mdx
 docs/guides/hosting/overview.mdx
 docs/guides/hosting/platform.mdx
 docs/guides/local-development.mdx
-docs/guides/with-svelte.mdx
 docs/handbook/contributing.mdx
 docs/handbook/supasquad.mdx
 docs/learn/auth-deep-dive/google-oauth.md

web/docs/guides/with-angular.mdx

@@ -62,6 +62,8 @@ values={[
 ]}>
 <TabItem value="UI">
 
+<!-- textlint-enable -->
+
 ```sh
 1. 「SQL」セクションに移動します。
 2. 「User Management Starter」をクリックします。
@@ -173,7 +175,7 @@ npm install @supabase/supabase-js
 
 最終的には、`environment.ts`ファイルに環境変数を保存します。
 必要なのはAPIのURLと[先ほど](#apiキーを取得)コピーした`anon`keyだけです。
-これらの変数はブラウザ上で公開されますが、データベースでは[行レベルのセキュリティ](/docs/guides/auth#row-level-security)が有効になっているので、全く問題ありません。
+これらの変数はブラウザー上で公開されますが、データベースでは[行レベルのセキュリティ](/docs/guides/auth#row-level-security)が有効になっているので、全く問題ありません。
 
 ```ts title="environment.ts"
 export const environment = {
@@ -183,7 +185,7 @@ export const environment = {
 };
 ```
 
-API認証ができたので、Supabaseクライアントを初期化し、Supabase APIと通信するための関数を実装するために、`ng g s supabase`で**SupabaseService**を作成しましょう。
+API認証ができたので、Supabaseクライアントを初期化します。そのため、Supabase APIと通信するための関数を実装するために、`ng g s supabase`で**SupabaseService**を作成しましょう。
 
 ```ts title="src/app/supabase.service.ts"
 import { Injectable } from '@angular/core';

web/docs/guides/with-nextjs.mdx

@@ -83,6 +83,8 @@ values={[
 </TabItem>
 <TabItem value="SQL">
 
+<!-- textlint-enable -->
+
 ```sql
 -- パブリックで「profiles」テーブルを作成
 create table profiles (

web/docs/guides/with-react.mdx

@@ -81,6 +81,8 @@ values={[
 </TabItem>
 <TabItem value="SQL">
 
+<!-- textlint-enable -->
+
 ```sql
 -- パブリックで「profiles」テーブルを作成
 create table profiles (
@@ -187,7 +189,7 @@ REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
 ```
 
 APIの認証情報が得られたので、次はSupabaseクライアントを初期化するヘルパーファイルを作成しましょう。
-これらの変数はブラウザ上で公開されますが、データベースでは[行レベルのセキュリティ](/docs/guides/auth#row-level-security)が有効になっているので、全く問題ありません。
+これらの変数はブラウザー上で公開されますが、データベースでは[行レベルのセキュリティ](/docs/guides/auth#row-level-security)が有効になっているので、全く問題ありません。
 
 ```js title="src/supabaseClient.js"
 import { createClient } from '@supabase/supabase-js'
@@ -409,7 +411,7 @@ export default function Home() {
 }
 ```
 
-更新が完了したら、ターミナル・ウィンドウでこれを実行します。
+更新が完了したら、ターミナル・ウィンドウで次のコマンドを実行します。
 
 ```bash
 npm start

web/docs/guides/with-svelte.mdx

@@ -1,46 +1,46 @@
 ---
 id: with-svelte
-title: "Quickstart: Svelte"
-description: Learn how to use Supabase in your Svelte App.
+title: "クイックスタート：Svelte"
+description: SvelteアプリでSupabaseを使用する方法をご紹介します。
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-## Intro 
+## イントロ
 
-This example provides the steps to build a simple user management app (from scratch!) using Supabase and Svelte. It includes:
+この例では、SupabaseとSvelteを使って、シンプルなユーザー管理アプリを（ゼロから）構築する手順を紹介します。内容は以下のとおりです。
 
-- Supabase [Database](/docs/guides/database): a Postgres database for storing your user data.
-- Supabase [Auth](/docs/guides/auth): users can sign in with magic links (no passwords, only email).
-- Supabase [Storage](/docs/guides/storage): users can upload a photo.
-- [Row Level Security](/docs/guides/auth#row-level-security): data is protected so that individuals can only access their own data.
-- Instant [APIs](/docs/guides/api): APIs will be automatically generated when you create your database tables.
+- Supabase [Database](/docs/guides/database)：ユーザーデータを保存するためのPostgresデータベースです。
+- Supabase [Auth](/docs/guides/auth)：ユーザーはマジックリンクでサインインできます（パスワードは不要、メールのみ）。
+- Supabase [Storage](/docs/guides/storage)：ユーザーは写真をアップロードできます。
+- [行レベルセキュリティー](/docs/guides/auth#row-level-security)：データは保護されており、個人が自分のデータにしかアクセスできないようになっています。
+- インスタント[API](/docs/guides/api)：データベースのテーブルを作成すると、APIが自動的に生成されます。
 
-By the end of this guide you'll have an app which allows users to login and update some basic profile details:
+このガイドの最後には、ユーザーがログインして基本的なプロフィール情報を更新できるアプリが完成します。
 
-![Supabase User Management example](/img/user-management-demo.png)
+![Supabaseユーザー管理の例](/img/user-management-demo.png)
 
 ### Github
-Whenever you get stuck at any point, take a look at [this repo](https://github.com/yustarandomname/svelte-supabase-quickstart).
+どこかで行き詰ったら、[このリポジトリー](https://github.com/yustarandomname/svelte-supabase-quickstart)を見てみましょう。
 
-## Project set up
+## プロジェクトのセットアップ
 
-Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase 
-and then creating a "schema" inside the database.
+ビルドを開始する前に、データベースとAPIをセットアップします。Supabaseで新しいプロジェクトを立ち上げ、データベース内に「スキーマ」を作成するだけです。
 
-### Create a project 
+### プロジェクトの作成
 
-1. Go to [app.supabase.io](https://app.supabase.io).
-1. Click on "New Project".
-1. Enter your project details.
-1. Wait for the new database to launch.
+1. [app.supabase.io](https://app.supabase.io)にアクセスします。
+1. 「New Project」をクリックします。
+1. プロジェクトの詳細を入力します。
+1. 新しいデータベースが起動するのを待ちます。
 
 
-### Set up the database schema
+### データベース・スキーマの設定
 
-Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor, 
-or you can just copy/paste the SQL from below and run it yourself.
+これからデータベース・スキーマを設定します。SQLエディターの「User Management Starter」クイック・スターターを使用するか、下記のSQLをコピー/ペーストして自分で実行できます。
+
+<!-- textlint-disable -->
 
 <Tabs
 defaultValue="UI"
@@ -50,10 +50,12 @@ values={[
 ]}>
 <TabItem value="UI">
 
+<!-- textlint-enable -->
+
 ```sh
-1. Go to the "SQL" section.
-2. Click "User Management Starter".
-3. Click "Run".
+1. 「SQL」セクションに移動します。
+2. 「User Management Starter」をクリックします。
+3. 「Run」をクリックします。
 ```
 
 <video width="99%" muted playsInline controls="true">
@@ -64,7 +66,7 @@ values={[
 <TabItem value="SQL">
 
 ```sql
--- Create a table for public "profiles"
+-- パブリックで「profiles」テーブルを作成
 create table profiles (
   id uuid references auth.users not null,
   updated_at timestamp with time zone,
@@ -91,14 +93,14 @@ create policy "Users can update own profile."
   on profiles for update
   using ( auth.uid() = id );
 
--- Set up Realtime!
+-- リアルタイムをセットアップ
 begin;
   drop publication if exists supabase_realtime;
   create publication supabase_realtime;
 commit;
 alter publication supabase_realtime add table profiles;
 
--- Set up Storage!
+-- ストレージをセットアップ
 insert into storage.buckets (id, name)
 values ('avatars', 'avatars');
 
@@ -116,11 +118,11 @@ create policy "Anyone can upload an avatar."
 </Tabs>
 
 
-### Get the API Keys 
+### APIキーを取得
 
 
-Now that you've created some database tables, you are ready to insert data using the auto-generated API. 
-We just need to get the URL and `anon` key from the API settings.
+データベースのテーブルをいくつか作成したので、自動生成されたAPIを使ってデータを挿入する準備ができました。
+API設定からURLと`anon`キーを取得する必要があります。
 
 <Tabs
 defaultValue="UI"
@@ -130,10 +132,10 @@ values={[
 <TabItem value="UI">
 
 ```sh
-1. Go to the "Settings" section.
-2. Click "API" in the sidebar.
-3. Find your API URL in this page.
-4. Find your "anon" and "service_role" keys on this page.
+1. 「Settings」セクションに移動します。
+2. サイドバーの「API」をリックします。
+3. そのページでAPI URLを探します。
+4. 「anon」と「service_role」キーを探します。
 ```
 
 <video width="99%" muted playsInline controls="true">
@@ -143,48 +145,46 @@ values={[
 </TabItem>
 </Tabs>
 
-## Building the App
+## アプリの構築
 
-Let's start building the Svelte app from scratch.
+それでは早速、Svelteアプリを一から作ってみましょう。
 
-### Initialize a Svelte app
+### Svelteアプリの初期化
 
-We can use the [Quickstart Svelte Template](https://svelte.dev/blog/the-easiest-way-to-get-started) to initialize 
-an app called `supabase-svelte`:
+[Svelteテンプレートのクイックスタート](https://svelte.dev/blog/the-easiest-way-to-get-started)を使って、`supbase-svelte`というアプリを初期化します。
 
 ```bash
 npx degit sveltejs/template supabase-svelte
 cd supabase-svelte
 ```
 
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
+そして、唯一追加する必要がある依存関係の[supbase-js](https://github.com/supabase/supabase-js)をインストールしましょう。
 
 ```bash
 npm install @supabase/supabase-js
 ```
 
-And finally we want to save the environment variables in a `.env`. 
-All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
+最後に、環境変数を`.env`に保存します。必要なのは、APIのURLと、[先ほど](#apiキーを取得)コピーした`anon`キーだけです。
 
 ```bash title=".env"
 SVELTE_APP_SUPABASE_URL=YOUR_SUPABASE_URL
 SVELTE_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
 ```
 
-Our app is almost functional, to make svelte work with supabase and .env files we first need to change the `rollup.config.js` file a bit.
-Supabase imports `json` files, to convert .json files to ES6 modules we need a the `@rollup/plugin-json` install it by running: 
+このアプリはほぼ機能していますが、svelteをSupabaseや`.env`ファイルで動作させるためには、まず、`rollup.config.js`ファイルを少し変更する必要があります。
+Supabaseは`json`ファイルをインポートしますが、.jsonファイルをES6モジュールに変換するには、`@rollup/plugin-json`をインストールして実行する必要があります。
 
 ```bash
   npm install --save-dev @rollup/plugin-json
 ```
 
-Furthermore, to use the .env with svelte we need another rollup plugin. Install:
+さらに、.envをsvelteで使用するためには、別のrollupプラグインが必要です。そのプラグインをインストールします。
 
 ```bash
   npm install --save-dev dotenv @rollup/plugin-replace
 ```
 
-and add these plugins to the `rollup.config.js` file.
+これらのプラグインを`rollup.config.js`ファイルに追加します。
 
 ```js title="rollup.config.js"
   import { config } from 'dotenv';
@@ -209,8 +209,8 @@ and add these plugins to the `rollup.config.js` file.
   }
 ```
 
-Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
-on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
+APIの認証情報が得られたので、次はSupabaseクライアントを初期化するヘルパーファイルを作成しましょう。
+これらの変数はブラウザー上で公開されますが、データベースでは[行レベルのセキュリティ](/docs/guides/auth#row-level-security)が有効になっているので、全く問題ありません。
 
 ```js title="src/supabaseClient.js"
 import { createClient } from '@supabase/supabase-js'
@@ -221,12 +221,12 @@ const supabaseAnonKey = __api.env.SVELTE_APP_SUPABASE_ANON_KEY
 export const supabase = createClient(supabaseUrl, supabaseAnonKey)
 ```
 
-And one optional step is to update the CSS file `public/global.css` to make the app look nice. 
-You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/react-user-management/src/index.css).
+また、オプションとして、CSSファイルの`public/global.css`を更新して、アプリの外観を整えます。
+[こちら](https://raw.githubusercontent.com/supabase/supabase/master/examples/react-user-management/src/index.css)にあるファイルを参照してください。
 
-### Set up a Login component
+### ログイン・コンポーネントの設定
 
-Let's set up a Svelte component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
+ログインとサインアップを管理するSvelteコンポーネントを設定しましょう。マジック・リンクを使用することで、ユーザーはパスワードを使わずにメールでサインインできます。
 
 ```html title="/src/Auth.svelte"
 <script>
@@ -268,19 +268,19 @@ Let's set up a Svelte component to manage logins and sign ups. We'll use Magic L
 </form>
 ```
 
-### User store
-To access the user information in other places, we use writable store. Create a new file called `sessionStore.js`
+### ユーザー・ストア
+他の場所にあるユーザー情報へアクセスするため、書き込み可能なストアを使用します。`sessionStore.js`という新しいファイルを作成します。
 ```javascript title="src/sessionStore.js"
 import { writable } from 'svelte/store';
 
 export const user = writable(false);
 ```
 
 
-### Account page
+### アカウントページ
 
-After a user is signed in we can allow them to edit their profile details and manage their account.
-Let's create a new component for that called `Profile.svelte`.
+ユーザーがサイン・インした後、プロフィールの詳細を編集したり、アカウントを管理できるようにします。
+そのための新しいコンポーネント、`Profile.svelte`を作りましょう。
 
 ```html title="src/Profile.svelte"
 <script>
@@ -392,9 +392,9 @@ Let's create a new component for that called `Profile.svelte`.
 
 
 
-### Launch!
+### ローンチ 
 
-Now that we have all the components in place, let's update `App.svelte`:
+すべてのコンポーネントがそろったところで、`App.svelte`を更新しましょう。
 
 ```html title="src/App.svelte"
 <script>
@@ -419,25 +419,25 @@ Now that we have all the components in place, let's update `App.svelte`:
 </div>
 ```
 
-Once that's done, run this in a terminal window:
+更新が完了したら、ターミナル・ウィンドウで次のコマンドを実行します。
 
 ```bash
 npm run dev
 ```
 
-And then open the browser to [localhost:5000](http://localhost:5000) and you should see the completed app.
+そして、ブラウザーで[localhost:5000](http://localhost:5000)を開くと、完成したアプリを見ることができます。
 
-> ⚠️ WARNING: Svelte uses by default `port 5000`, Supabase uses`port 3000`. To change the redirection port for supabase go to: `Authentication > Settings` and change the `Site Url` to `localhost:5000`
+> ⚠️ 注意：Svelteはデフォルトで`5000番ポート`を使用し、Supabaseは`3000番ポート`を使用します。Supabaseのリダイレクトポートを変更するには、次のようにします。`Authentication > Settings`で`Site Url`を`localhost:5000`に変更してください。
 
 ![Supabase Svelte](/img/supabase-svelte-demo.png)
 
-## Bonus: Profile photos
+## おまけ：プロフィール写真
 
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
+すべてのSupabaseプロジェクトには、写真やビデオなどの大容量ファイルを管理するための[Storage](/docs/guides/storage)が設定されています。
 
-### Create an upload widget
+### アップロード・ウィジェットの作成
 
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
+ユーザーがプロフィール写真をアップロードできるように、ユーザーのアバターを作成しましょう。まず、新しいコンポーネントを作成します。
 
 ```html title="src/Avatar.svelte"
 <script>
@@ -523,9 +523,9 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 ```
 
 
-### Add the new widget
+### 新しいウィジェットの追加
 
-And then we can add the widget to the Account page:
+そして、このウィジェットをアカウント・ページに追加します。
 
 
 ```html title="src/Profile.svelte"
@@ -543,9 +543,9 @@ And then we can add the widget to the Account page:
 
 ```
 
-## Next steps
+## 次のステップ
 
-At this stage you have a fully functional application!
+この段階で、完全に機能するアプリケーションが完成しました。
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.io](https://app.supabase.io)
+- 何か疑問がありましたら、[こちら](https://github.com/supabase/supabase/discussions)で質問してください
+- サインイン：[app.supabase.io](https://app.supabase.io)