wheatandcat

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の紹介

概要memoirのサーバーではGAEを使用していたが、以下を考慮してCloud Runに移行したので記事にしました。GAE/GOだと現状 1.16までしかサポートしていないので1.18以降の機能が使用できないmemoirのサービスのアクセス傾向だとApp EngineのよりCloud Runのような課金タイプの方が運用コストが下がりそうPRgithub.comCloud Runとはcloud.google.comコンテナを直接実行できるマネージド コンピューティング プラットフォームで、スケーリングも自動で行ってくれる。実装デプロイするまでCloud Runでは以下の2つの方法でコンテナイメージの作成が可能。Dockerfile を使用するBuildpacks を使用する今回は単純にGoを動かすだけなので、Buildpacksを使用して実装。buildpacks.ioBuildpacksは、ソースコードから読み取りベストプラクティスに則ってDockerfileを書かずにイメージを生成してくれるツールで、現状だと以下のプラットフォームで対応している。GoNode.jsPythonJava.NET Core以下のコマンドを実行してイメージを作成$ gcloud builds submit --pack image=IMAGE_URL上記で、GCPのArtifact Registryにイメージが作成されるので、以下のコマンドでCloud Runにデプロイ。$ gcloud run deploy $SERVICE_NAME \          --project=$PROJECT_ID \          --image=$IMAGE_URL \          --region=$REGION上記のみでデプロイは出来た。環境変数の設定cloud.google.com環境変数の設定は、コンソールから設定可能。また、環境変数で機密情報を設定する場合はSecret Managerの値をマウントして使用することを推奨している。実装方法は以下を参照。cloud.google.com継続的デプロイの方法継続的なデプロイは、GitHub Actionsを使用して実装。最終的に以下のコードで自動化できた。■ .github/workflows/deploy_review.ymlname: Deploy Reviewon:  push:    branches:      - mainenv:  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:    runs-on: ubuntu-latest    permissions:      contents: read      id-token: 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:${{ github.sha }}    - name: Deploy to Cloud Run      run: |-        gcloud run deploy $SERVICE_NAME \          --project=$PROJECT_ID \          --image=asia.gcr.io/$PROJECT_ID/$SERVICE_NAME:${{ github.sha }} \          --region=$REGION \          --service-account=github-actions@$PROJECT_ID.iam.gserviceaccount.com \          --allow-unauthenticated以下を参考に実装しました。zenn.devこれで一通り実装完了。来週ストアに公開して、どのくらい運用コストが変わるか検証予定。

GAE→Cloud Runに移行

前回記事で、EAS Buildを試したので引き続きで、EAS Submitの方も実装してみたので記事にしました。www.wheatandcat.mePRgithub.com実装EAS Submitを使用するとEAS Buildから、そのままApple Store/Google Playへのアップロードまで自動で行えるようになる。docs.expo.dev以下、必要な修正。Androidまず、ストアのアップロードに必要なサービスアカウントが必要になるので以下の手順を元に作成。github.com次にeas.json に以下を設定■ eas.json{  "cli": {    "version": ">= 0.52.0"  },  {    ...(略)  }  "submit": {    "production": {      "android": {        "serviceAccountKeyPath": "./****.json",        "track": "internal"      }    }  }}submit.production.androidに先程作成したサービスアカウントのjsonを設定すればOK。iOS以下に沿って必要なデータを取得。docs.expo.dev次にeas.json に以下を設定■ eas.json{  "cli": {    "version": ">= 0.52.0"  },  {    ...(略)  }  "submit": {    "production": {      "ios": {        "appleId": "*****",        "ascAppId": "*****",        "appleTeamId": "*****"      }    }  }}実行上記の設定を追加後に以下のコマンドを実行でデプロイ & ストアのアップロードができる。$ eas build --profile=production  --platform all --non-interactive --auto-submit --no-wait

ExpoでEAS Submitを使用してみる

