Category: JavaScript

RemixのLayoutではuseRouteLoaderDataを使おう

Remixでloaderの情報を使う際、useLoaderDataよりも他のフックを利用するケースもある。LayoutコンポーネントでClerkの認証情報を使用しようとした際に、HTTP404エラーがHTTP500エラーに変わる現象が起きた。ErrorBoundary周りを調査し、useRouteLoaderDataを使うことで問題が解決した。エラーが発生する原因はloaderの情報が正しく取得できないこと。useLoaderDataとuseRouteLoaderDataを使い分けることが重要。

Published at: 2024/09/23

JavaScript React remix SaaS / FaaS Supabase

Supabaseのログアウト処理で、Remixのloaderを再読み込みする方法

RemixアプリにSupabase Authのログアウト処理を組み合わせる際の方法を紹介。ログアウト後はuseNavigate()でページ遷移し、「Sign out」ボタンをクリックするとログアウトと同時にリダイレクトされる。再読み込みや状態更新後のリダイレクトも実装可能。ログアウト時に取得した情報を破棄するために使われる。Loader処理を再実行したい時はuseRevalidatorを利用。 Reminx APIを使うことを推奨。

Published at: 2024/09/13

Astro JavaScript Markdoc

Next.jsで作ったサイトをAstroに変えた際の、Mardocの取り扱い

hidetaka.devという個人のポートフォリオサイトを運用しており、Next.jsとNetlifyで公開していたが、SSRへの移行を検討。CloudflareとAstro採用し、MarkdocからNext.jsにカスタマイズ追加。Astroではastro.config.mjsに設定記述。取得処理やAstroコンポーネント実装も実施。Next.jsからAstroに移行し、getStaticProps内のカスタマイズもAstroコンポーネント側に移行。最終的にCloudflare Pagesでfsが使えないことが判明し、Markdocでのコンテンツ管理諦めたが、Astroの使用を今後他の環境でも検討。

Published at: 2024/08/15

Cloudflare JavaScript React remix SaaS / FaaS

RemixアプリをCloudflare Pagesへデプロイする際は、ライブラリ名に注意

Remixアプリ開発でCloudflare Pagesへデプロイ時に発生した”Could not resolve”エラーの対策をまとめました。ライブラリのインポート元を@remix-run/cloudflareに変更し、Node.js環境依存エラーを解消できました。Remixではライブラリの選択に注意し、プロキシーファイルを作成することで環境別のライブラリインポートも検討できます。

Published at: 2024/08/08

JavaScript TypeScript

「Option ‘importsNotUsedAsValues’ is deprecated and will stop functioning in TypeScript 5.5.」エラーに遭遇した時の覚書

TypeDocを使用する際に発生したエラーに関する解決方法を見つけました。TypeScript 5.5以前で作成されたものを新しいバージョンで実行する場合に発生するエラーについて説明があり、解決策はtsconfig.jsonファイルで”verbatimModuleSyntax”をtrueに変更することです。これにより、エラーが解決されます。関連リンクも参考になります。

Published at: 2024/08/04

Cloudflare Hono / Sonik JavaScript

HonoでCloudflare Pagesを作りつつ、wrangler.tomlを使ってVectorizeをよびだしてみた

2024年春のDeveloepr WeekでCloudflare Pagesがwrangler.tomlをサポート。Cloudflare Pagesプロジェクト作成時にwrangler.tomlが自動生成され、Vectorizeも利用可能。WorkerからVectorizeを利用する方法も紹介。Vectorizeの操作確認後デプロイし、エラーなし。PagesでVectorizeが使用できることを確認。Node.jsの互換性設定時にエラーあり。cryptoのエラー解決方法が課題。Wrangler.tomlの更新によりVectorizeが利用可能に。

Published at: 2024/04/06

AI / ML JavaScript LangChain.js LLM Node.js

外部APIを利用したRAGをLangChain.jsのLCELだけで作る2 – 部分的なベクトル検索を採用する

LangChain.jsを使用して、RAGやテキスト生成機能を実装するシリーズが続いています。前回はWordPressのREST APIを使用して、RAGの検索部分に挑戦しました。今回はエラーが発生した記事本文や複数記事をLLMに渡す試みについて説明されています。MemoryVectorStoreを利用することで、記事の関連性の高い文章を取得し、記事の検索結果をさらに深掘りする方法も紹介されています。WordPressから取得した記事情報の検索結果をMemoryVectorStoreに保存する方法や、RAGのインデックスと検索処理を実装する手順も示されています。Cloudflare Workers AIを使用して生成された日本語の回答に関する内容や、AWS Lambdaのアプリケーションをアップデートする手順についても触れられています。LLMのトークン数上限に対処する方法や、回答を生成する際に必要な文章の抽出方法についても言及されています。ベクターインデックスを利用した検索についての知見が共有されています。

Published at: 2024/04/03

JavaScript LangChain.js Node.js

[LangChain.jsでいろんなRAGを作る]LangChain.jsのRunnableLambdaで入力値を動的に処理する

LangChainを使用してWordPressから記事情報を取得する方法が紹介されています。非同期処理を実装するために、RunnableLambdaを利用することができます。この方法を知っていることで、他のHeadless CMSやSPARQLなどもデータソースとして利用できる可能性があります。Retrieverを使う場合は、ベクトル検索を主に使用しますが、RunnableLambdaを知ることでさまざまな検索方法を適用できます。

Published at: 2024/04/01

AI / ML Cloudflare JavaScript LangChain.js LLM Node.js SaaS / FaaS

[LangChain.jsでいろんなRAGを作る]Cloudflare Workers AIで作ったRAGに翻訳機能を追加してみた

Cloudflareを使用してRAGを構築する際、モデルやプロンプトに関連して回答が英語になる可能性があることが挙げられます。そのため、特定の言語で回答を生成するために翻訳ステップを追加することが有効です。これにより、複数のChainをつなぎ合わせて、質問に対して検索を行い、結果を元に日本語で回答生成する流れを完成させることができます。多言語サポートが必要な場合は、翻訳処理を追加して検索精度を向上させることが可能です。

Published at: 2024/03/31

AI / ML Cloudflare JavaScript LangChain.js LLM Node.js SaaS / FaaS

LangChain.jsでCloudflare Workers AIの翻訳モデルを利用する

LangChain.jsを使用すると、Cloudflare Workers AIを簡単に活用できます。Text GenerationやText Embeddingsのモデルは問題なく利用できますが、Translationモデルなど一部のモデルは対応していない。LangChain.jsでは新たな実装が必要な場合、自身で処理を実装しChainに組み込むことができます。RunnableLambdaを使用すれば、テキスト生成以外のモデルもLangChain.jsで活用可能。Cloudflare Workers AIを効果的に使用していくためには、適切な実装が必要です。

Published at: 2024/03/30