JavaScript

Web開発をする上で一番最初に学ぶプログラミング言語になります。これでHtmlやCSSを操作し、ロジックを追加できるようになります。

また、Node.jsを使うことでバックエンドの構築も可能になりました。

JavaScriptは人気度の上位を争うプログラミング言語です。TypeScriptと合わせて需要も高いので是非、基礎から学んでいきましょう。

SvelteでSupabaseを使う例

by
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のファイル構成と一緒に見ていきましょう。

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

by
superbase

今日はSupabaseを紹介します。 「Supabase」は、オープンソースのプラットフォームで、バックエンドサーバー、データベース、認証、リアルタイムデータ、ストレージなどの機能を提供するBaaS（Backend as a Service）プロバイダーです。Supabaseは、アプリケーションの開発者がアプリケーションのバックエンド機能を迅速かつ簡単に構築および管理できるようにするために設計されています。 主な特徴と機能： Supabaseは、モダンなWebおよびモバイルアプリケーションのバックエンドを効率的に構築するための強力なツールとして広く利用されています。アプリケーションのバックエンドを設計、実装、デプロイするプロセスを簡素化し、開発者がフロントエンドに焦点を当てるのに役立ちます。 更にFirebaseではNoSQLしか提供していないのでPostgreSQLを使い方は必然的にこちらになりますね。 Supabaseのプロジェクトを始める では下記のサインインのページからSupabaseにサインインしましょう。 https://supabase.com/dashboard/sign-in? メールアドレスでサインアップしてもよいですし、GitGubのアカウントからサインインしてもOKですね。 サインイン後にダッシュボードからNew Projectを選択して新しいプロジェクトを作成しましょう。プロジェクトはOrganization（組織）に紐づくので組織を作成することになります。ここで無料のプランを選んでおきましょうね。 そのままDBのパスワードの設定の画面へ。 セットアップが完了するとダッシュボードのページにもどされ、APIキーやらが表示されます。 もちろん、公開しないこと！ テーブルエディター 左側にあるメニューの上にテーブルエディターがあります。ここでUI上でPostgreSQLデータベースのテーブルを作成してデータを作成することもできますね。 Enable Row Level Security (RLS)とは Enable Row Level Security (RLS)は、テーブルへのアクセスを制限するためのセキュリティ機能です。RLSは行ベースのセキュリティ制御を提供し、データベース内の各行に対してアクセスポリシーを設定できます。この機能を有効にすることにより、データベースの安全性を向上させ、機密性の高いデータを保護できます。 RLSの利点は以下の通りです： RLSを有効にすると、ポリシーを設定してデータベースのセキュリティを強化できます。ポリシーは、特定のユーザーやロールに対するアクセス権を制御し、データのプライバシーとセキュリティを確保します。RLSは特に多くのユーザーやロールが存在し、データへの細かいアクセス制御が必要な場合に有用です。 データの挿入 次にInsertボタンを使って手動でデータを入力してみましょう。わかりやすいので説明不要ですね。 参考API 次に右上の＜＞APIのボタンをクリックします。 ここで使えるAPIの一覧が例で出てきます。

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

by
Bunの使い方

