wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた

以下の記事で紹介したが現在開発中のアプリでPlanetScaleを使用していたが無料プランがなくなってしまうので、代替のDBサービスを試してみたので紹介 www.wheatandcat.me PlanetScaleの無料プランがなくなる件 planetscale.com 5GBまでなら無料で使用できて…

Flutterでgraphql_codegenを使って型安全でAPIアクセスを実装する

現状FlutterでAPI接続するにはGraphQLが良さ気だったので実装してみた リポジトリ 以下で開発 ■ Flutter github.com ■ backend github.com 開発構成 Frontend Flutter Backend NestJS Prisma PlanetScale GraphQL Code Generator Cloud Run モチベーション F…

Nestjs + Fastify + Mercurius + PrismaでAPIサーバーを立てて、Cloud Runでデプロイする

新しいアプリ開発でbackendをNode.jsでAPIをやってみようと思いタイトルの構成でAPIサーバーを作成してみたら、結構ハマりどころがあったので記事した リポジトリ github.com モチベーション 現在Flutterでアプリを作成中 FlutterでAPIのやり取りで型安全に…

T3 Stackで「OOMAKA」というサービスを作ったので紹介

前から記事で紹介していたサービスが公開できるレベルまで開発が完了。 コードがGitHubで公開しているので、諸々紹介 GitHub github.com URL oomaka.vercel.app 使用技術 web & サーバー T3 Stack Next.js App Routerで実装 tRPC Tailwind CSS TypeScript Pr…

Next.jsでApp Routerに移行してみる

今までPages Routerだった処理サイトをApp Routerに移行してみたの記事にしてみた nextjs.org PR github.com 実装 App Routerに移行する場合は、以下を確認してディレクトレリを変更する必要がある nextjs.org 基本はsrc/pages/schedule/[id].tsx→src/app/sc…

NextAuth.jsでログイン画面をカスタマイズしてみる

