どこにでもいるTSコーダーの忘備録

プログラミングに関する忘備録を自分用に残しときます。マサカリ怖い。

TypeScript

tscの代わりにBabelにトランスパイルをまかせてみた

モノリポでパッケージを作る際にtscの代わりにbabelを使ってみたかったので、これを機に色々調べてみた。 参考にしたのはこのサイト。 Using Babel with TypeScript | Learn TypeScript Babelってなんだ Babelは主にECMAScript 2015+のコードを、古いブラウ…

`node-fetch`を使用したときに発生する`Error [ERR_REQUIRE_ESM]: require() of ES Module`の解決方法

Firebase Functionsでnode-fetchを使用してFirebase Emulatorで動かそうとしたら次のようなエラーが発生した。 Error: Failed to load function definition from source: Failed to generate manifest from function source: Error [ERR_REQUIRE_ESM]: requi…

VSCodeでVitestを導入したばかりのときに"Cannot find name 'beforeAll'"と表示されてしまう場合の対処法

まず、VitestはデフォルトではJestのようにグローバルなAPIを提供していないので、明治的にグローバルで使用したいということを設定しないといけない。 これを行うには2パターンある。 1つはvitest実行時に--globalsオプションを渡す。 もう一つがglobals: …

vitestとfirebase-functions-testを使ってテストを実行したら"__vite_ssr_import_1__ is not a function"と表示された場合の対処法

Firebase FunctionsのプロジェクトにJestの代わりにVitestを入れてみた。 yarn add -D vitest vite-tsconfig-paths vitest.config.tsは次の通りに作成した。 /// <reference types="vitest" /> /// <reference types="vite/client" /> import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-path</reference></reference>…

Firebaseプロジェクトの作り方

Firebaseのプロジェクトをセットアップする まずはコンソール上でFirebaseのセットアップを行う。 プロジェクトを追加をクリックする プロジェクト名を入力する 今回は「このプロジェクトでGoogle Analyticsを有効にする」をONにして「続行」をクリックする…

ReactNavigationで他のナビゲーターのスクリーンに移動したり型チェックを行いたい

企画 次のような画面構成でスクリーンを構築したい。 Bottom Tabs Navigatorにスクリーンの代わりにStack Navigatorを2つ配置して、それぞれのStack Navigatorに2つずつスクリーンを配置する感じ。 そして、それぞれのスクリーンから各ナビゲーションのス…

NestJSでパイプをつくる話

パイプは、@Injectable()デコレーターでアノテーションされていてかつPipeTransformインターフェースを実装しているクラスのことである。 docs.nestjs.com 用途は、コントローラーのルートハンドラで、@Query()や@Param()などで受け取った入力データを希望の…

NestJSでパラメーターを含むパスをネストしたい場合の簡単な方法

UsersControllerとActivitiesControllerの二つがある場合、activitiesルートをusersルートの子ルートとして実装したい場合がある。 例えば/users/:uidの後に/activities/:idのパスを繋いで/users/:uid/activities/:idというパスでアクセスしたいみたいな感じ…

NestJSでのデータベースをSQLiteからMySQLに乗り換えた話

*.controller.spec.tsや*.e2e-spec.tsでテストを行う際に、あえてサービスに対してモックを行わず、Prismaを通してローカルに置いてあるSQLiteを使用するようにしていた。 ところが、テストの数が多くなってくるとConnectorErrorが発生し始めた。 Invalid `t…

Firebase FunctionsとDeno + Oakを組み合わせて認証が通ったリクエストのみデータを返すようにしたい話

Firebase FunctionsをBFFとして実装し、Deno + Oakで作成したAPIサーバーからデータを取得してみる。 今回はJWTを使った認証を行いたいので、認証が成功したリクエストのみにデータを返したい。 内容 両方の環境に共通のSecretを持たせて、Firebase Function…

Google OAuth2.0認証時に取得したアクセストークンの有効期限が切れてしまい、Google APIにアクセスできなくなったときの対処法

remix-authとremix-auth-googleを使ってRemixアプリケーションでGoogleアカウントでのログインを実装するとaccessTokenとrefreshTokenを取得することができる。 今まではaccessTokenのみにしか注目しておらず、refreshTokenについては全く触らずに開発を行な…