近年、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は高速な実行を実現し、リソース制約のある環境で効果的にプロダクションコードを実行できます。 コマンドラインツール: “bun”コマンドラインツールは、テストランナー、スクリプトランナー、およびNode.js互換のパッケージマネージャーも実装しており、既存のNode.jsプロジェクトで使用する際にも、ほとんどまたは全く変更を加える必要がありません。これにより、以下のような多くのタスクを迅速に実行できます。 Bunはまだ開発中ですが、開発ワークフローを加速したり、サーバーレス関数などのリソース制約のある環境でシンプルなプロダクションコードを実行するのに利用できます。また、Node.jsとの互換性や既存のフレームワークとの統合を向上させる作業も進行中です。Bunの今後のリリース情報を追跡するために、Discordに参加し、GitHubリポジトリをウォッチしてください。 ランタイムとは？: JavaScript（または正式にはECMAScript）は、プログラミング言語の仕様です。誰でも、有効なJavaScriptプログラムを取り込み、実行するJavaScriptエンジンを作成できます。現在最も人気のあるエンジンは、Googleが開発したV8と、Appleが開発したJavaScriptCoreです。どちらもオープンソースです。 ランタイムの役割: しかし、ほとんどのJavaScriptプログラムは単独で実行されるわけではありません。これらは、有用なタスクを実行するために外部の世界にアクセスする方法が必要です。ここでランタイムが登場します。ランタイムは、実行するJavaScriptプログラムに提供される追加のAPIを実装します。ブラウザには、Web固有のAPIを実装したJavaScriptランタイムが組み込まれており、これらのAPIはグローバルなwindowオブジェクトを介して利用できます。 Node.js: 同様に、Node.jsはサーバーなどの非ブラウザ環境で使用できるJavaScriptランタイムです。Node.jsで実行されるJavaScriptプログラムは、OSレベルのタスクを実行するための組み込みモジュール（node:fsなど）およびNode.js固有のグローバル（Buffer、process、__dirnameなど）にアクセスできます。Node.jsはCommonJSベースのモジュールシステムと解決アルゴリズムも実装しており、JavaScriptのネイティブモジュールシステムよりも前から存在しています。 Bun：Node.jsの代替としての設計: Bunは、Node.jsの代替として設計され、以下のデザイン目標を持っています。 最終的な目標は、BunをJavaScript/TypeScriptでアプリケーションを構築するための統一されたインフラストラクチャツールキットとして提供し、パッケージマネージャー、トランスパイラ、バンドラ、スクリプトランナー、テストランナーなどを含めることです。Bunは、新しいランタイムとしてだけでなく、開発者の生産性を向上させるための包括的なツールセットとして、JavaScriptエコシステムを進化させることを目指しています。 Bunのインストール Bunは、いくつかの異なる方法でインストールできる単一の実行可能ファイルとして提供されています。 macOSおよびLinux Linuxユーザー：Bunをインストールするにはunzipパッケージが必要です。Kernelバージョン5.6以上が強く推奨されますが、最小要件は5.1です。 以下は、macOS、Linux、およびWSL（Windows Subsystem for Linux）で使用できるインストールコマンドの例です（curlを使用）： Windows Bunは、Windows向けに限定的で実験的なネイティブビルドを提供しています。現時点では、Bunランタイムのみがサポートされています。 テストランナーやパッケージマネージャー、バンドラはまだ開発中であり、以下のコマンドは無効化されています。 アップグレード 一度インストールされたら、バイナリ自体をアップグレードできます。 Homebrewユーザーの場合は、Homebrewとの競合を避けるために次のようにしてbunをアップグレードしてください。 protoユーザーの場合は、次のようにして最新のcanaryビルドにアップグレードできます。 TypeScript プロジェクト内でBunの組み込みAPIのTypeScript定義をインストールするには、bun-typesをインストールします。 次に、tsconfig.json内のcompilerOptions.typesに”bun-types”を含めます。 TypeScriptサポートに関する詳細なガイドは、「エコシステム > TypeScript」を参照してください。 コンプリーション Bunのインストール時には、シェル自動補完が自動的に設定されるはずです。 設定されていない場合は、以下のコマンドを実行します。これにより、使用しているシェルを特定し、適切な場所に補完ファイルを書き込みます。bunのアップグレードごとに自動的に再実行されます。 カスタムの場所に補完ファイルを書き込むには、次のようにします。 これで、Bunのインストールと設定が完了しました。このユニークなツールを活用して、効率的な開発を行いましょう。 クイックスタート 簡単なHTTPサーバーを組み立ててみましょう。Bunに組み込まれているBun.serve APIを使用します。まず、新しいディレクトリを作成します。 新しいプロジェクトをスキャフォールドするには、bun initを実行します。これは対話型のツールで、このチュートリアルでは各プロンプトのデフォルト回答を受け入れるために単にEnterキーを押します。 「bun init」は、最小のプロジェクトで始めるのを助け、適切なデフォルトを推測しようとします。いつでも^Cを押して終了できます。 … Read more

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

by

