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

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

`FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory`がGitHub Actionsで発生した場合の対処法

問題 次のようなエラーが発生してしまい、GitHub Actions上で実行していたテストがFAILEDしてしまった。 <--- JS stacktrace ---> FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1: 0xb02930 …

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

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

React Native製のアプリで受け取ったプッシュ通知をタップして特定の画面に遷移させる方法

目次 FirebaseコンソールからServer Keyを取得する Server KeyをExpoのサーバーにアップロードする 必要なパッケージをインストールする FirebaseコンソールからServer Keyを取得する Expoが認証情報を使って開発者の代わりにExpoのサーバーからプッシュ通知…

FirebaseからReact Native製アプリにプッシュ通知を送信する方法

スタンドアロンアプリをExpoで開発中に、プッシュ通知をタップして特定の画面を開く機能を実装したくなった。 BFFとしてFirebase Functionsを使用していたので、忘備録としてFirebase FunctionsからExpoで構築されたReact Native製アプリにプッシュ通知を送…

React NativeでFirebaseのダイナミックリンクをハンドリングしてみる

Firebase Authに登録されたメールアドレスを認証したあと特定の画面に遷移して結果を表示したいというモチベーションが沸々と湧きあがった。 流れとしては次のような感じ。 firebase/authのsendEmailVerificationメソッドを利用してユーザーのメールアドレス…

Firebase Dynamic Linksでダイナミックリンクを作成する

Firebase Dynamic Linksの作成画面で各単語が意味していることや、各フィールドで求められる内容を入力する意味が最初わからなかったので、将来的なことも含めて忘備録としてダイナミックリンクの作り方を残しておく。 Firebaseのコンソール画面からDynamic …

`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…

Expoのマネージドアプリのアップデートに関するメモ

expo publishについて expo publishを実行するとプロジェクトの永続的なURLが発行される。 これはExpo Goアプリで開くことができる。 そして、アプリの画像、フォント、動画などのアセットがすべてCDNにアップロードされる。 expo publishを実行した際に指定…

ExpoのRelease ChannelsとRuntime Versionsを調べてみた。

Release Channelsとは リリースチャンネルを使用することで、スタンドアロンアプリのビルド時に指定したリリースチャンネルと同じリリースチャンネルが指定されたアップデートを配信することができる。 これにより、複数の環境やバージョンを分けてアップデ…

Firebase FunctionでJWTを作成して、バックエンドへのリクエストの際に使用する簡単なやり方

前提 NestJSプロジェクトの作成方法や、PassportとJWTを組み合わせて認証機構を実装する方法に関してはこちらを参照。 takagimeow.hatenablog.com Firebase プロジェクトの作成方法についてはこちらの記事を参照。 takagimeow.hatenablog.com Firebase Funct…

EASを使ってAndroidアプリをビルドして実機で動かしてみような話

EASにはおおまかにわけて2種類の主要なサービスがある。 EAS Build EAS Submit EAS Buildは、ExpoやReact Nativeで作成されたアプリのバイナリをビルドするためのホスティングサービスです。 EAS Submitは、AppleのAppStoreやGoogle Play StoreにEASビルド…

一つの端末に複数環境用にビルドされたapkをインストールする話

ひとつの端末に本番環境、ステージング環境、開発環境用のそれぞれの環境でビルドされたアプリをインストールするためには、動的にapp.config.jsのios.bundleIdentifierフィールドとandroid.packageフィールドを変更する必要がある。 そのために環境変数APP_…

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>…

React Query Firebaseを使って React Nativeで Firebase Authを通して認証したりFirebase Functionsの関数を 呼び出してみよう

React Query Firebaseとは、Firebaseを使いやすくするためのHookのセットを提供してくれるパッケージです。提供されているHookでは、React Queryをラップしていて、React Queryの利点を融合することでフックをプロジェクトに対して簡単に導入できるようにし…

"Generating a new Keystore is not supported in --non-interactive mode"というエラーが出た場合の対処法

いつものようにGitHub Actions上で、EAS Buildを実行していたところ次のようなエラーが発生した。 ✔ Using remote Android credentials (Expo server) Error: Generating a new Keystore is not supported in --non-interactive mode 解決方法として、Androi…

React NativeでFirebaseを使おうとする際に'While trying to resolve module `idb` from file...'というエラーが出る場合の対処法

Expo CLIを使用して作成したReact NativeプロジェクトでFirebaseを導入してアプリを立ち上げた際に次のようなエラーが発生した。 While trying to resolve module `idb` from file `/プロジェクトのパス/node_modules/@firebase/app/dist/esm/index.esm2017.…

Firebaseプロジェクトの作り方

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

Androidでインターネット接続の権限を追加する方法

AndroidManifest.xmlを開いて、<manifest>と<application>の間に<uses-permission android:name="android.permission.INTERNET" />を追加する。 <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.myapplication"> </manifest></uses-permission></application></manifest>

React NativeでReact Queryを使ってみよう

React Native React Queryを使ってみようという話。ネタバレすると、今回はuseQueryのみで、useMutationなどは使わない。 TL;DR 今回のコードはこちらのリポジトリで全容を確認できる。 github.com プロジェクトの準備 まずはプロジェクトを作成する。 expo …

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

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

Coroutineを学んでみた

CoroutineはノンブロッキングプログラミングをKotlinで使えるようにした機能。非同期操作を安全に扱える機能などが含まれている。 導入 Coroutineを使うにはkotlinx.coroutinesというパッケージを使わないといけない。 build.gradle.ktsファイルを開いて、de…

Nike Run Clubアプリのチャートコンポーネントぽいものを作ってみる

僕はランニングする時にNRCを愛用しています。 www.nike.com このアプリのグラフをReact Native Chart Kitというライブラリで再現できないか試してみた。 github.com まずはインストールから。 yarn add react-native-chart-kit react-native-svg 実際に実装…

Kotlinはじめてみた

積読していたKotlinの入門本をちょっとずつ読んでみる。 基礎からわかる Kotlin | 富田健二 | 工学 | Kindleストア | Amazon 環境構築 環境設定から始める。 JetBrainsの公式サイトからIntelliJ IDEAをダウンロードする。 ちなみに、僕の場合はCommunity版の…

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…

NestJSでe2eテストをやってみる

ルートディレクトリに、testディレクトリを作成する。 e2eテストのファイル名はxxx.e2e-spec.tsの形式にする。 Jestの設定 package.jsonのjestの設定を修正する。 testRegexフィールドを文字列のみから配列に修正して、e2e-specファイルもテストできるように…

NestJSでモジュール間の循環依存を解消する方法

UsersModuleのimports配列に直接AuthModuleクラスを追加したい。 // src/users/users.module.ts @Module({ imports: [AuthModule], providers: [UsersService, PrismaService], controllers: [UsersController], exports: [UsersService], }) export class U…

正規化を復習する

新しいアプリを作る際に、データベースの設計を行おうとしたのだがどこまで冗長性を排除すればいいのだっけと思ってしまったのでもう一度正規化について学んでみようと思う。 いつもお世話になっている書籍を読み返しながら要点だけメモしてみる。 達人に学…