wheatandcatの開発ブログ

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

2023-01-01から1年間の記事一覧

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