始める前に 今日はVueのUIフレームワークを紹介します。先にVueの基本、Viteの使い方、Node.jsの基本を知っていると理解しやすいです。 Quasarフレームワークとは Quasarの特徴を紹介します。 Quasarとは？ Quasarで作成できるもの: Quasarのモットーは、コードを一度書き、それをウェブサイト、モバイルアプリ、および/またはElectronアプリとして同時に展開できるフレームワークです。1つのコードベースで最新のCLIを使用してアプリを効率的に開発し、ベストプラクティスに基づく高速なQuasarウェブコンポーネントを提供します。 Quasarを使用する際、Hammer.js、Moment.js、またはBootstrapなどの追加の重いライブラリは必要ありません。軽量化されたこれらのライブラリもQuasarで使用できます。 ここまで読めばQuasarを始めない理由はありません。早速セットアップの仕方を見てみましょう。 条件 使用するコンピュータに、Node.jsのバージョン14以上（または新しいLTS Node.jsバージョン）と、NPMのバージョン6.14.12以上、またはYarnのバージョン1.21.1以上がインストールされていることを確認してください。 このコマンドを実行すると、現在のNode.jsのバージョンがターミナルに表示されます。 このコマンドを実行すると、現在のNPMのバージョンがターミナルに表示されます。 プロジェクトの作成 以下のコマンドを実行してください： createまたはinitコマンドを実行すると、いくつかのオプションがプロンプトで表示されます。あなたのニーズに応じて、CLIのタイプ（ViteまたはWebpack）を選択したり、TypeScriptサポートを追加したり、異なるCSSプリプロセッサを選択したりできます。オプションについて不明点がある場合、デフォルトを選択（Enterキーを押す）して進んでも問題ありません。後で必要に応じて、CLIのタイプ以外のオプションを変更することもできます。 下記にセットアップのオプションの例を記載します。 オプショナル – グローバルCLIのインストール Quasarをより多く活用するために、グローバルCLIもインストールすることをお勧めします。これにより、ターミナルで直接Quasarコマンドを実行したり、テスト用のローカルHTTPサーバーを実行したり、プロジェクトをアップグレードしたりすることができます。 以下のコマンドを使用してグローバルCLIをインストールできます： これにより、Quasarのコマンドをプロジェクトの外からも使用できるようになります。 依存ライブラリをインストール 新しく作成したプロジェクトフォルダに移動し依存ライブラリをインストーします。 次に、以下のコマンドで開発用サーバーを起動します。グローバルCLIをインストールしている場合は： グローバルCLIをインストールしていない場合は、以下のコマンドで実行できます： このコマンドを実行すると、開発用サーバーが新しいアプリケーションをコンパイルし、完了すると新しいアプリがブラウザで開きます。これで開発を開始できます！お気に入りのIDEやコードエディターを使用してアプリを開発できます。 これでデフォルトのQuasarアプリが起動しました！ ファイル構成 Quasar Frameworkのデフォルトのフォルダ構成は、クエーサーアプリケーションの基本的な構造を定義します。以下は一般的なQuasarプロジェクトのデフォルトのフォルダ構造の概要です： これらのデフォルトのフォルダ構造は、Quasarアプリケーションの基本的な構造を提供し、効率的な開発をサポートします。ただし、プロジェクトの要件に応じてカスタマイズできます。 コンポーネントを使ってみる では参考までにボタンのコンポーネントを使ってみます。 メインページになっているsrc/pages/Index.vueを下記のように変えましょう。 これでボタンのコンポーネントが表示されましたね。 これらのコンポーネントはグローバルにインポートされているので各.vueファイルでインポートする必要がありません。 ちなみにこのscriptの書き方がちょっと古いので必要に応じてscript setupに書き変えることをお勧めします。 次にテーブルのコンポーネントを使ってみましょう。 このように簡単で軽量なウェブアプリができてしまいます！ 慣れてきたらモバイルアプリにも挑戦してみたいですね。

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

by

