たかぎとねこの忘備録

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

2022-07-01から1ヶ月間の記事一覧

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…

正規化を復習する

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

NestJSでPrismaとPassportを組み合わせていろいろ試してみる

NestJSを使って、認証が通ったリクエストのみレスポンスを返すルートを作成してみたい。 TL;DR 今回作ってみたアプリのリポジトリはこちらから見れますー。適当なのでよろしくお願いします。。。 github.com 準備 まずプロジェクトを作ろう。プロジェクト名…

GitHub ActionからFirebase Functionsに デプロイできない問題

Firebase FunctionsのデプロイはGitHub Actionsで自動化している。 いつものように、デプロイ用のアクションをトリガーしたところ、⚠ functions: failed to update function xxxと表示されてしまい、他の関数のデプロイまでもが止まってしまう現象が起きた。…

Firebase Functionsにデプロイしても、変更後の内容が反映されていない場合の対処法

Firebase Functionsにデプロイするときは最初に必ずビルドを行ってから、デプロイコマンドを実行している。 yarn build firebase deploy --only functions --project project-name しかし、✔ Deploy complete!と表示されても呼び出し結果は前回にデプロイし…

冷やし中華の代わりにNestJSはじめました

ずっとNestJSについては認知していたが、クラスを使用したり、デコレーターを使用したりと何かと難しそうな印象だったため今まで触れてこなかった。 しかし、本番環境で利用できるサーバーサイド用のフレームワークとしてはNestJSはある一定の知名度を誇って…

ExpoアプリをAndroidエミュレーターで開こうとした時にjavax.net.ssl.SSLHandshakeExceptionが出た場合の対処法

AndroidエミュレーターでExpoアプリを開こうとした時に次のエラーが出た。 Uncaught Error: javax.net.ssl.SSLHandshakeException: Chain validation failed この場合はAndroidエミュレーター上の時刻が現在の時刻と違うために起こる問題のようだ。 stackove…

DenoDBでindex xxx already existsというエラーが出る話

db.syncを呼び出す時に、{ drop: false }オプションを指定すると次の様なエラーが出る。 SqliteError: index email already exists throw new SqliteError(this._wasm); この問題はかなり報告されているぽい。 github.com github.com github.com db.sync({ d…

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

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

React Native用にRemixのuseActionDataもどきを作ってみる話

僕がWebアプリを開発するときはもっぱらRemixフレームワークを利用する。 remix.run 理由は単純で、loader関数とaction関数の考え方が大好きだからだ。 React Nativeのアプリの開発をするときも、Remixのloader関数とaction関数を使いたい。 しかし、そんな…