wheatandcatの開発ブログ

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

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のコマンドが使用できるようになる。 …

GAE→Cloud Runに移行

概要 memoirのサーバーではGAEを使用していたが、以下を考慮してCloud Runに移行したので記事にしました。 GAE/GOだと現状 1.16までしかサポートしていないので1.18以降の機能が使用できない memoirのサービスのアクセス傾向だとApp EngineのよりCloud Runの…

ExpoでEAS Submitを使用してみる

前回記事で、EAS Buildを試したので引き続きで、EAS Submitの方も実装してみたので記事にしました。 www.wheatandcat.me PR github.com 実装 EAS Submitを使用するとEAS Buildから、そのままApple Store/Google Playへのアップロードまで自動で行えるように…

ExpoでEAS Buildを有効にした際にハマった箇所の紹介

memoirでEAS Buildを試してみた。 実際にやってみたら結構ハマりどころがあったので記事にした。 PR github.com EAS Buildとは docs.expo.dev EAS BuildはExpoの提供しているクラウドのビルド環境で、こちらを使用することでビルドの速度アップ、Hermes Engi…

Qaseを使用してリリース前のテスト管理をする

memoirのアプリ公開前にシナリオテストの実施をしたかったので、 Qaseを使用してテストの管理を行ってみた。 Qaseとは qase.io シナリオテストの管理ツール。 3人までなら無料で使用可能。料金に関しては以下を参照。 qase.io 実施 まず、プロジェクトを作成…

React NavigationでTextInputのautoFocusが効かない問題の対応

本番アプリの検証中に見つけた不具合の対応を記載 PR github.com 対応 TextInputにautoFocusを設定しても反応しない事象が発生。 原因は以下の通り。 github.com 内容的にはReact Navigation で画面遷移した先の画面でTextInputにautoFocusを設定してもキー…

Prismaを試してみた

Prismaに触れる機会があったので紹介 リポジトリ github.com スライド speakerdeck.com Prismaとは? Node.js製のORM RDB周りの処理を簡易に扱えるようにする Schemaファイルから型情報を自動生成 以下のDB対応をサポート PostgreSQL、MySQL、SQL Server、SQ…

GraphQLのエラーハンドリングを追加する

GraphQLではエラーになった場合でも http status 200にしてGraphQLのレスポンスをエラーにして、エラーメッセージを返すのが一般的にである。 ただ、それだと特定のエラーの場合のみフロントエンド側でハンドリングしたい時に不便だなと感じていた。 そこで…

CSSのclip-pathの紹介

memoirのLPサイトのデザインでCSSのclip-pathを使用してみた感じ結構良さ気だったのでサンプルリポジトリを作成してみたので紹介 リポジトリ github.com 紹介 以下で紹介用のサイトとスライドを作成した。 ■URL https://try-css.vercel.app/ ■スライド speak…

docsifyで開発ドキュメントの管理を行う②: 実運用まで

以下のdocsifyで開発ドキュメントの管理を行なう①: 基礎構成の記事の続きです。 docsifyで開発ドキュメントの管理を行う① - ペペロミア & memoir開発ブログ 以下に記載している内容をドキュメント化して実際の開発フローにのせる運用をやってみた。 開発手順…

zxを使用してGitHubのCHANGE_LOG.mdを作成する

www.wheatandcat.me ↑で開発ドキュメントを管理するサイトを作成したが、その際に編集履歴の画面が欲しいと思ったので、zxを使用して実装してみた。 PR github.com 実装 開発ドキュメントを管理するサイトとして以下を実装した。 wheatandcat.github.io ドキ…

frontendはformikとyupで、backendはozzo-validationを使用してバリデーションを実装する

LPサイトのお問い合わせフォームのバリデーションを作成する時に使ってみた組み合わせを紹介 PR github.com frontendのバリデーションを実装 以下を使用してバリデーションを実装 formik yup yupでは、バリデーションを以下のように実装できる。 import * as…

docsifyで開発ドキュメントの管理を行う① :基礎構成

プロジェクトの開発規模が大きくなってくると設計書の可視化が必要になってくる。 どう管理するか検討した結果、GitLabのHandbookのガイドを参考にするのが良いと思い、開発ドキュメントのWebサイトを作成した。 about.gitlab.com リポジトリ github.com 開…

アサイン募集中のissueを集めて共有するモンハンのクエストボードみたいな仕組みを作る

管理するメンバーが増える & 複数のRepositoryに跨ったプロジェクトだったりすると issueのアサインに時間が掛かることがあるので、特定の記事をモンハンのクエストボードみたいに見立てて、そこから自分に合ったissueを引き受けるような仕組みを作ると楽そ…