この記事はLangChainのJavaScriptバージョンのドキュメンテーションを翻訳したものです。 LangChain は、言語モデルを活用したアプリケーションを開発するためのフレームワークです。私たちは、最も強力で差別化されたアプリケーションは、単に API 経由で言語モデルを呼び出すだけでなく、以下の特徴を備えると考えています。 LangChain フレームワークは、上記の原則を考慮して設計されています。 はじめに 以下のガイドをチェックして、LangChain を使用して言語モデルアプリケーションを作成する手順を確認してください。 コンポーネント LangChain は、いくつかの主要なモジュールのサポートを提供しています。各モジュールには、いくつかの例と概念に慣れるためのリンクがあります。各例は、使用されているモジュールの API ドキュメントにもリンクしています。 これらのモジュールは以下のとおりです（複雑さの順）： API リファレンス LangChain のすべてのモジュールの API リファレンス、エクスポートされたクラスと関数の詳細なドキュメントは、以下からご覧いただけます。 API Reference 本番環境 プロトタイピングから本番環境への移行にあたり、以下のリソースを開発中です。 追加のリソース アプリケーションの開発に役立つと思われる追加のリソースのコレクションです。 サポートされている環境 LangChain は TypeScript で書かれており、次の環境で使用することができます。 クイックスタート もしも Node.js で LangChain を素早く始めたい場合は、このリポジトリをクローンして README の手順に従って依存関係が設定されたボイラープレートプロジェクトを作成してください。 もしくは、ご自身でセットアップを行いたい場合や他の環境で LangChain を実行したい場合は、以下の手順をご覧ください。 インストール LangChain をインストールするには、以下のコマンドを使用します。 または、以下のコマンドを使用してインストールすることもできます。 TypeScript LangChain は TypeScript で書かれており、すべての公開APIに対して型定義が提供されています。 ライブラリの読み込み ESM … Read more

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

by

