Category: JavaScript

Next.js のApp RouterでREST APIを作る時は、型定義にPromiseをお忘れなく

この記事では、Next.jsのApp Routerを使用してREST APIを作成する際のTypeScript型定義に関するTipsが紹介されています。パスパラメータを受け取るAPIを想定し、v15以降でのビルドエラー回避方法やコードの変更点が説明されています。Page RouterやRemixに慣れている人も戸惑うかもしれないが、理解すれば問題ない内容です。

Published at: 2024/12/06

Angular 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