今までPages Routerだった処理サイトをApp Routerに移行してみたの記事にしてみた nextjs.org PR github.com 実装 App Routerに移行する場合は、以下を確認してディレクトレリを変更する必要がある nextjs.org 基本はsrc/pages/schedule/[id].tsx→src/app/sc…
NextAuth.jsでログイン画面をカスタマイズしてみたので記事にする PR github.com github.com 実装 NextAuth.jsを使うと以下のような感じで簡単にログインを実装できる。 ■ src/server/auth.ts export const authOptions: NextAuthOptions = { providers: [ D…
前回紹介したwebアプリでT3 Stackでwebサービスを作成中。 www.wheatandcat.me T3 StackでSSRを実装を試していたら、かなり簡単に実装できることに気づいたので記事化。 PR github.com 実装 T3 StackでSSRする場合にどうすれば良いか分からなかったので初め…
作りたいwebサービスが出来たので気になっていたT3 Stackを使用して実装してみたので紹介 create.t3.gg サービスについては、まだ開発中なので、何回か記事にする予定 リポジトリ github.com 作成中のWebサービス oomaka.vercel.app サービス名: OOMAKA URL:…
Slackが無料だと90日までしかメッセージを保持しなくなったので、個人開発系の通知系はDiscordに引っ越中 discord.com その中で、Discord Botの開発をしてみたのでやり方を紹介 今回作ったもの PR github.com 内容 Discordに日本語、英語のチャンネルがあり…
@storybook/react-nativeが v6.5にバージョンアップしたので移行した。 結構書き方が変わったので紹介 PR github.com Storybook v5 → v6で変わった内容 Component Story Format (CSF) がサポートされた Storybookのファイルの書きからが以下のように変更。 ■…
作成したChrome拡張でデータをサーバー上から同期させる機能をSupabaseを使って実装してみたので紹介 PR github.com Supabaseとは？ supabase.com SupabaseはFirebaseの代替として注目されているBaas 以下のサービスを提供している Authentication Database …
前の記事で作っていたブラウザ拡張をChrome Web Storeに公開してみたので記事にしてみた www.wheatandcat.me 公開したChrome Web Store chrome.google.com リポジトリ github.com 公開方法 Plasmoで開発している場合は、基本は以下の通りに進めればOK。 docs…
最近、話題のtRPCを試してみたので記事にしました。 tRPCとは？ trpc.io スキーマやコード生成なしで型安全なAPIの連携が行えるPRCフレームワーク TypeScriptに特化しており、非常にシンプルに実装できる 比較対象としては、GraphQLやOpenAPIなどの技術に該…
最近、社内で記事の共有などをする機会が増え、ブラウザのブックマークやGoogle Keepを使用していたが、仕事とプライベートで使用しているブラウザ、Googleアカウントなどが違ったりして、どこに保存したか分からなくなることが多かったので、自作でchrome拡…
Expo SDK 48にアップデートをしたらReactのバージョンが最新になり、Enzymeがサポートされなくなったので、すべてのテストケースをtesting-library/react-nativeに置き換えた PR github.com 実装 今までEnzymeのshallowを使用して、テスト対象となるcomponen…
TodoアプリにPlayWrightを導入してみたので紹介 PR github.com github.com PlayWrightとは？ playwright.dev 最新のE2Eテストフレームワーク コードジェネレータが使えて便利 モチベーション 以前、記事で紹介した開発中のTODOアプリでmarkdown-to-jsxを使用…
一ヶ月前に右腕が腱鞘炎になってしまい、最近やっとある程度は仕事ができる状態になりました。 この記事では腱鞘炎になってから試したガジェット/アプリ/行動などをまとめたので、同じ境遇のエンジニアの参考になればと思います ♂️ 腱鞘炎前の状態の紹介 PC…
新しいプロジェクトでVitestを導入してみたので紹介 PR github.com 紹介 vitest.dev VitestはVite環境で動作する高速なテストフレームワーク 領域的にはJestと同じ 最新のテストフレームワークなので、細かいカスタマイズがされている 実装 以下のコマンドで…
Next.jsで作成してLPサイトにSSRをサポートしていないComponentパッケージを導入しようとしたところ、意外とハマったので記事にした。 PR github.com 実装 お試しでmemoir用のKo-fiのページを作ってみたのでNext.jsで作成したLPサイトにリンクを追加する開発…
元々、1つの処理内でfirestoreに複数件の書き込みをしている箇所は、バッチ書き込みで同時に書き込み処理を実行していた。 firebase.google.com GoのFirestore SDKのv1.9.0から、バッチ書き込みでclient.Batchを使用するのは非推奨になった。 pkg.go.dev そ…
以下の記事から引き続き、TODOアプリを作成中。 www.wheatandcat.me Window Menuの改修をしたので記載。 PR github.com 実装 現状ローカルストレージにTODOのデータを保存しているのみの構成。 なので、アプリ削除で全てのデータが消えしまうので保存データ…
仕事のタスク管理をslackで行っていたが、いい加減ちゃんと管理しくなってきたのでデスクトップアプリを自作したので、その内容を記事にした。 リポジトリ github.com アプリの説明 Markdownベースで記載できるTODOアプリ できるだけシンプルに作成 まだ開発…
仕事の方でGoの静的解析ツールを作る機会があったので、その技術を使用してmemoir用に静的解析ツールを作ってみたので紹介 静的解析ツールのコード github.com memoir-backendではエラーのスタックトレースを表示させたい関係で、errorは基本全て特定のメソ…
GCP固有の処理などローカル環境では検証できない機能が増えてきたので、PR毎にCloud Runをデプロイできるように修正した。 PR github.com 参考記事 zenn.dev cloud.google.com 実装 Cloud Runはtagを設定することで、リビジョンのURLが設定され個別にアクセ…
フロントエンドのインテグレーションテストを簡単に書けるようにしたいと思ったので、mswを使用してインテグレーションテストを実装してみた。 PR 以下の3回ののPRで実装。 github.com github.com github.com 実装①: typed-document-nodeに移行 実装の想定と…
コードのカバレッジを継続的に計測したくて作成。 元々、codecovがデファクトだったが、以前あったセキュリティ問題から使用するのは微妙だなと思っていたので、Retoolを使用してダッシュボードを作成して可視化してみた。 インスパイヤ元の記事 以下の記事…
memoirの不具合フィードバックで以下の報告があったので修正 上下スクロールしていると、意図せずスワイプイベントが発火して日付移動してしまう タッチインベントを設定している箇所でスワイプイベントが発火しない PR github.com 実装 元々はreact-native-…
backendのパフォーマンス測定を実装してみた PR github.com OpenTelemetryとは opentelemetry.io OpenTelemetryは、オープンソースのオブザーバビリティフレームワーク 運用しているアプリのパフォーマンスや健全性が正常な状態か判断するために使用する情報…
サーバーのログの出力を見直したので記載 PR github.com 実装 ログの実装にはzapを導入。 github.com 以下みたいな感じでログ出力が可能。 logger, _ := zap.NewProduction() defer logger.Sync() logger.Info("failed to fetch URL", zap.String("url", url…
Goのデバッグツールが導入していなかったので追加した。 PR github.com 導入 まずは、デバッグツールのdelveを導入する github.com 以下のコマンドを実行。 $ go install github.com/go-delve/delve/cmd/dlv これで、dlvのコマンドが使用できるようになる。 …
概要 memoirのサーバーではGAEを使用していたが、以下を考慮してCloud Runに移行したので記事にしました。 GAE/GOだと現状 1.16までしかサポートしていないので1.18以降の機能が使用できない memoirのサービスのアクセス傾向だとApp EngineのよりCloud Runの…
前回記事で、EAS Buildを試したので引き続きで、EAS Submitの方も実装してみたので記事にしました。 www.wheatandcat.me PR github.com 実装 EAS Submitを使用するとEAS Buildから、そのままApple Store/Google Playへのアップロードまで自動で行えるように…
memoirでEAS Buildを試してみた。 実際にやってみたら結構ハマりどころがあったので記事にした。 PR github.com EAS Buildとは docs.expo.dev EAS BuildはExpoの提供しているクラウドのビルド環境で、こちらを使用することでビルドの速度アップ、Hermes Engi…
memoirのアプリ公開前にシナリオテストの実施をしたかったので、 Qaseを使用してテストの管理を行ってみた。 Qaseとは qase.io シナリオテストの管理ツール。 3人までなら無料で使用可能。料金に関しては以下を参照。 qase.io 実施 まず、プロジェクトを作成…