前回の記事ではPythonで同じことを行いました。今回はNode.jsを使ってChatGPTに自分で準備したテキストファイルを読ませてそれに対して質問させるアプリのデモを作成します。 目的 ユーザーがChatGPTに質問をするとOpenAIが持っているデータベースを参照して回答してくれます。しかしこのデータは2021年までしか保存されていないため、それ以降のデータは質問しても回答してくれません。しかし自分で準備しておいたデータ（大量のファイルも可能）を読ませておくことで自分の好きな著者と会話をしたり、最新のデータから必要なデータを検索させるシステムを作成することが可能になります。 プログラムの完成イメージ このように通常ChatGPTが知らないデータでも事前に教えておくことでチャット形式でデータを参照することができるようになります。 使用するテクノロジー 今回はOpenAIのAPIキー（有料、カード登録が必要）が必要になります。先に下記の記事を読んで各フレームワークの理解とキーの取得をしておきましょう。 リポジトリのクローン ではこちらのGitHubのリポからコードをクローンしましょう。 ファイルの実行は下記のコマンドでできます。（APIキーを登録しないとエラーになります。） 下準備 テキストファイルの準備 では、ChatGPTに読み込ませたいファイルを準備しましょう。ファイル名はconst txtFilenameに格納しておきます。 APIキーを環境変数に登録 OpenAIのAPIキーを.envファイルに保存します。 コードの説明 ではindex.jsを見てください。 このコードは、Node.jsを使用してOpenAIのRetrieval-based Question Answering（質問応答）モデルを実装するものです。以下に、コードの主な機能を説明します。 このコードは、OpenAIのモデルとベクトルストアを使用してユーザーの質問に応答するシンプルな質問応答システムを作成しています。ユーザーが質問を入力すると、モデルが応答を生成し、それがコンソールに表示されます。 OpenAIモジュール OpenAIモジュールは、OpenAIの自然言語処理モデルを利用するためのモジュールです。このモジュールは、OpenAIのAPIとの通信やテキスト生成タスクの実行を簡素化するための機能を提供します。 OpenAIモジュールを使用すると、以下のようなことが可能です： OpenAIモジュールは、様々な自然言語処理タスクに対して利用されます。具体的には、文章生成、文章の意味理解、文章の分類、質問応答などのタスクに使用されます。 コードの例では、OpenAIモジュールが使用されています。OpenAIクラスをインスタンス化し、そのインスタンスを利用してOpenAIのモデルを初期化しています。このモジュールを使用することで、OpenAIのモデルを簡単に利用できます。 RetrievalQAChainモジュールとは RetrievalQAChainは、質問応答（Question Answering）タスクを処理するためのモジュールです。このモジュールは、与えられた質問に対して適切な回答を見つけるために使用されます。 具体的には、RetrievalQAChainは以下のような機能を提供します： RetrievalQAChainは、ベクトルストアを使用して質問と回答の類似性を計算し、最も適切な回答を見つけるための機能を提供します。このモジュールは、大規模なテキストデータセットから効率的に質問に対する回答を見つけることができます。 コードの例では、RetrievalQAChainモジュールがOpenAIのモデルとベクトルストアリトリーバーを使用して初期化され、質問が与えられると回答が取得されます。質問と回答の検索は、ベクトルストアの中から最も類似した文書を見つけることによって行われます。 HNSWLibモジュール HNSWLibモジュールは、高次元のベクトルデータの効率的なインデックス構築と検索を可能にするためのモジュールです。HNSWは、ハイブリッドネットワークスワップ（Hierarchical Navigable Small World）と呼ばれるアルゴリズムを使用して、高次元ベクトルの類似性検索を高速に実行します。 HNSWLibモジュールは、LangChainという自然言語処理ライブラリの一部として提供されています。このモジュールは、ベクトルストアの作成と操作を行うためのインターフェースを提供します。 具体的には、HNSWLibモジュールを使用すると、以下のようなことが可能です： HNSWLibは、高次元ベクトルの類似性検索において効率的でスケーラブルな解決策を提供するため、情報検索、機械学習、自然言語処理などの分野で広く利用されています。上記のコード例では、HNSWLibモジュールが使用されており、ベクトルストアのロードや作成に利用されています。 OpenAIEmbeddingsモジュールとは OpenAIEmbeddingsモジュールは、LangChainという自然言語処理ライブラリの一部として提供されているモジュールです。このモジュールは、テキストデータや文章をベクトル表現に変換するための機能を提供します。 具体的には、OpenAIEmbeddingsモジュールを使用すると、以下のようなことが可能です： OpenAIEmbeddingsモジュールは、自然言語処理タスクにおいてテキストデータの表現や解析に広く活用されます。テキストデータをベクトルに変換することで、機械学習モデルの入力や比較、検索などのさまざまなタスクを実行することができます。上記のコード例では、OpenAIEmbeddingsモジュールが使用されており、ドキュメントからベクトルストアを作成する際に利用されています。 ベクトルストアファイル ベクトルストアファイル（Vector Store file）は、テキストや文書の埋め込み（ベクトル化）を保存して管理するためのファイルです。ベクトルストアは、テキストデータを高次元の数値ベクトル空間にマッピングし、各文書をベクトルとして表現します。これにより、類似性の計算や検索などの情報検索タスクを効率的に実行できます。 ベクトルストアファイルは、一般的にデータベースや検索エンジンのバックエンドとして使用されます。ファイルには、テキストデータの埋め込みベクトルや関連するメタデータが格納されます。これにより、大規模な文書コレクションを効率的に管理し、特定の質問や検索クエリに対して迅速な検索結果を提供することができます。 ベクトルストアファイルは、一度作成されると、後続の検索や質問に対して再利用できます。これにより、テキストデータの埋め込み処理を繰り返し行う必要がなくなり、処理時間やリソースの節約につながります。 コードの例では、ベクトルストアファイルを使用してテキストデータを保存し、ユーザーの質問に対して迅速に応答するために利用しています。ファイルが存在しない場合は、テキストデータを埋め込み処理してベクトルストアファイルを作成し、次回以降の検索に使用します。ファイルが存在する場合は、ベクトルストアファイルをメモリに読み込んで再利用します。 OpenAIEmbeddingsモジュールとは OpenAIEmbeddingsは、テキストデータの埋め込み（ベクトル化）を行うためのクラスです。このクラスのメソッドは、与えられたテキストデータをOpenAIの埋め込みモデルを使用してベクトルに変換します。 具体的には、OpenAIEmbeddingsクラスの主要なメソッドは次のとおりです： … Read more

