SvelteでSupabaseを使う例

superbase

今日は最近流行りのSvelteスタックで基本的な操作を理解できる例を紹介しますね。 Supabaseのセットアップ 前回のSupabaseの記事を読んでおきましょう。 次に、テーブルを準備します。 このスクリプトを選択します。 “Run”または “Execute” ボタンをクリックして選択したスクリプトを実行します。これにより、データベースに「Todo」テーブルが作成され、必要な行レベルのセキュリティルールも設定されます。 スクリプトが正常に実行されると、テーブルとルールが作成されたことを示す確認メッセージが表示されます。 “Data” タブに移動して、「Todo」テーブルが作成されていることを確認できます。 APIキーの取得 URLとキーの取得 プロジェクト設定に移動して(歯車アイコン)、APIタブを開き、API URLと匿名キー(anon key)を見つけてください。これらは次の手順で必要になります。 匿名キーは、クライアント側のAPIキーです。ユーザーがログインするまで、データベースへの「匿名アクセス」を許可します。ユーザーがログインしたら、キーはユーザー自身のログイントークンに切り替わります。これにより、データの行レベルのセキュリティが有効になります。 注意:サービスロールキーはセキュリティポリシーをバイパスし、データに完全なアクセス権を持っています。これらのキーは秘密に保つ必要があり、サーバー環境でのみ使用され、クライアントやブラウザ上で使用しないでください。 プロジェクトのクローン SupabaseのプロジェクトができたらSvelteのToDoリストのサンプルリポジトリがるのでこれをクローンしましょう。 https://github.com/supabase/supabase/tree/master/examples/todo-list/sveltejs-todo-list 下記のコマンドだとSupabaseの全部のリポがクローンされてしまうのでサイズはちょっと大きいかも ではSvelteの例があるディレクトリに移動してライブラリをインストールしましょう。同じディレクトリにNext.jsとNuxt.jsで作られたToDoリストのサンプルプロジェクトもあるようですね。 ではcode . のコマンドでVSCodeを開きましょう。 ルートディレクトリに.env.exampleのファイルがあるので名前を.envに変更します。 次に中にある環境変数に先ほどSupabaseでとってきた値を入力します。 アプリの起動 ではnpm run devのコマンドでSvelteアプリを起動します。 でサインアップをするとメールにちゃんとサインアップの確認メールが届きました。 そうするとToDoリストに誘導されてタスクを入力できるようになりましたね。 登録されたユーザーはAUthentication(認証)タブのユーザーから確認できますね。 でSvelteのアプリから追加したタスクもデータベースのテーブルに反映されていました。 Googleでのログインを追加する まずは、Gooelデベロッパーコンソールからプロジェクトを作成をします。Google Developer ConsoleからSupabaseのGoogle認証に使用するOAuthのClient IDを取得する手順は以下の通りです: ではSupabaseの認証タブでキーを登録します。 これだけで、OKです。素晴らしいですね。 ではGoogleでもログインできることを確認しましょう。 今日はコードの説明なしですが、次回詳しくSvelteのファイル構成と一緒に見ていきましょう。

【仮想DOMの概念から】なぜSvelteがReactよりも優れているのか

Svelte React どっちが良いか

このタイトルだとReactがダメみたいなニュアンスでとられるかもしれませんが、今日の議題であるSvelteが仮想DOMを使用しないことに注目していただきたいです。現在はReactがマーケットの主役であり必須のスキルであることは明らかです。 Svelteのフレームワークは前回の記事で詳しく説明しているので是非読んでみてください。 以上を理解していただいたうえで今後のフレームワークを選ぶ材料として下記の記事を読んでいただければと思います。 DOM操作のコスト まずはDOM操作にかかるコストについて理解しましょう。 以下に主要なDOM操作のコストを記載します。 これらのコストは、DOMの変更が大きい場合や複数の要素に影響を与える場合に増加する傾向があります。したがって、効率的なDOM操作を行うことは、パフォーマンスの向上につながります。 また、注意点として、ブラウザは最適化を行っているため、すべてのDOMの変更が即座にコストを引き起こすわけではありません。一部の変更はバッチ処理されたり、最適化されたりする場合があります。しかし、大量のDOMの変更や頻繁な変更は、パフォーマンスの低下を引き起こす可能性があります。 したがって、DOMの変更は必要最小限に抑えることが重要であることが分かります。 仮想DOMの概要 仮想DOMは、実際のDOMの抽象化をさせる技術であり、Webアプリケーションのパフォーマンスを向上させるために使用されています。通常、ブラウザ上のDOMへの変更は上記のようなコストがかかるため、仮想DOMは変更を抽象化し、最小限のDOM操作に変換することで効率化を図ります。 仮想DOMの利点 仮想DOMの弱点 Reactの仮想DOM Reactでは、仮想DOMを使用してUIの変更を追跡し、必要な最小限のDOM操作を行います。コンポーネントの状態が変更されると、Reactは仮想DOMを再構築し、以前の仮想DOMとの差分を計算します。その差分を実際のDOMに適用することで、必要な部分のみを更新します。 Reactの仮想DOMの手順は以下のようになります: Reactの仮想DOMの利点は、状態の変更に応じて必要な部分のみを更新できることです。これにより、パフォーマンスが向上し、スムーズなユーザーエクスペリエンスが実現できます。 SvelteのDOM操作 Svelteは、Reactとは異なるアプローチを取っています。Svelteでは、コンパイル時する作業を行い、コンポーネント内のロジックとテンプレートが結合され、最終的にまとめられたVanilla JavaScriptのコードが生成されます。この生成されたコードには、仮想DOMの概念は存在しません。 Svelteでは、コンパイル時に変更をトラックし、直接最適なDOM操作を生成します。つまり、Svelteは実際のDOM操作を行い、仮想DOMを介さずに変更を反映します。これにより、実行時のオーバーヘッドが少なくなり、高速なアプリケーションが実現できます。 Svelteの仮想DOMの利点は、ビルド時に最適化されたコードを生成し、実行時のオーバーヘッドを減らすことです。また、Svelteは必要な最小限のコードしか生成しないため、アプリケーションのサイズも小さくなります。 SvelteがReactよりも優れている点 まとめ もちろん、フレームワークの完成度やコミュニティの大きさ、需要を理解したうえで選ぶことが大切どちらのフレームワークも優れた特徴を持っているので、プロジェクトの詳細や開発者の好みによって決めることになると思います。

