wheatandcat

以下の記事で紹介したが現在開発中のアプリでPlanetScaleを使用していたが無料プランがなくなってしまうので、代替のDBサービスを試してみたので紹介www.wheatandcat.mePlanetScaleの無料プランがなくなる件planetscale.com5GBまでなら無料で使用できていましたが、4月8日からアップグレードしないと使用できなくなってしまうので個人開発は置き換えることにした代替の条件今回は個人開発で使用する前提なので以下の条件で調査 - 個人開発で使用する範疇なら無料で使用できるDBサービス - Prismaを使用できる候補以下の2つをサービスを試してみた - Neon - TiDB ServerlessNeonneon.tech概要サーバーレスのフルマネージドPostgresコードはGitHubで公開されているneondatabase/neonRust製始め方はサイトにアクセスして初期設定をすれば、即使用可能AWS AuroraやAlloyDBと似た機能を持ったアーキテクチャを採用（詳しくは以下の記事を参照）https://neon.tech/blog/architecture-decisions-in-neonPrismaでの使用方法■ PRgithub.com基本は以下のサイトを参考に実装可能neon.techメリット無料枠が512MBブランチングができるので、環境毎にDBを複製ことが可能Webのコンソールの機能が充実していて以下の機能が使用できるSQL editorIP制限定期バックアップVercelやDatadogなどの多くの既存システムとのインテグレーションの仕組みなどなど、機能サポート面はかなり充実しているOSSとしてGitHubで公開しているデメリット東京リージョンが現状ない（なので、日本で使用する場合はシンガポールリージョンが一番近くなりそう）TiDB Serverlesspingcap.co.jp概要MySQL互換のあるNewSQLを使用高い分散性能を持っており、大規模プロジェクトでも使用されているコードはGitHubで公開されているhttps://github.com/pingcap/tidbGo製詳細なアーキテクチャは以下の記事を参照https://docs.pingcap.com/ja/tidb/stable/tidb-architecture#tidb-architecturePrismaでの使用方法■ PRgithub.com基本は以下のサイトを参考に実装可能docs.pingcap.comメリット無料枠が5000万リクエストユニット（RU）/月NewSQLなのにPrismaが使用できる自動でデータ分散管理されるためシャーディングが不要柔軟なトランザクションの設定が用意されていて用途に合わせて変更可能https://docs.pingcap.com/ja/tidb/stable/transaction-isolation-levelsWriteのスケールも可能運営会社のPingCAPに日本支社ができたので日本語のドキュメントが充実しているhttps://docs.pingcap.com/ja/tidb/stable/overviewデメリットMySQLは完全互換では無い（詳細は以下に記載）https://docs.pingcap.com/ja/tidb/stable/mysql-compatibility学習コストが高い複雑なアーキテクチャをしているので運用やチューニングに専門的な知識が必要以下の記事を参考TiDBにおけるパフォーマンス検証の進め方とつまづきポイントPerformance TuningまとめどちらもPrismaで問題なく動作したのが、やはりNeonの方は東京リージョンがないデメリットが大きいので、TiDB Serverlessの方を採用して開発することにした。まだ使い始めたばっかりで、そこまで分かってないことが多いので開発してネタができたら、また記事を書こうと思います。

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

現状FlutterでAPI接続するにはGraphQLが良さ気だったので実装してみたリポジトリ以下で開発■ Fluttergithub.com■ backendgithub.com開発構成FrontendFlutterBackendNestJSPrismaPlanetScaleGraphQL Code GeneratorCloud RunモチベーションFlutterでもgraphql_codegenで型安全で実装はできるので、それを使って開発実装graphql_codegenで型安全にするためにbackendから以下のスキーマファイルを取得■ src/schema.graphqltype Query {  categories: [Category]  category(id: Int!): Category}type Category {  "カテゴリーID"  id: ID!  "カテゴリー名"  name: String!  "順番"  order: Int!}graphql_codegenでは上記のスキーマファイルとフロントエンド側でアクセスするgqlファイルを元にGraphQLのアクセス用のファイルを自動生成する。なので、次はフロントエンド側でアクセスに使用するgqlファイルを作成■ lib/graphql/category.gqlquery Category($id: Int!) {  category(id: $id) {    id    name    order  }}以下のコマンドでgraphql_codegenに必要ライブラリをインストール$ flutter pub add --dev graphql_codegen build_runner$ flutter pub add graphql graphql_flutter flutter_hooksbuild_runnerの設定ファイルを作成■build.yamltargets:  $default:    builders:      graphql_codegen:        options:          scopes:            - lib/graphql/**          clients:            - graphql            - graphql_flutter以下のコマンドでgraphql_codegenを実行$ dart run build_runner buildコマンド実行で以下のファイルが生成される■ lib/graphql/category.gql.dart（略）graphql_flutter.QueryHookResult<Query$Category> useQuery$Category(        Options$Query$Category options) =>    graphql_flutter.useQuery(options);graphql.ObservableQuery<Query$Category> useWatchQuery$Category(        WatchOptions$Query$Category options) =>    graphql_flutter.useWatchQuery(options);（略）上記で生成したファイルを使用してGraphQLを実行、今回はHooksを使用した方法で実装■lib/app/items/page.dartimport 'package:flutter/material.dart';import 'package:sampleflutter/components/appBar/common.dart';import 'package:sampleflutter/graphql/category.gql.dart';import 'package:flutter_hooks/flutter_hooks.dart';import 'package:sampleflutter/utils/graphql.dart';class Items extends HookWidget {  final int id;  const Items({super.key, required this.id});  @override  Widget build(BuildContext context) {    final queryResult = useQuery$Category(        Options$Query$Category(variables: Variables$Query$Category(id: id)));    final result = queryResult.result;    if (result.isLoading) {      return const Scaffold(        appBar: CommonAppBar(title: ""),        body: Center(          child: CircularProgressIndicator(),        ),      );    }    final Query$Category$category category = extractGraphQLData(      data: result.data,      fieldName: "category",      fromJson: Query$Category$category.fromJson,    );    return Scaffold(      appBar: const CommonAppBar(title: ""),      body: Column(        children: [          Padding(            padding: const EdgeInsets.only(left: 10, right: 10),            child: Card(              color: Colors.transparent,              elevation: 0,              shape: const Border(                  bottom: BorderSide(color: Colors.white, width: 3)),              child: ListTile(                contentPadding: EdgeInsets.zero,                title: Text(category.name,                    style: const TextStyle(（略）こんな感じで、ほぼReact & GraphQL Code Generatorで開発している時と、ほぼ同じ感覚でFlutterでも開発できるので、なかなか便利でした。 一旦、Flutter & GraphQLで開発を進めて行こうと思います。

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

Flutter × GraphQLでアプリを作ってみる

App Routerの紹介

 T3 Stack（応用編: Next Auth & SSRの実装紹介）

新しいアプリ開発でbackendをNode.jsでAPIをやってみようと思いタイトルの構成でAPIサーバーを作成してみたら、結構ハマりどころがあったので記事したリポジトリgithub.comモチベーション現在Flutterでアプリを作成中FlutterでAPIのやり取りで型安全にするならgraphql_codegenが使えるもし、React NativeだったらGraphQLでは無くtRPCを採用していたと思うが、Flutterはサポートしていないので除外他の言語も検討したが、Prismaを使用したかったので Node.jsを採用使用技術NestJSFastifyMercuriusPrismaPlanetScaleGraphQL Code GeneratorCloud Run実装NestJSだと以下で新規プロジェクトを作ってくれるので、そこから作成$ npm i -g @nestjs/cli$ nest new project-nameまず、Fastifyを導入■ src/main.tsimport { NestFactory } from '@nestjs/core'import {  FastifyAdapter,  NestFastifyApplication,} from '@nestjs/platform-fastify'import { AppModule } from './app.module'async function bootstrap() {  const app = await NestFactory.create<NestFastifyApplication>(    AppModule,    new FastifyAdapter({ logger: true })  )  const port = Number(process.env.PORT) || 8080  console.log(`Listening on port ${port}`)  await app.listen(port, '0.0.0.0')}bootstrap()次にGraphQLはSchema Firstで実装したかったので、GraphQLの定義を作成■ src/schema.graphqltype Query {  hello: String  categories: [Category]}type Category {  "カテゴリーID"  id: ID!  "カテゴリー名"  name: String!  "順番"  order: Int!}type Item {  "アイテムID"  id: ID!  "カテゴリーID"  categoryId: ID!  "アイテム名"  name: String!  "在庫数"  stock: Int!  "消費期限"  expirationDate: Time}input NewCategory {  "カテゴリー名"  name: String!  "順番"  order: Int!}type Mutation {  createCategory(input: NewCategory!): Category!}scalar Timeコードの方は以下のように実装■src/app.module.tsimport { Module } from '@nestjs/common'import { GraphQLModule } from '@nestjs/graphql'import { MercuriusDriver, MercuriusDriverConfig } from '@nestjs/mercurius'import { AppController } from '@src/app.controller'import { AppService } from '@src/app.service'import { HelloResolver } from './hello.resolver'import { CategoryResolver } from '@src/resolver/category'import { PrismaService } from '@src/modules/prisma/prisma.service'@Module({  controllers: [AppController],  providers: [AppService, HelloResolver, CategoryResolver, PrismaService],  imports: [    GraphQLModule.forRoot<MercuriusDriverConfig>({      driver: MercuriusDriver,      graphiql: true,      typePaths: ['./**/schema.graphql'],    }),  ],})export class AppModule {}resolverでGraphQLのtypeを使用したいのでGraphQL Code Generatorで型を自動生成■codegen.tsimport type { CodegenConfig } from '@graphql-codegen/cli'const config: CodegenConfig = {  overwrite: true,  schema: './src/schema.graphql',  generates: {    'src/generated/graphql.ts': {      plugins: ['typescript'],    },  },}export default configpackage.jsonに以下のコマンドを追加■ package.json  "scripts": {     ...    "codegen": "graphql-codegen --config codegen.ts"  }以下のコマンド実行でtypeファイルを作成$ pnpm run codegen作成されたファイルが以下src/generated/graphql.ts...export type Category = {  __typename?: 'Category';  /** カテゴリーID */  id: Scalars['ID']['output'];  /** カテゴリー名 */  name: Scalars['String']['output'];  /** 順番 */  order: Scalars['Int']['output'];};export type Item = {  __typename?: 'Item';  /** カテゴリーID */  categoryId: Scalars['ID']['output'];  /** 消費期限 */  expirationDate?: Maybe<Scalars['Time']['output']>;  /** アイテムID */  id: Scalars['ID']['output'];  /** アイテム名 */  name: Scalars['String']['output'];  /** 在庫数 */  stock: Scalars['Int']['output'];};上記のtypeファイルを使用してresolverを作成※Guardとかの概念の説明は長くなるので次回の記事で紹介する■src/resolver/category.tsimport { Resolver, Query, Mutation, Args, Context } from '@nestjs/graphql'import { UseGuards } from '@nestjs/common'import {  Query as QueryType,  NewCategory,  Category,} from '@src/generated/graphql'import { PrismaService } from '@src/modules/prisma/prisma.service'import { format } from '@src/lib/graphql'import { AuthGuard } from '@src/common/guards/auth/auth.guard'@Resolver('')export class CategoryResolver {  constructor(private prisma: PrismaService) {}  @Query(() => String)  @UseGuards(AuthGuard)  async categories(@Context() context): Promise<QueryType['categories']> {    const user = context.req.auth    const r = await this.prisma.category.findMany({      where: {        userId: user.userId,      },      orderBy: {        order: 'asc',      },    })    return r.map((c) => format(c))  }  @Mutation('createCategory')  @UseGuards(AuthGuard)  async createCategory(    @Args('input') input: NewCategory,    @Context() context  ): Promise<Category> {    const user = context.req.auth    const r = await this.prisma.category.create({      data: {        userId: user.userId,        name: input.name,        order: input.order,      },    })    return format(r)  }}ローカルで起動して実行してレスポンスを確認問題なく動作しているのを確認したので、Cloud Runでデプロイの準備 Cloud Native Buildpacksを使用してDockerfile無しでの実装を検討したが以下の記事の通り、うまくいかなったzenn.devなので、以下のDockerfileを用意■ Dockerfile# ステージ1: 依存関係のインストールとビルドFROM node:18 AS builderWORKDIR /usr/src/app# pnpmのインストールRUN npm install -g pnpm# package.jsonとpnpm-lock.yamlをコピーCOPY package.json pnpm-lock.yaml ./# 依存関係のインストールRUN pnpm install# Prismaクライアントの生成COPY prisma ./prisma/RUN npx prisma generate# アプリケーションのソースコードをコピーCOPY . .# アプリケーションのビルドRUN pnpm run build# ステージ2: 本番環境用イメージの作成FROM node:18-alpine AS productionWORKDIR /usr/src/app# 環境変数 NODE_ENV を production に設定ENV NODE_ENV=production# pnpmのインストールRUN npm install -g pnpm# package.jsonとpnpm-lock.yamlをコピーCOPY package.json pnpm-lock.yaml ./# 本番依存関係のみをインストールRUN pnpm install# ビルドしたファイルをコピーCOPY --from=builder /usr/src/app/dist ./distCOPY --from=builder /usr/src/app/node_modules ./node_modulesCOPY --from=builder /usr/src/app/prisma ./prismaCOPY --from=builder /usr/src/app/src ./src# アプリケーションがリッスンするポート番号EXPOSE 8080CMD ["node", "dist/src/main"]上記でdocker buildしたら以下のエラーが発生PrismaClientInitializationError: Prisma Client could not locate the Query Engine for runtime "linux-musl-arm64-openssl-3.0.x".This happened because Prisma Client was generated for "darwin-arm64", but the actual deployment required "linux-musl-arm64-openssl-3.0.x".Add "linux-musl-arm64-openssl-3.0.x" to `binaryTargets` in the "schema.prisma" file and run `prisma generate` after saving it:generator client {  provider      = "prisma-client-js"  binaryTargets = ["native", "linux-musl-arm64-openssl-3.0.x"]}PrismaはLinuxとMacで実行時のbinaryTargetsを指定しないとエラーになるので、エラーに記載の通りに以下を追加■prisma/schema.prismagenerator client {  provider      = "prisma-client-js"  binaryTargets = ["native", "linux-musl-openssl-3.0.x"]}これで以下のコマンドでビルド成功$ docker build --platform linux/amd64  -t gcr.io/your-project-id/stock-keeper-backend .$ docker push gcr.io/your-project-id/stock-keeper-backend最後に以下のコマンドでデプロイ完了$ gcloud run deploy stock-keeper \  --image gcr.io/your-project-id/stock-keeper-backend2 \  --platform managed \  --region asia-northeast1 \  --allow-unauthenticated中なハマりどころの多かったが、なんとかデプロイまで出来るようになった

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

前から記事で紹介していたサービスが公開できるレベルまで開発が完了。GitHubgithub.comURLoomaka.vercel.app使用技術web & サーバーT3 StackNext.jsApp Routerで実装tRPCTailwind CSSTypeScriptPrismaNextAuth.jsその他DatabaseSupabaseデプロイVercelサービス概要年間のスケジュールをおおまかに登録できるwebサービス1ヶ月に5つまでタスクが登録できて、1画面で1年間を確認できるログインしないでも使用可能ログインすると閲覧にパスワード機能が使用できる（ログインしない場合はURLを知っている場合は誰でも閲覧可能）機能紹介 & こだわりポイント紹介印刷ボタンを押した時にきっちり一枚になるように実装印刷ボタンを押した時にきっちり一枚になるように実装@media printを使用すれば、styleの変更が可能// 印刷プレビューを開く直前のハンドリングwindow.addEventListener('beforeprint', handleBeforePrint);// 印刷プレビューが閉じた直前のハンドリングwindow.addEventListener("afterprint", handleAfterPrint);ログインログインはNextAuth.jsで実装next-auth.js.orgアイコン系は全てemojiで表現アイコン系は全てemojiで表現。サイト全体でほぼ画像を使用していないのでパフォーマンスも結構良い感じになっている。Lighthouseの結果は以下の通りFaviconも干支で切り替わるように設定Next.jsだと簡単に画面毎に動的にFaviconを変わるように実装可能icon.tsxを配置するのみでOK。コード以下のような感じになる■ src/app/schedule/[id]/icon.tsximport { ImageResponse } from "next/og";import dayjs from "dayjs";import { JpZodiac } from "~/utils/emoji";export const size = {  width: 32,  height: 32,};export const runtime = "edge";export const contentType = "image/png";export default function Icon() {  return new ImageResponse(    (      <div        style={{          fontSize: 24,          borderRadius: "50%",          width: "100%",          height: "100%",          display: "flex",          alignItems: "center",          justifyContent: "center",          color: "#333",        }}      >        <span>{JpZodiac[(dayjs().year() + 8) % 12]} </span>      </div>    ),    {      ...size,    },  );}ちなみにOGP画像も以下みたいな感じ実装できる■ src/app/api/og/route.tsximport { ImageResponse } from "@vercel/og";export const runtime = "edge";export async function GET() {  const fontData = await fetch(    new URL("../../../../public/NotoSansJP-Bold2.ttf", import.meta.url),  ).then((res) => res.arrayBuffer());  return new ImageResponse(    (      <div        style={{          background: "white",          display: "flex",          flexDirection: "column",          alignItems: "center",          justifyContent: "center",          width: "100%",          height: "100%",          fontFamily: '"NotoSansJP"',        }}      >        <div          style={{ height: 40, backgroundColor: "#000000", width: "100%" }}        />        <div          style={{            flex: 1,            maxWidth: "80%",            display: "flex",            justifyContent: "center",            flexDirection: "column",            paddingTop: 30,            paddingBottom: 30,          }}        >          <div            style={{              fontSize: 28,            }}          >            年間スケジュール、まとめるなら          </div>          <div            style={{              fontSize: 72,              fontWeight: 800,              letterSpacing: "0.5rem",              paddingLeft: "2rem",            }}          >            OOMAKA          </div>        </div>        <div          style={{ height: 40, backgroundColor: "#000000", width: "100%" }}        />      </div>    ),    {      width: 1200,      height: 630,      fonts: [        {          name: "NotoSansJP",          data: fontData,          style: "normal",        },      ],    },  );}サービスを作成した感想個人開発でwebサービスを作ったのが久々だったので学びが多かったNext.jsのサポートしている機能が多く、痒いところにも手が届く感が凄いただやりすぎている箇所もあるのでRemix派の気持ちも分かったtRPCは最初はTypescriptでしか使えないなら微妙かなと思っていたが、Prismaとの相性が良すぎて生産性の向上に、かなり貢献したNextAuthはサーバーサイドとクライアントサイドのどちらでも認証情報が取得できてNext.jsでの認証では必須最近アプリの開発ばかりしていたが、久々に別の最新技術に触れると刺激的で楽しかった

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