【JavaScript】Web Speech APIでテキストを音声にする

by

前回の記事の続きです。 では前回のコードに下記の様に音声をテキストに変換したあとに読み上げる機能を追加します。 追加された部分は次のとおりです： この部分では、style.css ファイルをインポートし、#app セレクターに対してHTMLコンテンツを設定しています。具体的には、ボタン、見出し、結果表示用の <div> 要素を含むHTMLを動的に生成しています。 この関数は、音声認識を停止するために recognition オブジェクトの stop() メソッドを呼び出します。 以上の追加された部分は、スタイルの読み込みと表示要素の生成、音声認識の言語設定、音声認識の停止処理に関連しています。これにより、適切なスタイルが適用されたHTMLが表示され、日本語の音声認識が行われ、必要に応じて音声認識が停止されます。 これで、音声入力されたテキストを読み上げてくれるようになりました。 しかし!日本語で喋った内容をテキストにするのは理解できますがそれを再度スピーチさせる意図があまり考えられませんね。 ですのでGoogleの翻訳API（Google Cloud Translation API）などを使って英語でスピーチさせるなどを考慮していくと楽しいことになりそうです。

【JavaScript】Web Speech APIを使ってみよう

by

Web Speech APIとは Web Speech APIは、Webブラウザで音声認識や音声合成を実現するためのAPIです。このAPIを使用することで、ユーザーの音声を認識してテキストに変換したり、テキストを音声に変換して再生したりすることができます。 Web Speech APIには2つの主要な機能があります。 Web Speech APIは、JavaScriptを使用してブラウザ上でこれらの機能を制御します。ただし、APIが完全にサポートされているわけではなく、ブラウザやデバイスによって実装の範囲やサポート度合いが異なる場合があります。したがって、使用する前にブラウザの互換性を確認する必要があります。 Web Speech APIを使ったサービスの例 Web Speech APIを使用したサービスの例を以下に挙げます。 Text-to-Speech APIの比較 Web Speech APIと同様の音声認識や音声合成の機能を提供するAPIは、いくつか存在します。以下にいくつかの代表的なAPIを紹介します。 これらのAPIは、クラウドベースの音声処理サービスとして広く利用されており、Web Speech APIと同様の機能を提供しています。ただし、利用にはAPIキーの取得や料金体系への対応などが必要です。 音声をテキストに変換してみよう では下記の記事を参考にViteでJavaScriptのプロジェクトを作成して実際にText-to-Speech APIを使ってみましょう。 ベースとなるコードはこのようになります。 ではViteの場合はJavaScriptのファイルにHTMLを追加するようにしているので、下記の様に変換します。また日本語の音声に対応するコードを追加しましょう。 main.js ではこれでマイクが接続されていることを確認し、ボタンを押してマイクの使用を許可して何かしゃべってみてください。下記の様に音声がテキストに変換されブラウザに表示されるようになりましたね。 このAPIはブラウザで提供されており無料で使えるので色々試してみましょう。（今回はグーグルクロームで行いました。）

【acorn.jsとVanilla JS】JavaScriptでキーワード（予約語）だけを出力する方法

by

