• ローカルでSupabaseを起動して制限なしで無料で使う

    今日は前回紹介したクラウドのバックエンドサービスSupabaseをローカルで実行させる方法を紹介します。このやり方ではローカルのPostgreSQLデータベースを使用して、ローカルで実行されているSupabaseのインスタンスを使えるのでお金にも管理にも制限がありません。 まずは前回の記事を読んでおきましょう。 では早速Supabaseのセットアップに移ります。 Supabase CLIのインストール npmを使ってSupabaseをインストールします。詳しくはGitHubのドキュメンテーションを参照してください。 https://github.com/supabase/cli 次に、supabasをインストールします。 Docokerをインストール SupabaseはDockerのコンテナを使ってDBやUIアプリのスタックを管理しています。 今回はデスクトップアプリをインストールしますが同じことがDockerCLIでもできます。… 記事を読む

  • SvelteでSupabaseを使う例

    今日は最近流行りのSvelteスタックで基本的な操作を理解できる例を紹介しますね。 Supabaseのセットアップ 前回のSupabaseの記事を読んでおきましょう。 次に、テーブルを準備します。 このスクリプトを選択します。 “Run”または “Execute” ボタンをクリックして選択したスクリプトを実行します。これにより、データベースに「Todo」テーブルが作成され、必要な行レベルのセキュリティルールも設定されます。 スクリプトが正常に実行されると、テーブルとルールが作成されたことを示す確認メッセージが表示されます。 “Data”… 記事を読む

  • Firebaseの代替バックエンド、Supabaseを使ってみよう

    今日はSupabaseを紹介します。 「Supabase」は、オープンソースのプラットフォームで、バックエンドサーバー、データベース、認証、リアルタイムデータ、ストレージなどの機能を提供するBaaS(Backend as a Service)プロバイダーです。Supabaseは、アプリケーションの開発者がアプリケーションのバックエンド機能を迅速かつ簡単に構築および管理できるようにするために設計されています。 主な特徴と機能: Supabaseは、モダンなWebおよびモバイルアプリケーションのバックエンドを効率的に構築するための強力なツールとして広く利用されています。アプリケーションのバックエンドを設計、実装、デプロイするプロセスを簡素化し、開発者がフロントエンドに焦点を当てるのに役立ちます。 更にFirebaseではNoSQLしか提供していないのでPostgreSQLを使い方は必然的にこちらになりますね。 Supabaseのプロジェクトを始める では下記のサインインのページからSupabaseにサインインしましょう。… 記事を読む

  • Web開発の基礎①HTMLの構成

    今日はウェブ開発の基礎としてHTMLを説明します。 HTML知っている方も、新しい発見があるかもしれません。楽しく読んでみて下さい。 HTMLとは HTMLは、インターネット上のウェブページを作るための言語のようなものです。ウェブページは、コンピュータやスマートフォンのウェブブラウザ(例: Google ChromeやSafari)で見ることができるものです。HTMLは、ウェブページがどのように見え、どのように動作するかを指示する言語です。 考えてみてください。ウェブページは、本のページのようなものです。本には章やタイトルがあり、文章や写真があります。同様に、HTMLを使ってウェブページを作ると、タイトルや見出し、文章、画像などの要素を配置することができます。 例えば、次のように考えることができます: ウェブページを見ると、これらのHTMLの指示に従って、タイトル、見出し、文章、画像が配置されていることがわかります。HTMLはウェブページをデザインし、情報を整理するためのツールの一種です。 簡単に言えば、HTMLはウェブページを作るためのレイアウト(配置)の言語で、コンピュータやスマートフォンのウェブブラウザがウェブページを理解し、表示できるようにするものです。… 記事を読む

  • Bun: モダンなJavaScriptランタイムの登場

    近年、JavaScriptエコシステムは急速に進化し、新しいツールやランタイムが登場しています。その中でも、Bunという新しいJavaScriptランタイムが注目を集めています。Bunは、モダンなJavaScriptエコシステムに対応するためにゼロから構築された新しいランタイムで、その設計には3つの主要な目標があります。 また、BunはNode.jsの代替として設計されており、Node.jsやWeb APIなど、数百ものNode.jsとWeb APIをネイティブに実装しています。これにより、既存のNode.jsプロジェクトをBunに移行することが容易に行えます。 Bunの目標は、世界中のほとんどのサーバーサイドJavaScriptを実行し、パフォーマンス向上、複雑さの削減、開発者の生産性の向上をサポートするツールを提供することです。JavaScriptエコシステムの未来を明るくするために、Bunは新しい選択肢として期待されています。 新しい時代のJavaScriptランタイムとして、Bunはどのようなプロジェクトに適しているのか、その素晴らしい機能やパフォーマンスを活用して、開発者コミュニティに貢献することで、私たちのJavaScriptエコシステムをさらに進化させています。将来のプロジェクトにBunを取り入れることで、高速で効率的なJavaScriptアプリケーションの開発が可能になるでしょう。 JavaScriptおよびTypeScriptアプリケーションのためのオールインワンツールキット 続いて、Bunの魅力的な特徴について詳しく見ていきましょう。BunはJavaScriptおよびTypeScriptアプリケーション向けのオールインワンツールキットで、単一の実行可能ファイルで提供される「bun」というコマンドラインツールを含みます。 Bunランタイム: Bunの中核には、Node.jsの代替として設計された高速なJavaScriptランタイムであるBunランタイムがあります。これはZigで書かれ、内部ではJavaScriptCoreを活用しており、起動時間とメモリ使用量を劇的に削減します。この特徴により、Bunは高速な実行を実現し、リソース制約のある環境で効果的にプロダクションコードを実行できます。… 記事を読む

  • Vue3でQuasarのUIライブラリを使おう

    始める前に 今日はVueのUIフレームワークを紹介します。先にVueの基本、Viteの使い方、Node.jsの基本を知っていると理解しやすいです。 Quasarフレームワークとは Quasarの特徴を紹介します。 Quasarとは? Quasarで作成できるもの: Quasarのモットーは、コードを一度書き、それをウェブサイト、モバイルアプリ、および/またはElectronアプリとして同時に展開できるフレームワークです。1つのコードベースで最新のCLIを使用してアプリを効率的に開発し、ベストプラクティスに基づく高速なQuasarウェブコンポーネントを提供します。 Quasarを使用する際、Hammer.js、Moment.js、またはBootstrapなどの追加の重いライブラリは必要ありません。軽量化されたこれらのライブラリもQuasarで使用できます。 ここまで読めばQuasarを始めない理由はありません。早速セットアップの仕方を見てみましょう。 条件… 記事を読む

  • 【LangChainドキュメンテーション・JS版】概要とインストール

    この記事はLangChainのJavaScriptバージョンのドキュメンテーションを翻訳したものです。 LangChain は、言語モデルを活用したアプリケーションを開発するためのフレームワークです。私たちは、最も強力で差別化されたアプリケーションは、単に API 経由で言語モデルを呼び出すだけでなく、以下の特徴を備えると考えています。 LangChain フレームワークは、上記の原則を考慮して設計されています。 はじめに 以下のガイドをチェックして、LangChain を使用して言語モデルアプリケーションを作成する手順を確認してください。… 記事を読む

  • 【Node.js】ChatGPTに自分のデータに対して質問させる

    前回の記事ではPythonで同じことを行いました。今回はNode.jsを使ってChatGPTに自分で準備したテキストファイルを読ませてそれに対して質問させるアプリのデモを作成します。 目的 ユーザーがChatGPTに質問をするとOpenAIが持っているデータベースを参照して回答してくれます。しかしこのデータは2021年までしか保存されていないため、それ以降のデータは質問しても回答してくれません。しかし自分で準備しておいたデータ(大量のファイルも可能)を読ませておくことで自分の好きな著者と会話をしたり、最新のデータから必要なデータを検索させるシステムを作成することが可能になります。 プログラムの完成イメージ このように通常ChatGPTが知らないデータでも事前に教えておくことでチャット形式でデータを参照することができるようになります。 使用するテクノロジー 今回はOpenAIのAPIキー(有料、カード登録が必要)が必要になります。先に下記の記事を読んで各フレームワークの理解とキーの取得をしておきましょう。 リポジトリのクローン ではこちらのGitHubのリポからコードをクローンしましょう。 ファイルの実行は下記のコマンドでできます。(APIキーを登録しないとエラーになります。)… 記事を読む