Svelteを始めよう!Reactよりも使いやすい?

Svelteとは

今日はSvelteのフレームワークを紹介します。 Svelteってどんなフレームワーク Svelteは、JavaScriptベースのフロントエンドフレームワークです。Svelteは、コンパイル時にコンポーネントを効果的に変換し、ブラウザで実行可能なJavaScriptコードを生成することで、高速なパフォーマンスと効率的なバンドルサイズを提供します。 Svelteの特徴的な点は、実行時にライブラリコードを含まずにコンポーネントをビルドすることです。ReactやVueなどの他のフレームワークと異なり、Svelteは仮想DOM(Virtual DOM)を使用せず、変更を追跡するための高度なリアクティビティシステムを備えています。これにより、ブラウザでの実行時のパフォーマンスが向上し、アプリケーションの応答性が向上します。 Svelteのコンポーネントは、HTML、CSS、およびJavaScriptを組み合わせて記述します。コンポーネント内の変数や状態を宣言することができ、これらの変数の変更は自動的にコンポーネントの再レンダリングを引き起こします。また、Svelteではトランジションやアニメーションの作成も容易であり、ユーザーインターフェースを豊かにするための強力なツールが提供されています。 Svelteの他の特徴には、ReactやVue.jsなどの他のフレームワークで使われている機能や構文のいくつかが組み込まれていることがあります。また、Svelteアプリケーションは、単一のJavaScriptバンドルファイルとして出力されるため、配信やホスティングが容易です。 総合的に言えば、Svelteは、高速なパフォーマンス、効率的なバンドルサイズ、シンプルな構文、および強力なリアクティビティシステムを提供するモダンなフロントエンドフレームワークです。 Svelteを開発した人は誰 Svelteは、Rich Harris(リッチ・ハリス)という開発者によって作成されました。Rich Harrisは、The New York TimesやThe Guardianなどのメディア企業でフロントエンド開発者としての経験を積んでいました。 彼は、既存のフロントエンドフレームワークが仮想DOMに基づいて動作することに対する懸念を抱いていました。そのため、Svelteを作成し、仮想DOMの代わりにコンパイル時に効率的なコードを生成することで、高速で効率的なフレームワークを提供しました。 Svelteは2016年に最初に発表され、以降、多くの開発者によって利用されています。Rich Harrisは、Svelteのリードデベロッパーとして、フレームワークの進化と改善に取り組んでいます。彼の革新的なアイデアと貢献により、Svelteはフロントエンド開発コミュニティで注目を集めています。 日本でSvelteを使っている会社 ではSvelteの利点や使うべき状況が理解できたところで早速Svelteのプロジェクトを作成します。 SvelteKitとSvelteの違い SvelteとSvelteKitは、どちらもSvelteフレームワークをベースにしたツールですが、いくつかの重要な違いがあります。 これらはSvelteとSvelteKitの主な違いです。Svelteは効率的なUIの構築に特化しており、SvelteKitはフルスタックのフレームワークであり、ルーティングやサーバーサイドレンダリングなどの機能を提供しています。どちらを選択するかは、プロジェクトの要件と目標によって異なります。 Svelte / Svelte Kitを始めよう ①Node.jsのインストール: SvelteはNode.js環境で動作しますので、まずはNode.jsをインストールしてください。公式ウェブサイト (https://nodejs.org) から最新の安定版をダウンロードし、インストールしてください。 ②Svelteアプリケーションの作成: Svelteプロジェクトを作成するために、ターミナル(コマンドプロンプト)を開き、以下のコマンドを実行します。 myappの部分は自分のプロジェクト名を入れましょう。 ※ちなみにViteでもプロジェクトの作成ができます! では実際にnpm run devのコマンドでアプリを起動してみましょう。ダイナミックでインタラクティブなウェブアプリが表示されましたね。(demoをインストールするとサンプルコードが見れます。) Svelte Kitのファイル構成 Svelteの一般的なファイル構成は、以下のような形になります。 SvelteKitの一般的なファイル構成は、以下のような形になります。ただし、プロジェクトの設定や追加のモジュールの導入によって、構成は変化する可能性があります。 終わりに いかがでしたでしょうか?Svelteを学ぶことは、モダンなフロントエンド開発において非常に有益です。Svelteはシンプルで直感的な構文を持ち、パフォーマンスに優れたアプリケーションを構築することができます。ReactやVueと合わせて是非、活用してみてください。