Category: JavaScript

Angular スタンドアローンコンポーネントでngForを使うにはimportが必要だった話

AngularのスタンドアローンコンポーネントでngForを使用しようとした際にエラーが発生し、解決方法を記載しました。ngForを使用する際はTypeScriptで明示的にインポートする必要があります。その際、@ComponentのimportsにNgForを追加することで問題が解決します。

Published at: 2024/11/01

0bf29236559118e0968d11727f49991c-20240827094319

JavaScript TypeScript

TypeScriptで条件別に必須パラメーターを変更する方法

この記事では、Reactコンポーネントでの引数に型定義を行う際に、特定のパラメータの有無で必須となるパラメータを設定する方法を簡単にまとめています。

Published at: 2024/10/31

Angular JavaScript

AngularのスタンドアローンコンポーネントでHttpClientを使いたい時の覚書

Angularのスタンドアローンコンポーネントに関する記事で、モジュールのインポート方法の変更や過去の方法の利用などが紹介されています。@NgModuleディレクティブの問題やHttpClientModuleの非推奨メッセージに触れ、provideHttpClient()を使ってHttpClientをセットアップする方法も説明されています。NgModuleディレクティブが必要ないコンポーネントやbootstrapApplication関数を使用してのセットアップ方法も詳細に記載されています。

Published at: 2024/10/29

JavaScript React remix

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