自分でコードをパース（読み取り）してJavaScriptのメソッドや予約語が使われているか知りたいときに下記のコードを使う事ができるので紹介します。 ライブラリを使わずに予約語を出力する JavaScriptのコードをパースしてキーワードを配列に出力する際に外部のライブラリを使用せずに行いたい場合は、以下のようなアプローチを取ることができます。 下記はファンクションベースで書いた場合です。 上記のコードでは、予約語（キーワード）のリストを用意し、与えられたコードをスペースと特定の記号（(、)、{、}、;、,）で分割します。分割されたトークンをループして、予約語のリストに含まれるかどうかをチェックし、キーワードとして抽出します。 同じことをクラスベースで書いた場合はこのようになります。 上記のコードでは、KeywordExtractorというクラスを作成し、コンストラクタで与えられたコードとキーワードのリストをプロパティとして保持します。また、extractKeywordsメソッドを定義してキーワードの抽出処理を実装します。 KeywordExtractorクラスのインスタンスを作成し、extractKeywordsメソッドを呼び出すことでキーワードを抽出できます。 ただし、この方法は単純な文字列マッチングを行っており、コードの文脈によって誤検出する可能性があります。言語の構文やコメントなども考慮する場合には、パーサーライブラリの使用が推奨されます。 Acorn.jsとは Acorn.jsはJavaScriptのパーサーライブラリであり、JavaScriptのコードを解析して抽象構文木（Abstract Syntax Tree, AST）を生成する機能を提供します。これにより、JavaScriptコードの解析や静的解析、ソースコードの変換や検証などのさまざまな用途に利用することができます。 以下にAcorn.jsの主な使い道をいくつか挙げます： これらはAcorn.jsの一般的な使い道ですが、実際にはさまざまな応用が可能です。また、Acorn.jsは軽量で高速なパーサーライブラリであるため、ブラウザやNode.jsなどの環境で広く利用されています。 Acorn.jsの開発者 Acorn.jsは、Marijn Haverbekeによって開発されました。Marijn Haverbekeは、プログラミング言語JavaScriptの教育用書籍『Eloquent JavaScript』の著者でもあります。Acorn.jsは、JavaScriptのパーサーとして広く使用されており、ECMAScript（JavaScriptの標準仕様）に準拠しています。 Acron.jsを使ってJavaScriptの予約語を出力する Acron.jsはオープンソースでGitHubからソースコードを見てみましょう。 では下記のコマンドでacron.jsをインストールしましょう。 では下記の様に、import文でモジュールとして使用する方法を紹介します。 修正したコードでは、import文を使用してacornモジュールをインポートし、その後のコードでacornを直接使用しています。また、acornパッケージのデフォルトエクスポートをacornとしてインポートしています。 この修正版のコードは、ESモジュールとしてブラウザ環境や対応する環境で使用することができます。ただし、ブラウザ環境で使用する場合は、acornのブラウザ向けのバージョンを読み込む必要があります。ブラウザ環境での具体的な設定方法については、acornのドキュメンテーションを参照してください。 Acorn.jsの強み Acorn.jsを使用する場合、JavaScriptの予約語（キーワード）をパースする際に、自作のライブラリと比べて以下のようなメリットがあります： 自作のライブラリと比べて、Acorn.jsは信頼性、安定性、拡張性、パフォーマンス、エコシステムなどの面で利点があります。また、JavaScriptのパースにおいては、正確で標準に準拠した処理が重要となるため、Acorn.jsの使用は推奨されます。 ASTとは AST（Abstract Syntax Tree）は、プログラミング言語のソースコードの構文構造を表現する木構造のデータ構造です。ASTは、ソースコードの解析や処理を容易にするために使用されます。 ASTは、ソースコードを構成するトークンや式、文、関数などの要素をノードとして表現します。ノードは親子関係で結びつき、構文的な意味や階層構造を反映します。 ASTのノードは通常、プログラミング言語の構文要素に対応しています。たとえば、変数宣言や関数呼び出し、演算子の使用など、ソースコード内のさまざまな構造がノードとして表現されます。 ASTは通常、パーサーと呼ばれるツールやライブラリを使用して生成されます。パーサーは、ソースコードを入力として受け取り、その構文を解析してASTを生成します。ASTは、コンパイラや静的解析ツール、コード変換ツールなどで使用され、ソースコードの解析や処理を行います。 ASTを使用することで、ソースコードの構造や意味を効率的に理解し、コードの解析、変換、検証、リファクタリングなどのさまざまな処理を行うことができます。また、ASTは言語に依存せずに構文解析を行うため、さまざまなプログラミング言語に適用できる汎用的な手法です。

【React・Vue】Ionicでモバイルアプリを作ろう

by
Ionic　基本