今までPages Routerだった処理サイトをApp Routerに移行してみたの記事にしてみたnextjs.orgPRgithub.com実装App Routerに移行する場合は、以下を確認してディレクトレリを変更する必要があるnextjs.org基本はsrc/pages/schedule/[id].tsx→src/app/schedule/[id]/page.tsxみたいな感じでディレクトレリを変更すればOK 👌App RouterはReact Server Components(RSC)でレンダリングされているので対応、以下のようなコードになった■ src/app/schedule/[id]/page.tsximport { getServerAuthSession } from "~/server/auth";import { redirect } from "next/navigation";import { Template } from "~/app/_components/schedule/template";import { api } from "~/trpc/server";export default async function Page({ params }: { params: { id: string } }) {  const session = await getServerAuthSession();  const url = await api.url.exists.query({ id: params.id });  if (url === false) {    // 存在しないURLの場合はトップページに戻す    redirect("/");  }  const schedules = await api.schedule.fetch.query({ urlId: params.id });  return <Template login={!!session} schedules={schedules} id={params.id} />;}■ src/app/_components/schedule/template.tsx"use client";import { signIn, signOut } from "next-auth/react";import { useEffect, useCallback, useState } from "react";import { useRouter } from "next/navigation";import Period from "~/features/schedules/components/Period";import Items from "~/features/schedules/components/Items";import dayjs from "~/utils/dayjs";import { monthItems, getScheduleInMonth } from "~/utils/schedule";import Pagination from "~/features/schedules/components/Pagination";import { toast } from "react-toastify";import Layout from "~/components/Layout/Layout";import { type Schedule } from "@prisma/client";type Props = {  login: boolean;  id: string;  schedules: Schedule[];};export function Template(props: Props) {  const router = useRouter();  const [startDate, setStartDate] = useState(dayjs());  const [print, setPrint] = useState(false);  const months = monthItems(    Number(startDate.format("M")),    Number(startDate.year()),  );  const onLogout = useCallback(async () => {    window.localStorage.setItem("URL_ID", "");    await signOut({      callbackUrl: "/",    });  }, []);  const onToIndex = useCallback(() => {    window.localStorage.setItem("URL_ID", "");    router.push("/");  }, [router]);  const onShare = useCallback(async () => {    await global.navigator.clipboard.writeText(`${window.location.href}/share`);    toast.success("URLをコピーしました！", {      position: "top-center",      autoClose: 2000,      hideProgressBar: false,      closeOnClick: true,      pauseOnHover: true,      draggable: true,      progress: undefined,      theme: "light",    });  }, []);  const onPrint = useCallback(() => {    setPrint(true);    setTimeout(() => window.print(), 100);  }, []);  useEffect(() => {    const handleAfterPrint = () => {      setPrint(false);    };    window.addEventListener("afterprint", handleAfterPrint);    return () => {      window.removeEventListener("afterprint", handleAfterPrint);    };  }, []);  return (    <Layout>      <>        <main className="screen-container container mx-auto max-w-screen-xl gap-12 pt-3">          <div className="no-print">            <div className="absolute right-28 top-0 hidden sm:block">              <div                className="flex w-14 cursor-pointer flex-col items-center pt-3 text-xl hover:bg-blue-100"                onClick={() => void onShare()}              >                🔗                <div className="text-xxs text-center text-gray-500">シェア</div>              </div>            </div>            <div              className="absolute right-14 top-0 hidden sm:block"              onClick={() => void onPrint()}            >              <div className="flex w-14 cursor-pointer flex-col items-center pt-3 text-xl hover:bg-blue-100">                🖨️                <div className="text-xxs text-center text-gray-500">印刷</div>              </div>            </div>            <div              className="absolute right-0 top-0 hidden sm:block"              onClick={() => {                if (props.login) {                  void onLogout();                } else {                  void signIn("credentials", {                    callbackUrl: "/",                  });                }              }}            >              <div className="flex w-14 cursor-pointer flex-col items-center pt-3 text-xl hover:bg-blue-100">                {props.login ? "🔓" : "🗝️"}                <div className="text-xxs text-center text-gray-500">                  {props.login ? "ログアウト" : "ログイン"}                </div>              </div>            </div>          </div>          <div className="relative hidden justify-between sm:flex">            <Period              startDate={startDate.format()}              endDate={startDate.add(1, "years").format()}            />            <Pagination              onNext={() => setStartDate(startDate.add(1, "months"))}              onPrev={() => setStartDate(startDate.subtract(1, "months"))}            />          </div>          <div className="flex flex-col flex-nowrap justify-center pt-10 sm:flex-row sm:flex-wrap sm:justify-start">            {months.map((item, index) => (              <div                key={index}                className="item-container px-0 pb-6 sm:pb-16 sm:pr-16"              >                <Items                  urlId={props.id}                  date={item}                  defaultItems={getScheduleInMonth(item, props.schedules ?? [])}                  share={print}                />              </div>            ))}          </div>          <div className="no-print mb-10 flex justify-center">            {props.login ? (              <button                type="button"                className="mb-1 mr-1 rounded-md border border-red-700 px-5 py-2.5 text-center text-sm font-medium text-red-700 hover:bg-red-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500 dark:hover:text-white dark:focus:ring-red-800"                onClick={() => void onLogout()}              >                ログアウト              </button>            ) : (              <button                type="button"                className="mb-1 mr-1 rounded-md border border-gray-700 px-5 py-2.5 text-center text-sm font-medium text-blue-700 hover:bg-blue-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-300 dark:border-gray-500 dark:text-gray-500 dark:hover:bg-gray-500 dark:hover:text-white dark:focus:ring-gray-800"                onClick={() => void onToIndex()}              >                トップページに戻る              </button>            )}          </div>        </main>      </>    </Layout>  );}修正ポイントとしては以下の部分になるRSCだとawaitが使用できるので以下のようなコードを書くことができるexport default async function Page({ params }: { params: { id: string } }) {  const session = await getServerAuthSession();  const url = await api.url.exists.query({ id: params.id });  if (url === false) {    // 存在しないURLの場合はトップページに戻す    redirect("/");  }  const schedules = await api.schedule.fetch.query({ urlId: params.id });  return <Template login={!!session} schedules={schedules} id={params.id} />;useEffectやuseStateに関してはRSCだと使用できないので、使用する場合はファイルの先頭でuse clientを宣言してClient Componentでimportする必要がある"use client";import { signIn, signOut } from "next-auth/react";import { useEffect, useCallback, useState } from "react";変更して見た感じの感想ですが、RSCにすることによって初回レンダリング時の認証やデータ取得のコードはシンプルになった、変更前と変更後のコードを比較すると以下の通り実装内容はDBのUrlのtableにアクセスして該当のデータがなけばTOPページにリダイレクト & Urlのデータに認証情報が設定している場合に一致しない場合はTOPページにリダイレクト■ 変更前function Schedule() {  const { data: sessionData } = useSession();  const router = useRouter();  const { id } = router.query;  const url = api.url.exists.useQuery({ id: String(id) });  useEffect(() => {    if (url.data === false) {      // 存在しないURLの場合はトップページに戻す      void router.push("/");    }    if (url.data.userId != "" && url.data.userId != sessionData?.user?.id) {      // userId設定のあるURLで認証情報が一致しない場合はトップページに戻す      void router.push("/");    }  }, [url.data, router, sessionData?.user?.id]);■ 変更後export default async function Page({ params }: { params: { id: string } }) {  const session = await getServerAuthSession();  const url = await api.url.exists.query({ id: params.id });  if (url === null) {    // 存在しないURLの場合はトップページに戻す    redirect("/");  }  if (url.userId != "" && url?.userId !== session?.user?.id) {    // URLのユーザーIDとログインしているユーザーIDが一致しない場合はトップページに戻す    redirect("/");  }こんな感じでuseEffectを使わなくても済むのでシンプルになるかなと思います。useEffectやuseStateを使いたい画面では必ずcomponentを分割してuse clientを宣言しないといけないのが手間だとも感じたので、今のところ凄い大きなメリットがある感じでも無いですが、App Routerじゃないと使用できない機能があったので、今回は移行してみました。

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

NextAuth.jsでログイン画面をカスタマイズしてみたので記事にするPRgithub.comgithub.com実装NextAuth.jsを使うと以下のような感じで簡単にログインを実装できる。■ src/server/auth.tsexport const authOptions: NextAuthOptions = {  providers: [    DiscordProvider({      clientId: env.DISCORD_CLIENT_ID,      clientSecret: env.DISCORD_CLIENT_SECRET,    }),    AppleProvider({      clientId: env.APPLE_ID,      clientSecret: env.APPLE_SECRET,    }),    GoogleProvider({      clientId: env.GOOGLE_CLIENT_ID,      clientSecret: env.GOOGLE_CLIENT_SECRET,    }),  ],ログインのプロバイダーは以下を参考に設定next-auth.js.org以下でsignInを参照すればログイン可能import { signIn } from "next-auth/react";<button onClick={() => signIn("credentials", {callbackUrl: "/",})}>  ログイン</button>デフォルトで以下の画像のように表示されるこれだけでも十分使用できるが、サービスのロゴや規約のリンクを表示させたい場合はカスタマイズが必要 next-auth.js.org実際にコード化してみると以下の通り以下で表示するcomponentのpathを指定■src/server/auth.tsexport const authOptions: NextAuthOptions = {  pages: {    signIn: "/auth/signin",  // ← 追加    error: "/auth/signin",    // ← 追加  },以下で実際のUIを作成■src/pages/auth/signin.tsximport type {  GetServerSidePropsContext,  InferGetServerSidePropsType,} from "next";import { getProviders, signIn } from "next-auth/react";import { getServerSession } from "next-auth/next";import { authOptions } from "~/server/auth";import { useRouter } from "next/router";import SignInError from "~/features/auth/components/SignInError";const authStyle: Record<string, { className: string; color: string }> = {  Discord: {    className: "bg-blue-600 text-white border border-blue-500",    color: "blue",  },  GitHub: {    className: "bg-gray-700 text-white border border-gray-700 ",    color: "gray",  },  Google: {    className: "bg-white text-black border border-black",    color: "gray",  },  Apple: {    className: "bg-black text-white border border-black",    color: "gray",  },};export default function SignIn({  providers,}: InferGetServerSidePropsType<typeof getServerSideProps>) {  const { error } = useRouter().query;  return (    <div>      <div className="signin-bg fixed top-0 h-screen w-screen" />      <div className="flex items-center justify-center">        <div className="container z-10 flex h-screen flex-col items-center justify-center">          <div className=" rounded-xl border bg-white px-20 py-4">            <div>              <div className="pb-10 pt-5 text-center">                <div className="signin-mini-logo-title">                  年間スケジュール、まとめるなら                </div>                <div className="signin-logo-title text-xl font-bold">                  OOMAKA                </div>              </div>              {error && (                <div className="pb-6">                  <SignInError error={String(error)}></SignInError>                </div>              )}              <div className="flex flex-col items-center pb-10">                {Object.values(providers ?? {}).map((provider) => {                  const item = authStyle[String(provider?.name)];                  return (                    <div key={provider.name}>                      <button                        className={`my-3 w-72 rounded-lg px-4 py-2 font-bold ${String(                          item?.className                        )}`}                        onClick={() => void signIn(provider.id)}                      >                        {provider.name} でログイン                      </button>                    </div>                  );                })}              </div>              <div className="pb-5 text-center text-sm text-gray-500">                利用規約およびプライバシーポリシーに同意の上、                <br />                ログインへお進みください。              </div>            </div>          </div>        </div>      </div>    </div>  );}export async function getServerSideProps(context: GetServerSidePropsContext) {  const session = await getServerSession(context.req, context.res, authOptions);  if (session) {    return { redirect: { destination: "/" } };  }  const providers = await getProviders();  return {    props: { providers: providers ?? [] },  };}props.providersに設定したプロバイダーの設定が入っているので、この情報を使用してログイン画面を作成して最終的に以下のような表示になったこれでNextAuth.jsでログイン画面をカスタマイズ完了。それっぽく出来たので満足

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

T3 Stack + Supabaseでアプリを作ってみる

前回紹介したwebアプリでT3 Stackでwebサービスを作成中。www.wheatandcat.meT3 StackでSSRを実装を試していたら、かなり簡単に実装できることに気づいたので記事化。PRgithub.com実装T3 StackでSSRする場合にどうすれば良いか分からなかったので初めはNext.jsでの実装と同様にgetServerSidePropsを使用して実装しようとしてみたが以下のtRPCのドキュメントを読んでSSRの場合は、getServerSidePropsを書かなくても実装できることが判明。trpc.io単純にcreateTRPCNextのオプションにssr: trueを設定するのみでOKだった。■src/utils/api.tsexport const api = createTRPCNext<AppRouter>({  ...(略)  },  /**   * Whether tRPC should await queries when server rendering pages.   *   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false   */  ssr: true, // ← 変更する});上記を実装することサーバーサイド側でtRPCの通信ができるようになります。ssr:falseに設定することも可能。■src/features/schedules/components/Items.tsx  const schedules = api.schedule.fetchInPeriod.useQuery(    {      urlId: props.urlId,      startDate: props.date.toDate(),      endDate: props.date.endOf("month").toDate(),    },    {      trpc: {        ssr: false, // ← 変更する      },    }  );上記の修正でOOMAKAでもSSRができるようになった。NextAuth.js • Create T3 Appコードは以下のようになった。■ src/pages/index.tsxexport const getServerSideProps: GetServerSideProps = async (ctx) => {  const session = await getServerAuthSession(ctx);  return {    props: { session },  };};function Home() {  const { data: sessionData } = useSession();Next.jsだけでもSSRはかなり簡単に実装できる印象だったが、T3 Stackはそれよりもさらに簡単に実装ができるようになっていて素晴らしい 🎉

T3 StackでSSRさせてみる

作りたいwebサービスが出来たので気になっていたT3 Stackを使用して実装してみたので紹介create.t3.ggサービスについては、まだ開発中なので、何回か記事にする予定リポジトリgithub.com作成中のWebサービスoomaka.vercel.appサービス名: OOMAKAURL: https://oomaka.vercel.app概要: 大まかに未来の予定を可視化するサービス※まだログアウトの実装がミスっているので現在修正中 😅T3 Stackとは最近、話題のWebアプリーケーション開発の構成で以下の技術を使用している。Next.jstRPCTailwind CSSTypeScriptPrismaNextAuth.jsこの構成で簡単に環境構築できるコマンドラインツールが以下で提供されている。create.t3.gg今回のサービスも上記のコマンドラインツールを使って実装使用技術 基本構成T3 StackデータベースSupabaseデプロイvercelデザインFigma実装の紹介以下のコマンドラインを実行して、環境を構築$ pnpm create t3-app@latestSupabaseの接続は環境変数（.env）を以下を設定すればOK ■ .env# Prisma# https://www.prisma.io/docs/reference/database-reference/connection-urls#envDATABASE_URL="postgresql://postgres:*****@db.*****.supabase.co:****/postgres"ログインはDiscordを使用■ .env# Next Auth Discord ProviderDISCORD_CLIENT_ID="************"DISCORD_CLIENT_SECRET="************"上記でログインとデータベースの接続は完了まずはDBの構築から実装■ prisma/schema.prismamodel Url {    id       String     @id @default(cuid())    userId   String?    schedule Schedule[]}model Schedule {    id        String   @id @default(cuid())    urlId     String    date      DateTime    day       Int?    emoji     String?  @db.VarChar(5)    text      String   @db.VarChar(10)    createdAt DateTime @default(now())    updatedAt DateTime @updatedAt    url       Url      @relation(fields: [urlId], references: [id], onDelete: Cascade)    @@index([urlId, date, day])}以下のコマンドでマイグレーションを実行$ npx prisma migrate dev --name init以下のコマンドでローカルで起動$ pnpm devログインについては以下の感じで実装できる■ src/pages/index.tsximport { signIn, signOut, useSession } from "next-auth/react";（略）  // ログインしている場合は sessionDataからログイン情報が取得できる  const { data: sessionData } = useSession();  // signIn()、signOut()を参照することでログイン/ログアウトを実装できるAPIアクセスはAPI Routesを使用 まず、APIの実装は以下の通りに実装■ src/server/api/routers/schedule.tsexport const scheduleRouter = createTRPCRouter({  (略)  fetchInPeriod: publicProcedure    .input(      z.object({        urlId: z.string(),        startDate: z.date(),        endDate: z.date(),      })    )    .query(async ({ ctx, input }) => {      const schedules = await ctx.prisma.schedule.findMany({        where: {          urlId: input.urlId,          date: {            gte: input.startDate,            lte: input.endDate,          },        },        orderBy: {          day: "asc",        },      });      return schedules;    }),上記のAPIをフロントエンドから呼ぶ場合は以下の通りに実装■ src/features/schedules/components/Items.tsx  const schedules = api.schedule.fetchInPeriod.useQuery(    {      urlId: props.urlId,      startDate: props.date.toDate(),      endDate: props.date.endOf("month").toDate(),    }  );tRPCとPrismaを使用して実装しているのでデータ取得については以下のようにコーディングで補完が効くので開発体験は、かなり良い感じに実装できる。上記のような感じでWebアプリのベース部分である認証、APIアクセス、データベースアクセスがサクッと実装できるWebアプリが出来たら以下を参考にvercelにデプロイcreate.t3.ggこれでWebアプリのリリースまで実装完了できるまとめT3 Stack はサーバーサイド、フロントエンドが一括管理できる & 型安全が簡単に担保できて、非常に開発体験が良かった。 サクッとWebアプリを作りたい時は、かなり良い感じの構成だったので、今後も使っていくと思います。

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

Supabaseの紹介

Slackが無料だと90日までしかメッセージを保持しなくなったので、個人開発系の通知系はDiscordに引っ越中discord.comその中で、Discord Botの開発をしてみたのでやり方を紹介今回作ったものPRgithub.com内容Discordに日本語、英語のチャンネルがあり、日本語のチャンネルに投稿すると英語のチャンネルに翻訳したメッセージを投稿するBotを作成言語はGoで作成タイトルにも記載したが、デプロイしたら無料運用は無理そうだったので、一旦ローカルで起動で動作するところまで実装翻訳はGCPのCloud Translationで実装動作は以下みたいな感じ実装Discord Botの作成は以下のサイトの通りに作成www.geeklibrary.jpDiscord Botはdiscordgoを使って実装github.comコードは以下の通りに実装■ main.gopackage mainimport (    "fmt"    "os"    "cloud.google.com/go/translate"    "github.com/bwmarrin/discordgo"    "golang.org/x/net/context"    "golang.org/x/text/language")func main() {    Token := os.Getenv("DISCORD_BOT_TOKEN")    dg, err := discordgo.New("Bot " + Token)    if err != nil {        fmt.Println("Error creating Discord session,", err)        return    }    dg.AddHandler(messageHandler)    err = dg.Open()    if err != nil {        fmt.Println("Error opening connection,", err)        return    }    fmt.Println("Bot is now running. Press CTRL+C to exit.")    select {}}func messageHandler(s *discordgo.Session, m *discordgo.MessageCreate) {    // 自分のメッセージは無視    if m.Author.ID == s.State.User.ID {        return    }    jcid := os.Getenv("JAPANESE_CHANNEL_ID")    ecid := os.Getenv("ENGLISH_CHANNEL_ID")    var l, sl language.Tag    var destinationChannelID string    if m.ChannelID == jcid {        destinationChannelID = ecid        sl = language.Japanese        l = language.English    } else if m.ChannelID == ecid {        destinationChannelID = jcid        sl = language.English        l = language.Japanese    } else {        // 対象チャンネル以外はスルー        fmt.Println("OUT")        return    }    // 翻訳処理    ctx := context.Background()    client, err := translate.NewClient(ctx)    if err != nil {        fmt.Println("Translation error:", err.Error())        return    }    defer client.Close()    resp, err := client.Translate(ctx, []string{m.Content}, l, &translate.Options{        Source: sl,        Format: translate.Text,    })    if err != nil {        fmt.Println("Translation error:", err.Error())        return    }    translatedText := resp[0].Text    // メッセージURLを生成    messageURL := fmt.Sprintf("https://discord.com/channels/%s/%s/%s", m.GuildID, m.ChannelID, m.ID)    message := messageURL + "\n" + "> " + m.Content + "\n" + translatedText    _, err = s.ChannelMessageSend(destinationChannelID, message)    if err != nil {        fmt.Println("Error sending message to Discord:", err.Error())    }}以下の環境変数を設定export DISCORD_BOT_TOKEN=xxxxxx // Discord Botのトークンexport JAPANESE_CHANNEL_ID=xxxxxx // Discordの日本語チャンネルのIDexport ENGLISH_CHANNEL_ID=xxxxxx  // Discordの英語チャンネルのIDexport GOOGLE_APPLICATION_CREDENTIALS=xxxxxx  // GCPのサービスアカウントのパス上記を設定して以下のコマンドで起動で動作する。go run main.go意外と手軽に実装できるなと思い、次にデプロイ先を検討していた。ただ、Discord側にメッセージ投稿された時にWebhookを実行する機能が無いのでDiscord Botはサーバーレスへのデプロイは難しかった。なので、EC2などの順次起動のサービスにデプロイする必要があり、それを考慮すると無料運用は難しいなとなった。無料で運用できる方法があれば、もう少し可能性がありそうだなと思ったので、今後模索していこうとかなと思います。

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

@storybook/react-nativeが v6.5にバージョンアップしたので移行した。結構書き方が変わったので紹介PRgithub.comStorybook v5 → v6で変わった内容Component Story Format (CSF) がサポートされたStorybookのファイルの書きからが以下のように変更。■ 既存import React from 'react';import { storiesOf } from '@storybook/react-native';import { View } from 'react-native';import Text from './';storiesOf('atoms', module).add('Text', () => (  <View>    <Text>default</Text>  </View>));■ 新規import React from 'react';import { View } from 'react-native';import Text from '.';const Story = () => (  <View>    <Text>default</Text>  </View>);export default {  title: 'atoms/Text',  component: Story,};export const Default = {};上記みたいな感じでstoriesOfは使わず、exportすることでstorybookの表示が行える。Storybook v6.5への移行作業以下の記事を参考に移行作業をした。storybook.js.orgまず、.storybookのフォルダを作成して以下のexampleのリポジトリを参考にファイルを配置github.compackage.jsonに以下を追加■ package.json  "scripts": {      ...(略)    "start-server": "react-native-storybook-server",    "storybook-generate": "sb-rn-get-stories",    "storybook-watch": "sb-rn-watcher",    "storybook": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED='true' expo start",    "storybook:ios": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED='true' expo start --ios",    "storybook:android": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED='true' expo start --android",次に既存のstoryファイルを移行。storybookがマイグレーション用のコマンドを用意してくれているので、以下のコマンドを実行で自動的変換できる。$ npx storybook@next migrate storiesof-to-csf --glob="src/**/*.stories.tsx"※上記のコマンドで変換されるのは、CSF1のフォーマットなので注意。現状の最新はCSF3なので、そちらに変換したい場合は、CSF1に変更後に手動で修正する必要がある（CSF1でも動作はするので、今回はこのまま実装）memoirには既存で以下のように、1つのstoryファイルに複数のComponentのstoryを表示しているファイルがあった。以下のようなファイルはコマンドではうまく変換できなかった。■ src/components/organisms/Memoir/stories.tsximport React from 'react';import { storiesOf } from '@storybook/react-native';(略)storiesOf('organisms/Memoir/DateCards', module)  .add('default', () => (    <View style={styles.root}>      <DateCards {...props()} />    </View>  ))  .add('loading', () => (    <View style={styles.root}>      <DateCards {...props()} loading />    </View>  ));storiesOf('organisms/Memoir', module).add('Card', () => (  <Card    {...item()}    user={{      id: 'test',      displayName: 'suzuki',      image: 'https://placehold.jp/150x150.png',    }}  />));storiesOf('organisms/Memoir/ScreenShot', module).add('default', () => (  <View style={styles.root}>    <ScreenShot {...screenShotProps()} />  </View>));CSFは1ファイル、1Componentのフォーマットになっているので、以下のスクリプトを作成して、既存のstories.tsxをrename■ scripts/storybookRename/main.jsconst fs = require('fs');const path = require('path');const dirPath = 'src/components';const traverseDirectory = (dir, callback) => {  fs.readdirSync(dir).forEach((file) => {    const fullPath = path.resolve(dir, file);    if (fs.lstatSync(fullPath).isDirectory()) {      traverseDirectory(fullPath, callback);    } else {      callback(fullPath);    }  });};traverseDirectory(dirPath, (filePath) => {  const dirname = path.dirname(filePath);  const basename = path.basename(filePath);  if (basename === 'stories.tsx') {    const newBasename = `${path.basename(dirname)}.${basename}`;    const newPath = path.resolve(dirname, newBasename);    fs.renameSync(filePath, newPath);    console.log(`Renamed: ${filePath} --> ${newPath}`);  }});上記のスクリプトを実行して、stories.tsx→Text.stories.tsxにrenameしてフォーマットをCSFに合わせていった。CSFの変換完了後は以下のコマンドで実行。まず、以下のコマンドでstorybook-serverを起動。$ yarn start-server次に以下のコマンドでstorybookを起動。$ yarn storybook:iosこれで以下の通りに起動ができた。@storybook/react-nativeはv5で大分更新が止まっていたのでweb版に移行も検討していた。ただ、web版だとNative固有のコードが動かせないので困るなーと思っていたので更新がきてよかったです。

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

作成したChrome拡張でデータをサーバー上から同期させる機能をSupabaseを使って実装してみたので紹介PRgithub.comSupabaseとは？supabase.comSupabaseはFirebaseの代替として注目されているBaas以下のサービスを提供しているAuthenticationDatabaseStorageEdge Functions各サービスがモダンな作りになっているので全体的に痒いところに手が届く作りになっている実装実装は以下のPlasmoとSupabaseの連携のドキュメントがあるので参考に実装docs.plasmo.com今回は、Supabaseでログインすると、データ同期ができるような作りにしたので、まずはAuthenticationから紹介Authentication実装は簡単でコード的には以下のみでOK■ options.tsx  const handleOAuthLogin = async (provider: Provider, scopes = "email") => {    await supabase.auth.signInWithOAuth({      provider,      options: {        scopes,        redirectTo: location.href      }    })  }  略）  // ログイン後は以下から認証情報を取得できる  const { data, error } = await supabase.auth.getSession()Supabaseはかなりのサービスログインをサポートしているのでコンソールから有効にすれば簡単に利用可能。DatabaseSQL実行周りSupabaseのDatabaseはPostgresを提供している。SQLの操作はSupabaseのWebコンソールから実行可能。今回の実装ではサーバーに保存したユーザー自身の情報だけ取得できればOKなので、以下のようなポリシー を設定。■ table作成create table  public.items (    id integer not null default nextval('items_id_seq'::regclass),    uuid uuid not null,    title text not null,    url text not null,    favIconUrl text null,    created timestamp with time zone not null default current_timestamp,    constraint items_pkey primary key (id)  ) tablespace pg_default;■ ポリシーの設定CREATE policy "All own items" ON itemsFOR ALLUSING ( auth.uid() = uuid );上記のように設定することで認証したuuidに対してのみSQLが発行されるようになる。具体的には以下のようなSQLを実行した場合に実際のSQLのWhereにポリシーの設定が反映される■ コード  const { data: items, error } = await supabase.from("items").select()■ 発行されるSQLSELECT *FROM itemsWHERE auth.uid() = items.uuidこんな感じで実行されるので、簡単なSQL実行ならクライアントから直接Databse接続してもセキュリティが担保が簡単にできる設計になっているDatabaseの型安全SupabaseはTypeScriptの型変換をサポートしている。以下のコマンドでコマンドラインでSupabaseにログインnpx supabase login以下にで初期設定npx supabase init npx supabase link --project-ref <プロジェクトのID>以下のコマンドTypeScriptの型情報を生成してくれる。npx supabase gen types typescript --linked > schema.ts以下が実際に作成されたファイル■ schema.tsexport type Json =  | string  | number  | boolean  | null  | { [key: string]: Json }  | Json[]export interface Database {  graphql_public: {    Tables: {      [_ in never]: never    }    Views: {      [_ in never]: never    }    Functions: {      graphql: {        Args: {          operationName?: string          query?: string          variables?: Json          extensions?: Json        }        Returns: Json      }    }    Enums: {      [_ in never]: never    }    CompositeTypes: {      [_ in never]: never    }  }  public: {    Tables: {      countries: {        Row: {          id: number          name: string        }        Insert: {          id?: number          name: string        }        Update: {          id?: number          name?: string        }        Relationships: []      }      items: {        Row: {          created: string          favIconUrl: string | null          id: number          title: string          url: string          uuid: string        }        Insert: {          created?: string          favIconUrl?: string | null          id?: number          title: string          url: string          uuid: string        }        Update: {          created?: string          favIconUrl?: string | null          id?: number          title?: string          url?: string          uuid?: string        }        Relationships: []      }    }    Views: {      [_ in never]: never    }    Functions: {      [_ in never]: never    }    Enums: {      [_ in never]: never    }    CompositeTypes: {      [_ in never]: never    }  }  storage: {    Tables: {      buckets: {        Row: {          allowed_mime_types: string[] | null          avif_autodetection: boolean | null          created_at: string | null          file_size_limit: number | null          id: string          name: string          owner: string | null          public: boolean | null          updated_at: string | null        }        Insert: {          allowed_mime_types?: string[] | null          avif_autodetection?: boolean | null          created_at?: string | null          file_size_limit?: number | null          id: string          name: string          owner?: string | null          public?: boolean | null          updated_at?: string | null        }        Update: {          allowed_mime_types?: string[] | null          avif_autodetection?: boolean | null          created_at?: string | null          file_size_limit?: number | null          id?: string          name?: string          owner?: string | null          public?: boolean | null          updated_at?: string | null        }        Relationships: [          {            foreignKeyName: "buckets_owner_fkey"            columns: ["owner"]            referencedRelation: "users"            referencedColumns: ["id"]          }        ]      }      migrations: {        Row: {          executed_at: string | null          hash: string          id: number          name: string        }        Insert: {          executed_at?: string | null          hash: string          id: number          name: string        }        Update: {          executed_at?: string | null          hash?: string          id?: number          name?: string        }        Relationships: []      }      objects: {        Row: {          bucket_id: string | null          created_at: string | null          id: string          last_accessed_at: string | null          metadata: Json | null          name: string | null          owner: string | null          path_tokens: string[] | null          updated_at: string | null          version: string | null        }        Insert: {          bucket_id?: string | null          created_at?: string | null          id?: string          last_accessed_at?: string | null          metadata?: Json | null          name?: string | null          owner?: string | null          path_tokens?: string[] | null          updated_at?: string | null          version?: string | null        }        Update: {          bucket_id?: string | null          created_at?: string | null          id?: string          last_accessed_at?: string | null          metadata?: Json | null          name?: string | null          owner?: string | null          path_tokens?: string[] | null          updated_at?: string | null          version?: string | null        }        Relationships: [          {            foreignKeyName: "objects_bucketId_fkey"            columns: ["bucket_id"]            referencedRelation: "buckets"            referencedColumns: ["id"]          },          {            foreignKeyName: "objects_owner_fkey"            columns: ["owner"]            referencedRelation: "users"            referencedColumns: ["id"]          }        ]      }    }    Views: {      [_ in never]: never    }    Functions: {      can_insert_object: {        Args: {          bucketid: string          name: string          owner: string          metadata: Json        }        Returns: undefined      }      extension: {        Args: {          name: string        }        Returns: string      }      filename: {        Args: {          name: string        }        Returns: string      }      foldername: {        Args: {          name: string        }        Returns: unknown      }      get_size_by_bucket: {        Args: Record<PropertyKey, never>        Returns: {          size: number          bucket_id: string        }[]      }      search: {        Args: {          prefix: string          bucketname: string          limits?: number          levels?: number          offsets?: number          search?: string          sortcolumn?: string          sortorder?: string        }        Returns: {          name: string          id: string          updated_at: string          created_at: string          last_accessed_at: string          metadata: Json        }[]      }    }    Enums: {      [_ in never]: never    }    CompositeTypes: {      [_ in never]: never    }  }}このファイルを以下のように設定■ core/supabase.tsimport { createClient } from "@supabase/supabase-js";import type { Database } from "../schema";export const supabase = createClient<Database>(  process.env.PLASMO_PUBLIC_SUPABASE_URL,  process.env.PLASMO_PUBLIC_SUPABASE_KEY,);上記を設定することで以下のような補完が効くようになる。まとめ上記の対応でログインからデータ登録/同期までの実装ができたSupabaseは作りもモダンで、かなり良い値段的にはプロジェクト2個までは無料で使えるので、テスト開発に良い感じでしたsupabase.com

 SupabaseのAuthとDatabaseを使ってみた

前の記事で作っていたブラウザ拡張をChrome Web Storeに公開してみたので記事にしてみたwww.wheatandcat.me公開したChrome Web Storechrome.google.comリポジトリgithub.com公開方法 Plasmoで開発している場合は、基本は以下の通りに進めればOK。docs.plasmo.com◆ 必要なものGCPプロジェクトStore公開にOAuthのクライアントIDを取得Chrome Web Store APIを有効にするChrome Web Store Developerの登録初回のみ$5の登録料金がかかる上記を用意すれば、以下のコマンドでpackage化してコンソールからUploadすれば審査を申請することができる。$ plasmo package審査は結果が返ってくるまでの期間は、アプリが要求している権限周りによって異なるが、自分のアプリの場合は4〜5日程度かかりました。公開までの審査で権限周りで1回落とされました。内容的にはアプリ実行に不要な権限の要求を行っていたので以下で修正した。github.compackage.jsonの以下の部分を正しく設定したら審査も通った。■package.json  "manifest": {    "host_permissions": [      "https://*/*"    ],    "permissions": [      "storage",      "tabs",      "contextMenus"    ]  }ちなみに今回は、全部一人で開発していたのでアイコンやロゴ周りは、Wixロゴメーカー で生成したものを採用しました。ja.wix.com一旦、ストア公開しましたが、まだ開発したい機能があるので、その辺も開発が完了したら記事にしようと思います 🙇‍♂️

Chrome Web Storeに公開してみた

最近、話題のtRPCを試してみたので記事にしました。tRPCとは？trpc.ioスキーマやコード生成なしで型安全なAPIの連携が行えるPRCフレームワークTypeScriptに特化しており、非常にシンプルに実装できる比較対象としては、GraphQLやOpenAPIなどの技術に該当するが、tRPCはBFFで使われることが前提にありそうなので単純な比較は出来なさそうそもそもRPCとは？RPC ( Remote Procedure Call ) とは、ネットワークで繋がっている別のコンピュータのプログラムを実行できるようにする技術クライアント側からサーバー側への疎通を行う際に、具体的な通信手段やプロトコルを意識することなく、関数の呼び出しを行うことがでやり取りが行える仕組みGoogleが開発したRPCのプロトコルなので、gRPCという命名になっているtRPCのtはTypeScriptを表して学ぶモチベーションBFF構成で多数のマイクロサービスにアクセスするようなプロダクトの場合、BFF部分はfrontendエンジニアが管理することが多いその場合の選択肢としてtRPCを使うのが有効なのではないかなと考え検証frontend側でAPI周りを型安全にするには、OpenAPIやGraphQLを使うことが多かったが、frontendエンジニアが扱うには難易度が高い & コードジェネレートが必要なパターンが多いtRPCなら、コードジェネレートも不要で、frontendエンジニアでも使い慣れたTypeScriptで書けて便利そうリポジトリ今回で検証したコードは以下で確認できるgithub.comgithub.com実装Quickstarttrpc.io公式のQuickstartを元に簡単なサーバー側の実装をしてみる。import { createHTTPServer } from "@trpc/server/adapters/standalone";import { initTRPC } from "@trpc/server"const t = initTRPC.create();const appRouter = t.router({  helloWorld: t.procedure.query(() => {    return "Hello World";  }),});export type AppRouter = typeof appRouter;const server = createHTTPServer({  router: appRouter,});server.listen(8000);上記をtRPCを呼ぶスクリプトの実装が以下の通りimport { createTRPCProxyClient, httpBatchLink } from "@trpc/client";import type { AppRouter } from "./server";const trpc = createTRPCProxyClient<AppRouter>({  links: [    httpBatchLink({      url: "http://localhost:3000",    }),  ],});trpc.helloWorld.query().then((res) => {  // output "Hello World"  console.log(res);});こんな感じでメソッドを呼ぶだけでAPI通信が行える。以下みたいな感じでコードの補完もされる。ReactでtRPCを呼ぶtrpc.io公式でHooksが提供されているので、こちらを使用して実装。最初にProvider部分を実装。■ containers/Trpc.tsximport { useState } from "react";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";import { httpBatchLink } from "@trpc/client";import { trpc } from "../utils/trpc";type Props = {  children: React.ReactNode;};function Trpc(props: Props) {  const [queryClient] = useState(() => new QueryClient());  const [trpcClient] = useState(() =>    trpc.createClient({      links: [        httpBatchLink({          url: "http://localhost:8080",        }),      ],    })  );  return (    <trpc.Provider client={trpcClient} queryClient={queryClient}>      <QueryClientProvider client={queryClient}>        {props.children}      </QueryClientProvider>    </trpc.Provider>  );}export default Trpc;上記のProviderを作成すれば、以下のコードのようにメソッドを呼んでReactでも簡単にAPIの通信が実行できる。■ Page.tsximport { trpc } from "./utils/trpc";export default function IndexPage() {  const userQuery = trpc.helloWorld.useQuery();  return <div>{userQuery.data}</div>;}React + tRPC + Prismaでデモを実装github.com上記のリポジトリで実装簡単にコードの説明をすると以下のような感じPrismaでDBの定義を行うserver/prisma/schema.prismatRPCとPrismaの連携server/src/router.tsReactとの連携client/src/Page.tsxBFFとは、少し話がズレましたが開発の体験が結構良かったDeno + tRPCを試すgithub.com上記のリポジトリで実装モチベーションTypeScriptをデプロイするのが面倒だったので、Denoで行けたら1つで全て済むと思い検証結果tRPCの実装はできるけど、Denoで実装したファイルをimportできるのはDenoのみなので、結果フロントエンドもDenoで実装する必要があるこうなってくると旨味が薄れるので、まだ実用段階では無さそうという結果になったまとめコードジェネートして型安全をする方法に慣れきっていたが、tRPCはコードジェネートしなくても型安全が実現できるので手軽TypeScript周りのツールも大分充実してきて書きやすいので、tRPCを使っていくのも全然有りBFFでの使用は、かなり有り。手軽にtRPCを試したい場合は、以下のT3 Appを使用するのが良いと思うので、興味のある方は試してみたら良いと思いますcreate.t3.gg

tRPCを試してみた

tRPCの紹介

最近、社内で記事の共有などをする機会が増え、ブラウザのブックマークやGoogle Keepを使用していたが、仕事とプライベートで使用しているブラウザ、Googleアカウントなどが違ったりして、どこに保存したか分からなくなることが多かったので、自作でchrome拡張を作成して運用してみることにした。まだ作成途中だが、結構簡単に作れたので記事にしてみた。リポジトリ github.com作成したものURLを保存できるURLの追加/削除が簡単にできる簡単にURLをMarkdown形式でコピーできる右クリックで追加/削除できる使用技術Plasmoを使用して開発docs.plasmo.comブラウザ拡張機能を作成するためのReactフレームワークTypeScript & Reactで簡単にChrome拡張が作成できる従来のChrome拡張で必要だった設定周りフレームワーク側で抽象化されているコードの例以下のコマンドでプロジェクトを作成$ pnpm create plasmoプロジェクトの作成時は以下のようなコードが生成されるimport { useState } from "react"function IndexPopup() {  const [data, setData] = useState("")  return (    <div>      <h2>        Welcome to your{" "}        <a href="https://www.plasmo.com" target="_blank">          Plasmo        </a>{" "}        Extension!      </h2>      <input onChange={(e) => setData(e.target.value)} value={data} />      <a href="https://docs.plasmo.com" target="_blank">        View Docs      </a>    </div>  )}export default IndexPopup上記のコードで、こんな感じのchrome拡張を作成できる実装Plasmoを作ってブラウザ拡張を作っていく。まず、UIはさくっと作るためにTailwind CSSを利用。PlasmoでTailwind CSSを使用するには以下で参考に実装。docs.plasmo.comPlasmoで現在ブラウザで開いているURLの取得は以下のコードで取得できる。■ popup.tsx  const [currentPage, setCurrentPage] = useState<Data>({    title: "",    url: "",    favIconUrl: ""  })  useEffect(() => {    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {      const activeTab = tabs[0]      if (!activeTab) return      setCurrentPage({        title: activeTab.title,        url: activeTab.url,        favIconUrl: activeTab.favIconUrl      })  }, [items, removeButton])ここで取得した値をPlasmoのStorage APIを使って保存できる。コードは、以下の通り。■ popup.tsximport { useStorage } from "@plasmohq/storage/hook"(...略)  const [items, setItems] = useStorage<Data[]>("saveItems", [])これで以下の通りUIを整えれば、まずは最小限な実装で以下みたいにブラウザ拡張が作れます。www.youtube.com次に右クリックのContextMenuに追加するには、Background Service Workerを利用。docs.plasmo.comコードは以下のように追加。■background.tschrome.runtime.onInstalled.addListener(() => {  chrome.contextMenus.create({    id: "save",    title: "ページを追加/削除",    contexts: ["all"],  });});ContextMenuをクリックした時の動作追加のコードはは以下の通り■background.tschrome.contextMenus.onClicked.addListener(async (info) => {  if (info.menuItemId === "save") {    const activeTab = await storage.get<Data>("activeTab");    if (!activeTab) return;    const items = (await storage.get<Data[]>("saveItems")) ?? [];    const isCurrentPageURL = items.some((v) => v.url === activeTab.url);    if (isCurrentPageURL) {      const newItems = items.filter((v) => v.url !== activeTab.url);      await storage.set("saveItems", newItems);    } else {      items.push(activeTab);      await storage.set("saveItems", items);    }    chrome.runtime.sendMessage({      type: "UPDATE",    });  }});後は、backgroundで現在の開いているURLを取得するのは以下のコードで実装可能■background.tsfunction getActiveTabInfo() {  const queryInfo = {    active: true,    currentWindow: true,  };  chrome.tabs.query(queryInfo, (tabs) => {    const activeTab = tabs[0];    console.log("Active Tab URL:", activeTab.url);    if (!activeTab) return;    storage.set("activeTab", activeTab);  });}// アクティブタブが変更されたときのイベントリスナーchrome.tabs.onActivated.addListener((activeInfo) => {  getActiveTabInfo();});// タブが更新されたときのイベントリスナーchrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {  // タブが完全に読み込まれたときに情報を取得  if (changeInfo.status === "complete") {    getActiveTabInfo();  }});// 初回起動時にもタブ情報を取得getActiveTabInfo();ここまで実装すると以下の動画みたいに右クリックからURLの保存が実装できる。www.youtube.com

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

Plasmoの紹介

Expo SDK 48にアップデートをしたらReactのバージョンが最新になり、Enzymeがサポートされなくなったので、すべてのテストケースをtesting-library/react-nativeに置き換えたPRgithub.com実装今までEnzymeのshallowを使用して、テスト対象となるcomponentのスナップショットのみを行っていた。■ Enzymeでのテストコード src/components/pages/Home/tests/index.test.tsximport React from 'react';import { shallow, ShallowWrapper } from 'enzyme';import { Home, Props } from '../';const propsHomeData = (): Props =>  ({    navigation: {      setParams: jest.fn(),      navigate: jest.fn(),    },    route: {      params: {},    },  } as any);describe('components/pages/Home/index.tsx', () => {  let wrapper: ShallowWrapper;  describe('Home', () => {    beforeEach(() => {      wrapper = shallow(<Home {...propsHomeData()} />);    });    it('正常にrenderすること', () => {      expect(wrapper).toMatchSnapshot();    });  });});shallowを使用すると直下のテストで参照する直下のコンポーネント以外は自動でMockされるので深く考えずにコンポーネントだけimportしたテストコードを書けばOKだった。この辺はEnzymeの楽なところではあったが、実際の運用的にはテストというよりは修正による影響検知に近い使い方をしていた。ただ、上記にも記載した通り、Reactの最新バージョンをEnzymeがサポートしなくなったので、testing-library/react-nativeに置き換えた。testing-library.com書き換えた結果は以下の通り。■ react-native-testing-libraryでのテストコード src/components/pages/Home/tests/index.test.tsximport React from 'react';import * as Recoil from 'recoil';import { items } from '__mockData__/item';import * as useHomeItems from 'hooks/useHomeItems';import * as client from '@apollo/client';import { testRenderer } from 'lib/testUtil';import { screen } from '@testing-library/react-native';import { Home, Props } from '../';const propsHomeData = (): Props =>  ({    navigation: {      setParams: jest.fn(),      navigate: jest.fn(),      setOptions: jest.fn(),      addListener: jest.fn(),    },    route: {      params: {},    },  } as any);describe('components/pages/Home/index.tsx', () => {  beforeEach(() => {    jest.spyOn(Recoil, 'useRecoilValue').mockImplementation((): any => ({      items: items(),    }));    jest.spyOn(Recoil, 'useRecoilState').mockImplementation((): any => [      {        date: '2020-01-01',      },      jest.fn(),    ]);    jest.spyOn(useHomeItems, 'default').mockImplementation((): any => ({      loading: false,      error: null,      refetch: jest.fn(),    }));    jest      .spyOn(client, 'useQuery')      .mockImplementation((): any => [jest.fn(), { loading: false }]);    jest.spyOn(client, 'useMutation').mockImplementation((): any => [      jest.fn(),      {        loading: false,      },    ]);  });  describe('Home', () => {    it('正常にrenderすること', () => {      testRenderer(<Home {...propsHomeData()} />)();      expect(screen.findAllByText('今週のmemoirを確認する')).toBeTruthy();    });  });});react-native-testing-libraryを使用すると基本mockしないので実際に動かす時と同様の状態でテストさせる感じになるのでテストコードは長めになる。mswとgraphql-codegen-typescript-mock-dataを使用して実装。www.wheatandcat.meAPIのモック部分は以下のようなコードで実装。■src/mocks/handler.tsimport { graphql } from 'msw';import {  ItemDocument,  UpdateItemDocument,  DeleteItemDocument,  ItemsByDateDocument,  ItemsInPeriodDocument,  RelationshipsDocument,  InviteDocument,  InviteByCodeDocument,  UpdateInviteDocument,  CreateInviteDocument,  CreateRelationshipRequestDocument,  DeleteUserDocument,  RelationshipRequestsDocument,  AcceptRelationshipRequestDocument,  NgRelationshipRequestDocument,  UpdateUserDocument,} from 'queries/api/index';import {  aPageInfo,  anItem,  anItemsInPeriodEdge,  aRelationshipEdge,  anInvite,  aUser,  aRelationshipRequest,  aRelationshipRequestEdge,} from 'queries/api/mocks';export const handlers = [  graphql.query(ItemDocument, (req, res, ctx) => {    return res(      ctx.data({        item: {          ...anItem(),          id: req.variables.id,        },      })    );  }),  graphql.mutation(UpdateItemDocument, (req, res, ctx) => {    return res(      ctx.data({        updateItem: {          id: req.variables.input.id,          date: req.variables.input.date,        },      })    );  }),  graphql.mutation(DeleteItemDocument, (req, res, ctx) => {    return res(      ctx.data({        deleteItem: {          id: req.variables.input.id,        },      })    );  }),  graphql.query(ItemsByDateDocument, (_, res, ctx) => {    return res(      ctx.data({        itemsByDate: [{ ...anItem(), categoryID: 1 }],      })    );  }),  graphql.query(ItemsInPeriodDocument, (_, res, ctx) => {    return res(      ctx.data({        itemsInPeriod: {          pageInfo: aPageInfo(),          edges: [anItemsInPeriodEdge()],        },      })    );  }),  graphql.query(RelationshipsDocument, (_, res, ctx) => {    return res(      ctx.data({        relationships: {          pageInfo: aPageInfo(),          edges: [aRelationshipEdge()],        },      })    );  }),  graphql.query(InviteDocument, (_, res, ctx) => {    return res(      ctx.data({        invite: anInvite(),      })    );  }),  graphql.query(InviteByCodeDocument, (_, res, ctx) => {    return res(      ctx.data({        inviteByCode: aUser(),      })    );  }),  graphql.mutation(UpdateInviteDocument, (_, res, ctx) => {    return res(      ctx.data({        updateInvite: anInvite(),      })    );  }),  graphql.mutation(CreateInviteDocument, (_, res, ctx) => {    return res(      ctx.data({        createInvite: anInvite(),      })    );  }),  graphql.mutation(CreateRelationshipRequestDocument, (_, res, ctx) => {    return res(      ctx.data({        createRelationshipRequest: aRelationshipRequest(),      })    );  }),  graphql.mutation(DeleteUserDocument, (_, res, ctx) => {    return res(      ctx.data({        deleteUser: aUser(),      })    );  }),  graphql.query(RelationshipRequestsDocument, (_, res, ctx) => {    return res(      ctx.data({        relationshipRequests: {          pageInfo: aPageInfo(),          edges: [aRelationshipRequestEdge()],        },      })    );  }),  graphql.mutation(AcceptRelationshipRequestDocument, (_, res, ctx) => {    return res(      ctx.data({        acceptRelationshipRequest: aRelationshipRequest(),      })    );  }),  graphql.mutation(NgRelationshipRequestDocument, (_, res, ctx) => {    return res(      ctx.data({        ngRelationshipRequest: aRelationshipRequest(),      })    );  }),  graphql.mutation(UpdateUserDocument, (_, res, ctx) => {    return res(      ctx.data({        updateUser: aUser(),      })    );  }),];上記の方法でほとんどのコンポーネントは置き換えが成功。一部のコンポーネントで以下のようなエラーが発生した。  console.error    Warning: An update to Connected inside a test was not wrapped in act(...).    When testing, code that causes React state updates should be wrapped into act(...):    act(() => {      /* fire events that update state */    });    /* assert on the output */    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-actこちらのエラーはテスト実行中にstate or propsが更新されて再レンダリングがかかっている場合に発生していた。移行したコード内だと以下のようなコードがある場合に発生。src/components/pages/Search/Plain.tsximport React, { memo } from 'react';import Loading from 'components/atoms/Loading';import TemplateSearch from 'components/templates/Search/Page';import { ConnectedType } from './Connected';type Props = ConnectedType & {  loading: boolean;};const Plain: React.FC<Props> = (props) => {  if (props.loading) return <Loading />;  return <TemplateSearch users={props.users} onSearch={props.onSearch} />;};export default memo(Plain);props.loading=true（APIのレスポンス待ちの状態）の場合はローディング画面を表示させて、falseになると画面が表示させるようなコードがある場合は、実際にテストしたいのはローディング後のコンポーネントなので、props.loading=falseになるのを待ってからテストする必要がある。なので、以下のようなテストコードにすればOK。■src/components/pages/Search/tests/index.test.tsximport React from 'react';import * as Recoil from 'recoil';import { testRenderer } from 'lib/testUtil';import {  screen,  waitFor,  waitForElementToBeRemoved,} from '@testing-library/react-native';import { user } from '__mockData__/user';import IndexPage, { Props } from '../';const propsData = (): Props =>  ({    navigation: {      setParams: jest.fn(),      navigate: jest.fn(),    },    route: {      params: {},    },  });describe('components/pages/Search/index.tsx', () => {  beforeEach(() => {    jest.spyOn(Recoil, 'useRecoilValue').mockImplementation((): any => ({      ...user(),    }));  });  it('正常にrenderすること', async () => {    testRenderer(<IndexPage {...propsData()} />)();    await waitForElementToBeRemoved(() => screen.getByTestId('atoms_loading'));    await waitFor(async () => {      expect(screen.findByText('検索')).toBeTruthy();    });  });});以下のコードの部分でローディング画面の表示が消えるのを待って、テストを実行すれば、このエラーは回避できる。    await waitForElementToBeRemoved(() => screen.getByTestId('atoms_loading'));こんな感じで諸々テストコードを置き換えて、無事Expo Sdk 48のバージョンアップが行えた。

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

TodoアプリにPlayWrightを導入してみたので紹介PRgithub.comgithub.comPlayWrightとは？playwright.dev最新のE2Eテストフレームワークコードジェネレータが使えて便利モチベーション以前、記事で紹介した開発中のTODOアプリでmarkdown-to-jsxを使用しているがユニットテストで動かそうとすると正常に動作しない。実装テスト実装は以下のコードジェネレータの機能を使用してベースを作成。playwright.dev実行は以下のコマンドで実行$ yarn playwright codegen  http://127.0.0.1:142以下みたいに画面が立ち上がり、操作すると自動でテストコードが生成されて簡単にE2Eのテストケースを作成できる。www.youtube.com今回作成したいテストケースだと入力した値をlocalStorageに保存しているので、それが正しく保存されているのかテストしたかったので、evaluateの機能を使用。playwright.devevaluateの機能を使用することでE2Eを実行している側のブラウザの情報も取得できるので、ここからlocalStorageを取得して想定通りかチェックしている。最終的なテストコードは以下のようになった。■e2e/todo.spec.tsimport { test, expect } from "@playwright/test";// @ts-ignoreimport { mockDate } from "./mockdate.ts";import dayjs from "dayjs";test.beforeEach(async ({ page }) => {  await page.goto("/");});test("初期画面の確認", async ({ page }) => {  await expect(page).toHaveTitle(/todo/);});test.describe("Markdownの入力テスト", () => {  test("プレビューにチェックでMarkdownにチェックが付く", async ({ page }) => {    await page.getByText("編集").click();    await page.locator("data-testid=input-markdown").click();    await page      .locator("data-testid=input-markdown")      .fill("- [ ] Task1\n- [ ] Task2");    await page.getByText("プレビュー").click();    await page.locator("data-testid=checkbox-Task1").click();    expect(      await page.locator("data-testid=checkbox-Task1").isChecked()    ).toBeTruthy();    await page.getByText("編集").click();    expect(      await page.locator("data-testid=input-markdown").inputValue()    ).toMatch("- [x] Task1\n- [ ] Task2");  });});test.describe("Markdownの入力した時に、保存されるデータのチェック", () => {  test("編集してチェックした時のデータが保存されている", async ({ page }) => {    await mockDate(page, "2023-01-01T00:00:00+09:00");    await page.getByText("編集").click();    await page.locator("data-testid=input-markdown").click();    await page      .locator("data-testid=input-markdown")      .fill("- [ ] Task1\n- [ ] Task2\n- [ ] Task3");    await page.getByText("プレビュー").click();    await page.locator("data-testid=checkbox-Task1").click();    const taskListValue = await page.evaluate(() => {      return localStorage.getItem("taskList");    });    const r = JSON.parse(taskListValue ?? "").map((task: any) => ({      ...task,      checkedAt: task.checkedAt        ? dayjs(task.checkedAt).format("YYYY-MM-DDTHH:mm:ss")        : null,    }));    expect(r).toMatchObject([      {        checked: true,        checkedAt: "2023-01-01T00:00:00",        depth: 3,        text: "Task1",      },      {        checked: false,        checkedAt: null,        depth: 3,        text: "Task2",      },      {        checked: false,        checkedAt: null,        depth: 3,        text: "Task3",      },    ]);  });});これでE2Eテストは完成。継続的にチェックしたいのでGitHub Actionsでも実行するように設定。■.github/workflows/playwright.ymlname: Playwright Testson:  push:    branches:      - "*"    tags-ignore:      - "v*"jobs:  test:    timeout-minutes: 60    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v3      - uses: actions/setup-node@v3        with:          node-version: 16.x          cache: yarn      - name: Cache node_modules        uses: actions/cache@v3        with:          path: ~/.cache/yarn          key: ${{ runner.os }}-todo-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}          restore-keys: ${{ runner.os }}-todo-      - name: Install node_modules        if: steps.cache.outputs.cache-hit != 'true'        run: yarn install      - name: Install Playwright Browsers        run: yarn playwright install --with-deps      - name: Run Playwright tests        run: TZ=Asia/Tokyo yarn e2e:all      - uses: actions/upload-artifact@v3        if: always()        with:          name: playwright-report          path: playwright-report/          retention-days: 30手軽に使えて良いフレームワークだったので、今後も使っていくと思った。

PlayWrightを試してみた

Playwrightの紹介

一ヶ月前に右腕が腱鞘炎になってしまい、最近やっとある程度は仕事ができる状態になりました。腱鞘炎前の状態の紹介PCiMacキーボードapple magic keyboard 2マウスMXV1s MX Verticalwww.logicool.co.jp腱鞘炎になっての上記のデバイスでの問題Magic Keyboardはストロークが浅いので腱鞘炎だと辛いエレゴノミクス系のマウスは腱鞘炎になると手首が痛く感じるマウス自体も重めなので手首に負担がかかるダブルクリックが辛いエレゴノミクス系のマウスは左手で使用できないパームレストやエレゴノミクス系のマウスを使っていても腱鞘炎になる可能性はあるのだなと実感以下、試してみたリスト作業PCをMacBook Airに変更www.apple.com腱鞘炎になって一週間はマウスカーソルの移動が辛いので、画面がデカイと、それだけカーソルの移動距離が増えて負担が大きくなる。Stream Deck Pedalwww.elgato.comフットペダルデバイス、専用アプリで3ボタンのアクションを設定できる。Mission Controlをペダルに設定して操作している。カーソルセンスplentycom.jpTrackPadのカーソルの移動速度を変更できるアプリ。（ターミナルからコマンドで変更できるが、このアプリを使用するとデフォルトで設定できる速度を超えて設定できる）テキスト音声入力support.apple.comキーボードで文字を打つのも辛かったので、Macのテキスト音声入力を使用。サポーター装着www.amazon.co.jpwww.amazon.co.jp親指を固定するタイプと、手首のみ固定するタイプの2タイプを使用。REALFORCE for Macwww.realforce.co.jpある程度、 右腕が使えるようになったタイミングで購入。Magic Trackpadwww.apple.comある程度、 右腕が使えるようになってメインをMacBook Air→iMacに戻すタイミングで購入。Trackpad用リストレストwww.kensington.comMagic Trackpadを使ってみて、通常のパームレストと組み合わせると高さが合わなず、腕の負担を感じたので購入。Stream Deck mk2www.elgato.com左手デバイスとして購入。ポモドーロの実施Be Focused - 仕事および勉強用の TimerDenys Ievenko仕事効率化無料apps.apple.com腱鞘炎を完全に抑えるのには時間がかかるので、以下のルールを設けて作業するようにした。ポモドーロアプリに上記を設定して運用している。Stream Deck mk2にポモドーロ開始のショートカットを設定して、作業開始したら必ずタイマー開始ボタンを押すようにしている。定期的な指のストレッチwww.smile-39.com診察で定期的な指のストレッチが有効ということだったので、上記のサイトに記載のストレッチを実施。Stream Deck mk2にタイマー機能があるので、そちらで時間を測りながら実施。カーソルブラウジング + テキストの範囲指定のショートカットを使用support.google.com腱鞘炎になるとドラックなどの動作がやりずらく、コードやテキストのコピペがやり辛くなる。shift + ↑ or ↓で範囲指定ができる。ErgoDox EZergodox-ez.comお試しでセパレート式メカニカルキーボードも購入。Kensington ExpertMousewww.kensington.comトラックボールマウス。左手用マウスwww.elecom.co.jp右手が使えないのならと思い、左手用のマウスとしてM-XT4DRBKを購入。⌘ + c or z or aなど）、若干プログラミングはやりづらい。Tobii Eye Tracker 5 + Talongaming.tobii.comtalonvoice.comTobii Eye Tracker 5はWindow用の視線トラッカーデバイスだが、Talonを使用すればMacでも使用可能。  視線トラッキングでカーソル移動をONにする、ONの状態で言うとOFFになる - Touch => クリック - Focus ○○ => ○○のアプリを起動する※デュアルディスプレイには対応していないので注意最終的な作業環境PCiMacキーボードREALFORCE for Macカーソル操作メイン =>  Magic Trackpadサブ（右腕が疲れた時用）=> 左手用マウスサブのサブ（両腕が疲れた時用） => Tobii Eye Tracker 5パームレストTrackpad用リストレスト + ErgoDox EZのパームレストを組み合わせてキーボードとTrackpadの両方に対応その他デバイスStream Deck mk2Stream Deck Pedalアプリカーソルセンス運用ポモドーロで50分作業→10分休憩で作業（10分休憩中に指のストレッチを実施）その他作業中はサポーターを装着これで作業を実施しています。腕の痛みを感じたら基本作業は中止にしていますが、現状はこれで悪化させずに仕事ができています。

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

右手が腱鞘炎になったエンジニアを支える技術

Vitestの紹介

新しいプロジェクトでVitestを導入してみたので紹介PRgithub.com紹介vitest.devVitestはVite環境で動作する高速なテストフレームワーク領域的にはJestと同じ最新のテストフレームワークなので、細かいカスタマイズがされている実装以下のコマンドで追加$ yarn add -D vitestconfigは以下のように記載。■ vitest.config.ts/// <reference types="vitest" />import { defineConfig } from "vitest/config";// https://vitejs.dev/config/export default defineConfig({  test: {    globals: true,    environment: "happy-dom",    setupFiles: ["./setupTests.ts"],    dir: "src",    css: true,  },});テストコードの書き方は、ほぼJestと同じで、以下のように書ける。■ src/components/organisms/History.test.tsximport { describe, expect, test } from "vitest";import { render, screen } from "@testing-library/react";import History from "./History";describe("src/components/organisms/History.tsx", () => {  test("履歴を表示", () => {    const props = {      items: [        {          depth: 1,          text: "Task 1",          checked: false,          checkedAt: null,        },      ],    };    render(<History {...props} />);    expect(screen.getByText(/Task 1/i)).toBeTruthy();  });});mockもJestと同様に使用できる。vitest.dev好みは別れるが、Rustみたいにコード上にテストコードを書くこともできる。// the implementationexport function add(...args: number[]) {  return args.reduce((a, b) => a + b, 0)}// in-source test suitesif (import.meta.vitest) {  const { it, expect } = import.meta.vitest  it('add', () => {    expect(add()).toBe(0)    expect(add(1)).toBe(1)    expect(add(1, 2, 3)).toBe(6)  })}vitest.devテスト実行はデフォルトでwatchモードが起動されるので、起動して修正したらホットリロードされる。以下のコマンドで実行でUIモードが起動。$ vitest --ui以下の画像みたいにブラウザ上でテスト実行やレポートの確認ができる。以下のようにすれば、テストコードでデバッガも使用できる。vitest.devと、いろいろ機能が揃っていてJestの標準の機能はほぼサポートしていつみたいなので、新しいプロジェクトではVitestを使用して行っても良いかも。

Vitestを導入してみた

Next.jsで作成してLPサイトにSSRをサポートしていないComponentパッケージを導入しようとしたところ、意外とハマったので記事にした。PRgithub.com実装お試しでmemoir用のKo-fiのページを作ってみたのでNext.jsで作成したLPサイトにリンクを追加する開発を行った。ko-fi.comリンクの追加は以下のパッケージを使用。github.comまず、ドキュメントの通りに以下のように実装したら、Global CSS cannot be imported from within node_modules.のエラーが発生した。調べたところ、以下の記事を発見。zenn.devNext.jsでnode_module内でcssをimportしている場合は、以下のnext-remove-importsを使用して除外する必要がある。github.com以下の通りに追加。■ next.config.js/** @type {import('next').NextConfig} */const path = require("path");const removeImports = require("next-remove-imports")();module.exports = removeImports({    webpack(config) {        config.resolve.alias["@components"] = path.join(__dirname, "components");        config.resolve.alias["@hooks"] = path.join(__dirname, "hooks");        config.resolve.alias["@lib"] = path.join(__dirname, "lib");        return config;    },    reactStrictMode: true,});さらに、cssが除外されるので、pages/_app.tsxにimportを追加。■ pages/_app.tsximport "react-kofi-button/dist/KofiButton/style.scss";これで起動して動くのかなと思ったが、今度はSyntaxError: Invalid or unexpected token; This error happened while generating the page. Any console logs will be displayed in the terminal window.のエラーが出力された。こちらの件も調べたら、以下の記事が見つかった。blog.kimizuka.orgSSRで使用できない処理を使用すると発生するエラーだったので、記事を参考に以下の用に修正。■ components/organisms/Header/Header.tsximport dynamic from "next/dynamic";(略)const KofiButton = dynamic(() => import("react-kofi-button/dist/KofiButton"), {    ssr: false,});（略）     <KofiButton username="memoir22983" label="支援する" preset="thin" backgroundColor="#F680B2" />これで実行したらエラーもなくなり以下のように表示できるようになった。www.memoir-app.dev

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

元々、1つの処理内でfirestoreに複数件の書き込みをしている箇所は、バッチ書き込みで同時に書き込み処理を実行していた。firebase.google.comGoのFirestore SDKのv1.9.0から、バッチ書き込みでclient.Batchを使用するのは非推奨になった。pkg.go.devそこで以下のPRでclient.Batch→client.BulkWriterへ移行してみた。github.comただ、移行した後に気づいたが、BulkWriterは大量のドキュメントを処理するための機能で用途に合わなくなっていたので、最終的にバッチ書き込み→トランザクション更新に移行に変更。処理が諸々変わる関係で、安全に移行するために対象箇所のe2eテストを追加してから移行してみた。PRgithub.comgithub.com実装既存でバッチ書き込み処理を使用している箇所を検索して影響範囲を確認。VSCodeで調べた感じ使用箇所は以下の6箇所。以下のPRで上記の6箇所を通るe2eのテストケースを追加github.com使用している箇所は以下のシナリオテストでカバーできることが分かったので追加。招待から共有メンバーの認証→共有メンバーの解除までアカウント削除共有メンバーは各ユーザー同士で招待→認証の操作を行う必要があるので2ユーザー必要。またアカウント削除も専用のアカウントが必要だったので、スクリプトでe2eテスト用のユーザーを3つ作成するように修正。■ e2e/script/main.gopackage mainimport (    "bytes"    "context"    "encoding/json"    "fmt"    "io"    "log"    "net/http"    "os"    firebase "firebase.google.com/go"    "firebase.google.com/go/auth"    "github.com/joho/godotenv"    "google.golang.org/api/option"    "gopkg.in/yaml.v2")const verifyCustomTokenURL = "https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyCustomToken?key=%s"type User struct {    UserToken1 string `yaml:"userToken1"`    UserToken2 string `yaml:"userToken2"`    UserToken3 string `yaml:"userToken3"`}type LoginYaml struct {    Vars User}func main() {    err := godotenv.Load(".env")    if err != nil {        log.Fatalf("読み込み出来ませんでした: %v", err)    }    ctx := context.Background()    opt := option.WithCredentialsFile("../serviceAccount.json")    config := &firebase.Config{ProjectID: os.Getenv("FIREBASE_PROJECT_ID")}    app, err := firebase.NewApp(ctx, config, opt)    if err != nil {        log.Fatalf("error initializing app: %v\n", err)    }    client, err := app.Auth(ctx)    if err != nil {        log.Fatalf("error getting Auth client: %v\n", err)    }    idToken1, err := makeUser(client, ctx, "uid1")    if err != nil {        log.Fatalf("error minting custom token: %v\n", err)    }    idToken2, err := makeUser(client, ctx, "uid2")    if err != nil {        log.Fatalf("error minting custom token: %v\n", err)    }    idToken3, err := makeUser(client, ctx, "e2e-delete-user")    if err != nil {        log.Fatalf("error minting custom token: %v\n", err)    }    ly := LoginYaml{}    ly.Vars.UserToken1 = idToken1    ly.Vars.UserToken2 = idToken2    ly.Vars.UserToken3 = idToken3    if err := WriteOnFile("./login.yaml", ly); err != nil {        log.Fatalf("WriteOnFile: %v\n", err)    }    if err = os.Chmod("./login.yaml", 0600); err != nil {        log.Fatalf("OSコマンドで失敗: %v", err)    }}func makeUser(client *auth.Client, ctx context.Context, uid string) (string, error) {    token, err := client.CustomToken(ctx, uid)    if err != nil {        return "", err    }    req, err := json.Marshal(map[string]interface{}{        "token":             token,        "returnSecureToken": true,    })    if err != nil {        return "", err    }    apiKey := os.Getenv("FIREBASE_API_KEY")    resp, err := postRequest(fmt.Sprintf(verifyCustomTokenURL, apiKey), req)    if err != nil {        return "", err    }    var respBody struct {        IDToken string `json:"idToken"`    }    if err := json.Unmarshal(resp, &respBody); err != nil {        return "", err    }    return respBody.IDToken, nil}func postRequest(url string, req []byte) ([]byte, error) {    resp, err := http.Post(url, "application/json", bytes.NewBuffer(req)) //nolint:gosec    if err != nil {        return nil, err    }    defer func() {        if err := resp.Body.Close(); err != nil {            log.Fatal(err)        }    }()    if resp.StatusCode != http.StatusOK {        return nil, fmt.Errorf("unexpected http status code: %d", resp.StatusCode)    }    return io.ReadAll(resp.Body)}func WriteOnFile(fileName string, data interface{}) error {    // ここでデータを []byte に変換しています。    buf, err := yaml.Marshal(data)    if err != nil {        return err    }    // []byte をファイルに上書きしています。    err = os.WriteFile(fileName, buf, os.ModeExclusive)    if err != nil {        return err    }    return nil}e2eテストは、以前記事で紹介したscenarigoを使用。www.wheatandcat.me以下のテストケースを追加。■ e2e/invite.yamltitle: 招待steps:  - title: login    include: "./login.yaml"    bind:      vars:        userToken1: "{{vars.userToken1}}"        userToken2: "{{vars.userToken2}}"  - title: 招待コード作成    bind:      vars:        inviteCode: "{{response.data.createInvite.code}}"    protocol: http    request:      method: POST      url: "http://{{env.HOST}}/query"      header:        Authorization: "Bearer {{vars.userToken1}}"        Content-Type: application/json      body:        query: |-          mutation CreateInvite {            createInvite {              code            }          }    expect:      code: 200  - title: 招待をリクエスト    bind:      vars:        followerId: "{{response.data.createRelationshipRequest.followerId}}"        followedId: "{{response.data.createRelationshipRequest.followedId}}"    protocol: http    request:      method: POST      url: "http://{{env.HOST}}/query"      header:        Authorization: "Bearer {{vars.userToken2}}"        Content-Type: application/json      body:        query: |-          mutation CreateRelationshipRequest($input: NewRelationshipRequest!) {            createRelationshipRequest(input: $input) {              id              followerId              followedId              status              createdAt              updatedAt              user {                id                displayName              }            }          }        variables:          input:            code: "{{vars.inviteCode}}"  - title: 招待をリクエスト一覧を取得    protocol: http    request:      method: POST      url: "http://{{env.HOST}}/query"      header:        Authorization: "Bearer {{vars.userToken1}}"        Content-Type: application/json      body:        query: |-          query RelationshipRequests($input: InputRelationshipRequests!, $skip: Boolean) {            relationshipRequests(input: $input) {              edges {                node {                  id                  followerId                  followedId                  user(skip: $skip) {                    id                    displayName                    image                  }                }              }            }          }        variables:          input:            after: ""            first: 1          skip: true    expect:      code: 200      body:        data:          relationshipRequests:            edges:              - node:                  followerId: "test_id2"                  followedId: "test_id1"  - title: 招待リクエストを承諾    protocol: http    request:      method: POST      url: "http://{{env.HOST}}/query"      header:        Authorization: "Bearer {{vars.userToken1}}"        Content-Type: application/json      body:        query: |-          mutation AcceptRelationshipRequest($followedID: String!) {            acceptRelationshipRequest(followedID: $followedID) {              id              followerId              followedId            }          }        variables:          followedID: "{{vars.followerId}}"    expect:      code: 200  - title: 共有ユーザーを取得①    protocol: http    request:      method: POST      url: "http://{{env.HOST}}/query"      header:        Authorization: "Bearer {{vars.userToken2}}"        Content-Type: application/json      body:        query: |-          query Relationships($input: InputRelationships!, $skip: Boolean) {            relationships(input: $input) {              edges {                node {                  id                  followerId                  followedId                  user(skip: $skip) {                    id                    displayName                    image                  }                }              }            }          }        variables:          input:            after: ""            first: 1          skip: true    expect:      body:        data:          relationships:            edges:              - node:                  followerId: "test_id1"                  followedId: "test_id2"  - title: 共有ユーザーを取得②    protocol: http    request:      method: POST      url: "http://{{env.HOST}}/query"      header:        Authorization: "Bearer {{vars.userToken1}}"        Content-Type: application/json      body:        query: |-          query Relationships($input: InputRelationships!, $skip: Boolean) {            relationships(input: $input) {              edges {                node {                  id                  followerId                  followedId                  user(skip: $skip) {                    id                    displayName                    image                  }                }              }            }          }        variables:          input:            after: ""            first: 1          skip: true    expect:      code: 200      body:        data:          relationships:            edges:              - node:                  followerId: "test_id2"                  followedId: "test_id1"  - title: 共有メンバーを解除する    protocol: http    request:      method: POST      url: "http://{{env.HOST}}/query"      header:        Authorization: "Bearer {{vars.userToken1}}"        Content-Type: application/json      body:        query: |-          mutation DeleteRelationship($followedID: String!) {            deleteRelationship(followedID: $followedID) {              id              followerId              followedId            }          }        variables:          followedID: "test_id2"    expect:      code: 200■ e2e/script/main.gotitle: ユーザー退会steps:  - title: login    include: "./login.yaml"    bind:      vars:        userToken: "{{vars.userToken3}}"  - title: ユーザーを退会する    protocol: http    request:      method: POST      url: "http://{{env.HOST}}/query"      header:        Authorization: "Bearer {{vars.userToken}}"        Content-Type: application/json      body:        query: |-          mutation DeleteUser {            deleteUser {              id            }          }    expect:      code: 200これで、まずバッチ書き込みの状態で正常に動作しているかの担保ができるようになった。次に、この状態でバッチ書き込み→トランザクション更新に移行して、今まで通りe2eテストが通れば問題無しということで進める。以下のPRでバッチ書き込み→トランザクション更新に移行を対応。github.comトランザクション更新では、複数件書き込みを行う処理を以下のように、RunTransactionでラップすればOK。■ graph/relationship_request.go   err := g.FirestoreClient.RunTransaction(ctx, func(ctx context.Context, tx *firestore.Transaction) error {        if err := g.App.RelationshipRequestRepository.Update(ctx, g.FirestoreClient, tx, rr1); err != nil {            return err        }        if isFollowedRequest {            // 相手側もリクエストしていた場合はstatusを更新            if err := g.App.RelationshipRequestRepository.Update(ctx, g.FirestoreClient, tx, rr2); err != nil {                return err            }        }        r1 := &model.Relationship{            ID:         g.Client.UUID.Get(),            FollowerID: g.UserID,            FollowedID: followedID,            CreatedAt:  g.Client.Time.Now(),            UpdatedAt:  g.Client.Time.Now(),        }        r2 := &model.Relationship{            ID:         g.Client.UUID.Get(),            FollowerID: followedID,            FollowedID: g.UserID,            CreatedAt:  g.Client.Time.Now(),            UpdatedAt:  g.Client.Time.Now(),        }        if err := g.App.RelationshipRepository.Create(ctx, g.FirestoreClient, tx, r1); err != nil {            return err        }        if err := g.App.RelationshipRepository.Create(ctx, g.FirestoreClient, tx, r2); err != nil {            return err        }        return nil    })    if err != nil {        return nil, ce.CustomError(err)    }RunTransactionの中のfunction内でFirestoreの書き込み処理を行い戻り値がnillの場合は、そのまま書き込み、errorの場合は、書き込みはロールバックされるようになっている。コードを移行してe2eを実行して、問題ないことを確認。https://github.com/wheatandcat/memoir-backend/actions/runs/3860166574/jobs/6580318638これで一通りの作業が完了。手動でテストするとチェックが大変だったので、e2eテストでカバーできて楽ができた。

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

以下の記事から引き続き、TODOアプリを作成中。www.wheatandcat.meWindow Menuの改修をしたので記載。PRgithub.com実装現状ローカルストレージにTODOのデータを保存しているのみの構成。デスクトップアプリだと、インポート/エクスポート機能はWindow Menuから選択して実行するパターンが多い。tauri.app以下のRustのファイルを修正してWindow Menuを変更した。■ src-tauri/src/main.rsfn main() {    let context = tauri::generate_context!();    let about = CustomMenuItem::new("about".to_string(), "About");    let update = CustomMenuItem::new("update".to_string(), "Check for updates");    let quit = CustomMenuItem::new("quit".to_string(), "Quit");    let export = CustomMenuItem::new("export".to_string(), "Export").accelerator("Cmd+Shift+E");    let import = CustomMenuItem::new("import".to_string(), "Import").accelerator("Cmd+Shift+I");    let mainmenu = Submenu::new(        "Todo",        Menu::new()            .add_native_item(MenuItem::About(                "todo".to_string(),                AboutMetadata::default(),            ))            .add_native_item(MenuItem::Services)            .add_native_item(MenuItem::Separator)            .add_native_item(MenuItem::Services)            .add_native_item(MenuItem::Separator)            .add_native_item(MenuItem::Hide)            .add_native_item(MenuItem::HideOthers)            .add_native_item(MenuItem::ShowAll)            .add_native_item(MenuItem::Separator)            .add_native_item(MenuItem::Quit)            .add_native_item(MenuItem::Separator)            .add_item(about)            .add_item(update)            .add_native_item(MenuItem::Separator)            .add_item(quit),    );    let filemenu = Submenu::new("File", Menu::new().add_item(export).add_item(import));    let editmenu = Submenu::new(        "Edit",        Menu::new()            .add_native_item(MenuItem::Undo)            .add_native_item(MenuItem::Redo)            .add_native_item(MenuItem::Cut)            .add_native_item(MenuItem::Copy)            .add_native_item(MenuItem::Paste)            .add_native_item(MenuItem::SelectAll),    );    let screenmenu = Submenu::new(        "Window",        Menu::new()            .add_native_item(MenuItem::EnterFullScreen)            .add_native_item(MenuItem::Minimize)            .add_native_item(MenuItem::Zoom)            .add_native_item(MenuItem::CloseWindow),    );    let menu = Menu::new()        .add_submenu(mainmenu)        .add_submenu(filemenu)        .add_submenu(editmenu)        .add_submenu(screenmenu);    tauri::Builder::default()        .invoke_handler(tauri::generate_handler![greet])        .menu(menu)        .on_menu_event(|event| match event.menu_item_id() {            "about" => {                let window = event.window();                window.emit("about", "about".to_string()).unwrap();            }            "export" => {                let window = event.window();                window.emit("export", "export".to_string()).unwrap();            }            "import" => {                let window = event.window();                window.emit("import", "import".to_string()).unwrap();            }            "quit" => {                std::process::exit(0);            }            "close" => {                event.window().close().unwrap();            }            _ => {}        })        .run(context)        .expect("error while running tauri application");}上記のように修正する以下の画像のようなWindow Menuが設定される。1枚目の画像のmenuは以下のコードで定義している。    let mainmenu = Submenu::new(        "Todo",        Menu::new()            .add_native_item(MenuItem::About(                "todo".to_string(),                AboutMetadata::default(),            ))            .add_native_item(MenuItem::Services)            .add_native_item(MenuItem::Separator)            .add_native_item(MenuItem::Services)            .add_native_item(MenuItem::Separator)            .add_native_item(MenuItem::Hide)            .add_native_item(MenuItem::HideOthers)            .add_native_item(MenuItem::ShowAll)            .add_native_item(MenuItem::Separator)            .add_native_item(MenuItem::Quit)            .add_native_item(MenuItem::Separator)            .add_item(about)            .add_item(update)            .add_native_item(MenuItem::Separator)            .add_item(quit),    );add_native_itemで追加している項目は、Tauriがデフォルトで用意している項目で以下のような定義が存在している。docs.rsまた、独自のWindow Menuを追加する場合は以下のように書く。CustomMenuItem::newで項目を追加、acceleratorでショートカットを設定できる。    let export = CustomMenuItem::new("export".to_string(), "Export").accelerator("Cmd+Shift+E");    let import = CustomMenuItem::new("import".to_string(), "Import").accelerator("Cmd+Shift+I");（略）    let filemenu = Submenu::new("File", Menu::new().add_item(export).add_item(import));Window Menuをクリックした時の動作は以下の部分に記載。        .on_menu_event(|event| match event.menu_item_id() {                  （略）            "export" => {                let window = event.window();                window.emit("export", "export".to_string()).unwrap();            }            "import" => {                let window = event.window();                window.emit("import", "import".to_string()).unwrap();            }          （略）        })        .run(context)window.emitを実行する事でWebView側でアクションを送信することができる。送信したアクションTauri API経由で取得可能。詳しくは以下を参照。tauri.appなので、WebView側に監視用のHooksを以下のように追加。■ src/hooks/useListen.tsx  useEffect(() => {    let unListenExport: any;    let unListenImport: any;    async function f() {      unListenExport = await listen<string>("export", async () => {        const m = localStorage.getItem(STORAGE_KEY.MARKDOWN) || "";        const h = getJsonParse(STORAGE_KEY.HISTORY);        const t = getJsonParse(STORAGE_KEY.TASK_LIST);        const data = {          markdown: m,          history: h,          tasks: t,        };        const path = await save({ defaultPath: "export-todo.json" });        if (path) {          writeTextFile(path, JSON.stringify(data));        }      });      unListenImport = await listen<string>("import", async () => {        const path = await open();        if (path) {          const dataText = await readTextFile(String(path));          const data: any = JSON.parse(dataText);          console.log(data);          localStorage.setItem(STORAGE_KEY.MARKDOWN, data.markdown);          localStorage.setItem(            STORAGE_KEY.HISTORY,            JSON.stringify(data.history)          );          localStorage.setItem(            STORAGE_KEY.TASK_LIST,            JSON.stringify(data.tasks)          );          props.onImportCallback(data.markdown, data.tasks, data.history);        }      });    }    f();    return () => {      if (unListenExport) {        unListenExport();      }      if (unListenImport) {        unListenImport();      }    };  }, []);これでWindow MenuからWebViewへの疎通部分は完了した。最後にファイルのインポート/エクスポートに解説。以下のTauri APIを使用することでファイルの選択と保存が可能。tauri.apptauri.appコード的には以下の部分になる。■ 読み込みのダイアログ表示 & ファイルの読み込み処理import { save, open } from "@tauri-apps/api/dialog";import { writeTextFile, readTextFile } from "@tauri-apps/api/fs";const path = await open();if (path) {     const dataText = await readTextFile(String(path));■ 読み込みのダイアログ表示 & ファイルの読み込み処理import { save, open } from "@tauri-apps/api/dialog";import { writeTextFile, readTextFile } from "@tauri-apps/api/fs";const path = await open();if (path) {     const dataText = await readTextFile(String(path));■ ファイルの読み込みのダイアログ表示 & ファイルの読み込み処理import { save, open } from "@tauri-apps/api/dialog";import { writeTextFile, readTextFile } from "@tauri-apps/api/fs";const path = await open();if (path) {     const dataText = await readTextFile(String(path));■ ファイルの保存のダイアログ表示 & ファイルの書き込み処理import { save, open } from "@tauri-apps/api/dialog";import { writeTextFile, readTextFile } from "@tauri-apps/api/fs";const path = await save({ defaultPath: "export-todo.json" });if (path) {  　writeTextFile(path, JSON.stringify(data)); }これでファイルの読み書きが可能になった。後は保存データをインポート/エクスポートしたい形式にフォーマットすればOK。まとめWindow Menuはwebやスマホアプリ開発時には無い概念だったので結構新鮮で開発していて発見が多かった。

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

仕事のタスク管理をslackで行っていたが、いい加減ちゃんと管理しくなってきたのでデスクトップアプリを自作したので、その内容を記事にした。リポジトリgithub.comアプリの説明Markdownベースで記載できるTODOアプリできるだけシンプルに作成まだ開発中使用技術 Tauri React markdown-to-jsx Tailwind CSSTauriとは？tauri.appTauriはRustで作成されたクロスプラットフォームでデスクトップアプリが作成できるフレームワークデスクトップアプリのネイティブ部分のコードはRust、フロントエンドはWebの技術を使用できるなのでフロントエンドに関しては以下を使用できるHTMLReactNext.jsSvelte開発の領域的には、Electronと同じだが、バンドルサイズ、消費CPU、セキュリティが改善されている開発のモチベーション仕事のTODOリストは今までslackのDMに書いて運用していた雑な運用でリストで書き出して、タスクが終わったら「✔」をつけるのみ運用他のTODOアプリも試したが無駄にリッチなアプリが多くて続かなかったブラウザだと他の作業で間違って消したりするのでデスクトップアプリで作りたかった仕事のTODOだとセンシティブな内容が多かったので、サーバー通信は避けたいなので、自分用にカスタマイズしたTODOアプリを作ってみた実装構築以下の手順でコマンドを実行していけば、初期構築は簡単に行える。tauri.appTauriでの開発方法以下のコマンドでブラウザでローカル起動。ホットリロードも対応しているので、開発は快適。$ yarn dev以下のコマンドでデスクトップアプリでローカル環境を起動。$ yarn tauri dev以下のコマンドでデスクトップアプリをビルドできる。$ yarn tauri buildfrontendの開発frontendはReactで作成コードMarkdownの表示はmarkdown-to-jsxを使用コードMarkdownのparseはremark-parseを使用checkbox部分のパースする自前で作成コードネイティブ機能の開発ネイティブ機能はRustで開発を行うアプリのmenuは以下で作成コード詳細は、こちらmenuからfrontend側の通信は、以下のように作成ネイティブから送信コードfrontendで受け取りコードfrontend側から、Tauri APIを使用してネイティブの機能も活用可能@tauri-apps/api | Tauri Appsこんな感じで作成した。まとめReact経験者なら、ほぼ学習コスト無しでデスクトップアプリが作れるので、作業効率アップ用のアプリ作成とかはサクッと作る。TODOアプリみたいに世の中には溢れているけど、自分に合ったものは見つからない時は、Tauriを使って自作するのも良いかと思った。

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

TauriでカスタマイズしたTODOアプリを作ってみる

mswでフロントエンドのインテグレーションテストを実装する

仕事の方でGoの静的解析ツールを作る機会があったので、その技術を使用してmemoir用に静的解析ツールを作ってみたので紹介静的解析ツールのコードgithub.commemoir-backendではエラーのスタックトレースを表示させたい関係で、errorは基本全て特定のメソッドでラップするようにしているが、手動で実装しているので抜けが発生する可能性がある。なので、ラップしていない箇所を検出する静的解析ツールを作成してみた。静的解析のチェック後のPRgithub.com実装静的解析ツールの作成にはskeletonを使用。github.com静的解析ツールを作成するcliツールで以下のコマンドで簡単に静的解析ツールを作成できる。$ go install github.com/gostaticanalysis/skeleton/v2@latest$ skeleton example.com/mylinter上記のコマンドでコード生成が行われ、テストファイルなども自動で作成される。（詳しくはREADMEを参照）こちらを使用して以下の検出できる静的解析を作成。メソッドのreturnでerrorを設定されている場合に、CustomError or CustomErrorWrapでラップされていないコードを検出大本のCustomErrorではerrorをラップしないで返すので、ここに関してはコメントで検出を除外することができるmemoir-backendで固有使用する静的解析ツールなので汎用性は無しでOK静的解析自体の説明は、この記事では記載しないので、以下を参照でお願いします 🙇‍♂️zenn.dev単純に抽象構文木 (AST) を確認した場合は、以下を確認するのもオススメ。https://yuroyoro.github.io/goast-viewer/静的解析ツールのコードが、こちらになるので、コードを解説していく。まず、テスト用のファイルを以下の通りに作成。テストファイルの作成■ checkcustomerror/testdata/src/a/a.gopackage aimport (    "errors"    "fmt")func f() error {    var gopher int    if gopher == 0 {        err := fmt.Errorf("Error: %s", gopher)        return err // want "require customError wrap"    }    if gopher == 1 {        err := fmt.Errorf("Error: %s", gopher)        return CustomError(err) // OK    }    return nil // OK}func CustomError(err error) error {    return err // nocheck:checkcustomerror}以下のコードは、そのままエラーの変数をreturnしているので検知したい。   if gopher == 0 {        err := fmt.Errorf("Error: %s", gopher)        return err // want "require customError wrap"    }以下のコードは、そのままエラーの変数をCustomErrorのメソッドでラップしているので検知しなくてOKにしたいという感じ静的解析のテスト用のコードを作成する。   if gopher == 1 {        err := fmt.Errorf("Error: %s", gopher)        return CustomError(err) // OK    }以下のコードは、returnのtypeがerrorでもnilの場合はラップしなくてOKなので検知しなくてもOK。   return nil // OK以下はラップしているCustomErrorのメソッドなので、errorをそのままreturnしても検知からは除外したいので、コメントでnocheck:checkcustomerrorと記載している。func CustomError(err error) error {    return err // nocheck:checkcustomerror}と上記が期待通りに検知できるようにコードを作成していく。各ファイルのコメントを取得上記のテストファイルにも記載の通りにnocheck:checkcustomerrorのコメントが存在する行の場合は検知から除外したいので以下のコードで各行のコメントを取得する。■ checkcustomerror/checkcustomerror.gofunc getCommentMap(pass *analysis.Pass) map[string]string {    var cmap = make(map[string]string)    for _, file := range pass.Files {        for _, cg := range file.Comments {            for _, c := range cg.List {                pos := pass.Fset.Position(c.Pos())                cmap[pos.Filename+"_"+strconv.Itoa(pos.Line)] = c.Text            }        }    }    return cmap}これで行毎のコメントのデータが取得できたので、検知した行のコメントを取得して、対象の文字列を含んでいる場合は判定から除外するように処理をすればOK。各メソッドのreturnを取得Goではコーディングルールで戻り値の最後をerrorにするというのがあり、memoirでも、それに沿ってコーディングしている。なので、今回の静的解析では以下のコードでreturnの最後の抽象構文木 (AST) を取得してtypeがerrorの場合は検知する処理を作成。■ checkcustomerror/checkcustomerror.govar errType = types.Universe.Lookup("error").Type()        // 略    inspect.Preorder(nodeFilter, func(n ast.Node) {        switch n := n.(type) {        case *ast.ReturnStmt:            pos := pass.Fset.Position(n.Pos())            if len(n.Results) == 0 {                return            }            last := n.Results[len(n.Results)-1]            if last == nil {                return            }            lastTyp := pass.TypesInfo.TypeOf(last)            if lastTyp != errType {                return            }ast.ReturnStmtがreturnの構文のASTなので、そこを対象にreturnが存在しない、1番最後の戻り値を取得、戻り値のtypeがerrorを判定させている。errorが CustomError OR CustomErrorWrapの名前のメソッドでラップされているか判定以下のコードで、errorが CustomError OR CustomErrorWrapの名前のメソッドでラップされているか判定。■ checkcustomerror/checkcustomerror.gofunc check(pass *analysis.Pass, item ast.Expr) bool {    ident, _ := item.(*ast.Ident)    if ident != nil {        return true    }    call := item.(*ast.CallExpr)    if call == nil {        return false    }    obj := getFun(pass, call.Fun)    if obj == nil {        return false    }    return obj.Name() != "CustomError" && obj.Name() != "CustomErrorWrap"}func getFun(pass *analysis.Pass, fun ast.Expr) *types.Func {    switch fun := fun.(type) {    case *ast.Ident:        obj, _ := pass.TypesInfo.ObjectOf(fun).(*types.Func)        return obj    case *ast.SelectorExpr:        obj, _ := pass.TypesInfo.ObjectOf(fun.Sel).(*types.Func)        return obj    }    return nil}始めに以下でASTがIdent の場合は、ただのerrorを返しているのみになるのでtrueを返して検知させる（実際は手前でラップしている可能性もあるが、今回はそのパターンはスルーしている）  ident, _ := item.(*ast.Ident)    if ident != nil {        return true    }次に以下でASTがCallExpr の場合は、実行しているメソッドの定義を取得して、メソッド名がCustomError OR CustomErrorWrapかチェック。  obj := getFun(pass, call.Fun)    if obj == nil {        return false    }    return obj.Name() != "CustomError" && obj.Name() != "CustomErrorWrap"メソッド名がCustomError OR CustomErrorWrapで無い場合は、ラップされていない判定でtrueを返して検知させる検知した箇所を出力させる以下のコードで 検知した箇所を出力させる■ checkcustomerror/checkcustomerror.go           pass.Reportf(n.Pos(), "require customError wrap")これで静的解析ツールのコーディングは完了。実行方法skeletonで作成したツールはgo vetから実行可能なので、以下の手順で実行。まず、go installできるようにするため、Githubのrepositoryにtagを作成してpush。すると以下の画面のようにmoduleのバージョンが作成される。pkg.go.devその後、以下のコマンドでインストール & 実行。$ go install github.com/wheatandcat/memoir-static-analytics/checkcustomerror/cmd/checkcustomerror@v0.0.7# memoir-backendのフォルダで実行$ go vet -vettool=$(which checkcustomerror) ./...以下が出力された結果。# github.com/wheatandcat/memoir-backend/usecase/custom_errorusecase/custom_error/error.go:53:3: require customError wrapusecase/custom_error/error.go:59:2: require customError wrapusecase/custom_error/error.go:66:3: require customError wrapusecase/custom_error/error.go:72:2: require customError wrap# github.com/wheatandcat/memoir-backend/usecase/app_traceusecase/app_trace/middleware.go:126:2: require customError wrap# github.com/wheatandcat/memoir-backend/repositoryrepository/item.go:88:3: require customError wraprepository/user.go:74:3: require customError wraprepository/user.go:83:3: require customError wrap# github.com/wheatandcat/memoir-backend/usecase/authusecase/auth/create.go:26:3: require customError wrapusecase/auth/create.go:30:3: require customError wrapusecase/auth/create.go:34:3: require customError wrapusecase/auth/create.go:96:2: require customError wrap出力された箇所を確認するとラップされていない、またはCustomError のメソッドが検知されているので以下のPRの通りに修正。github.comこれでやりたかった内容まで完成した。まとめGoの静的解析ツールを自作する場合は、汎用的なツールの作成よりもプロジェクト固有の問題にフォーカスして作成する方が、より実際には役に立つなと思ったので作ってみた。チーム開発だとレビュー毎に確認するのが辛い部分は静的解析ツールを自作して自動化しても良さ気だった。

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

GCP固有の処理などローカル環境では検証できない機能が増えてきたので、PR毎にCloud Runをデプロイできるように修正した。PRgithub.com参考記事zenn.devcloud.google.com実装Cloud Runはtagを設定することで、リビジョンのURLが設定され個別にアクセスが可能になる（詳しくは以下を参照）cloud.google.comなので、仕組み的には、PRがオープン時にブランチの環境でCloud Runにtagを設定してデプロイ、PRがクローズ時にtagを削除すればOK上記の仕組みをGitHub Actionsに組み込むと以下の通りになった。まずは、PRがオープンした際のコード■ github/workflows/deploy_review_branch.ymlname: Deploy Review Branchon: pull_requestenv:  SERVICE_ACCOUNT_JSON: ${{ secrets.REVIEW_SERVICE_ACCOUNT_JSON }}  GCP_SERVICE_ACCOUNT_JSON: ${{ secrets.REVIEW_GCP_SERVICE_ACCOUNT_JSON }}  PROJECT_ID: ${{ secrets.REVIEW_GCP_PROJECT_ID }}  SERVICE_NAME: ${{ secrets.REVIEW_SERVICE_NAME }}  REGION: ${{ secrets.REGION }}jobs:  deploy-branch:    runs-on: ubuntu-latest    permissions:      id-token: write      contents: read      pull-requests: write    steps:      - uses: "actions/checkout@v3"      - name: Create serviceAccount.json file        run: echo $SERVICE_ACCOUNT_JSON | base64 --decode -i > ./serviceAccount.json      - name: Create gcpServiceAccount.json file        run: echo $GCP_SERVICE_ACCOUNT_JSON | base64 --decode -i > ./gcpServiceAccount.json      - id: "auth"        name: "Authenticate to Google Cloud"        uses: "google-github-actions/auth@v0.4.0"        with:          workload_identity_provider: ${{ secrets.REVIEW_WORKLOAD_IDENTITY_PROVIDER }}          service_account: github-actions@${{ secrets.REVIEW_GCP_PROJECT_ID }}.iam.gserviceaccount.com      - name: Set up Cloud SDK        uses: google-github-actions/setup-gcloud@v0      - name: Authorize Docker push        run: gcloud auth configure-docker      - name: Build Submit        run: |-          gcloud builds submit --pack image=asia.gcr.io/$PROJECT_ID/$SERVICE_NAME:latest      - name: Deploy to Cloud Run        run: |-          gcloud run deploy $SERVICE_NAME \            --project=$PROJECT_ID \            --image=asia.gcr.io/$PROJECT_ID/$SERVICE_NAME:latest \            --region=$REGION \            --service-account=github-actions@$PROJECT_ID.iam.gserviceaccount.com \            --allow-unauthenticated \            --tag=pr-${{ github.event.pull_request.number }} \            --no-traffic      - name: Find Comment        uses: peter-evans/find-comment@v2        id: fc        with:          issue-number: ${{ github.event.pull_request.number }}          comment-author: github-actions[bot]          body-includes: "Preview"      - name: Create Preview URL        id: preview-url        run: echo "::set-output name=value::https://pr-${{ github.event.pull_request.number }}---memoir-backend-pmrozdfyha-an.a.run.app"      - name: Get datetime for now        id: datetime        run: echo "::set-output name=value::$(date)"        env:          TZ: Asia/Tokyo      - name: Create or update comment        uses: peter-evans/create-or-update-comment@v2        with:          comment-id: ${{ steps.fc.outputs.comment-id }}          issue-number: ${{ github.event.pull_request.number }}          body: |            Visit the :eyes: **Preview** :eyes: for this PR (updated for commit ${{ github.event.pull_request.head.sha }}):            <${{ steps.preview-url.outputs.value }}>            <sub>(:fire: updated at ${{ steps.datetime.outputs.value }})</sub>          edit-mode: replace今回は参考記事に合わせてcreate-or-update-commentを使用してPRにデプロイしたCloud RunのURLをコメントするように追加。以下のように表示される。次にPRがクローズした際のコード■ .github/workflows/cloud-run.delete-preview.ymlname: Cloud Run (Delete Preview)2on:  pull_request:    types: [closed]env:  PROJECT_ID: ${{ secrets.REVIEW_GCP_PROJECT_ID }}  SERVICE_NAME: ${{ secrets.REVIEW_SERVICE_NAME }}  REGION: ${{ secrets.REGION }}jobs:  delete-preview:    runs-on: ubuntu-latest    permissions:      id-token: write      contents: read      pull-requests: write    steps:      - uses: "actions/checkout@v3"      - id: "auth"        name: "Authenticate to Google Cloud"        uses: "google-github-actions/auth@v0.4.0"        with:          workload_identity_provider: ${{ secrets.REVIEW_WORKLOAD_IDENTITY_PROVIDER }}          service_account: github-actions@${{ secrets.REVIEW_GCP_PROJECT_ID }}.iam.gserviceaccount.com      - name: Set up Cloud SDK        uses: google-github-actions/setup-gcloud@v0      - name: Deploy revision with tag        run: |-          gcloud run services update-traffic $SERVICE_NAME \          --region=$REGION \          --remove-tags=pr-${{ github.event.pull_request.number }}      - name: Find Comment        uses: peter-evans/find-comment@v2        id: fc        with:          issue-number: ${{ github.event.pull_request.number }}          comment-author: github-actions[bot]          body-includes: "Preview"      - name: Create Preview URL        id: preview-url        run: echo "::set-output name=value::https://pr-${{ github.event.pull_request.number }}---product-x-drwvbiotlz-an.a.run.app"      - name: Get datetime for now        id: datetime        run: echo "::set-output name=value::$(date)"        env:          TZ: Asia/Tokyo      - name: Create or update comment        uses: peter-evans/create-or-update-comment@v2        with:          comment-id: ${{ steps.fc.outputs.comment-id }}          issue-number: ${{ github.event.pull_request.number }}          body: |            Visit the :eyes: **Preview** :eyes: for this PR (updated for commit ${{ github.event.pull_request.head.sha }}):            ~<${{ steps.preview-url.outputs.value }}>~            <sub>(:warning: deleted at ${{ steps.datetime.outputs.value }})</sub>          edit-mode: replace上記でPRがクローズした際に、対象のCloud Runにtagを削除して、コメントしているURLにはアクセスできなくなるので、以下の通りにコメントを更新している。これでPR毎にCloud Runをデプロイできるようになり、よりデバッグがやりやすくなった。

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

フロントエンドのインテグレーションテストを簡単に書けるようにしたいと思ったので、mswを使用してインテグレーションテストを実装してみた。PR以下の3回ののPRで実装。github.comgithub.comgithub.com実装①: typed-document-nodeに移行実装の想定としては、インテグレーションを簡単に書けるようにするために、mswを実装したい。Mockを手動で保守するのは辛いのでgraphql-codegen-typescript-mock-dataで自動生成したいと考えた。なので、まずはMockを扱いやすい状態にするために、typescript-react-apollo→typed-document-nodetyped-document-nodeは、Apollo Clientなどの特定のライブラリに依存せずにGraphQLのtypeを自動生成してくれる。使い方は以下のようになる。typescript-react-apolloでは自動生成したコードを以下のように参照して使用していたが、■ Beforeimport {  useItemQuery } from 'queries/api/index'; // graphql-codegenで生成したファイル  const { loading, data, error, refetch } = useItemQuery({    variables: {      id: props.itemID,    },  });typed-document-nodeでは以下のようなコードになり、直接GraphQLのクライントから参照が可能になった。■ Afterimport {  ItemDocument } from 'queries/api/index'; // graphql-codegenで生成したファイルimport { useQuery } from '@apollo/client';  const { loading, data, error, refetch } = useQuery(ItemDocument, {    variables: {      id: props.itemID,    },  });まずは、mockをしやすい状態になった。実装②: graphql-codegen-typescript-mock-dataでmockを自動生成してmswに設定次は、graphql-codegen-typescript-mock-dataを実装。コードは以下の通り■ codegen.yml  ./src/queries/api/mocks.ts:  // ←追加    hooks:      afterOneFileWrite:        - yarn prettier --write ./src/queries/api/mocks.ts    plugins:      - typescript-mock-data:          typesFile: "./index.ts"          terminateCircularRelationships: true          scalars:            Time: moment上記を追加してgraphql-codegenを実行するとダミーデータが自動生成されて、以下のように参照が可能。import { anItem } from 'queries/api/mocks';  // graphql-codegenで生成したファイルanItem() // queryのItemのダミーデータが設定されているなので、このダミーデータをmswに設定■ src/mocks/handler.tsimport { graphql } from 'msw';import { ItemDocument } from 'queries/api/index';import { anItem } from 'queries/api/mocks';export const handlers = [  graphql.query(ItemDocument, (req, res, ctx) => {    return res(      ctx.data({        item: {          ...anItem(),          id: req.variables.id,        },      })    );  }),];以下のコードでテスト用のapolloのクライントを用意■ src/lib/testUtil.tsximport React from 'react';import { GraphQLHandler, GraphQLRequest } from 'msw';import {  ApolloClient,  ApolloProvider,  createHttpLink,  InMemoryCache,} from '@apollo/client';import { render } from '@testing-library/react-native';import { server } from 'mocks/server';import fetch from 'cross-fetch';const link = createHttpLink({  uri: 'http://localhost:8080/query',  fetch,  credentials: 'same-origin',});const client = new ApolloClient({  link,  uri: 'http://localhost:8080/query',  cache: new InMemoryCache(),});export const testRenderer =  (children: React.ReactNode) =>  (responseOverride?: GraphQLHandler<GraphQLRequest<never>>) => {    if (responseOverride) {      server.use(responseOverride);    }    return render(<ApolloProvider client={client}>{children}</ApolloProvider>);  };上記を利用してテストコードを書くと以下の通りになった。■ src/components/pages/ItemDetail/__tests__/Connected.test.tsximport React from 'react';import { graphql } from 'msw';import { ItemDocument } from 'queries/api/index';import { item } from '__mockData__/item';import * as Recoil from 'recoil';import * as useHomeItems from 'hooks/useHomeItems';import { testRenderer } from 'lib/testUtil';import { screen, waitFor } from '@testing-library/react-native';import Connected, { Props } from '../Connected';const propsData = (props?: Partial<Props>): Props => ({  itemID: 'test',  date: '2020-01-01',  ...props,});describe('components/pages/ItemDetail/Connected.tsx', () => {  beforeEach(() => {    jest      .spyOn(Recoil, 'useSetRecoilState')      .mockImplementation((): any => jest.fn());  });  it('各項目が正しく表示される', async () => {    const renderPage = testRenderer(      <Connected        {...propsData({          itemID: 'test2',        })}      />    );    const queryInterceptor = jest.fn();    renderPage(      graphql.query(ItemDocument, (req, res, ctx) => {        queryInterceptor(req.variables);        return res(          ctx.data({            item: {              ...item(),              id: req.variables.id,              date: '2021-01-01T00:00:00+09:00',              title: '宝くじが当たった',              categoryID: 9,              like: true,            },          })        );      })    );    await waitFor(async () => {      expect(queryInterceptor).toHaveBeenCalledTimes(1);      expect(screen.getByText('宝くじが当たった')).toBeTruthy();      expect(screen.getByText('2020.01.01 / 水')).toBeTruthy();      expect(screen.getByTestId('like')).toBeTruthy();      expect(screen.getByTestId('category_id_9')).toBeTruthy();    });  });});これでテストしたいGraphQLのResponseだけ引数で変更して、それ以外はgraphql-codegen-typescript-mock-dataを使用して自動生成されたダミーデータを返すようにして最小限のmockでテストを実装できた。実装③: インテグレーションテストを実装するこれで本題のインテグレーションテストを実装。実際の操作した際に期待する動作をテストするコードを以下の通り作成。■ src/components/pages/ItemDetail/__tests__/Connected.test.tsx  it('アイテムを更新する', async () => {    const renderPage = testRenderer(      <Connected        {...propsData({          itemID: 'test1',        })}      />    );    const mutationInterceptor = jest.fn();    renderPage(      graphql.mutation(UpdateItemDocument, (req, res, ctx) => {        mutationInterceptor(req.variables);        return res(          ctx.data({            updateItem: {              id: req.variables.input.id,            },          })        );      })    );    await waitFor(async () => {      fireEvent.press(screen.getByTestId('menu'));      expect(screen.getByTestId('menu_modal').props.visible).toBeTruthy();      fireEvent.press(screen.getByTestId('edit'));      expect(screen.getByTestId('add_item_modal').props.visible).toBeTruthy();      fireEvent.changeText(        screen.getByPlaceholderText('今日何やった？'),        'コップを割った'      );      fireEvent.press(screen.getByTestId('input_category_id_1'));      fireEvent.press(screen.getByTestId('input_dislike'));      fireEvent.press(screen.getByText('入力'));      expect(mutationInterceptor).toHaveBeenCalledWith({        input: {          id: 'test1',          title: 'コップを割った',          categoryID: 1,          date: '2020-01-01T00:00:00+09:00',          like: false,          dislike: true,        },      });    });  });テスト内容は以下の通りアイテムのメニューをタッチメニューからアイテムの更新をタッチアイテム更新のモーダルが表示されるアイテムのタイトルを入力アイテムのカテゴリーを選択アイテムをdislikeする入力ボタンをタップ更新のAPIのRequestパラメータが入力した値と一致しているかテストこれで、インテグレーションテストの実装ができた。msw + graphql-codegen-typescript-mock-data + testing-library/react-nativeで、かなり簡単にインテグレーションテストが実装できるようになったので満足。

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

コードのカバレッジを継続的に計測したくて作成。codecovがデファクトだったが、以前あったセキュリティ問題から使用するのは微妙だなと思っていたので、Retoolを使用してダッシュボードを作成して可視化してみた。インスパイヤ元の記事以下の記事を参考に作成zenn.devPRgithub.comgithub.comRetoolとは？retool.comローコード開発ツールで、あらゆるデータベースを元にグラフ、チャート、検索フォーム、データ入力などのUIを作成できるサービスあらゆるサービスをサポートしている（例: RDB系のサービス、Firestore、スプレットシート、GitHub、Datadog、Slack、Asana、etc...）Integrations個人の場合では無料で使用できるPricing一部jsもサポートしていて、柔軟性も高いJavaScript in Retool構成 コードTypeScriptzx データベースFirestore 定期実行GitHub Actions ダッシュボード化Retool実装インスパイヤ元の記事を参考にzxとTypeScriptでデータ取得のスクリプトを作成。テストのカバレッジ取得のコードが以下になる。■ scripts/send-metrics/coverage.tsカバレッジレポートにtotalのカバレッジの値がjson形式で出力されるので、その情報を元にjqを使って必要な情報のみ抽出。次は、テストの総数とテストの時間を取得のコードが以下になる。■ scripts/send-metrics/jestResult.tsimport dayjs from 'dayjs';import { $ } from 'zx';export const getJestResult = async () => {  let r = {    time: 0,    numTotalTests: 0,  };  try {    await $`yarn test --json --outputFile=testResults.json`;  } catch (err) {    console.error(err);  }  try {    const numTotalTests =      await $`cat testResults.json | jq -r '.numTotalTests'`;    r.numTotalTests = Number(numTotalTests);    const testResults = await $`cat testResults.json | jq -r '.testResults'`;    const items = JSON.parse(testResults.stdout);    const startTime = items[0].startTime;    const endTime = items[items.length - 1].endTime;    const time = dayjs(endTime).diff(dayjs(startTime), 'milliseconds');    r.time = time;  } catch (err) {    console.error(err);  }  console.log(r);  return r;};Jestでjsonオプションを指定すると、テストのレポートをjson形式で出力できるので、その情報を元に必要な情報を抽出。上記の情報をFirestoreに保存。保存の形式は以下みたいな感じFirestoreの情報を元にRetoolで以下のダッシュボードを作成。■ ダッシュボードのURLhttps://jurassic.retool.com/embedded/public/ca1843e7-ce2b-41ad-92c1-1ca7ff8cd944Retoolならチャート情報の作成以外にも、日付指定の入力フォームやアラート表示も出来て良い感じだった。以下みたいに書けば、最新データのパーセンテージを表示することも可能。Retoolでのダッシュボード作成は、かなり良かったので、今後も使っていくと思います。

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

- zxとRetoolでコード健全性の可視化のダッシュボードを作成する- インスパイア元の記事紹介  - [zx + Datadog + GitHub Actions でフロントエンドのコードベースの健全性を可視化する](https://zenn.dev/ryo_kawamata/articles/create-frontend-dashboard)

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

memoirの不具合フィードバックで以下の報告があったので修正上下スクロールしていると、意図せずスワイプイベントが発火して日付移動してしまうタッチインベントを設定している箇所でスワイプイベントが発火しないPRgithub.com実装元々はreact-native-swipe-gesturesを使用してスワイプイベントを実装していたが、2年前から更新されてなかったので移行えを検討github.com検索したところ、react-native-gesture-handlerで可能なことが分かったので実装github.comreact-native-gesture-handlerの PanGestureHandlerで実装docs.swmansion.comコードは以下のようになった■ src/components/organisms/Home/GestureRecognizerWrap.tsximport React, { memo, useCallback } from 'react';import { StyleSheet, ViewStyle } from 'react-native';import View from 'components/atoms/View';import dayjs from 'lib/dayjs';import { ConnectedType } from 'components/pages/Home/Connected';import {  GestureHandlerRootView,  PanGestureHandler,  ScrollView,  HandlerStateChangeEvent,} from 'react-native-gesture-handler';type Props = {  date: string;  children: React.ReactNode;} & Pick<ConnectedType, 'onChangeDate' | 'items'>;const velocityThreshold = 0.3;const directionalOffsetThreshold = 80;const isValidSwipe = (velocity: number, directionalOffset: number) => {  return (    Math.abs(velocity) > velocityThreshold &&    Math.abs(directionalOffset) < directionalOffsetThreshold  );};const GestureRecognizerWrap: React.FC<Props> = (props) => {  const onSwipeLeft = useCallback(() => {    props.onChangeDate(dayjs(props.date).add(1, 'day').format('YYYY-MM-DD'));  }, [props]);  const onSwipeRight = useCallback(() => {    props.onChangeDate(dayjs(props.date).add(-1, 'day').format('YYYY-MM-DD'));  }, [props]);  const onPanGestureEvent = useCallback(    (event: HandlerStateChangeEvent<any>) => {      const { nativeEvent } = event;      if (Math.abs(nativeEvent.velocityY) > 300) {        return;      }      if (!isValidSwipe(nativeEvent.velocityX, nativeEvent.translationX)) {        return;      }      if (nativeEvent.velocityX > 0) {        onSwipeRight();      } else {        onSwipeLeft();      }    },    [onSwipeRight, onSwipeLeft]  );  const style: ViewStyle[] = [styles.inner];  if (props.items.length > 3) {    style.push({ paddingBottom: (props.items.length - 2) * 55 });  }  return (    <View style={styles.root}>      <GestureHandlerRootView>        <PanGestureHandler onActivated={onPanGestureEvent}>          <ScrollView removeClippedSubviews style={styles.scroll}>            <View style={style}>{props.children}</View>          </ScrollView>        </PanGestureHandler>      </GestureHandlerRootView>    </View>  );};export default memo<React.FC<Props>>(GestureRecognizerWrap);const styles = StyleSheet.create({  inner: {    height: '100%',  },  scroll: {    height: '100%',  },  root: {    height: '100%',  },});コードの説明をすると、スワイプのイベントが欲しいコンポーネントを以下でラップする      <GestureHandlerRootView>        <PanGestureHandler onActivated={onPanGestureEvent}>            ....        </PanGestureHandler>      </GestureHandlerRootView>PanGestureHandlerのonActivatedでジェスチャーのイベントを取得できるので、その情報を元に右スワイプ、左スワイプを判定  const onPanGestureEvent = useCallback(    (event: HandlerStateChangeEvent<any>) => {      const { nativeEvent } = event;      if (Math.abs(nativeEvent.velocityY) > 300) {        return;      }      if (!isValidSwipe(nativeEvent.velocityX, nativeEvent.translationX)) {        return;      }      if (nativeEvent.velocityX > 0) {        onSwipeRight();      } else {        onSwipeLeft();      }    },    [onSwipeRight, onSwipeLeft]  );また、スワイプとスクロールが同時に発生しないようにreact-native-gesture-handlerのScrollViewを使用import {  GestureHandlerRootView,  PanGestureHandler,  ScrollView,   // ← こちらを使用  HandlerStateChangeEvent,} from 'react-native-gesture-handler';■ 参考 - https://github.com/software-mansion/react-native-gesture-handler/issues/420#issuecomment-592686502これで、スクロールとタッチイベントとスワイプイベントが同時に存在する画面でも快適動作できるようになった。

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

backendのパフォーマンス測定を実装してみたPRgithub.comOpenTelemetryとはopentelemetry.ioOpenTelemetryは、オープンソースのオブザーバビリティフレームワーク運用しているアプリのパフォーマンスや健全性が正常な状態か判断するために使用する情報をテレメトリーデータと呼ばれているテレメトリーデータは主に3つのカテゴリに分類されるログメトリクストレースOpenTelemetryは、それらのテレメトリデータを収集するためのベンダーに依存しないAPI、ソフトウェア開発キット(SDK)、その他のツールを提供している使用技術gqlgenopentelemetry-goCloud Trace実装opentelemetry-goとCloud Traceのコードは以下を参考に実装cloud.google.com■ main.govar tr trace.Tracer = sdktrace.NewTracerProvider().Tracer("memoir-backend")projectID := os.Getenv("GCP_PROJECT_ID")exporter, err := texporter.New(texporter.WithProjectID(projectID))if err != nil {  log.Fatalf("texporter.NewExporter: %v", err)}tp := sdktrace.NewTracerProvider(  sdktrace.WithSampler(sdktrace.TraceIDRatioBased(0.01)),  // sdktrace.WithSampler(sdktrace.AlwaysSample()), テスト時は毎回トレース情報が欲しいので、こちらを使用  sdktrace.WithBatcher(exporter),)defer func() {  if err := tp.ForceFlush(ctx); err != nil {    log.Fatal(err)  }}()otel.SetTracerProvider(tp)tr = otel.GetTracerProvider().Tracer("memoir-backend")（略）// 上記のトレースのプロバイダをMiddlewareの引数に渡すsrv.Use(app_trace.NewGraphQLTracer(tr))gqlgenにはMiddlewareを実装することでGraphQLの各QueryとField実行時のハンドリングが行えるので、そのハンドリングとopentelemetry-goを組み合わせると以下のようなコードになった。■ usecase/app_trace/middleware.gopackage app_traceimport (    "context"    "fmt"    "strings"    "github.com/99designs/gqlgen/graphql"    "go.opentelemetry.io/otel/attribute"    "go.opentelemetry.io/otel/codes"    "go.opentelemetry.io/otel/trace")type graphqlTracer struct {    tracer trace.Tracer}var _ interface {    graphql.HandlerExtension    graphql.ResponseInterceptor    graphql.FieldInterceptor} = &graphqlTracer{}func NewGraphQLTracer(tracer trace.Tracer) graphql.HandlerExtension {    return &graphqlTracer{        tracer: tracer,    }}func (t graphqlTracer) ExtensionName() string {    return "GraphQLTracer"}func (t graphqlTracer) Validate(_ graphql.ExecutableSchema) error {    return nil}func (t graphqlTracer) InterceptResponse(    ctx context.Context,    next graphql.ResponseHandler,) *graphql.Response {    oc := graphql.GetOperationContext(ctx)    if oc.Operation.Name == "IntrospectionQuery" {        return next(ctx)    }    q := strings.Split(oc.RawQuery, " ")[0]    ctx, span := t.tracer.Start(ctx, q+":"+oc.OperationName, trace.WithSpanKind(trace.SpanKindServer))    defer span.End()    if !span.IsRecording() {        return next(ctx)    }    span.SetAttributes(        attribute.Key("request.query").String(oc.RawQuery),    )    res := next(ctx)    if res == nil {        return res    }    if len(res.Errors) > 0 {        span.SetStatus(codes.Error, res.Errors.Error())        span.RecordError(fmt.Errorf(res.Errors.Error()))        err := res.Errors[0]        span.SetAttributes(attribute.Key("error.message").String(err.Message))    }    return res}func (t graphqlTracer) InterceptField(    ctx context.Context,    next graphql.Resolver,) (interface{}, error) {    oc := graphql.GetOperationContext(ctx)    if oc.Operation.Name == "IntrospectionQuery" {        return next(ctx)    }    fc := graphql.GetFieldContext(ctx)    ctx, span := t.tracer.Start(ctx,        fc.Field.ObjectDefinition.Name+"/"+fc.Field.Name,        trace.WithSpanKind(trace.SpanKindServer),    )    defer span.End()    if !span.IsRecording() {        return next(ctx)    }    span.SetAttributes(        attribute.Key("resolver.path").String(fc.Path().String()),        attribute.Key("resolver.object").String(fc.Field.ObjectDefinition.Name),        attribute.Key("resolver.field").String(fc.Field.Name),        attribute.Key("resolver.alias").String(fc.Field.Alias),    )    argKV := []attribute.KeyValue{}    for _, arg := range fc.Field.Arguments {        if arg.Value != nil {            argKV = append(argKV, attribute.Key(fmt.Sprintf("resolver.args.%s", arg.Name)).String(arg.Value.String()))        }    }    if len(argKV) > 0 {        span.SetAttributes(argKV...)    }    res, err := next(ctx)    if err != nil {        span.SetAttributes(attribute.Key("error.message").String(err.Error()))    }    errList := graphql.GetFieldErrors(ctx, fc)    if len(errList) != 0 {        span.SetStatus(codes.Error, errList.Error())        span.RecordError(fmt.Errorf(errList.Error()))        err := errList[0]        span.SetAttributes(attribute.Key("error.message").String(err.Message))    }    return res, err}実装は、これで完了。後は実際にGraphQLを実行すると以下のように、Cloud Traceで表示される。複数Queryを実行した際にボトルネックになっている箇所などがわかりやすくなり、運用しやすくなった。

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

opentelemetry-goとGCPでパフォーマンス解析

- Cloud Runの紹介 - GAE→Cloud Runへの移行 - Cloud Run Jobsの紹介

Cloud Runの紹介

サーバーのログの出力を見直したので記載PRgithub.com実装ログの実装にはzapを導入。github.com以下みたいな感じでログ出力が可能。logger, _ := zap.NewProduction()defer logger.Sync()logger.Info("failed to fetch URL",  zap.String("url", url),  zap.Int("attempt", 3),  zap.Duration("backoff", time.Second),)memoirではGCPを使用しているので、ログはCloud Loggingのフォーマットで出力できるように以下のように修正。■usecase/logger/model.govar logLevelSeverity = map[zapcore.Level]string{    zapcore.DebugLevel:  "DEBUG",    zapcore.InfoLevel:   "INFO",    zapcore.WarnLevel:   "WARNING",    zapcore.ErrorLevel:  "ERROR",    zapcore.DPanicLevel: "CRITICAL",    zapcore.PanicLevel:  "ALERT",    zapcore.FatalLevel:  "EMERGENCY",}func EncodeLevel(l zapcore.Level, enc zapcore.PrimitiveArrayEncoder) {    enc.AppendString(logLevelSeverity[l])}func newProductionEncoderConfig() zapcore.EncoderConfig {    cfg := zap.NewProductionEncoderConfig()    cfg.TimeKey = "time"    cfg.LevelKey = "severity"    cfg.MessageKey = "message"    cfg.EncodeLevel = EncodeLevel    cfg.EncodeTime = zapcore.RFC3339NanoTimeEncoder    return cfg}func newProductConfig() zap.Config {    cfg := zap.NewProductionConfig()    cfg.Level.SetLevel(zap.ErrorLevel)    cfg.EncoderConfig = newProductionEncoderConfig()    return cfg}func New(ctx context.Context) *zap.Logger {    cfg := newProductConfig()    logger, _ := cfg.Build()    return logger}上記で設定することで、以下のようにログを出力できるlog := logger.New(ctx)log.Error("graphql error", zap.Error(e))今回はさらに、Requestに紐づくログを追えるようにしたかったので、以下を参考にさらに処理を追加した。dev.toCloud Runで紐づくRequestとログを紐付けるには、ヘッダーのX-Cloud-Trace-Contextを使用する必要があるので、以下のMiddlewareを作成。■ usecase/logger/middleware.gopackage loggerimport (    "context"    "net/http"    "regexp")var TraceCtxKey = &contextKey{"trace"}type contextKey struct {    name string}type Trace struct {    TraceID string    SpanID  string    Sampled bool}func Middleware() func(http.Handler) http.Handler {    return func(next http.Handler) http.Handler {        return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {            header := r.Header.Get("X-Cloud-Trace-Context")            if len(header) > 0 {                traceID, spanID, sampled := deconstructXCloudTraceContext(header)                t := &Trace{                    TraceID: traceID,                    SpanID:  spanID,                    Sampled: sampled,                }                ctx := context.WithValue(r.Context(), TraceCtxKey, t)                r = r.WithContext(ctx)            }            next.ServeHTTP(w, r)        })    }}var reCloudTraceContext = regexp.MustCompile(    // Matches on "TRACE_ID"    `([a-f\d]+)?` +        // Matches on "/SPAN_ID"        `(?:/([a-f\d]+))?` +        // Matches on ";0=TRACE_TRUE"        `(?:;o=(\d))?`)func deconstructXCloudTraceContext(s string) (traceID, spanID string, traceSampled bool) {    matches := reCloudTraceContext.FindStringSubmatch(s)    traceID, spanID, traceSampled = matches[1], matches[2], matches[3] == "1"    if spanID == "0" {        spanID = ""    }    return}func ForContext(ctx context.Context) *Trace {    raw, _ := ctx.Value(TraceCtxKey).(*Trace)    return raw}上記のMiddlewareで取得したX-Cloud-Trace-Contextをパースで保持。以下で、ログ出力時にlogger.Withで設定することで、アクセス毎のログ出力を追うことが可能になる。■usecase/logger/model.gofunc New(ctx context.Context) *zap.Logger {    cfg := newProductConfig()    logger, _ := cfg.Build()    trace := ForContext(ctx)    if trace != nil {        fields := zapdriver.TraceContext(trace.TraceID, trace.SpanID, trace.Sampled, os.Getenv("GCP_PROJECT_ID"))        logger = logger.With(fields...)    }    return logger}上記を実装して実際にCloud Loggingで確認すると以下のように出力される。Cloud Loggingのアクセスログのtraceの値から一致するエントリを表示させるとRequestに紐づくログを出力することができる。これでやりたいことの実装は完了。ただし、このままだと1点だけ問題があり、ローカル開発時に出力されログが以下のように見辛くなってしまう。なので、以下のようにローカル時にログの出力する形式を変更するように修正。■usecase/logger/model.gofunc newDevelopmentConfig() zap.Config {    cfg := zap.NewDevelopmentConfig()    cfg.EncoderConfig.EncodeLevel = zapcore.CapitalColorLevelEncoder    cfg.Level.SetLevel(zap.InfoLevel)    return cfg}func New(ctx context.Context) *zap.Logger {    if os.Getenv("APP_ENV") == "local" {        cfg := newDevelopmentConfig()        logger, _ := cfg.Build()        return logger    }    cfg := newProductConfig()    logger, _ := cfg.Build()    trace := ForContext(ctx)    if trace != nil {        fields := zapdriver.TraceContext(trace.TraceID, trace.SpanID, trace.Sampled, os.Getenv("GCP_PROJECT_ID"))        logger = logger.With(fields...)    }    return logger}これでローカル開発時のログ出力は以下のようになり、視認性が上がった。

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

Goのデバッグツールが導入していなかったので追加した。PRgithub.com導入まずは、デバッグツールのdelveを導入するgithub.com以下のコマンドを実行。$ go install github.com/go-delve/delve/cmd/dlvこれで、dlvのコマンドが使用できるようになる。$ dlv versionDelve DebuggerVersion: 1.8.3次にVSCodeにGo for Visual Studio Codeをインストール。marketplace.visualstudio.comこれでVSCodeに実行とデバッグのメニューが追加されるので、次はデバッグツールのconfigファイルを追加。■ .vscode/launch.json{  "version": "0.2.0",  "configurations": [    {      "name": "Remote",      "type": "go",      "request": "attach",      "mode": "remote",      "remotePath": "",      "port": 2345,      "host": "localhost",      "cwd": "${workspaceRoot}",      "env": {},      "args": []    }  ]}launch.jsonの詳細は、こちらを参照最後にairのconfigファイルを修正。■ .air.tomlroot = "."tmp_dir = "tmp"[build]  bin = "./tmp/main"  cmd = "go build -gcflags \"all=-N -l\" -o ./tmp/main ."  delay = 1000  exclude_dir = ["assets", "tmp", "vendor", "node_modules", ".expo-shared"]  exclude_file = []  exclude_regex = []  exclude_unchanged = false  follow_symlink = false  full_bin = "dlv --listen=:2345 --headless=true --api-version=2 --accept-multiclient exec --continue tmp/main"  include_dir = []  include_ext = ["go", "tpl", "tmpl", "html"]  kill_delay = "0s"  log = "build-errors.log"  send_interrupt = false  stop_on_error = true[color]  app = ""  build = "yellow"  main = "magenta"  runner = "green"  watcher = "cyan"[log]  time = false[misc]  clean_on_exit = false修正的にはcmdとfull_binを修正。これでローカル環境を起動して、VSCodeからデバッグを実行。APIを実行すると、以下の通りブレークポイントが有効になり、変数の中身が確認できるようになる。これでデバッグツールが使用できるようになった。

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

Denoの紹介

1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。詳しい開発のログは以下のスクラップにまとめています 👌https://zenn.dev/wheatandcat/scraps/78d2c5aa4c9435 リリースしたアプリダウンロードはこちら。■ iOShttps://apps.apple.com/jp/app/memoir/id1613532672■ Androidhttps://play.google.com/store/apps/details?id=com.wheatandcat.memoir LPサイトhttps://memoi...

【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた

Prismaを試してみた

CSSのclip-pathの紹介

React Native製、予定作成アプリ「ペペロミア」を公開しました以前記事にしたペペロミアが公開してから1年経ったので振り返りも兼ねて記事にまとめてみました。個人プロダクトのアーキテクトと…

React Nativeで作ったアプリをリリースしてから1年経ったので振り返ってみる

以前Qiitaで紹介したアプリペペロミアにダークモードを実装してみたので、実装方法について紹介します。■ React Native製、予定作成アプリ「ペペロミア」を公開しましたhttps://q…

React Native製の公開しているアプリにダークモードを実装してみた

以前、「React Native製、予定作成アプリ「ペペロミア」を公開しました」の記事を投稿しましたが、その続編です。■React Native製、予定作成アプリ「ペペロミア」を公開しましたht…

エンジニアでも出来る！Figmaを使って自作アプリをリニューアル

個人で開発していたアプリがApple StoreとGoogle Play Storeで公開するまでいけたので、公開までの話を紹介していきます。ソースコードをGitHubで公開しているので、興味…