memoirでEAS Buildを試してみた。実際にやってみたら結構ハマりどころがあったので記事にした。PRgithub.comEAS Buildとはdocs.expo.devEAS BuildはExpoの提供しているクラウドのビルド環境で、こちらを使用することでビルドの速度アップ、Hermes Engineを有効化 や Storeに直接アップロード 等が可能になる。代わりに環境変数や一部の設定が従来のexpo buildとは異なるため、ハマったポイントを以下にまとめた。実装docs.expo.devEAS Buildは上記を参考に実装。以下のコマンドでconfigファイルを作成。$ eas build:configureconfigファイルを作成した状態で以下のコマンドを実行でEAS Buildを実行。$ eas build --profile production以下、ビルドが成功するまで対応した内容を記載。①. EAS Buildの環境変数の設定方法expo buildではprocess.envで環境変数にアクセスできたが、 EAS Buildではapp.config.tsのextraを使用して環境変数を設定する実装に変更。docs.expo.dev以下のように app.config.tsを修正■ app.config.tsexport default ({ config }: ConfigContext): ExpoConfig => ({  ...config,  extra: {    API_HOST: process.env.API_HOST,    FIRE_BASE_API_KEY: process.env.FIRE_BASE_API_KEY,    FIRE_BASE_AUTH_DOMAIN: process.env.FIRE_BASE_AUTH_DOMAIN,    FIRE_BASE_PROJECT_ID: process.env.FIRE_BASE_PROJECT_ID,    FIRE_BASE_STORAGE_BUCKET: process.env.FIRE_BASE_STORAGE_BUCKET,    FIRE_BASE_MESSAGING_SENDER_ID: process.env.FIRE_BASE_MESSAGING_SENDER_ID,    FIRE_BASE_APP_ID: process.env.FIRE_BASE_APP_ID,    FIRE_BASE_MEASUREMENT_ID: process.env.FIRE_BASE_MEASUREMENT_ID,    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,    EXPO_GOOGLE_CLIENT_ID: process.env.EXPO_GOOGLE_CLIENT_ID,    ANDROID_GOOGLE_CLIENT_ID: process.env.ANDROID_GOOGLE_CLIENT_ID,実際にコードで使用する場合は、expo-constantsを使用して値を参照する。import Constants from 'expo-constants';export const firebaseConfig = {  apiKey: Constants.manifest?.extra?.FIRE_BASE_API_KEY,  authDomain: Constants.manifest?.extra?.FIRE_BASE_AUTH_DOMAIN,  projectId: Constants.manifest?.extra?.FIRE_BASE_PROJECT_ID,  storageBucket: Constants.manifest?.extra?.FIRE_BASE_STORAGE_BUCKET,  messagingSenderId: Constants.manifest?.extra?.FIRE_BASE_MESSAGING_SENDER_ID,  appId: Constants.manifest?.extra?.FIRE_BASE_APP_ID,  measurementId: Constants.manifest?.extra?.FIRE_BASE_MEASUREMENT_ID,};上記を設定した上で以下のコマンドでEAS Buildの環境変数を設定。$ eas secret:create project  API_HOST *****設定した環境変数は以下で確認可能。$ eas secret:listこれでEAS Buildで環境設定の値を使用可能になる。②. ビルドに必要なファイルが、EAS Buildのサーバーにアップロードされない実際EAS Buildを実行したところ、必要なファイルが存在せずにエラーになった。原因は以下の通りgithub.comデフォルトでは.gitignoreに設定されているファイルはアップロードされないようになっている。.easignoreを追加すると、こちらの設定が優先されてアップロードするファイルを制御できる。memoirでは以下を設定した。■ .easignorenode_modules/**/*.expo/*npm-debug.**.orig.*web-build/web-report/# macOS.DS_Store# Project.tmp/*.env③.EAS Buildでgoogle-services.jsonとGoogleService-Info.plistが見つからないEAS Buildでgoogle-services.jsonとGoogleService-Info.plistが見つからない状態になったが、以下にpathを変更したら直った。■ app.config.tsexport default ({ config }: ConfigContext): ExpoConfig => ({  （略）     ios: {        googleServicesFile: './GoogleService-Info.plist'  // './ios/GoogleService-Info.plist' だと見つからないエラーになる     },     android: {        googleServicesFile: './google-services.json'　 // './android/google-services.json' だと見つからないエラーになる     }})google-services.jsonとGoogleService-Info.plistはカレントのディレクトリに置くのが正解（っぽい？）。④. Buildに成功してPlay Storeにアップロードするとフィンガープリントが違うのエラーが表示Buildに成功してPlay Storeにアップロードすると以下のエラーが発生。こちらは既にリリース済みのアプリをEAS Buildに移行した場合のみ発生するエラー。対応方法は、以下の通りでcredentialsの情報をlocalで設定するように変更すればOK。docs.expo.devまず、credentialsに必要な情報を以下のコマンドで取得する# 以下のコマンドでiOSのファイル、プロビジョニングファイル、androidのkeystorePassword、keyAlias、keyPasswordを取得$ expo credentials:manager# 以下のコマンドでiOSの証明書のパスワード$ expo fetch:ios:certs# 以下のコマンドでandroidのkeystoreを取得$ expo fetch:android:keystore上記で取得した情報を元にcredentials.jsonを作成する■ credentials.json{  "android": {    "keystore": {      "keystorePath": "android/keystores/release.keystore",      "keystorePassword": "*******",      "keyAlias": "*******",      "keyPassword": "*******"    }  },  "ios": {    "provisioningProfilePath": "ios/certs/profile.mobileprovision",    "distributionCertificate": {      "path": "ios/certs/dist-cert.p12",      "password": "*******"    }  }}これでEAS Buildで生成したら無事アップロードに成功した。まとめ上記の対応でEAS Buildを使用できる状態になった。次回はEAS Buildのsubmitを使用して直接ストアにアップロードできるようにしていく予定です。docs.expo.dev

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

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週間を振り返えるアプリを本気で開発してみた

memoirのアプリ公開前にシナリオテストの実施をしたかったので、Qaseを使用してテストの管理を行ってみた。Qaseとはqase.ioシナリオテストの管理ツール。qase.io実施まず、プロジェクトを作成してリリースまでに必要なシナリオテストを作成していく。今回は大まかに以下のテストケースを追加して検証した。ログインタスクマイページ共有メンバー振り返り振り返り通知設定達成したタスクを検索メンテナンス強制アップデートテストはケースは以下のように入力して作成していく。シナリオテストの作成が完了したら、Test Runsの項目から実施するテスト項目を選択して、Start Runを実行。テストがOKだったらPassed、NGだったらFailed、他にもBlockやSkippedが存在するので場合によって選択していく。Failedの場合は、以下のようにNG理由を記載して保存。最終的にテストが完了すると以下のように結果は確認できるようになる。また、テスト結果は以下のようにCSVやPDFでも出力可能。https://github.com/wheatandcat/memoir/files/8596985/MEMOIR-Test%2Brun%2B2022_04_30.pdfこの方式でリリーステストを行いNGがあったらissue化していく流れで対応した。github.comもうアプリの申請まで通っているので、アプリの方は今週中に公開予定です。

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

本番アプリの検証中に見つけた不具合の対応を記載PRgithub.com対応TextInputにautoFocusを設定しても反応しない事象が発生。原因は以下の通り。github.com内容的にはReact Navigation で画面遷移した先の画面でTextInputにautoFocusを設定してもキーボードが表示されない状態になっている。色々試してみたが、今の所 setTiemOutを仕込む以外に対応方法がなかったので、以下のCustom Hooksを作成。■ src/hooks/useAutoFocusInput.tsximport { useRef } from 'react';import { TextInput } from 'react-native';import { useFocusEffect } from '@react-navigation/native';export default function useAutoFocusInput(autoFocus: boolean) {  const ref = useRef<TextInput>(null);  const timeout = useRef<number | null>(null);  useFocusEffect(() => {    if (autoFocus) {      timeout.current = Number(setTimeout(() => ref.current?.focus(), 300));    }    return () => {      if (timeout.current) {        clearTimeout(timeout.current);      }    };  });  return {    ref,    autoFocus: false,  };}画面のフォーカスのイベント発生時から、setTimeoutでTextInputのフォーカスを実行するCustom Hooksを作成して、以下の通りに使用。■ src/components/atoms/TextInput/TextInput.tsximport React from 'react';import {  TextInput as RNTextInput,  TextInputProps,} from 'react-native';import useAutoFocusInput from 'hooks/useAutoFocusInput';type Props = TextInputProps;const TextInput: React.FC<Props> = (props) => {  const autoFocusProps = useAutoFocusInput(props.autoFocus || false);  return (      <RNTextInput        {...props}        {...autoFocusProps}        placeholderTextColor={theme().color.base.main}        style={style}        autoCapitalize="none"      />  );};これで画面開いた時にキーボード表示がされるようになった。setTimeoutは使いたくなかったが、現状これしか対応方法が無さ気だったので 😓、こちらで対応 。

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

Prismaに触れる機会があったので紹介リポジトリgithub.comスライド speakerdeck.comPrismaとは？Node.js製のORMRDB周りの処理を簡易に扱えるようにするSchemaファイルから型情報を自動生成以下のDB対応をサポートPostgreSQL、MySQL、SQL Server、SQLite、MongoDBwww.prisma.io試してみたモチベーションCRUD系のAPI開発は、ほぼ単純作業的に実装していることが多いので、Prismaみたいな自動生成してくる系のORMで実装すると、どのくらい工数が削減できるのか知りたかったので調査してみた。サンプルを作ってみる以下のチュートリアルをベースに、どんな感じで実装するのか試してみる。www.prisma.ioCLIツールで初期設定以下のコマンドを実行することで初期設定を行なう。$ npx prisma init以下のファイルが自動生成される。.├── .env└── prisma    └── schema.prismaDBの接続設定.envファイルにDBの接続情報を設定■ .envDATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"DBのテーブル設定PrismaではSchemaファイルを修正することでマイグレーションファイルを生成して実行していく。■ prisma/schema.prismamodel Post {  id        Int      @default(autoincrement()) @id  createdAt DateTime @default(now())  updatedAt DateTime @updatedAt  title     String   @db.VarChar(255)  content   String?  published Boolean  @default(false)  author    User     @relation(fields: [authorId], references: [id])  authorId  Int}model User {  id      Int      @default(autoincrement()) @id  email   String   @unique  name    String?  posts   Post[]}上記のファイルを作成後に以下のコマンドを実行する。$ npx prisma migrate dev --name initSchemaファイルを元に以下のSQLファイルを生成する■ prisma/migrations/20220321025430_init/migration.sql-- CreateTableCREATE TABLE "Post" (    "id" SERIAL NOT NULL,    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,    "updatedAt" TIMESTAMP(3) NOT NULL,    "title" VARCHAR(255) NOT NULL,    "content" TEXT,    "published" BOOLEAN NOT NULL DEFAULT false,    "authorId" INTEGER NOT NULL,    CONSTRAINT "Post_pkey" PRIMARY KEY ("id"));-- CreateTableCREATE TABLE "User" (    "id" SERIAL NOT NULL,    "email" TEXT NOT NULL,    "name" TEXT,    CONSTRAINT "User_pkey" PRIMARY KEY ("id"));-- CreateIndexCREATE UNIQUE INDEX "User_email_key" ON "User"("email");-- AddForeignKeyALTER TABLE "Post" ADD CONSTRAINT "Post_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;テーブル作成から外部キーの生成まで作成されたSQLファイルが生成され、上記のファイルを元にマイグレーションが実行される。Prisma Clientからデータを取得以下のファイルを作成することでユーザーデータを取得可能。import {PrismaClient} from "@prisma/client";const prisma = new PrismaClient()async function main() {  const allUsers = await prisma.user.findMany()  console.log(allUsers)}main()  .catch((e) => {    throw e  })  .finally(async () => {    await prisma.$disconnect()  })以下のコードの部分がデータの取得部分になる。  const allUsers = await prisma.user.findMany()www.prisma.ioその他のDBアクセスは以下のような書き方で実装できる。条件に一致するデータを1件抽出  const user = await prisma.user.findUnique({      where: {        id:1,      }  })条件に一致するデータ抽出( id >= 20 )  const users = await prisma.user.findMany({    where: {      AND :{        id: { gte: 20 }      }    }  })リレーションのSQLの発行を含める/含めない  const users = await prisma.user.findMany({    include: {      posts: false,    },  })sort & selectの指定  const users = await prisma.user.findMany({    select: {      email: true,    },    orderBy: [      {        name: 'desc',      },    ],  })Transaction & Rollbackの設定async function transfer(from: string, to: string, amount: number) {  return await prisma.$transaction(async (prisma) => {    const sender = await prisma.account.update({      data: { balance: { decrement: amount } },      where: { email: from },    })    if (sender.balance < 0) {      throw new Error(`${from} doesn't have enough to send ${amount}`)    }    const recipient = prisma.account.update({      data: {        balance: { increment: amount },      },      where: { email: to },    })    return recipient  })}その他の設定SQLの発行のログを見たい以下のようにクライアントにオプションを設定する。const prisma = new PrismaClient({    log: ["query"],})実行すると以下のログが出力される。prisma:query BEGINprisma:query INSERT INTO "User" ("email","name") VALUES ($1,$2) RETURNING "User"."id"prisma:query INSERT INTO "Post" ("createdAt","updatedAt","title","published","authorId") VALUES ($1,$2,$3,$4,$5) RETURNING "Post"."id"prisma:query SELECT "User"."id", "User"."email", "User"."name" FROM "User" WHERE "User"."id" = $1 LIMIT $2 OFFSET $3prisma:query COMMITprisma:query SELECT "User"."id", "User"."email", "User"."name" FROM "User" WHERE 1=1 OFFSET $1prisma:query SELECT "Post"."id", "Post"."createdAt", "Post"."updatedAt", "Post"."title", "Post"."content", "Post"."published", "Post"."authorId" FROM "Post" WHERE "Post"."authorId" IN ($1) OFFSET $2Prisma Studio以下のコマンドを実行するとDBの状態をブラウザからGUIで確認/操作ができる。$ npx prisma studio各DBシステムでサポートしているので、お手軽にDBの中身を操作したい際に使用する。GraphQLとの親和性GraphQLとの相性は良さそう。実際の親和性の話しに関しては以下の参考記事を参照。GraphQLと相性の良いORM Prisma。Apollo ServerとPrismaではじめるGraphQL API開発入門まとめ調査した感じ結構良い気がしたので、どこかで使ってみようかと思います。async/awaitやPromiseを多く記載する必要が合ったりして個人的には余り好きではないのでDenoとかで使えたら良いなあと思ったりした。

Prismaを試してみた

GraphQLではエラーになった場合でも http status 200にしてGraphQLのレスポンスをエラーにして、エラーメッセージを返すのが一般的にである。ただ、それだと特定のエラーの場合のみフロントエンド側でハンドリングしたい時に不便だなと感じていた。そこで調べた所、GraphQLでは、extensionsを使用してエラーの情報を返すのが正しいようなので、そちらを実装してみた。PRbackendgithub.comアプリgithub.com実装extensionsは以下を参考に実装した。techblog.zozo.com実装は、extensionsに定義したエラーコードを返すようにして、frontend側でハンドリングする方式で対応する。まずは、backend側から実装。エラーコードの定義追加。■ usecase/custom_error/code.gopackage custom_errorconst (    CodeDefault = "-1"    // バリデーションエラー    CodeValidation = "000001"    // 無効な認証    CodeInvalidAuthorization = "000002"    // Not Found    CodeNotFound = "000003"    // Already Exists    CodeAlreadyExists = "000004"    // 自身の招待コード    CodeMyInviteCode = "000005")エラーコードを設定するメソッドを追加。■usecase/custom_error/error.gotype RequestError struct {    Code    string    Message string}func (re RequestError) Error() string {    return re.Message}func NewRequestError(code string, message string) error {    return RequestError{Code: code, Message: message}}上記でエラーコードの設定まで完了したので、GraphQLのエラーハンドリングにextensionsの情報を追加。■ app.go   srv := handler.NewDefaultServer(generated.NewExecutableSchema(generated.Config{Resolvers: resolver}))    srv.SetErrorPresenter(func(ctx context.Context, e error) *gqlerror.Error {        err := graphql.DefaultErrorPresenter(ctx, e)        goc := graphql.GetOperationContext(ctx)        errorCode := ce.CodeDefault        var re ce.RequestError        if errors.As(e, &re) {            errorCode = re.Code        }        err.Extensions = map[string]interface{}{            "code": errorCode,        }        return err    })上記を追加してエラーになるRequestを送信すると、画像のようにextensionsにエラーコードの情報が追加される。これでbackend側の対応は完了したので、次はfrontend側の対応を行う。■ src/lib/error.tsconst CodeDefault = '-1' as const;// バリデーションエラーconst CodeValidation = '000001' as const;// 無効な認証const CodeInvalidAuthorization = '000002' as const;// Not Foundconst CodeNotFound = '000003' as const;// Already Existsconst CodeAlreadyExists = '000004' as const;// 自身の招待コードconst CodeMyInviteCode = '000005' as const;export const errorCode = {  CodeDefault,  CodeValidation,  CodeInvalidAuthorization,  CodeNotFound,  CodeAlreadyExists,  CodeMyInviteCode,};GraphQLのエラーハンドリングに、extensionsからエラーコードを取得する処理を追加。■ src/lib/apollo.ts  const errorLink = onError((error) => {    if ((error.graphQLErrors || []).length > 0) {      const graphQLErrors = error.graphQLErrors || [        {          message: 'エラー発生しました',          extensions: { code: errorCode.CodeDefault },        },      ];      const code = graphQLErrors[0]?.extensions?.code ?? errorCode.CodeDefault;上記でエラーコードの取得まで完了したので、それに合わせてエラー表示の部分を改修。これでエラーコード毎の判定が行えるようになった。

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

memoirのLPサイトのデザインでCSSのclip-pathを使用してみた感じ結構良さ気だったのでサンプルリポジトリを作成してみたので紹介リポジトリgithub.com紹介以下で紹介用のサイトとスライドを作成した。■URLhttps://try-css.vercel.app/■スライド speakerdeck.comCSSのclip-pathを使用することで、要素をトリミングして、様々な形状に変更することが可能になります。developer.mozilla.org使い方としては、以下のようにclip-pathをしていすると、.triangle {  background-color: #fff;  width: 10rem;  height: 10rem;  clip-path: polygon(0 100%, 50% 0, 100% 100%);}要素を、以下の画像のように三角形にトリミングできる。clip-pathに以下のパラメータを設定できる。  値    内容    inset    四角形を設定    circle    丸を設定    ellipse    楕円を設定    polygon    多角形を設定  これを使用してサンプルを色々作ってみた。サンプル週斜め線を使用したデザインhttps://try-css.vercel.app/clippath/sectionカードにリボンをつけるhttps://try-css.vercel.app/clippath/ribbonclip-pathでボタンにアニメーションをつけるhttps://try-css.vercel.app/clippath/buttonマウスホイールさせるアニメーションするclip-pathで画像を切り抜くhttps://try-css.vercel.app/clippath/imageclip-pathを使ってデザインしてみる以下を参考にミニチュアのデザインを作成してみた。coliss.comhttps://try-css.vercel.app/clippath/screenまとめIE11でサポートされていないので、そこだけ注意が必要だけど、斜めを使用するデザインを1つのcssだけで表現できるので、便利だなと感じた。

CSSのclip-pathの紹介

以下のdocsifyで開発ドキュメントの管理を行なう①: 基礎構成の記事の続きです。docsifyで開発ドキュメントの管理を行う① - ペペロミア & memoir開発ブログ以下に記載している内容をドキュメント化して実際の開発フローにのせる運用をやってみた。開発手順のドキュメント化memoirでの開発手順を以下でドキュメント化した。https://wheatandcat.github.io/memoir-handbook/#/guide/02-work-procedure詳細な内容は上記に記載しているので、大枠のフローのみ以下に記載。memoir-handbookにissueを作成Architecture Decision Recordsにフォーマットでissueの内容を記載作成したissueのIDを元にブランチを作成issueの内容に沿ってmemoir-handbookを更新開始開発側のリポジトリにissueを作成4.の修正をmemoir-handbookにPull Request作成 & マージ開発開始7.の開発中に4.との整合性が取れなくなった場合は都度 Pull Request & マージ7.の開発が完了docs/adr配下にissueの内容をリポジトリに保存実際に以下のissueで上記のフローを使用して開発を行なったので、そちらを元に解説。github.com1. memoir-handbookにissueを作成memoir-handbookのリポジトリにissueを作成する。今回は、タイトルを達成したタスクを検索する機能に設定してissueを作成。2.Architecture Decision Recordsにフォーマットでissueの内容を記載作成したissueの本文をArchitecture Decision Records（※以下ADR）のフォーマットに合わせて作成する。ADRについては以下の記事を参考。アーキテクチャに関するドキュメントの残しかた - ADRとARCHITECTURE.md テンプレートアーキテクチャの「なぜ？」を記録する！ADRってなんぞや？adr.github.io今回は、ADRのフォーマットに沿って以下のようにissueの本文を修正した。## ステータス提案済## 文脈、背景や問題点の説明1年の終りに年間の振り返りができるようにしたい。現状、週1回の振り返りのみ実行できる構成になっているが、年末や、季節の終りなどの特定のタイミングに絞って振り返りがしたいと思うときがある。そこで、**達成したタスクを検索する機能**の実装を検討する。## 決定menuに**達成したタスクを検索**の項目を追加する。<br/>以下の項目を入力して検索ができる - 開始日時、終了日時 - 共有メンバー（複数選択が可能） - タスクカテゴリー（複数選択が可能） - Good、Badこの機能は、ログイン後のみ使用できる## 考慮した選択肢 - 振り返り画面に絞り込みのアイコンを追加する   - 季節末や年末にしか利用されない想定の機能なので、普段使用する手順に作用しないように実装した方が良さそうなので不採用 -  各検索項目を4ステップに分けて入力させる   - 入力の分かりやすさを考慮して以下の画面遷移で入力させる事も考えたが、分かりやすさより、入力の手間のデメリットを考慮して不採用にした     - ステップ1/4: 開始日時、終了日時     - ステップ2/4: 共有メンバー     - ステップ3/4: タスクカテゴリー     - ステップ4/4: Good、Bad## 決定結果 - メリット   - 1週間の振り返り以外のタイミングでも振り返りが行える  - デメリット   - なし 3. 作成したissueのIDを元にブランチを作成以下のドキュメントに沿ってブランチ名を作成する。https://wheatandcat.github.io/memoir-handbook/#/guide/02-work-procedure?id=ブランチ名の設定今回は、以下のURLでissueを作成したので、18-search-task でブランチを作成。https://github.com/wheatandcat/memoir-handbook/issues/184. issueの内容に沿ってmemoir-handbookを更新開始作成したissueの内容に沿ってHandbookを更新を開始する。今回修正したHandbookのPRは以下の通りです。https://github.com/wheatandcat/memoir-handbook/pull/21/files以下が上記の修正で作成されたHandbookのページです。達成したタスクを検索する機能5. 開発側のリポジトリにissueを作成Handbookで作成したドキュメント & issueの情報を元に開発側のissueを作成 & 開発の設計を行う。今回は、上記のissueから以下の開発issueを作成。【backend】達成したタスクを検索する機能【アプリ】達成したタスクを検索する機能6. 4.の修正をmemoir-handbookにPull Request作成 & マージmemoir-handbookで作成したブランチの修正のPull Requestを作成してmainブランチにマージする。7. 開発開始5.で作成したissueの開発を開始する。8. 7.の開発中に4.との整合性が取れなくなった場合は都度 Pull Request & マージ実際に開発している中で、4.との整合性が取れなくなった場合は都度ブランチを作成してHandbookを更新する。（以降9.まで4.〜8.の繰り返しで進める）今回は、以下のbackendの開発中にFirestoreでは同じQuery内でINを複数設定できない仕様があり、それが原因で現状カテゴリー検索項目を複数件指定できないことが判明した。【backend】達成したタスクを検索する機能なので、4の工程に戻り、issueの本文とHandbookに以下を追記した。■ issueの本文## 決定menuに**達成したタスクを検索**の項目を追加する。<br/>以下の項目を入力して検索ができる - 開始日時、終了日時 - 共有メンバー（複数選択が可能） - タスクカテゴリー（複数選択は不可能）  // ← 複数選択は可能から、複数選択は不可能に修正 - Good、Badこの機能は、ログイン後のみ使用できる## 考慮した選択肢 - タスクカテゴリーの複数選択を可能にする   // ← 追加   - Firestoreのwhere句でIN条件を複数指定する事ができなかったので、複数選択を1つのみにする ■ Handbookの更新: docs/functions/memoir/02-search.md## 検索項目|  項目名  | 内容  | 入力 || ---- | ---- | ---- ||  開始日  | 検索する達成したタスクが発生した開始日 | 日付 ||  終了日  | 検索する達成したタスクが発生した終了日 | 日付||  共有メンバー  | 検索する共有メンバーを選択する | 複数選択 ||  カテゴリー  | 検索する達成したタスクのカテゴリーを選択する | １つ選択 |  // ← 追加|  Good  | 達成したタスクが良い出来事を検索する | ON/OFF ||  Bad  | 達成したタスクが悪い出来事を検索する | ON/OFF |9. 7.の開発が完了8まで仕様のすり合わせが完了している状態で開発が完了してissueはCloseする。その際に、issueの本文のステータス項目を承認済に修正する。10. docs/adr配下にissueの内容をリポジトリに保存docs/adr配下にissueの内容を保存する。https://wheatandcat.github.io/memoir-handbook/#/adr/index今回は、 達成したタスクを検索する機能のissueの対応なので、上記の通り追加して以下のページを作成した。https://wheatandcat.github.io/memoir-handbook/#/adr/01-search-tasksこれで開発の一通りのフローは完了です。機能的には以下のようになった。www.youtube.com運用ポリシーの追加運用してみて、必要な項目を以下のページにまとめた。https://wheatandcat.github.io/memoir-handbook/#/guide/04-policy詳細な内容は上記に記載しているので、ポリシーの項目のみ以下に記載。機能開発はHandbookの開発の手順の通りに進行する保守すべきドキュメントはHandbookのみとして、常にHandbookは最新の状態を保つ陳腐化しやすい情報は記載せず、仕様はすべて文章化する重複した内容を記載しない機能設計のドキュメントには必ず "目的" の項目を記載する積極的にMarkdownの表現を使用する単語集/画面名に記載している単語を積極的に使用するまとめ実際にフローの通り開発してみたログとして記事を作成した。開発の目的や判断の履歴が残ることで、機能拡張の時の思想のブレが減りそうだなと思った。しばらく、このフローで開発を行なって見るのでナレッジが溜まったら、また記事にしようと思います。

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

www.wheatandcat.me↑で開発ドキュメントを管理するサイトを作成したが、その際に編集履歴の画面が欲しいと思ったので、zxを使用して実装してみた。PRgithub.com実装開発ドキュメントを管理するサイトとして以下を実装した。wheatandcat.github.ioドキュメントを管理するうえで編集履歴が見れるほうが、直近の修正を確認したいときに便利だろうと考え実装を検討した。最初は以下の既存のCHANGE_LOG.mdの生成ツールを使用を検討したが、もっと簡素な作りにしたかったので不採用にした。conventional-changeloggithub-changelog-generator作成したい内容はgit logの情報を元に日付ごとにログ情報をまとめて表示したいだけだったので、zxを使用して自作で実装することにした。github.comzxはGoogleが開発しているJavaScriptが書けるシェルツール。■ smaple.mjs#!/usr/bin/env zxlet count = parseInt(await $`ls -1 | wc -l`)console.log(`Files count: ${count}`);上記のコードを実行するとFiles count  xx とファイルを数を出力できる。今回はgit logのコマンドを実行し、その情報をフォーマットしてCHANGE_LOG.mdのファイルを出力したいだけなので、実装は以下のようになった。■ changeLog.mjs#!/usr/bin/env zxlet log = String(  await $`git log HEAD --pretty=format:"%H | %cd | %s" --no-merges`);let logValue = log.split("\n");const value = logValue.map((v) => {  const data = v.split(" | ");  const date = new Date(data[1]);  return {    commit: data[0],    date: `${date.getFullYear()}-${("00" + (date.getMonth() + 1)).slice(-2)}-${(      "00" + date.getDate()    ).slice(-2)}`,    title: data[2],  };});const items = [];for (var i = 0; i < value.length; i++) {  const item = value[i];  const isSameDate = items.find((v) => v.date === item.date);  if (isSameDate) {    isSameDate.items.push(item);  } else {    items.push({      date: item.date,      items: [item],    });  }}let text = "# 編集履歴 \n";for (var i = 0; i < items.length; i++) {  const item = items[i];  text += `\n## ${item.date} \n`;  for (var l = 0; l < item.items.length; l++) {    const data = item.items[l];    text += ` - [${data.title}](https://github.com/wheatandcat/memoir-handbook/commit/${data.commit}) \n`;  }}fs.writeFileSync("./docs/CHANGE_LOG.md", text);上記を作成して以下のコマンドで実行する。$ zx ./changeLog.mjsコマンド実行で以下のファイルが出力される。 - docs/CHANGE_LOG.md上記のファイルを画面から確認すると以下の通りである。https://wheatandcat.github.io/memoir-handbook/#/CHANGE_LOGこれで作りたかった画面は作成できた。

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

LPサイトのお問い合わせフォームのバリデーションを作成する時に使ってみた組み合わせを紹介PRgithub.comfrontendのバリデーションを実装以下を使用してバリデーションを実装formikyupyupでは、バリデーションを以下のように実装できる。import * as yup from "yup";const schema = yup.object().shape({    name: yup.string().required("名前の入力は必須です").max(100, "名前は最大100文字までです"),    email: yup.string().required("Emailの入力は必須です").email("メールアドレスの形式になっていません"),});const request =  async() => {  const value = {    name: "",    email: "test@gmail.com"  }  try {     await schema.validate(value);  } catch(e) {     console.log(err.errors); // ["名前の入力は必須です"]  }}ただのバリデーションだったらyupでも簡単に実装可能だが、フォームに以下のようなエラー表示の実装をしようと思うとyupだけだとerrorをstateで管理しないと実装できない。そこでフォームの値の管理とバリデーションを同時に行うためにformikを使用した。formik.orgformikはReact Hooksを使用して以下のように実装できるimport { useFormik } from "formik";import * as yup from "yup";import "react";type State = {    name: string;    email: string;};const initialState = (): State => {    return {        name: "",        email: "",    };};const schema = yup.object().shape({    name: yup.string().required("名前の入力は必須です").max(100, "名前は最大100文字までです"),    email: yup.string().required("Emailの入力は必須です").email("メールアドレスの形式になっていません"),});const Form = () => {    const formik = useFormik<State>({        initialValues: initialState(),        validationSchema: schema,        onSubmit: (values) => {            console.log(values)        },    });    return (         <form onSubmit={formik.handleSubmit}>           <input             type="text"             id="name"             name="name"             onChange={formik.handleChange}            />           {formik.touched.name && formik.errors.name ? (             <div>{formik.errors.name}</div>           ) : null}           <input             type="text"             id="email"             name="email"             onChange={formik.handleChange}            />           {formik.touched.email && formik.errors.email ? (             <div>{formik.errors.email}</div>           ) : null}           <button type="submit">送信</button>         </form>             )}上記でフォームの値管理とバリデーションが行えた。あとはcssを整えて以下のように実装■ components/organisms/Contact/Form.tsximport { useFormik } from "formik";import { useRouter } from "next/router";import { memo, useState, useCallback } from "react";import * as yup from "yup";type State = {    name: string;    email: string;    body: string;};const initialState = (): State => {    return {        name: "",        email: "",        body: "",    };};type Request = {    body: string;    name: string;    email: string;    env: string;    userID: string;    device: string;    category: string;};const schema = yup.object().shape({    name: yup.string().required("名前の入力は必須です").max(100, "名前は最大100文字までです"),    email: yup.string().required("Emailの入力は必須です").email("メールアドレスの形式になっていません"),    body: yup.string().required("本文の入力は必須です").max(2000, "本文は最大2000文字までです"),});const url = process.env.NEXT_PUBLIC_INQUIRY_API || "";const Form = () => {    const router = useRouter();    const [loading, setLoading] = useState(false);    const formik = useFormik<State>({        initialValues: initialState(),        validationSchema: schema,        onSubmit: (values) => {            postInquiry(values);        },    });    const postInquiry = useCallback(        async (values: State) => {            const userAgent = navigator.userAgent.toLowerCase();            setLoading(true);            const req: Request = {                body: values.body,                name: values.name,                email: values.email,                userID: "",                env: "LPサイト",                device: userAgent,                category: "LPお問い合わせ",            };            const response = await fetch(url, {                method: "POST",                headers: {                    "Content-Type": "application/json",                },                body: JSON.stringify(req),            });            setLoading(false);            if (!response.ok) {                alert("送信に失敗しました");                return;            }            router.push(`/thanks?name=${values.name}`);        },        [router]    );    return (        <form onSubmit={formik.handleSubmit}>            <div className="flex z-10 flex-col justify-center items-center py-3 md:py-16 my-3">                <div className="mb-0 md:mb-6 text-3xl leading-snug text-center">お問い合わせ</div>                <br />                <div className="mr-4">                    <div className="flex items-center my-5">                        <div className="mr-2 md:mr-5 w-10 text-right">名前</div>                        <div className="w-80 md:w-96">                            <input                                className="py-2 px-3 w-full leading-tight rounded border shadow appearance-none"                                type="text"                                id="name"                                name="name"                                aria-label="name"                                onChange={formik.handleChange}                            />                            {formik.touched.name && formik.errors.name ? (                                <div className="text-sm text-red-600">{formik.errors.name}</div>                            ) : null}                        </div>                    </div>                    <div className="flex items-center my-5">                        <div className="mr-2 md:mr-5 w-10 text-right">Email</div>                        <div className="w-80 md:w-96">                            <input                                className="py-2 px-3 w-full leading-tight rounded border shadow appearance-none "                                type="text"                                id="email"                                name="email"                                aria-label="email"                                onChange={formik.handleChange}                            />                            {formik.touched.email && formik.errors.email ? (                                <div className="text-sm text-red-600">{formik.errors.email}</div>                            ) : null}                        </div>                    </div>                    <div className="flex my-5">                        <div className="mt-1 mr-2 md:mr-5 w-10 text-right">本文</div>                        <div className="w-80 md:w-96">                            <textarea                                className="py-2 px-3 w-full leading-tight rounded border shadow appearance-none "                                rows={8}                                id="body"                                name="body"                                aria-label="body"                                onChange={formik.handleChange}                            />                            {formik.touched.body && formik.errors.body ? (                                <div className="text-sm text-red-600">{formik.errors.body}</div>                            ) : null}                        </div>                    </div>                </div>                <div className="flex justify-center items-center mb-10 md:mb-20 ml-8">                    <button                        type="submit"                        disabled={loading}                        className="py-2 px-4 w-40 font-bold text-white-300 bg-secondary-600 hover:bg-blue-700 rounded-xl disabled:opacity-50 cursor-pointer"                    >                        送信                    </button>                </div>            </div>        </form>    );};export default memo(Form);これでfrontend側の実装は完了した。backnedのバリデーションを実装backnedのバリデーションはozzo-validationを使用した。github.comコードの書き方は上記で紹介したyupと近い感じで以下のようにして実装できるpackage postInquiryimport (    "context"    "net/http"    "os"    "time"    validation "github.com/go-ozzo/ozzo-validation"    "github.com/go-ozzo/ozzo-validation/v4/is")type Request struct {    Body     string `json:"body"`    Name     string `json:"name"`    Email    string `json:"email"`}func (r Request) Validate() error {    return validation.ValidateStruct(&r,        validation.Field(            &r.Name,            validation.Required.Error("名前の入力は必須です"),            validation.RuneLength(1, 100).Error("名前は最大100文字までです"),        ),        validation.Field(            &r.Email,            validation.Required.Error("Emailの入力は必須です"),            validation.RuneLength(1, 200).Error("ールアドレスは最大200文字までです"),            is.Email.Error("メールアドレスを入力して下さい"),        ),        validation.Field(            &r.Body,            validation.Required.Error("本文の入力は必須です"),            validation.RuneLength(1, 2000).Error("本文は最大2000文字までです"),        ),    )}func PostInquiry(w http.ResponseWriter, r *http.Request) {    var req Request    if err := json.NewDecoder(r.Body).Decode(&req); err != nil {        http.Error(w, err.Error(), http.StatusInternalServerError)        return    }    if err := req.Validate(); err != nil {        http.Error(w, err.Error(), http.StatusInternalServerError)        return    }上記を実装してエラーになるRequestパラメータでアクセスすると以下のエラーになる。これでbackendのバリデーションの実装も完了した。

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

プロジェクトの開発規模が大きくなってくると設計書の可視化が必要になってくる。どう管理するか検討した結果、GitLabのHandbookのガイドを参考にするのが良いと思い、開発ドキュメントのWebサイトを作成した。about.gitlab.comリポジトリgithub.com開発ドキュメントのWebサイトmemoir-handbook-dot-memoir-review.an.r.appspot.com調査最初は以下の4つの方向性で設計書の可視化を検討した①. Design Doc②. Architecture Decision Records③. Wikiにまとめる④. Git管理したWebサイトを作成する①のDesign Docや②のArchitecture Decision Records（ADR）は必要な情報を漏らさず記録する重要なドキュメンテーションのテクニックである。候補としては、③ or ④の選択があったが、調査中に見つけたGitLab HandbookのWiki handbooks don't scaleの項目を読み、about.gitlab.com運用ルールを定めてGitでWebサイトを管理することで、上記の①、②の要素を含んだドキュメント管理が行えると思い、④で実装する決定をした。実装GitLab Handbookのガイドを参考に実装about.gitlab.comGitLab Handbookのガイドの以下を参考にしたWhy handbook firstSingle Source of TruthWiki handbooks don't scaleドキュメンテーションの参考以下を参考にしたChromium ProjectsのDesign Documentsデザインドックで学ぶデザインドックユビーが長期に渡ってソフトウェアを進化させ続けるためのドキュメンテーションプラクティスゆめみオープン・ハンドブック使用したツール一覧以下を使用してWebサイトを作成docsifytextlintdocsifydocsify.js.orgドキュメント静的サイトジェネレーター。ビルド不要で表示できる。また、プラグインを導入することで様々な拡張が行える。Full text searchサイト内のフルテキスト検索が行えるdocsify-copy-codeコードブロックにコピーボタンを追加docsify-edit-on-githubwebページから直接GitHubの編集画面に遷移できる他にも、docusaurus も候補として挙がっていたが、こちらはオールインワンで初めから全ての機能を持っている反面、docusaurusの機能を把握して編集を行う必要があったので、今回は気軽に扱えるdocsifyを採用した。textlintgithub.comtextlintは文章を設定したルールに沿って記載しているか判定してくれるlinterです。様々なtextlintルールが存在するが、今回は以下の記事を参考にSmartHRが公開しているプリセットを、そのまま採用した。shanaiho.smarthr.co.jptextlintをGitHub ActionsでPush毎にチェックする運用にしている。ドキュメントの内容サイドメニューの構成サイドメニューの構成は以下の通りHandbookの編集ガイド誰でも編集が可能なようにガイドを記載■ Handbookを編集するhttps://memoir-handbook-dot-memoir-review.an.r.appspot.com/#/guide/01-local記事の内容は以下を参考に作成about.gitlab.comGitLabだとWeb IDEがあるのかーと思い移行するか悩んだが、GitHubでもCodespacesみたいな感じでVSCodeで直接修正できるようになる可能性もあるかなと思い、今回はGitHubのまま実装した。単語集主に以下の用途で記事を作成プロジェクト特有の固有名詞を記載表記ゆれの対策■ 単語集https://memoir-handbook-dot-memoir-review.an.r.appspot.com/#/word各機能の設計各機能の設計を記載達成したタスクログイン招待機能共有メンバー振り返り機能通知各通知の設計を記載Push通知一覧運用ステージング環境と本番環境開発ドキュメントのWebサイトには、ステージング環境と本番環境 が存在する。  環境   ステージング環境   本番環境   デプロイタイミング    mainブランチにマージされたとき   GitHubのtagをPushしたとき   記載内容    リリース予定の機能も記載される   リリースされている機能のみ記載される   URL    https://wheatandcat.github.io/memoir-handbook/#/   https://memoir-handbook-dot-memoir-review.an.r.appspot.com/#/ ■ ステージング環境と本番環境の運用ルールhttps://memoir-handbook-dot-memoir-review.an.r.appspot.com/#/guide/index?id=ステージング環境と本番環境の運用ルール今後の新規機能の開発フロー新規機能の開発フローは改めてドキュメントに記載する予定だが、現状は以下を想定している。①. 新規機能を検討②. memoir-handbookにissueを作成して機能の設計をADRで記載③. memoir-handbookでブランチを作成、②のissueの内容で修正してPull Requestを作成④. ③のPull Requestを元に各開発リポジトリにissueを作成⑤. ④のissue作成の設計を進めて③の整合性を確認して、必要があれば修正。問題が無ければ③をmainブランチにマージしてステージング環境に反映⑥. ④のissueの開発を行う⑦. ⑥で③との整合性が取れなくなった場合は都度修正⑧. ④のissueの開発が完了⑨. ③の機能がリリースされたタイミングでmemoir-handbookのtagを新規に作成して、本番環境に反映まとめ個人開発だとドキュメンテーションは手を抜くことが多かった。ただ、今までの経験だと後々後悔する事が多かったので、今回は初めから開発フローにドキュメンテーションまで含める運用にしてみた。後は運用してみて改善していく予定なので情報が溜まったら、また記事にしようと思います。

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

管理するメンバーが増える & 複数のRepositoryに跨ったプロジェクトだったりするとissueのアサインに時間が掛かることがあるので、特定の記事をモンハンのクエストボードみたいに見立てて、そこから自分に合ったissueを引き受けるような仕組みを作ると楽そうだなと思い以下のスクリプトを作成PRgithub.comgithub.com実装大まかな実装は以下の通りCloud Functions のPub/Subを作成GitHub AppsからTokenを取得GItHub APIから以下の条件でissueを抽出アサイン募集中のラベルが設定されている誰もアサインされていない上記のissueを抽出してテキストを作成作成テキストをKibela  APIを使用して記事を更新上記のCloud FunctionsをCloud Scheduleで定期実行させるまず、以下の記事を参考にGitHub Appsの作成zenn.dev作成したGitHub Appsから以下を取得 - Installation ID → GitHub Appsのinstall Appの画面のURLから値を確認できる - GitHub App ID - GitHub AppのPrivate keysを作成Private keysはprivate-key.pemにファイル名を変更してカレントのフォルダに配置して以下のコマンドで環境変数を設定export GITHUB_APP_PRIVATE_KEY=$(cat private-key.pem)export GITHUB_APP_ID=*****export INSTALLATION_ID=*****以下のコードでGitHub APIのトークンを取得できる■ postAssignableIssues/function.gofunc PostAssignableIssuesPubSub(ctx context.Context, m *pubsub.Message) error {    InstallationID, err := strconv.Atoi(os.Getenv("INSTALLATION_ID"))    if err != nil {        return err    }    githubAppID := os.Getenv("GITHUB_APP_ID")    appID, err := strconv.ParseInt(githubAppID, 10, 64)    if err != nil {        return err    }    key := os.Getenv("GITHUB_APP_PRIVATE_KEY")    tr := http.DefaultTransport    itr, err := ghinstallation.New(tr, appID, int64(InstallationID), []byte(key))    if err != nil {        return err    }    token, err := itr.Token(ctx)トークンを使用してGitHub APIを実行するGitHub APIでは、以下のGraphQLでアサイン募集中のラベルが設定されていて、アサインの無いissueを抽出できるquery Repository($owner: String!, $name: String!) {  repository(owner: $owner, name: $name) {    issues(first: 100, states: [OPEN], labels: ["アサイン募集中"], orderBy: {field: CREATED_AT, direction: DESC}, filterBy: {assignee: null}) {      nodes {        id        title        url      }    }  }}このGraphQLを使用してissueを抽出してテキストを作成する実装コードは以下のファイルを参照https://github.com/wheatandcat/work-tools/blob/fa47608521ed19c9a97ea5d28a0c58bc832c72bb/postAssignableIssues/issue.goさらに、ここに以下の設定したラベル毎にカテゴリーに分けて表示する実装を追加  ラベル名    内容    RFP    Request For Proposalの略。問題を記載しているのでプロポーザルを記載して全体に共有する   ドキュメンテーション    ドキュメントにまとめて共有する   設計前    機能の設計書を作成する   運用改善   運用改善系/効率化の対応 上記のラベルが無い場合は開発issueの項目に表示される実装コードは以下のファイルを参照github.comこのコードで生成されるテキストが以下の通り※表示の元になっているissueは、こちら### ■ tool-test #### ドキュメンテーション - [06_アサイン募集中_ドキュメンテーション](https://github.com/wheatandcat/tool-test/issues/6)#### RFP - [05_アサイン募集中_ RFP](https://github.com/wheatandcat/tool-test/issues/5)#### 開発issue - 【v1.0.0】[07_アサイン募集中_マイルストーン設定](https://github.com/wheatandcat/tool-test/issues/7) - [02_アサイン募集中](https://github.com/wheatandcat/tool-test/issues/2) - [01_アサイン募集中](https://github.com/wheatandcat/tool-test/issues/1)上記のテキストを使用してKibela APIから記事の更新を行うKibela APIについては以下を参照github.comKibela APIはGraphQLで実装されているので、以下のQueryで記事の内容の取得query Note($id: ID!) {  note(id: $id) {    id    title    url    content  }}以下のMutationで記事の更新が行えるmutation UpdateNoteContent($input: UpdateNoteContentInput!) {  updateNoteContent(input: $input) {    clientMutationId    note {      id      content    }  }}上記のGraphQLを使用して記事を更新すると以下のような内容で記事が更新されるここまでで記事の更新は完了なので、次はCloud Functionを以下のコマンドでデプロイする$ gcloud functions deploy PostAssignableIssuesPubSub --set-env-vars GITHUB_APP_PRIVATE_KEY=$GITHUB_APP_PRIVATE_KEY,GITHUB_APP_ID=$GITHUB_APP_ID,GITHUB_OWNER=$GITHUB_OWNER,INSTALLATION_ID=$INSTALLATION_ID,NOTE_TOKEN=$NOTE_TOKEN,NOTE_ID=$NOTE_ID,NOTE_HOST=$NOTE_HOST --runtime go116 --trigger-resource post_assignable_issues --trigger-event google.pubsub.topic.publish --region asia-northeast1以下でデプロイされているのを確認最後に上記のCloud FunctionをCloud Scheduleのジョブに追加ターゲットタイプをPub/Subでトピックを上記のCloud Functionに設定して追加上記の設定で定期的にCloud Functionを実行して記事の更新がされるようになる以上で実装完了。もし同じような問題をプロジェクトで抱えていたら、こんな方法で自動化できるかもという話でした。

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

開発中のアプリのスライドを作成する機会があったのでスライドの作り方を調査してみた。調べた感じ、今はSlidevちうツールがよく使われているみたいなので、こちらを使用してスライドを作ってみた。作成したスライドの情報■ GitHubhttps://github.com/wheatandcat/memoir-document■  Speaker Deck speakerdeck.com■ webhttps://vigilant-hamilton-f30a56.netlify.app/1作成Slidevを使用してスライドを作成sli.devSlidevはVite、Vue3、WindiCSSを用いて開発されたスライド作成ツールで、Markdown + Vueの記法でスライドを作成する事が可能になっている。コードでスライドを生成しているのでGitHubでスライドを管理できる。$ yarn create slidevこれで、http://localhost:3030で起動してスライド確認できる。slides.mdを修正してスライドの内容を修正していく。上記のようにスライドの同ページ内で動かしたい場合は、v-clickを使用する。■ slides.md---clicks: 3---# どんな感じで開発を始めたか ①<div class="text-sm">担当: wheatandcat</div><div class="relative">    <div class="absolute top-0 left-0 right-0 bottom-0 w-80">      <p class="text-base font-700">①.ラフで画面構成を作成</p>      <img        class="h-30"        src="/create_01.png"      />    </div>    <div v-click="1" class="absolute top-0 left-90 bottom-0 w-80">      <p class="text-base font-700">②.Figmaで仮デザイン作成</p>      <img        class="h-30"        src="/create_02.png"      />    </div>    <div v-click="2" class="absolute top-50 left-0 bottom-0 w-80">      <p class="text-base font-700">③.仮のデザインガイドラインを作成</p>      <img        class="h-30"        src="/create_03.png"      />    </div>    <div v-click="3" class="absolute top-65 left-115 bottom-0 w-80 h-25 border-3 border-gray-700 border-dotted rounded-lg">      <p class="text-lg font-700 pt-5 pl-4 text-gray-700">ここまで出来たらデザイナーに渡す</p>    </div></div><arrow v-click="1" x1="280" y1="205" x2="400" y2="205" color="#46AE35" width="3" arrowSize="1" /><arrow v-click="2" x1="400" y1="260" x2="300" y2="325" color="#46AE35" width="3" arrowSize="1" /><arrow v-click="3" x1="280" y1="430" x2="500" y2="430" color="#46AE35" width="3" arrowSize="1" />---v-click=nでn回目のclickで表示するか制御v-click="1" こんな感じスライドは作成できる。Slidevは様々な形式で出力が可能Speaker Deckにアップロードする場合はPDFになるので、以下のコマンドで生成$ yarn slidev export --with-clicksまた、デプロイしてHostingする事も可能。以下のドキュメントに沿ってNetlifyにデプロイsli.dev以下のファイルを作成して、Netlify側に設定してGitHubにPushでデプロイ完了■netlify.toml[build.environment]  NODE_VERSION = "14"[build]  publish = "dist"  command = "npm run build"[[redirects]]  from = "/*"  to = "/index.html"  status = 200こんな感じでスライドは完成。GitHubでスライドが管理できて良いと思った。

Slidevでスライドを作る

開発ログ - https://zenn.dev/wheatandcat/scraps/78d2c5aa4c9435

振り返りアプリを作ってみた話

概要タイトルの通りだが、react-native-view-shotに不具合があり、iOSで8200pxを超える画像をキャプチャする真っ白の画像になってしまっていた。github.comnative側の修正が必要なので、Expoでは修正不可能だなーとなっていたのを力技で解決したので、それについて記事にした。PR■ アプリgithub.com■ 画像を結合するAPIgithub.com実装事象は概要の通りで、このままだとiOSで長いキャプチャを作成する事ができないので対応。native実装側の不具合なので、Expoで修正することは難しいので初めは以下の方法を考えた①. react-native-view-shotを分割して画像を作成②.アプリ側で画像を結合して共有するしかし、調査した結果Expoを使用した上タウでアプリ側で画像を結合する手段は無さそうだったので、最終的に以下の実装方法に変更①.react-native-view-shotを分割して画像を作成②.分割した画像を圧縮してFirebase Storageにアップロード③.圧縮した画像を結合してバイナリを返すAPIにRequestして結合した画像を取得④.③でダウンロードした画像を共有するまず、画像を結合してバイナリを返すAPIをCloud Functionsで作成。sharpを使用して実装。www.npmjs.comAPIのコードは以下の通り■ MargeImages/index.jsconst sharp = require("sharp");const axios = require("axios");const imageHost = process.env.IMAGE_HOST;const imageParam = process.env.IMAGE_PARAM;const getImageData = async (url) => {  const response = await axios.get(url, {    responseType: "arraybuffer",  });  const buffer = Buffer.from(response.data, "utf-8");  const image = await sharp(buffer);  const r = await image.metadata();  const buf = await image.toBuffer();  return {    width: r.width,    height: r.height,    buf,  };};const margeImage = async (urlList) => {  let images = [];  for (let i = 0; i < urlList.length; i++) {    const image1 = await getImageData(`${imageHost}${urlList[i]}${imageParam}`);    images.push(image1);  }  let totalTop = 0;  const height = images.map((v) => v.height).reduce((a, x) => (a += x), 0);  const buf = await sharp({    create: {      width: images[0].width,      height: height,      channels: 4,      background: { r: 255, g: 255, b: 255, alpha: 0 },    },  })    .composite(      images.map((v, i) => {        if (i > 0) {          totalTop += images[i - 1].height;        }        return {          input: v.buf,          gravity: "northwest",          left: 0,          top: totalTop,        };      })    )    .toFormat("png")    .toBuffer();  return buf;};exports.margeImage = async (req, res) => {  const param = req.query.images;  const urlList = param.split(",");  const buf = await margeImage(urlList);  res.status(200).send(buf);};sharpのcompositeを使用することで画像の結合が行える。inputに画像のbuffer、topに結合する高さ（結合前の画像のheight）を指定すればOK。  const buf = await sharp({    create: {      width: images[0].width,      height: height,      channels: 4,      background: { r: 255, g: 255, b: 255, alpha: 0 },    },  })    .composite(      images.map((v, i) => {        if (i > 0) {          totalTop += images[i - 1].height;        }        return {          input: v.buf,          gravity: "northwest",          left: 0,          top: totalTop,        };      })    )    .toFormat("png")    .toBuffer();これで画像を結合するAPIは完成。 react-native-view-shotのキャプチャ分割を実装■ src/components/organisms/Memoir/ScreenShot.ios.tsxconst ScreenShot: React.FC<Props> = (props) => {  const { env } = useConfig();  const viewShot1 = useRef<ViewShot>(null);  const viewShot2 = useRef<ViewShot>(null);  const viewShot3 = useRef<ViewShot>(null);  const viewShot4 = useRef<ViewShot>(null);  const viewShot5 = useRef<ViewShot>(null);...略）  const sliceItemCount = Math.floor(getData().length / 20) + 1;  const items: RenderedItem[][] = [];  for (let i = 0; i < sliceItemCount; i++) {    const target = i * 20;    items.push(getData(onLoadEnd).slice(target, target + 20));  }  const getViewShotRef = (key: number) => {    switch (key) {      case 0:        return viewShot1;      case 1:        return viewShot2;      case 2:        return viewShot3;      case 3:        return viewShot4;      case 4:        return viewShot5;      default:        return viewShot1;    }  };  return (    <>      <ScrollView style={styles.root}>        {items.map((item, key) => {          const ref = getViewShotRef(key);          return (            <ViewShot ref={ref} options={{ format: 'jpg' }} key={key}>              <RNView style={styles.inner}>                {key === 0 && (                  <Header                    startDate={props.startDate}                    endDate={props.endDate}                    isTitle                  />                )}                {item.map((v, index) => {                  return <RenderItem {...v} key={`${key}_${index}`} />;                })}              </RNView>            </ViewShot>          );        })}      </ScrollView>      {!loading && <Loading text="作成中" />}    </>  );};以下でのキャプチャした画像をFirebase StorageにUpload、画像のパスを画像結合APIにリクエストし、画像をダウンロードして共有する■ src/components/organisms/Memoir/ScreenShot.ios.tsx  const onCapture = useCallback(async () => {    const urlList: string[] = [];    const deleteImageURL: string[] = [];    for (let i = 0; i < sliceItemCount; i++) {      const ref = getViewShotRef(i);      const url = await ref.current?.capture?.();      const uri = await resizeImage(url || '');      const uploadURL = await uploadImageAsync(uri, `public/${uuidv4()}`);      const u = uploadURL        .replace(process.env.STORAGE_URL || '', '')        .split('?')[0];      urlList.push(u);      deleteImageURL.push(uploadURL);    }    const param = urlList.join(',');    const fileName = `${dayjs(props.startDate).format('YYYYMMDD')}_${dayjs(      props.endDate    ).format('YYYYMMDD')}_memoir`;    const res = await FileSystem.downloadAsync(      `${process.env.IMAGE_MERGE_API}?images=${param}`,      `${FileSystem.documentDirectory}${fileName}.png`    );    for (let i = 0; i < deleteImageURL.length; i++) {      await deleteImageAsync(deleteImageURL[i]);    }    if (res.uri) onShare(res.uri);  }, [onShare, env, sliceItemCount, props.startDate, props.endDate]);ここまで実装して以下のように正常な動作が確認できた。www.youtube.comまとめiOSのシミュレータだと8200px超えても正常に動作するので発見するのが遅れたかなりの力技の修正になったが、一応動作して良かった。

 react-native-view-shotを使用してiOSで8200pxを超える画像をキャプチャした時に画像が真っ白になる不具合の対応

APIのE2Eテストを実装したいなーと思い調べていたところ、以下の記事を見つけてscenarigoが、良さげだなと思ったので実装してみた。engineering.mercari.comPRgithub.com実装scenarigo実行までscenarigoはGO製のscenario-based API testingのツール。シンプルな作りで使いやすいツールだったので採用した。github.com基本的にな使い方はREADMEを参照して貰うとして、memoirで実装した部分について記載していく。scenarigoではyamlを作成し、その情報を元にE2Eテストを行う。以下のyamlファイルを作成■ e2e/scenarigo.yamlschemaVersion: config/v1scenarios:- user.yaml次に実行するE2Eテストを記載する。まずはユーザーの作成を実行する■ e2e/user.yamltitle: ユーザーsteps:- title: login  include: './login.yaml'  bind:    vars:      userToken: "{{vars.userToken}}"- title: ユーザーを作成する  protocol: http  request:    method: POST    url: "http://{{env.HOST}}/query"    header:      Authorization: "Bearer {{vars.userToken}}"      Content-Type: application/json    body:       query: |-        mutation CreateAuthUser($input: NewAuthUser!) {          createAuthUser(input: $input) {            id          }        }      variables:         input:          id: test_id          isNewUser: true  expect:    body:      data:        createAuthUser:          id: test_idscenarigoではincludeを使用することで別のyamlファイルから設定を取得できる。- title: login  include: './login.yaml'  bind:    vars:      userToken: "{{vars.userToken}}"各APIを実行するためにFirebaseのAuthトークンが必要なので、E2Eテストの実行前にAuthトークンを設定したlogin.yamlを生成する以下のスクリプトを生成して、includeするように修正。■ e2e/script/main.gopackage mainimport (    "bytes"    "context"    "encoding/json"    "fmt"    "io/ioutil"    "log"    "net/http"    "os"    firebase "firebase.google.com/go"    "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 {    UserToken string `yaml:"userToken"`}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)    }    token, err := client.CustomToken(ctx, "some-uid")    if err != nil {        log.Fatalf("error minting custom token: %v\n", err)    }    req, err := json.Marshal(map[string]interface{}{        "token":             token,        "returnSecureToken": true,    })    if err != nil {        log.Fatalf("error minting custom token: %v\n", err)    }    apiKey := os.Getenv("FIREBASE_API_KEY")    resp, err := postRequest(fmt.Sprintf(verifyCustomTokenURL, apiKey), req)    if err != nil {        log.Fatalf("error minting custom token: %v\n", err)    }    var respBody struct {        IDToken string `json:"idToken"`    }    if err := json.Unmarshal(resp, &respBody); err != nil {        log.Fatalf("error minting custom token: %v\n", err)    }    ly := LoginYaml{}    ly.Vars.UserToken = respBody.IDToken    if err := WriteOnFile("./login.yaml", ly); err != nil {        log.Fatalf("WriteOnFile: %v\n", err)    }    os.Chmod("./login.yaml", 0777)}func postRequest(url string, req []byte) ([]byte, error) {    resp, err := http.Post(url, "application/json", bytes.NewBuffer(req))    if err != nil {        return nil, err    }    defer resp.Body.Close()    if resp.StatusCode != http.StatusOK {        return nil, fmt.Errorf("unexpected http status code: %d", resp.StatusCode)    }    return ioutil.ReadAll(resp.Body)}func WriteOnFile(fileName string, data interface{}) error {    // ここでデータを []byte に変換しています。    buf, err := yaml.Marshal(data)    if err != nil {        return err    }    // []byte をファイルに上書きしています。    err = ioutil.WriteFile(fileName, buf, os.ModeExclusive)    if err != nil {        return err    }    return nil}生成されるlogin.yamlのファイルは以下の通り■ e2e/login.yamlvars:  userToken: *******************************上記のファイルを変数化することで以下のAPI実行部分で使用できる- title: ユーザーを作成する  protocol: http  request:    method: POST    url: "http://{{env.HOST}}/query"    header:      Authorization: "Bearer {{vars.userToken}}" // ← ここで使用これでAPI実行が行える状態になった。Firestoreのエミュレータを起動して接続する方式で実装。firebase.google.comまず、firestoreのエミュレータを起動のための設定ファイルを作成■ e2e/simulator/firebase.json{  "emulators": {    "firestore": {      "port": 3600    },    "ui": {      "enabled": true,      "port": 3601    }  }}以下のコマンドでエミュレータを起動$ npx firebase --config e2e/simulator/firebase.json emulators:start┌───────────┬────────────────┬─────────────────────────────────┐│ Emulator  │ Host:Port      │ View in Emulator UI             │├───────────┼────────────────┼─────────────────────────────────┤│ Firestore │ localhost:3600 │ http://localhost:3601/firestore │└───────────┴────────────────┴─────────────────────────────────┘  Emulator Hub running at localhost:4400  Other reserved ports: 4500port=3600でfirestoreが起動、3601で確認用のUIブラウザが起動http://localhost:3601/firestoreにアクセスする以下のように表示される次は、以下のコマンドでローカルサーバー起動時のfirestoreの接続先をエミュレータに変更して起動$ FIRESTORE_EMULATOR_HOST=localhost:3600 airこの状態で以下のコマンドを実行$ cd e2e$ cd go run script/main.go  // ← login.yamlを作成$ HOST=localhost:8080 scenarigo runok      user.yaml   0.278sテストが成功したので、実際にfirestoreのデータを確認すると以下の通り正しくデータが作成されているこれで正常に動作しているのが確認できた。上記ではデータ確認のためfirestoreのUIを起動したが、実際に手元でテストを実行する場合は以下のコマンドを使用すると実行時にエミュレータが起動して、終了後に停止するので便利$ px firebase --config e2e/simulator/firebase.json emulators:exec 'HOST=localhost:8080 scenarigo run'実際には、この後ユーザーの取得や更新といったテストを追加するが、この記事では、そこは省略してアイテムの作成→取得の実装を紹介scenarigoでアイテム作成→取得までの実装まず、scenarigoのconfigファイルにitem.yamlを追加■ e2e/scenarigo.yamlschemaVersion: config/v1scenarios:- user.yaml- item.yamlitem.yamlは以下の通りに作成■ e2e/item.yamltitle: アイテムsteps:- title: login  include: './login.yaml'  bind:    vars:      userToken: "{{vars.userToken}}"- title: アイテムを作成する①  bind:    vars:      itemID: "{{response.data.createItem.id}}"  protocol: http  request:    method: POST    url: "http://{{env.HOST}}/query"    header:      Authorization: "Bearer {{vars.userToken}}"      Content-Type: application/json    body:       query: |-        mutation CreateItem($input: NewItem!) {          createItem(input: $input) {            id            title            date            categoryID            like            dislike            createdAt            updatedAt          }        }      variables:         input:          title: 散歩に行った          categoryID: 1          date: 2021-01-01T00:00:00+09:00          like: true          dislike: false- title: アイテムを取得する  protocol: http  request:    method: POST    url: "http://{{env.HOST}}/query"    header:      Authorization: "Bearer {{vars.userToken}}"      Content-Type: application/json    body:       query: |-        query Item($id: ID!) {          item(id: $id) {            id            title            categoryID            date            like            dislike          }        }      variables:         id: "{{vars.itemID}}"  expect:    body:      data:        item:           id: "{{vars.itemID}}"          title: 散歩に行った          categoryID: 1          date: 2021-01-01T00:00:00+09:00          like: true          dislike: falseアイテムを作成する①のResponseで返ってくるidの値を使用して、アイテムを取得するのRequest パラメータに設定する必要がある。実装方法は以下のbind.varsにResponseで取得できる値をitemIDとして設定  bind:    vars:      itemID: "{{response.data.createItem.id}}"上記の値を以下のように使用することで、Responseで返ってくる値をRequest パラメータに設定することができる。      variables:         id: "{{vars.itemID}}"上記を実装してscenarigoを実行すると以下の通りテストは成功し、$ HOST=localhost:8080 scenarigo runok      user.yaml   0.278sok      item.yaml   0.100sアイテムのデータも正しく設定できるのを確認できた。GitHub Actionsでscenarigoを実行する最後にGitHub Actionsでのscenarigoの実行方法を紹介。■ .github/workflows/scenarigo.ymlname: e2e teston: [push]env:  FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}  SERVICE_ACCOUNT_JSON: ${{ secrets.REVIEW_SERVICE_ACCOUNT_JSON }}  GCP_SERVICE_ACCOUNT_JSON: ${{ secrets.REVIEW_GCP_SERVICE_ACCOUNT_JSON }}  APP_LOCAL_EMV: ${{ secrets.APP_LOCAL_EMV }}  ENVENB_GO: ${{ secrets.ENVENB_GO }}  AUTH_CONFIG: ${{ secrets.AUTH_CONFIG }}jobs:  e2e:    name: test    runs-on: ubuntu-latest    steps:    - name: Checkout repository      uses: actions/checkout@v2    - 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    - name: Create .env file      run: echo $APP_LOCAL_EMV | base64 --decode -i > ./.env    - name: Create envenb.go file      run: echo $ENVENB_GO | base64 --decode -i > ./envenb.go    - name: Create e2e/.env file      run: echo $AUTH_CONFIG | base64 --decode -i > ./e2e/.env    - uses: actions/setup-go@v2      with:        go-version: '^1.16'    - run: go version    - name: cache      uses: actions/cache@v2      with:        path: ~/go/pkg/mod        key: ${{ runner.os }}-memoir-backend-${{ hashFiles('**/go.sum') }}        restore-keys: |          ${{ runner.os }}-memoir-backend-    - name: Run server      run: make ci_setup_server    - name: create auth token file      run: make create_login_yaml      working-directory: ./e2e    - name: setup gcloud      uses: google-github-actions/setup-gcloud@master      with:        version: "latest"    - name: setup firestore emulator      run: |        gcloud components install beta --quiet        gcloud components install cloud-firestore-emulator --quiet    - name: setup e2e      run: |        gcloud beta emulators firestore start --host-port localhost:3600 &        go install github.com/zoncoen/scenarigo/cmd/scenarigo@v0.8.1      working-directory: ./e2e    - name: run e2e      run: make scenarigo      working-directory: ./e2efirestoreのエミュレータはgcloudコマンドからも起動可能なので、以下のコマンドで起動    - name: setup gcloud      uses: google-github-actions/setup-gcloud@master      with:        version: "latest"    - name: setup firestore emulator      run: |        gcloud components install beta --quiet        gcloud components install cloud-firestore-emulator --quiet    - name: setup e2e      run: |        gcloud beta emulators firestore start --host-port localhost:3600 &以下のコマンドでローカルサーバーを起動$ FIRESTORE_EMULATOR_HOST=localhost:3600 go run app.go &最後にscenarigoを実行    - name: setup e2e      run: |        gcloud beta emulators firestore start --host-port localhost:3600 &上記でGitHub Actionsでもscenarigoが実行できたhttps://github.com/wheatandcat/memoir-backend/runs/4055476705?check_suite_focus=trueまとめシンプルで使いやすいツールだった。シナリオテストはシステムの保守の簡易化につながるので積極的に追加していきたい

scenarigoでE2Eを実装

概要以前、sentry-goの記事でスタックトレースについて軽く触れたが、www.wheatandcat.meローカル開発中もエラー時にスタックトレースを表示したいと思い実装したら、意外と良い感じにスタックトレースを表示させるのに手間取ったので、その辺の諸々をまとめた。PRgithub.comgithub.com実装実装した時のポイントを記載①.情報量の多すぎるスタックトレースをフィルタリングするPR: https://github.com/wheatandcat/memoir-backend/pull/80スタックトレース自体はpkg/errorsの WithStackを使用すれば出力可能   cause := errors.New("whoops")    err := errors.WithStack(cause)    fmt.Printf("%+v", err)    // Example Output:    // whoops    // github.com/pkg/errors_test.ExampleWithStack_printf    //         /home/fabstu/go/src/github.com/pkg/errors/example_test.go:55    // testing.runExample    //         /usr/lib/go/src/testing/example.go:114    // testing.RunExamples    //         /usr/lib/go/src/testing/example.go:38    // testing.(*M).Run    //         /usr/lib/go/src/testing/testing.go:744    // main.main    //         github.com/pkg/errors/_test/_testmain.go:106    // runtime.main    //         /usr/lib/go/src/runtime/proc.go:183    // runtime.goexit    //         /usr/lib/go/src/runtime/asm_amd64.s:2086    // github.com/pkg/errors_test.ExampleWithStack_printf    //         /home/fabstu/go/src/github.com/pkg/errors/example_test.go:56    // testing.runExample    //         /usr/lib/go/src/testing/example.go:114    // testing.RunExamples    //         /usr/lib/go/src/testing/example.go:38    // testing.(*M).Run    //         /usr/lib/go/src/testing/testing.go:744    // main.main    //         github.com/pkg/errors/_test/_testmain.go:106    // runtime.main    //         /usr/lib/go/src/runtime/proc.go:183    // runtime.goexit    //         /usr/lib/go/src/runtime/asm_amd64.s:2086一旦、確認でmemoir-backendのコードを例に実行してみる■ repository/item.gofunc (re *ItemRepository) GetItemUserMultipleInPeriod(ctx context.Context, f *firestore.Client, userID []string, startDate time.Time, endDate time.Time, first int, cursor ItemsInPeriodCursor) ([]*model.Item, error) {    var items []*model.Item    query := f.CollectionGroup("items").Where("UserID", "in", userID).Where("Date", ">=", startDate).Where("Date", "<=", endDate).OrderBy("Date", firestore.Asc).OrderBy("CreatedAt", firestore.Asc)    if cursor.ID != "" {        ds, err := getItemCollection(f, cursor.UserID).Doc(cursor.ID).Get(ctx)        if err != nil {            return nil, err        }        query = query.StartAfter(ds)    }    matchItem := query.Limit(first).Documents(ctx)    docs, err := matchItem.GetAll()    if err != nil {                            // ↓に追加        err2 := errors.WithStack(cause)        fmt.Printf("%+v", err2)        return nil, err2    }    for _, doc := range docs {        var item *model.Item        doc.DataTo(&item)        items = append(items, item)    }    return items, nil}スタックトレースを追加した箇所でエラーになるリクエストをすると以下のスタックトレースが表示されるrunning...github.com/wheatandcat/memoir-backend/repository.(*ItemRepository).GetItemUserMultipleInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/repository/item.go:171github.com/wheatandcat/memoir-backend/graph.(*Graph).GetItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/item.go:142github.com/wheatandcat/memoir-backend/graph.(*queryResolver).ItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/schema.resolvers.go:263github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query_itemsInPeriod.func2    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:3412github.com/99designs/gqlgen/graphql/executor.processExtensions.func3    /Users/iinoyouhei/go/1.15.5/pkg/mod/github.com/99designs/gqlgen@v0.13.0/graphql/executor/extensions.go:62github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query_itemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:3410github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query.func6    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:6535github.com/99designs/gqlgen/graphql.(*FieldSet).Dispatch    /Users/iinoyouhei/go/1.15.5/pkg/mod/github.com/99designs/gqlgen@v0.13.0/graphql/fieldset.go:34github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:6605github.com/wheatandcat/memoir-backend/graph/generated.(*executableSchema).Exec.func1    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:898github.com/99designs/gqlgen/graphql/executor.(*Executor).DispatchOperation.func1.1.1    /Users/iinoyouhei/go/1.15.5/pkg/mod/github.com/99designs/gqlgen@v0.13.0/graphql/executor/executor.go:105github.com/99designs/gqlgen/graphql/executor.processExtensions.func2    /Users/iinoyouhei/go/1.15.5/pkg/mod/github.com/99designs/gqlgen@v0.13.0/graphql/executor/extensions.go:59github.com/99designs/gqlgen/graphql/executor.(*Executor).DispatchOperation.func1.1    /Users/iinoyouhei/go/1.15.5/pkg/mod/github.com/99designs/gqlgen@v0.13.0/graphql/executor/executor.go:104github.com/99designs/gqlgen/graphql/handler/transport.POST.Do    /Users/iinoyouhei/go/1.15.5/pkg/mod/github.com/99designs/gqlgen@v0.13.0/graphql/handler/transport/http_post.go:53github.com/99designs/gqlgen/graphql/handler.(*Server).ServeHTTP    /Users/iinoyouhei/go/1.15.5/pkg/mod/github.com/99designs/gqlgen@v0.13.0/graphql/handler/server.go:115github.com/go-chi/chi.(*Mux).routeHTTP    /Users/iinoyouhei/go/1.15.5/pkg/mod/github.com/go-chi/chi@v3.3.2+incompatible/mux.go:424net/http.HandlerFunc.ServeHTTP    /Users/iinoyouhei/.anyenv/envs/goenv/versions/1.15.5/src/net/http/server.go:2042github.com/wheatandcat/memoir-backend/auth.FirebaseLoginMiddleware.func1.1    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/auth/auth.go:76net/http.HandlerFunc.ServeHTTP    /Users/iinoyouhei/.anyenv/envs/goenv/versions/1.15.5/src/net/http/server.go:2042github.com/wheatandcat/memoir-backend/auth.NotLoginMiddleware.func1.1    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/auth/auth.go:30net/http.HandlerFunc.ServeHTTP    /Users/iinoyouhei/.anyenv/envs/goenv/versions/1.15.5/src/net/http/server.go:2042github.com/go-chi/chi.(*Mux).ServeHTTP    /Users/iinoyouhei/go/1.15.5/pkg/mod/github.com/go-chi/chi@v3.3.2+incompatible/mux.go:81net/http.serverHandler.ServeHTTP    /Users/iinoyouhei/.anyenv/envs/goenv/versions/1.15.5/src/net/http/server.go:2843net/http.(*conn).serve    /Users/iinoyouhei/.anyenv/envs/goenv/versions/1.15.5/src/net/http/server.go:1925runtime.goexit    /Users/iinoyouhei/.anyenv/envs/goenv/versions/1.15.5/src/runtime/asm_amd64.s:1374上記の通り大量のスタックトレースが出力されるまず、エラーを置き換える事を考慮して、以下の通りエラーをWrapする処理を作成■ usecase/custom_error/error.gopackage custom_errorimport (    "fmt"    "os"    "runtime"    "strings"    "github.com/pkg/errors")func GetCustomStackTrace(err error) errors.StackTrace {    var fs errors.StackTrace    st, ok := err.(interface{ StackTrace() errors.StackTrace })    if !ok {        return fs    }    frames := st.StackTrace()    for _, frame := range frames {        pc := uintptr(frame)        fun := runtime.FuncForPC(pc)        f, _ := fun.FileLine(pc)        // 不要なStackトレースが多すぎるのでフィルタリング        if strings.Contains(f, "memoir-backend") || strings.Contains(f, "pkg/error") {            if !strings.Contains(f, "usecase/custom_error") {                fs = append(fs, frame)            }        }    }    if os.Getenv("APP_ENV") == "local" {        // エラー出力        fmt.Printf("■ error: %+v\n", err.Error())        fmt.Printf("■ stack trace: %+v\n", fs)    }    return fs}func CustomError(err error) error {    e := errors.WithStack(err)    GetCustomStackTrace(e)    return e}func CustomErrorWrap(err error, message string) error {    e := errors.Wrap(err, message)    GetCustomStackTrace(e)    return e}上記のエラーをWrapした関数を追加import (    ce "github.com/wheatandcat/memoir-backend/usecase/custom_error")略）if err != nil {    return nil, ce.CustomError(err)}以下でスタックトレースの内容のフィルタリングを実装   var fs errors.StackTrace    st, ok := err.(interface{ StackTrace() errors.StackTrace })    if !ok {        return fs    }    frames := st.StackTrace()    for _, frame := range frames {        pc := uintptr(frame)        fun := runtime.FuncForPC(pc)        f, _ := fun.FileLine(pc)        // 不要なStackトレースが多すぎるのでフィルタリング        if strings.Contains(f, "memoir-backend") || strings.Contains(f, "pkg/error") {            if !strings.Contains(f, "usecase/custom_error") {                fs = append(fs, frame)            }        }    }自身のプロジェクト内のスタックトレース以外は、ほぼ役に立たないので除外フィルタリング処理は以下の通り自身のリポジトリ名 or pkg/errorを含む ファイルパスのみ抽出errors.WithStackを使用しているのでpkg/errorも抽出対象にしている実行箇所のファイルパスは除外usecase/custom_errorを除外しないと必ず先頭に生成箇所のスタックトレースの情報がつくので除外上記フィルタリングをして出力すると、以下の通りrunning...■ stack trace:github.com/wheatandcat/memoir-backend/repository.(*ItemRepository).GetItemUserMultipleInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/repository/item.go:171github.com/wheatandcat/memoir-backend/graph.(*Graph).GetItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/item.go:142github.com/wheatandcat/memoir-backend/graph.(*queryResolver).ItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/schema.resolvers.go:263github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query_itemsInPeriod.func2    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:3412github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query_itemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:3410github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query.func6    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:6535github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:6605github.com/wheatandcat/memoir-backend/graph/generated.(*executableSchema).Exec.func1    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:898github.com/wheatandcat/memoir-backend/auth.FirebaseLoginMiddleware.func1.1    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/auth/auth.go:76github.com/wheatandcat/memoir-backend/auth.NotLoginMiddleware.func1.1    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/auth/auth.go:30上記を内、実際に必要なスタックトレースは先頭から3番目くらいまでなので、さらにフィルタリングを追加■ usecase/custom_error/error.go   if os.Getenv("APP_ENV") == "local" {        // エラー出力        fmt.Printf("■ error: %+v\n", err.Error())        if len(fs) > 3 {              // 3番目以降のトレース情報は除外            fs = fs[:3]        }        fmt.Printf("■ stack trace: %+v\n", fs)    }これで出力すると、以下の通り、丁度良い感じのスタックトレースが表示されたrunning...■ stack trace:github.com/wheatandcat/memoir-backend/repository.(*ItemRepository).GetItemUserMultipleInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/repository/item.go:171github.com/wheatandcat/memoir-backend/graph.(*Graph).GetItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/item.go:142github.com/wheatandcat/memoir-backend/graph.(*queryResolver).ItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/schema.resolvers.go:263②.errors.WithStackする毎にスタックトレースが表示されるのを解消PR:  https://github.com/wheatandcat/memoir-backend/pull/81チーム開発で、スタックトレースを付けるべき箇所、付けなくても良い箇所を判断するのは難しいので、統一でスタックトレースを付けるようにしたい。errors.WithStackをつけるとスタックトレース時の出力が以下のようになる。running...-----------------------■ error: rpc error: code = InvalidArgument desc = 'IN' requires an non-empty ArrayValue.■ stack trace:github.com/wheatandcat/memoir-backend/repository.(*ItemRepository).GetItemUserMultipleInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/repository/item.go:170github.com/wheatandcat/memoir-backend/graph.(*Graph).GetItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/item.go:143github.com/wheatandcat/memoir-backend/graph.(*queryResolver).ItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/schema.resolvers.go:264----------------------------------------------■ error: rpc error: code = InvalidArgument desc = 'IN' requires an non-empty ArrayValue.■ stack trace:github.com/wheatandcat/memoir-backend/graph.(*Graph).GetItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/item.go:145github.com/wheatandcat/memoir-backend/graph.(*queryResolver).ItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/schema.resolvers.go:264github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query_itemsInPeriod.func2    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:3412----------------------------------------------■ error: rpc error: code = InvalidArgument desc = 'IN' requires an non-empty ArrayValue.■ stack trace:github.com/wheatandcat/memoir-backend/graph.(*queryResolver).ItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/schema.resolvers.go:266github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query_itemsInPeriod.func2    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:3412github.com/wheatandcat/memoir-backend/graph/generated.(*executionContext)._Query_itemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/generated/generated.go:3410-----------------------ちなみにSentryのスタックトレースも、以下の通り複数件のスタックトレースが出力される（pkg/errorのスタックトレースがスタックトレースの情報スタックする方式のため）全てのerrorの箇所を①の ce.CustomError(err) を使用した結果、エラーを返して受け取った先でもerrors.WithStackを実行しているので、以下の箇所のスタックトレースが出力されている◎スタックトレース①■ [https://github.com/wheatandcat/memoir-backend/blob/bd2acdfea71da778c07bc0b214578cfdedbc304b/repository/item.go#L169-L171)   matchItem := query.Limit(first).Documents(ctx)    docs, err := matchItem.GetAll()    if err != nil {        return nil, ce.CustomError(err) // ←    }    for _, doc := range docs {        var item *model.Item        doc.DataTo(&item)        items = append(items, item)    }◎スタックトレース②■ graph/item.go   items, err := g.App.ItemRepository.GetItemUserMultipleInPeriod(ctx, g.FirestoreClient, userID, input.StartDate, input.EndDate, input.First, cursor)    if err != nil {        return nil, ce.CustomError(err) // ←    }◎スタックトレース③■ graph/schema.resolvers.go   result, err := g.GetItemsInPeriod(ctx, input)    if err != nil {        return nil, ce.CustomError(err) // ←    }このままでは見づらいので、最初のerrorのみerrors.WithStackを実行 &  スタックトレースを出力するように修正■ usecase/custom_error/error.gofunc CustomError(err error) error {    // 既にスタックトレースの設定がある場合は、そのままエラーを返す    _, ok := err.(interface{ StackTrace() errors.StackTrace })    if ok {        return err    }    e := errors.WithStack(err)    GetCustomStackTrace(e)    return e}上記の修正で、既にスタックトレースが設定している場合は、errors.WithStackを実行するのをやめて、errorをそのまま返すようにした。ce.CustomErrorに変更した状態でエラーが発生してもスタックトレースは最初1つのみ出力されるようになった。running...-----------------------■ error: rpc error: code = InvalidArgument desc = 'IN' requires an non-empty ArrayValue.■ stack trace:github.com/wheatandcat/memoir-backend/repository.(*ItemRepository).GetItemUserMultipleInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/repository/item.go:170github.com/wheatandcat/memoir-backend/graph.(*Graph).GetItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/item.go:143github.com/wheatandcat/memoir-backend/graph.(*queryResolver).ItemsInPeriod    /Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/schema.resolvers.go:264-----------------------③. errors.WithStackを使用した場合は、エラーの判定時にerrors.Causeを使用する■ errors.Causeerrors package - github.com/pkg/errors - pkg.go.deverrors.Causeはerrors.WithStackでWrapされる前の状態のerrorを返す関数になっているこちらを使用しないと以下のようなコードの場合に正しくエラーハンドリングが行えない     // ↓エラーコードがNotFoundの場合     _, err := client.Collection("cities").Doc(c.id).Doc("SF").Get(ctx)    fmt.Println("status:"  status.Code(err))     // status: NotFound  正しく判定できている     err1 := errors.WithStack(err)      fmt.Println("status:"  status.Code(err1))      // status: Unknown  正しく判定できていない     fmt.Println("status:"  status.Code(errors.Cause(err1)))      // status: NotFound  正しく判定できているなので、エラー判定時は必ずerrors.Causeを使用するまとめ上記を全て実装したら、ローカル開発でのデバッグが快適になった

Goでローカル開発時に必要なスタックトレースのみ表示する

React Navigation v6がリリースされたので移行してみたreactnavigation.orgPRgithub.com実装v5→v6の移行は、以下の記事を読んで進めたhttps://reactnavigation.org/docs/upgrading-from-5.x/package.jsonを更新■ package.json    "@react-navigation/native": "^6.0.2",    "@react-navigation/stack": "^6.0.7",起動はそのまま行えたが、以下の箇所でwarning、typeエラーが発生していたので修正useNavigation、createStackNavigatorにtypeの指定が必要になったuseNavigation、createStackNavigatorにtypeを指定しないで、navigateを使用するとtypeチェックでエラーになるようになったsrc/components/organisms/SettingModal/SettingModal.tsx:32:25 - error TS2345: Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: never; key?: string | undefined; params: never; merge?: boolean | undefined; }'.32     navigation.navigate('SettingLicence');以下みたいに、typeを設定すればエラーにならなくなりますimport { RootStackParamList } from 'lib/navigation';import { RouteProp } from '@react-navigation/native';import { StackNavigationProp } from '@react-navigation/stack';import { useNavigation } from '@react-navigation/native';type ScreenNavigationProp = StackNavigationProp<  RootStackParamList,  'Home'>;type ScreenRouteProp = RouteProp<RootStackParamList, 'Home'>;export type Props = {  navigation: ScreenNavigationProp;  route: ScreenRouteProp;};const SettingModal: React.FC<Props> = (props) => {  const navigation = useNavigation<HomeScreenNavigationProp>();Stack.Groupを使用するv5までだと、各画面のまとまり毎にStack.NavigatorでWrapするような作りでしたが、v6からその作りだと以下みたいなwarningが発生するFound screens with the same name nested inside one another. Check:Home, Home > HomeThis can cause confusing behavior during navigation. Consider using unique names for each screen instead.at node_modules/@sentry/utils/dist/instrument.js:111:20 in <anonymous>at src/Router.tsx:5:0 in <global>at node_modules/@react-navigation/core/src/useOnAction.tsx:135:9 in React.useCallback$argument_0こちらの対処方法は、Stack.Groupを使用すればOK。修正的には以下のようになる。■ 修正前      <Stack.Navigator initialRouteName="Home" mode="modal">        <Stack.Screen          name="Home"          component={Home}          options={{ headerShown: false }}        />        <Stack.Screen          name="MyPage"          component={MyPage}          options={{ headerShown: false }}        />      </Stack.Navigator>で↑のMyPageのコンポーネント内で更に以下を実装していた。■ src/components/pages/MyPage/index.tsxconst Stack = createStackNavigator<RootStackParamList>();const RootStack = () => {  return (    <Stack.Navigator initialRouteName="MyPage">      <Stack.Screen        name="MyPage"        component={MyPage}        options={MyPageScreenOption('マイページ')}      />      <Stack.Screen        name="Login"        component={Login}        options={MyPageScreenOption('サインイン')}      />      <Stack.Screen        name="UpdateProfile"        component={UpdateProfile}        options={MyPageScreenOption('プロフィール編集')}      />      <Stack.Screen        name="SettingAddShareUser"        component={SettingAddShareUser}        options={MyPageScreenOption('共有メンバー追加')}      />      <Stack.Screen        name="SettingRelationshipRequests"        component={SettingRelationshipRequests}        options={MyPageScreenOption('共有メンバー申請')}      />      <Stack.Screen        name="SettingAcceptedRelationship"        component={SettingAcceptedRelationship}        options={MyPageScreenOption('')}      />    </Stack.Navigator>  );};export default RootStack;このコードが修正後は以下の通りになった。■ 修正後      <Stack.Navigator initialRouteName="Home">        <Stack.Screen          name="Home"          component={Home}          options={HomeScreenOption()}        />        <Stack.Group screenOptions={{ presentation: 'modal' }}>          <Stack.Group>            <Stack.Screen              name="MyPage"              component={MyPage}              options={MyPageScreenOption('マイページ')}            />            <Stack.Screen              name="Login"              component={Login}              options={MyPageScreenOption('サインイン')}            />            <Stack.Screen              name="UpdateProfile"              component={UpdateProfile}              options={MyPageScreenOption('プロフィール編集')}            />            <Stack.Screen              name="SettingAddShareUser"              component={SettingAddShareUser}              options={MyPageScreenOption('共有メンバー追加')}            />            <Stack.Screen              name="SettingRelationshipRequests"              component={SettingRelationshipRequests}              options={MyPageScreenOption('共有メンバー申請')}            />            <Stack.Screen              name="SettingAcceptedRelationship"              component={SettingAcceptedRelationship}              options={MyPageScreenOption('')}            />          </Stack.Group>    </Stack.Navigator>ナビゲーションの宣言内でStack.GroupでWrapしてあげればOKです。ナビゲーションの書き方がシンプルになった。modalの指定はscreenOptionsを使用するv5ではmodalの宣言はStack.Navigatorのmodeをmodalに指定する感じでしたが、<Stack.Navigator initialRouteName="Home" mode="modal">v6からはscreenOptionsのpresentationにmodal'を指定する形式になった。<Stack.Group screenOptions={{ presentation: 'modal' }}>

React Navigation v5 → v6への移行

以前、sentry-goの実装の記事を書いたが、そこからより実践に向けのエラーをハンドリング & 情報追加をしてみました。www.wheatandcat.mePull Requestgithub.comgithub.com実装導入に関しては以前の記事で紹介しているので割愛以下は、新たに実装したものについて記載GraphQLのエラーハンドリングを追加 & GraphQL情報を追加 SetErrorPresenterを使用することでgqlgenのエラーハンドリングが行える（以下参照）gqlgen.com■ app.go   srv.SetErrorPresenter(func(ctx context.Context, e error) *gqlerror.Error {        err := graphql.DefaultErrorPresenter(ctx, e)        goc := graphql.GetOperationContext(ctx)        sentry.WithScope(func(scope *sentry.Scope) {            scope.SetTag("kind", "GraphQL")            scope.SetTag("operationName", goc.OperationName)            scope.SetExtra("query", goc.RawQuery)            scope.SetExtra("variables", goc.Variables)            if err.Path.String() != "" {                sentry.AddBreadcrumb(&sentry.Breadcrumb{                    Category: "GraphQL",                    Message:  "Error Path:" + err.Path.String(),                    Level:    sentry.LevelInfo,                })            }            sentry.CaptureException(e)        })        return err    })Sentryに送信する際に、GraphQLの情報を追加以下の2つでタグを追加  scope.SetTag("kind", "GraphQL")  scope.SetTag("operationName", goc.OperationName)QueryとVariablesは以下のように情報を追加  scope.SetExtra("query", goc.RawQuery)  scope.SetExtra("variables", goc.Variables)また、gqlerror.errorのPathをAddBreadcrumbすることで実際にエラーになっているQueryのPathを出力するif err.Path.String() != "" {    sentry.AddBreadcrumb(&sentry.Breadcrumb{        Category: "GraphQL",        Message:  "Error Path:" + err.Path.String(),        Level:    sentry.LevelInfo,    })}と、ここまでで、GraphQLのエラーハンドリングの追加は完了。ただ、これだけだと問題があり、Sentryでコードトレースされる箇所がSentryを送信した箇所になってしまうため画像の通り、実際のエラー箇所まで通知してくれない状態になってしまいます。そこで、以下にSentryにスタックトレースの情報を送るようにする方法を記載します。スタックトレースを追加現状、標準errorsにはスタックトレースの機能が備わっていないので、pkg/errorsパッケージを使用して実装しました。github.comスタックトレースを追加する方法は簡単で以下のように既存のerrorをerrors.WithStackでWrapすればOKです。■ repository/item.go if err != nil {        return nil, errors.WithStack(err)     }このerrorをSentryに送信すると以下の通りスタックトレースの情報が付与さます。こんな感じでスタックトレースを付与できました。ただ、pkg/errorsパッケージには気をつけなくていない箇所があり以下の用に特定のerrorに対してハンドリングを行っているコードでは、errors.CauseでWrapしないと正しく判定が行えないので注意例）     // ↓エラーコードがNotFoundの場合     _, err := client.Collection("cities").Doc(c.id).Doc("SF").Get(ctx)    log.Pringtln("status:"  status.Code(err)) // → NotFound（正しく判定できている）     err1 := errors.WithStack(err)      log.Pringtln("status:"  status.Code(err1)) // → Unknown（うまく判定できていない）     log.Pringtln("status:"  status.Code(errors.Cause(err1))) // → NotFound（正しく判定できている）ユーザーIDをSentryに追加以下の記事を参考にSentryからエラーになったユーザーを特定できるようにするIdentify Users for Go | Sentry Documentation以下のコードを追加■ graph/index.gofunc NewGraphWithSetUserID(app *Application, f *firestore.Client, uid string) *Graph {    sentry.ConfigureScope(func(scope *sentry.Scope) {  // 自身のユーザーIDを設定        scope.SetUser(sentry.User{ID: uid})     })    client := &Client{        UUID:      &uuidgen.UUID{},        Time:      &timegen.Time{},        AuthToken: &authToken.AuthToken{},        Task:      task.NewNotificationTask(),    }    return &Graph{        UserID:          uid,        FirestoreClient: f,        App:             app,        Client:          client,    }}こちらを追加することで以下のようにSentryのタグが追加されますBreadcrumbsでログ情報を追加SentryのBreadcrumbsを使用することで、エラー発生までのログの情報を追加する事ができます。docs.sentry.iomemoirでは未認証状態でのAPIアクセスと認証済み状態でのAPIアクセスの2パターンが存在しているので、そちらの情報を記載するように修正すると以下のようになります。■ graph/index.go if user.FirebaseUID == "" {        // Firebase認証無し        u, err := app.UserRepository.FindDatabaseDataByUID(ctx, f, user.ID)        if err != nil {            return nil, fmt.Errorf("User Invalid")        }        if u.FirebaseUID != "" {            return nil, fmt.Errorf("need to firebase auth")        }        sentry.AddBreadcrumb(&sentry.Breadcrumb{            Category: "Auth",            Message:  "Not logged in, UserID: " + u.ID,            Level:    sentry.LevelInfo,        })    } else {        // Firebase認証有り        u, err := app.UserRepository.FindByFirebaseUID(ctx, f, user.FirebaseUID)        if err != nil {            return nil, fmt.Errorf("firebase auth invalid")        }        sentry.AddBreadcrumb(&sentry.Breadcrumb{            Category: "Auth",            Message:  "Logged in, UserID: " + u.ID,            Level:    sentry.LevelInfo,        })        user.ID = u.ID    }上記を設定することでSentryには以下のように情報が付与されるリリース毎のエラーデータ確認する実際に運用してみると、どのリリースでエラーは増えたのか、新しく発生したのか知りたくなると思います。そういう時は、Sentryの Releasesの機能を使用します。docs.sentry.io実装的には以下のコードの通り、sentry.InitにReleaseにオプションを設定するだけでOKです■ app.go  sco := sentry.ClientOptions{        Dsn: os.Getenv("SENTRY_DSN"),    }    if os.Getenv("APP_ENV") != "local" {        sco.Release = os.Getenv("RELEASE_INSTANCE_VERSION")    }    err := sentry.Init(sco)    if err != nil {        log.Fatalf("sentry.Init: %s", err)    }memoirはGAEで運用しているのGitHub Actionsでリリースする際にGAEのサービスのバージョンと同様の値を環境変数に設定デプロイするようにしています。（今回実装したのがレビュー環境なので日付データを元に作成していますが本番環境ならばGitHubのtagの情報等を設定するのが良いと思います）■ .github/workflows/deploy.yml    - name: Get current date      id: date      run: echo "::set-output name=date::$(date +'%Y%m%d%H%M%S')"    - name: set env      run: echo "release_version=release${{ steps.date.outputs.date }}" >> $GITHUB_ENV    - name: Use gcloud CLI      run: |        echo -e "env_variables:\n  RELEASE_INSTANCE_VERSION: ${{ env.release_version }}" >> release.yaml        cat release.yaml        gcloud app deploy --quiet app.yaml --version=${{ env.release_version }}Releaseを設定した情報でエラーが発生すると以下の通りバージョン毎に集計してくれるようになります。エラー数が多い場合は制限をかけるもし有料プランで導入する場合は、エラーが送信されすぎて値段が気になるパターンがあると思いますが、その場合はRate Limitsを設定すればOKです。https://note.com/tabelog_frontend/n/n02888dbf7c20設定することで、時間当たりに受け取るエラー件数を制限できます。初期導入時は設定して運用開始して、エラー内容が落ち着いてきたら解除していくのが良いかと思います。

sentry-goを使用して、正しくエラーをハンドリングする

React NativeでVisual Regression Testingを実装したので解説します。ただ現状CIで実行するのは難しそうだったので（セルフホストランナーを使用すればCIでも実行できそうですが）、一旦ローカルのみ実行できる実装になっています。PRgithub.com実装今回使用するものは以下の通りStorybook for React NativeLokireg-suitStorybookは実装されている前提で進めます。まず、Loki を導入します。https://loki.js.org/getting-started.html$ yarn add loki --devLokiのconfigファイルを作成■ loki.config.jsmodule.exports = {  configurations: {    'ios.iphone11': {      target: 'ios.simulator',    },  },  fileNameFormatter: ({ configurationName, kind, story }) =>    `${configurationName}/${kind}/${story}`,};configurationsで実行するデバイスを設定。fileNameFormatterでスクリーンショットのファイル名を設定できます。また、実際にテストを実行すると分かりますが、ローディングアニメーションやモーダルアニメーション等がStorybookに含まれる場合は、タイミングによってスクリーンショットに差分が起きてしまうので、以下みたいな感じで一旦スキップさせています。■ src/components/atoms/Loading/stories.tsximport React from 'react';import { storiesOf } from '@storybook/react-native';import View from 'components/atoms/View';import Loading from './';storiesOf('atoms', module).add(  'Loading',  () => (    <View>      <View p={3}>        <Loading size="small" />      </View>      <View p={3}>        <Loading />      </View>      <View p={3}>        <Loading size="large" />      </View>    </View>  ),  { loki: { skip: true } }  // ← Storybookの第3引数に設定することでスキップ可能);storybookを起動した状態で以下の、スクリーンショットの更新で以下のコマンドを実行してスクリーンショットを作成$ yarn loki updateこれで、画像みたいな感じStorybookの内容の画像が作成されます。update実行後にコンポーネントを修正して以下のコマンドを実行すると以下の動画みたいに実行されていき、差分があるとエラーが表示されます。$ yarn loki testwww.youtube.com差分がある場合は、.loki/difference に差分発生の画像が生成されます。ここまでで、Lokiの実装は完了です。これだけでも使用できますが、Loki単体だとスクリーンショットの画像ファイルをGitHubにコミッしないとブランチ間での差分チェックが 出来なく面倒なので差分チェックをreg-suitで行えるように設定します。github.comまず、以下のコマンドで導入$ npx reg-suit initこちらで以下を導入します。reg-keygen-git-hash-plugin: コミット履歴から比較すべきハッシュを識別してくれるreg-notify-github-plugin: Pull Requestへの通知reg-publish-gcs-plugin or reg-publish-s3-plugin: 画像をGCS または S3に格納するreg-suitの設定ファイルに以下のように追記■ regconfig.json{  "core": {    "workingDir": ".reg",    "actualDir": ".loki/reference", // ← Lokiのスクリーンショットの最新を設定    "thresholdRate": 0,    "ximgdiff": {      "invocationType": "client"    }  },  "plugins": {    "reg-keygen-git-hash-plugin": true,    "reg-notify-github-plugin": {      "prComment": true,      "prCommentBehavior": "default",      "clientId": "**************"    },    "reg-publish-gcs-plugin": {      "bucketName": "**************"    }  }}以下のコマンドを実行$ npx reg-suit runこれでPull Requestに以下の通知が飛びリンク先に移動すると、こんな感じで差分の確認が行えますhttps://storage.googleapis.com/reg-publish-bucket-dd7f685f-d2db-443a-a037-a6dad4eabc9e/348f8f75863e94e1113b9024154bf8d1e09e3d8d/index.html

Storybook + Loki + reg-suitでReact NativeでVisual Regression Testingを実装

memoirする画面の共有機能を実装したので解説Pull Requestgithub.com実装内容としては、memoirする画面（1週間分のタスクを表示する）をスクリーンショットして、共有できるような感じで実装していきます。まず、画面スクリーンショットはreact-native-view-shotを使用して実装github.com以下みたいな感じで実装できますimport React, { useRef } ​from 'react';import ViewShot from 'react-native-view-shot';import { View, Text } from 'react-native';export default () => {  const viewShot = useRef(null);  const onCapture = () => {    const url = await viewShot.current.capture();    console.log(url);  }  return (    <ViewShot onCapture={onCapture} ref={viewShot} options={{ format: 'jpg' }}>      <Text>テスト</Text>    </ViewShot>  )}ViewShot でラップした部分をキャプチャーすることが可能です。この画像を、expo-sharingを使用して画像を共有しますdocs.expo.dev先程の例に追記すると、こんな感じで実装できますimport React, { useRef } ​from 'react';import ViewShot from 'react-native-view-shot';import { View, Text } from 'react-native';import * as Sharing from 'expo-sharing';export default () => {  const viewShot = useRef(null);  const onCapture = async() => {    const url = await viewShot.current.capture();        const ok = await Sharing.isAvailableAsync();    if (ok) {       await Sharing.shareAsync('file://' + url);    }  }  return (    <ViewShot onCapture={onCapture} ref={viewShot} options={{ format: 'jpg' }}>      <Text>テスト</Text>    </ViewShot>  )}この2つのライブラリを使用して実装していきます。実装する中で以下の対応を行いました。①.元々がインフィニティスクロールしている画面だったので、スクリーンショット用に、全項目表示の画面を作成②.レンダリングから画像が表示されるまでのタイムラグがあるので、全ての画像表示が完了したらキャプチャーするように実装①の方は、サクッと別画面として全項目表示用の画面を実装■ src/components/organisms/Memoir/ScreenShot.tsximport React, { memo, useRef, useCallback, useState } from 'react';import {  StyleSheet,  ScrollView,  useWindowDimensions,  Alert,} from 'react-native';import * as Sharing from 'expo-sharing';import ViewShot from 'react-native-view-shot';import View from 'components/atoms/View';import { useNavigation } from '@react-navigation/native';import dayjs from 'lib/dayjs';import theme from 'config/theme';import { Props as PlainProps } from 'components/pages/Memoir/ScreenShot/Plain';import { User as TUser } from 'store/atoms';import Header from 'components/molecules/Memoir/Header';import { getModeCountMax } from 'lib/utility';import DateText from 'components/molecules/Memoir/DateText';import Divider from 'components/atoms/Divider';import Loading from 'components/molecules/Overlay/Loading';import { Item } from 'hooks/useItemsInPeriodPaging';import Card from './Card';export type Props = Pick<PlainProps, 'users'> & {  startDate: string;  endDate: string;  items: Item[];};type User = Omit<TUser, 'userID'> & {  id: string;};type Card = Item & {  user: User;};type RenderedItem = {  date: string | null;  contents?: Card;  categoryID?: number;  last?: boolean;  width: number;  onLoadEnd: () => void;};const RenderItem: React.FC<RenderedItem> = (props) => {  if (props.date) {    return <DateText date={props.date} categoryID={Number(props.categoryID)} />;  }  return (    <View>      <View mb={3} mx={3}>        <Card          title={props?.contents?.title || ''}          categoryID={props?.contents?.categoryID || 0}          user={props?.contents?.user as User}          onPress={() => null}          onLoadEnd={props.onLoadEnd}        />        {!props?.last && <Divider />}      </View>    </View>  );};const ScreenShot: React.FC<Props> = (props) => {  const viewShot = useRef<ViewShot>(null);  const navigation = useNavigation();  const count = useRef(0);  const [loading, setLoading] = useState(true);  const windowWidth = useWindowDimensions().width;  const onShare = useCallback(    async (uri: string) => {      const ok = await Sharing.isAvailableAsync();      if (!ok) {        Alert.alert('エラー', '共有機能を利用できませんでした', [          {            text: '戻る',            onPress: () => {              navigation.goBack();            },          },        ]);        return;      }      await Sharing.shareAsync(uri);      navigation.goBack();    },    [navigation]  );  const onCapture = useCallback(async () => {    const url = await viewShot.current?.capture?.();    if (url) onShare('file://' + url);  }, [onShare]);  const onLoadEnd = useCallback(() => {    count.current = count.current + 1;    if (props.items.length === count.current) {      setLoading(false);      setTimeout(() => onCapture(), 100);    }  }, [props.items, onCapture]);  const dates = Array.from(    new Set(props.items.map((v) => dayjs(v.date).format('YYYY-MM-DD')))  );  const dateItems = dates.sort().map((date) => {    const contents = date;    return {      date,      contents,    };  });  const data = dateItems    .map((v1) => {      const sameDateItems = props.items.filter(        (v2) => dayjs(v2.date).format('YYYY-MM-DD') === v1.date      );      const item: RenderedItem[] = sameDateItems.map((v2, index) => {        const user: User | undefined = props.users.find(          (v) => v.id === v2.userID        );        return {          date: null,          contents: {            ...v2,            user: user || {              id: '',              displayName: '',              image: '',            },          },          last: sameDateItems.length === index + 1,          width: windowWidth,          onLoadEnd: onLoadEnd,        };      });      const categoryID = item.map((v) => Number(v.contents?.categoryID));      const dateItem: RenderedItem = {        date: v1.date,        categoryID: getModeCountMax(categoryID),        width: windowWidth,        onLoadEnd: () => null,      };      return [dateItem, ...item];    })    .flat();  return (    <>      <ScrollView style={styles.root}>        <ViewShot ref={viewShot} options={{ format: 'jpg' }}>          <Header startDate={props.startDate} endDate={props.endDate} />          {data.map((v, index) => (            <RenderItem {...v} key={index} />          ))}          <View />        </ViewShot>      </ScrollView>      {loading && <Loading text="作成中" />}    </>  );};const styles = StyleSheet.create({  root: {    backgroundColor: theme().color.background.main,    flex: 1,    width: '100%',    paddingTop: theme().space(4),  },});export default memo(ScreenShot);①はReact NativeのImageのonLoadEndから表示完了タイミングを取得できるので、こちらをハンドリングして、全ての画像が表示されたタイミングでキャプチャーするように実装reactnative.devこれで諸々の実装が完了、動作は以下のようになりましたwww.youtube.com

react-nativeで画面スクリーンショット & 共有機能を開発

memoirのチュートリアルを実装したので紹介Pull Requestgithub.com実装ペペロミア作成時だと、react-native-app-intro-sliderを使用していましたが、今回はライブラリを使用せず実装しました。github.com実装は、以下の記事を参考に作成medium.comスライドは以下みたいな感じで実装できます。import React, { memo, useState, useCallback, useRef } from 'react';import {  ScrollView,  useWindowDimensions,  StyleSheet,  ViewStyle,  NativeSyntheticEvent,  NativeScrollEvent,} from 'react-native';import { StatusBar } from 'expo-status-bar';import View from 'components/atoms/View';import Text from 'components/atoms/Text';import Button from 'components/atoms/Button';import theme from 'config/theme';type Props = {};const Intro: React.FC<Props> = () => {  const scrollViewRef = useRef<ScrollView>(null);  const width = useWindowDimensions().width;  const height = useWindowDimensions().height;  const [page, setPage] = useState(0);  const style: ViewStyle[] = [    { width, height, justifyContent: 'center', alignItems: 'center' },  ];  const onScroll = useCallback(    (event: NativeSyntheticEvent<NativeScrollEvent>) => {      const { x } = event.nativeEvent.contentOffset;      const nextPage = Math.floor(x / width);      setPage(nextPage);    },    [width]  );  const onNext = useCallback(() => {    const nextPage = page + 1;    scrollViewRef?.current?.scrollTo?.({      x: width * nextPage,      y: 0,      animated: true,    });    setPage(nextPage);  }, [width, page]);  return (    <>      <StatusBar backgroundColor={theme().color.primary.main} style="dark" />      <View style={styles.wrap}>        <ScrollView          style={styles.wrap}          horizontal={true}          scrollEventThrottle={16}          pagingEnabled={true}          showsHorizontalScrollIndicator={false}          onScroll={onScroll}          ref={scrollViewRef}        >          <View style={style}>            <Text>1</Text>            <Button title="次へ" onPress={onNext} width={150} />          </View>          <View style={style}>            <Text>2</Text>            <Button title="次へ" onPress={onNext} width={150} />          </View>          <View style={style}>            <Text>3</Text>            <Button title="次へ" onPress={onNext} width={150} />          </View>          <View style={style}>            <Text>4</Text>            <Button title="次へ" onPress={onNext} width={150} />          </View>          <View style={style}>            <Text>5</Text>            <Button title="次へ" onPress={onNext} width={150} />          </View>        </ScrollView>      </View>    </>  );};const styles = StyleSheet.create({  wrap: {    flex: 1,    position: 'relative',    height: '100%',  },});export default memo(Intro);動作は以下の通りwww.youtube.comScrollViewにhorizontalとpagingEnabledを設定すれば、それっぽい動作になります。        <ScrollView          style={styles.wrap}          horizontal={true}          scrollEventThrottle={16}          pagingEnabled={true}          showsHorizontalScrollIndicator={false}          onScroll={onScroll}          ref={scrollViewRef}        >これに諸々要素を追加して、以下のように仕上げました。（コードはPull Request参照）www.youtube.com

React Nativeでチュートリアルを作成

exportしているが使用していない場合は、削除したいなーと思ったので実装してみたPull Requestgithub.com実装検知には ts-unused-exports を使用github.com以下のコマンドで追加$ yarn add -D ts-unused-exports以下のコマンドで実行できます$ yarn ts-unused-exports ./tsconfig.json ./src/App.tsx1 module with unused exports/github.com/wheatandcat/memoir/src/App.tsx: Propserror Command failed with exit code 1.上記のようにプロジェクト内で参照されていないexportを検知できます。これを使用してCIで参照されていないexportがある場合にエラーになるように実装しました。まず、スクリプトを作成■ scripts/ts-unused-exports/index.jsconst analyzeTsConfig = require('ts-unused-exports').default;const config = require('./config.json');const rootPath = require('path').resolve();const result = analyzeTsConfig('./tsconfig.json');var red = '\u001b[31m';var green = '\u001b[32m';var white = '\u001b[37m';var yellow = '\u001b[33m';const keys = Object.keys(result);const ignoreFiles = config.ignoreFiles;const baseUrl = config.baseUrl;let items = [];for (let i = 0; i < keys.length; i++) {  const key = keys[i];  if (!key.startsWith(`${rootPath}/${baseUrl}`)) {    continue;  }  const ignore = ignoreFiles.find((v) => {    const path = key.replace(`${rootPath}/`, '');    const regexp = new RegExp(v + '(.*?)', 'g');    return regexp.test(path);  });  if (ignore) {    continue;  }  const item = result[key];  const exportName = item.map((v) => v.exportName).join(', ');  items.push({    path: key,    text: white + key.replace(`${rootPath}/`, '') + ': ' + yellow + exportName,  });}if (items.length === 0) {  console.log(green + '0 modules with unused exports');} else {  console.log(red + `${items.length} modules with unused exports`);  for (let i = 0; i < items.length; i++) {    const item = items[i];    console.log(item.text);  }  process.exit(1);}configファイルは、以下に切り出し■ scripts/ts-unused-exports/config.json{  "baseUrl": "src",  "ignoreFiles": ["__mockData__", "hooks/tmp/*", "storyBookUtils/*"]}package.jsonのscriptsに追加■ package.json{  "scripts": {    "unused-exports": "node ./scripts/ts-unused-exports"最後にGitHub Actionsを追加■ .github/workflows/unused-exports.ymlname: unused-exportson: [push]jobs:  unused-exports:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v2      - name: Cache node_modules        uses: actions/cache@preview        with:          path: ~/.cache/yarn          key: ${{ runner.os }}-memoir-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}          restore-keys:            ${{ runner.os }}-memoir-      - name: Install node_modules        if: steps.cache.outputs.cache-hit != 'true'        run: yarn install      - name: codegen        run: yarn codegen      - name: unused-exports        run: yarn unused-exportsこれで実装完了です。Pushしてエラーだと以下みたいな感じになります。◆ Pull Request◆ GitHub Actionsの表示

ts-unused-exportsを使用して不要なexportを検知する

ペペロミアでRESTful APIからGraphQLに移行した話をまとめました。■ ペペロミアhttps://peperomia.app/

 React Native + Firestoreで運用しているアプリをRESTful APIからGraphQLに移行した話

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で公開しているので、興味…