Ionicの特徴について説明しているので先に前回の記事を読んでおいてください。 また、今回の記事はVueフレームワークの基本が理解できている前提で説明します。 今日の目的 Ionicを使用してデモプロジェクトの作成しiOSとAndroidのネイティブアプリにコンパイルしてみます。 今日はVueを使って紹介しますがReactやAngularも同じ要領でできます。 Ionic Vue概要 @ionic/vueは、Vue開発者向けに調整されたツールとAPIを組み合わせた、コアIonic Frameworkのエクスペリエンスを提供します。 Vueバージョンのサポート Ionic VueはVue 3.0.0をベースにしています。もし以前のバージョンのIonic Vueでアプリを作成している場合は、最新リリースにアップグレードし、Vueの依存関係もアップグレードする必要があります。 Vueツール Ionic Vueプロジェクトは通常のVue CLIプロジェクトと同じツールを使用します。つまり、Vue CLIとその機能を使用してビルドします。さらに、スタータープロジェクトにはデフォルトでいくつかの機能が有効になっています。例えば、ルーティングやTypeScriptのサポートなどです。 ネイティブツール Capacitorは公式のクロスプラットフォームのアプリランタイムであり、Ionic VueのウェブアプリをiOS、Android、Webでネイティブに実行します。 Cordovaプラグインを使用する際のIonic Vueの技術的な制約は特に知られていませんが、公式にはCapacitorが推奨されています。現時点では、Ionic CLIのツールではIonic VueのCordova統合をサポートする予定はありません。 Ionicをインストール では下記のコマンドでionicのプロジェクトをセットアップしましょう。myAppはプロジェクト名になりますので自身で好きなものに変えてください。 tabsはテンプレートのフラグになり、vue-routerで設定されたページごとのURLが付いてきます。 ではionic serveのコマンドでローカルホストにデモのアプリが起動されたことを確認しましょう。 ファイル構成 Ionic Vueの一般的なファイル構成は以下のような形式です: このようなファイル構成によって、Ionic Vueアプリケーションはコンポーネントベースのアーキテクチャを活用し、使いやすく保守しやすい構造を実現しています。 capacitorとは Ionicをインストールするとcapacitor（キャパシター）というライブラリが一緒についてきます。 Capacitorは、ウェブ技術（HTML、CSS、JavaScript）を使用して作成したアプリケーションをネイティブアプリケーションとして実行するためのオープンソースのクロスプラットフォームツールです。 Capacitorは、Ionicフレームワークの開発チームによって開発され、Ionicアプリケーションをネイティブに実行するための代替手段として提供されています。Ionicアプリケーションは、一度作成することでiOS、Android、Webなど複数のプラットフォームで動作させることができます。 Capacitorの特徴としては、以下の点が挙げられます: Capacitorは、ハイブリッドアプリケーションやクロスプラットフォーム開発に興味がある開発者にとって、強力なツールとなっています。Ionic Vueなどのフレームワークと組み合わせることで、使いやすいUIとネイティブ機能を組み合わせたアプリケーションを開発することができます。 IonicとCapacitor 上記までをまとめます。Ionicはモバイル用のコンポーネントで、capacitorが実際にWebアプリケーションをモバイルアプリにコンパイルしてくれるツールになります。ちなみにどちらのライブラリも同じ組織によって管理されており、両方を使ってモバイルアプリを作ることが一般的です。しかしcapacitorだけでモバイルアプリを作成することも可能であることは理解しておきましょう。 アプリのビルド 下記のコマンドで実際にデモのアプリをモバイルアプリとして出力してみましょう。 ionic build このコマンドは、Ionicアプリケーションのビルドプロセスを実行します。アプリケーションのソースコードやリソースをコンパイルし、必要なファイルを生成します。ビルドが完了すると、distディレクトリにアプリケーションのビルド結果が出力されます。このディレクトリには、最適化されたHTML、CSS、JavaScriptファイルなどが含まれます。 ionic cap add ios このコマンドは、iOSプラットフォーム向けのCapacitorプロジェクトを追加します。Capacitorを使用してIonicアプリケーションをiOSネイティブアプリケーションにビルドするために必要なファイルと設定を生成します。実行すると、iosディレクトリが作成されます。 … Read more