NextAuth.jsでログイン画面をカスタマイズしてみたので記事にする PR github.com github.com 実装 NextAuth.jsを使うと以下のような感じで簡単にログインを実装できる。 ■ src/server/auth.ts export const authOptions: NextAuthOptions = { providers: [ D…

T3 StackでSSRさせてみる

前回紹介したwebアプリでT3 Stackでwebサービスを作成中。 www.wheatandcat.me T3 StackでSSRを実装を試していたら、かなり簡単に実装できることに気づいたので記事化。 PR github.com 実装 T3 StackでSSRする場合にどうすれば良いか分からなかったので初め…

T3 Stack × Supabaseで本格的なサービスを作ってみる①

作りたいwebサービスが出来たので気になっていたT3 Stackを使用して実装してみたので紹介 create.t3.gg サービスについては、まだ開発中なので、何回か記事にする予定 リポジトリ github.com 作成中のWebサービス oomaka.vercel.app サービス名: OOMAKA URL:…

Discord Botで翻訳ボットを作ってみたが、無料運用ができなくて一旦ボツにした話

Slackが無料だと90日までしかメッセージを保持しなくなったので、個人開発系の通知系はDiscordに引っ越中 discord.com その中で、Discord Botの開発をしてみたのでやり方を紹介 今回作ったもの PR github.com 内容 Discordに日本語、英語のチャンネルがあり…

@storybook/react-native v6.5にバージョンアップ

@storybook/react-nativeが v6.5にバージョンアップしたので移行した。 結構書き方が変わったので紹介 PR github.com Storybook v5 → v6で変わった内容 Component Story Format (CSF) がサポートされた Storybookのファイルの書きからが以下のように変更。 ■…

SupabaseのAuthとDatabaseを使ってみた

作成したChrome拡張でデータをサーバー上から同期させる機能をSupabaseを使って実装してみたので紹介 PR github.com Supabaseとは? supabase.com SupabaseはFirebaseの代替として注目されているBaas 以下のサービスを提供している Authentication Database …

Chrome Web Storeに公開してみた

前の記事で作っていたブラウザ拡張をChrome Web Storeに公開してみたので記事にしてみた www.wheatandcat.me 公開したChrome Web Store chrome.google.com リポジトリ github.com 公開方法 Plasmoで開発している場合は、基本は以下の通りに進めればOK。 docs…

tRPCを試してみた

最近、話題のtRPCを試してみたので記事にしました。 tRPCとは? trpc.io スキーマやコード生成なしで型安全なAPIの連携が行えるPRCフレームワーク TypeScriptに特化しており、非常にシンプルに実装できる 比較対象としては、GraphQLやOpenAPIなどの技術に該…

Plasmoでブラウザ拡張を作ってみた

最近、社内で記事の共有などをする機会が増え、ブラウザのブックマークやGoogle Keepを使用していたが、仕事とプライベートで使用しているブラウザ、Googleアカウントなどが違ったりして、どこに保存したか分からなくなることが多かったので、自作でchrome拡…

Enzyme→testing-library/react-nativeに置き換え

Expo SDK 48にアップデートをしたらReactのバージョンが最新になり、Enzymeがサポートされなくなったので、すべてのテストケースをtesting-library/react-nativeに置き換えた PR github.com 実装 今までEnzymeのshallowを使用して、テスト対象となるcomponen…

PlayWrightを試してみた

TodoアプリにPlayWrightを導入してみたので紹介 PR github.com github.com PlayWrightとは? playwright.dev 最新のE2Eテストフレームワーク コードジェネレータが使えて便利 モチベーション 以前、記事で紹介した開発中のTODOアプリでmarkdown-to-jsxを使用…

右腕が腱鞘炎になった時に試したことのまとめ

一ヶ月前に右腕が腱鞘炎になってしまい、最近やっとある程度は仕事ができる状態になりました。 この記事では腱鞘炎になってから試したガジェット/アプリ/行動などをまとめたので、同じ境遇のエンジニアの参考になればと思います ‍♂️ 腱鞘炎前の状態の紹介 PC…

Vitestを導入してみた

新しいプロジェクトでVitestを導入してみたので紹介 PR github.com 紹介 vitest.dev VitestはVite環境で動作する高速なテストフレームワーク 領域的にはJestと同じ 最新のテストフレームワークなので、細かいカスタマイズがされている 実装 以下のコマンドで…

Next.jsでSSRをサポートしていないComponentパッケージを導入する方法

Next.jsで作成してLPサイトにSSRをサポートしていないComponentパッケージを導入しようとしたところ、意外とハマったので記事にした。 PR github.com 実装 お試しでmemoir用のKo-fiのページを作ってみたのでNext.jsで作成したLPサイトにリンクを追加する開発…

Firestoreのバッチ書き込み→トランザクション更新に移行 & 安全に移行するためにe2eテストケースを追加

元々、1つの処理内でfirestoreに複数件の書き込みをしている箇所は、バッチ書き込みで同時に書き込み処理を実行していた。 firebase.google.com GoのFirestore SDKのv1.9.0から、バッチ書き込みでclient.Batchを使用するのは非推奨になった。 pkg.go.dev そ…

Tauriで保存データのインポート/エクスポート機能を作成 + Window Menuの設定

以下の記事から引き続き、TODOアプリを作成中。 www.wheatandcat.me Window Menuの改修をしたので記載。 PR github.com 実装 現状ローカルストレージにTODOのデータを保存しているのみの構成。 なので、アプリ削除で全てのデータが消えしまうので保存データ…

TauriでTODOアプリを作ってみた①

仕事のタスク管理をslackで行っていたが、いい加減ちゃんと管理しくなってきたのでデスクトップアプリを自作したので、その内容を記事にした。 リポジトリ github.com アプリの説明 Markdownベースで記載できるTODOアプリ できるだけシンプルに作成 まだ開発…

skeletonを使用してGoの静的解析ツールを作ってみた

仕事の方でGoの静的解析ツールを作る機会があったので、その技術を使用してmemoir用に静的解析ツールを作ってみたので紹介 静的解析ツールのコード github.com memoir-backendではエラーのスタックトレースを表示させたい関係で、errorは基本全て特定のメソ…

PR毎にCloud Runをデプロイできるようにする

GCP固有の処理などローカル環境では検証できない機能が増えてきたので、PR毎にCloud Runをデプロイできるように修正した。 PR github.com 参考記事 zenn.dev cloud.google.com 実装 Cloud Runはtagを設定することで、リビジョンのURLが設定され個別にアクセ…

msw + graphql-codegen-typescript-mock-data + testing-library/react-nativeでインテグレーションテストを実装する

フロントエンドのインテグレーションテストを簡単に書けるようにしたいと思ったので、mswを使用してインテグレーションテストを実装してみた。 PR 以下の3回ののPRで実装。 github.com github.com github.com 実装①: typed-document-nodeに移行 実装の想定と…

Retoolでコード健全性の可視化のダッシュボードを作成

コードのカバレッジを継続的に計測したくて作成。 元々、codecovがデファクトだったが、以前あったセキュリティ問題から使用するのは微妙だなと思っていたので、Retoolを使用してダッシュボードを作成して可視化してみた。 インスパイヤ元の記事 以下の記事…

React Nativeでスクロールとタッチイベントとスワイプイベントを同時に使用する

memoirの不具合フィードバックで以下の報告があったので修正 上下スクロールしていると、意図せずスワイプイベントが発火して日付移動してしまう タッチインベントを設定している箇所でスワイプイベントが発火しない PR github.com 実装 元々はreact-native-…

gqlgen + opentelemetry-go + Cloud Traceでパフォーマンス測定

backendのパフォーマンス測定を実装してみた PR github.com OpenTelemetryとは opentelemetry.io OpenTelemetryは、オープンソースのオブザーバビリティフレームワーク 運用しているアプリのパフォーマンスや健全性が正常な状態か判断するために使用する情報…

zapを導入してCloud Loggingに構造化ログを出力する

サーバーのログの出力を見直したので記載 PR github.com 実装 ログの実装にはzapを導入。 github.com 以下みたいな感じでログ出力が可能。 logger, _ := zap.NewProduction() defer logger.Sync() logger.Info("failed to fetch URL", zap.String("url", url…

VSCode + air + delveでデバッグする

Goのデバッグツールが導入していなかったので追加した。 PR github.com 導入 まずは、デバッグツールのdelveを導入する github.com 以下のコマンドを実行。 $ go install github.com/go-delve/delve/cmd/dlv これで、dlvのコマンドが使用できるようになる。 …