<h1 id="h8d027c8ed3">はじめに</h1><p>こんにちは〜</p><p>最近Reactで@testing-library/reactを使用してテストを書くことが増えて来たこの頃です。</p><h1 id="h774a4fefa5">ハマったこと</h1><p>早速ですが、題名の通りハマったことを書いていきます・</p><p>コンポーネント内部で状態管理している場合は、そのままuserEventなりでイベントを発火させることでUIを変更することができるので、特に気にすることはないのですが、</p><p>コンポーネント外で管理しているstateをpropsで渡している場合においてちょっとハマりました...</p><h2 id="habc1cc4a28">うまくいかなかったテスト</h2><div data-filename="Modal.tsx"><pre><code class="language-typescript">import React, { useState } from &quot;react&quot;;

interface Props {
 isOpen: boolean;
 onClose: boolean;
}

export const Modal = ({ isOpen, onClose }: Props) =&gt; {
  return (
    { isOpen &amp;&amp; (&lt;div&gt;
      &lt;button onClick={onClose}&gt;閉じる&lt;/button&gt;
      　モーダルです
      &lt;/div&gt;)
    }
  );
};</code></pre></div><div data-filename="Modal.spec.tsx"><pre><code class="language-typescript">const renderModal = ({ isOpen, onClose = vi.fn() }: { isOpen: boolean; onClose?: () =&gt; void }) =&gt; {
  return render(
    &lt;Modal isOpen={isOpen} onClose={onClose} /&gt;
  );
};

describe(&apos;&apos;, () =&gt; {
  it(&apos;ボタンを押すとモーダルが画面上から消えること&apos;, async () =&gt; {
    let isOpen = true;
    const onClose = vi.fn(() =&gt; {
      isOpen = false;
    });
    const user = userEvent.setup();
    renderModal({ isOpen, onClose });
    const button = screen.getByRole(&apos;button&apos;, { name: &apos;&apos; });
    await user.click(button);
    expect(screen.queryByText(&apos;モーダルです&apos;)).not.toBeVisible();
    expect(onClose).toHaveBeenCalled();
  });
});</code></pre></div><pre><code class="language-typescript">const button = screen.getByRole(&apos;button&apos;, { name: &apos;&apos; });
await user.click(button);</code></pre><p>の部分でモーダルのボタンをクリックすることで、コンポーネントに渡したonCloseが発火し、isOpenがfalseに変わる事によって、「モーダルです」の表示が消えるはずだったのですが、何度やっても消えてくれません。</p><h2 id="h065904af3c">何が問題だったか</h2><p>結論としては、propsに渡している引数の状態を更新してもコンポーネントは再レンダリングしてくれません。</p><p>rerender関数を使用して、擬似的に再レンダリングさせてあげる必要がありました。</p><pre><code>describe(&apos;&apos;, () =&gt; {
  it(&apos;ボタンを押すとモーダルが画面上から消えること&apos;, async () =&gt; {
    let isOpen = true;
    const onClose = vi.fn(() =&gt; {
      isOpen = false;
    });
    const user = userEvent.setup();
    const { rerender } = renderModal({ isOpen, onClose });
    const button = screen.getByRole(&apos;button&apos;, { name: &apos;&apos; });
    await user.click(button);
    rerender(&lt;Modal isOpen={isOpen} onClose={onClose} /&gt;)
    expect(screen.queryByText(&apos;モーダルです&apos;)).not.toBeVisible();
    expect(onClose).toHaveBeenCalled();
  });
});</code></pre><p>rerenderによって、コンポーネントがisOpenがfalseの状態で再レンダリングさせることができる様になり、外部でstateを管理していてもテストを記述することができるようになりました。</p><h1 id="h25d0e20685">おまけ</h1><p>renderの返り値に入っているrerender関数を愚直に実行してもいいのですが、以下のような便利関数を作ってその手間を減らすこともおすすめです。</p><p>setProps関数が実行されると、渡したpropsの情報とrender時に渡しているelementでReact.cloneElementして、引数を変えてrerenderしています。</p><div data-filename="utils.ts"><pre><code>import { RenderOptions, render as baseRender } from &quot;@testing-library/react/pure&quot;;
import React from &quot;react&quot;;
export * from &quot;@testing-library/react&quot;;

export function render(element: JSX.Element, options?: Omit&lt;RenderOptions, &quot;queries&quot;&gt;) {
  const result = baseRender(element, options);
  return {
    ...result,
    setProps&lt;T extends Record&lt;string, unknown&gt;&gt;(props: Partial&lt;T&gt;) {
      return result.rerender(React.cloneElement(element, props as T));
    },
  };
}</code></pre></div><p>参考: <a href="https://github.com/reactjs/react-transition-group/blob/master/test/utils.js">https://github.com/reactjs/react-transition-group/blob/master/test/utils.js</a> </p><p>これを作ることで、先程のコードでrerenderしたときに再度コンポーネントを渡す必要がなくなります！</p><h2 id="hf5b603f5e8">改善後のコード</h2><p>実際使ってみます。</p><pre><code>import { render } from &apos;path/to/utils.ts&apos; // 先程作ったrender関数を呼ぶ

const renderModal = ({ isOpen, onClose = vi.fn() }: { isOpen: boolean; onClose?: () =&gt; void }) =&gt; {
  return render(
    &lt;Modal isOpen={isOpen} onClose={onClose} /&gt;
  );
};

describe(&apos;&apos;, () =&gt; {
  it(&apos;ボタンを押すとモーダルが画面上から消えること&apos;, async () =&gt; {
    let isOpen = true;
    const onClose = vi.fn(() =&gt; {
      isOpen = false;
    });
    const user = userEvent.setup();
    const { setProps } = renderModal({ isOpen, onClose }); // 先程定義したsetPropsが返り値に含まれるので使用する
    const button = screen.getByRole(&apos;button&apos;, { name: &apos;&apos; });
    await user.click(button);
    setProps({ isOpen, onClose })
    expect(screen.queryByText(&apos;モーダルです&apos;)).not.toBeVisible();
    expect(onClose).toHaveBeenCalled();
  });
});</code></pre><p>renderModalの返り値にsetPropsが追加され、引数を渡すだけでコンポーネントを再描画してくれるようになりました！便利！</p><p><code>setProps({ isOpen, onClose })</code></p><h1 id="h3bcda3e6b0">最後に</h1><p>駆け足になってしまいましたが、なんとかブログを更新することができました。</p><p>今後もReactのテスト頑張っていきたいです！</p>

外部でstateを管理しているコンポーネントのテストを@testing-library/reactを使って書く

<p>最近、業務でReact Hook FormとRecoilを使ってステップフォームを作る場面があったので、そのことについて書こうと思います。</p><p>※一部ChatGPTを用いて記事の校正を行っているため不自然な表現があるかもしれないので、ご留意ください。</p><h1 id="h8a175a9b0e">前提</h1><p>この記事のコードで使用しているライブラリのバージョンは以下です。</p><ul><li>react<ul><li>18.2.0</li></ul></li><li>react-hook-form<ul><li>7.45.1</li></ul></li><li>recoil<ul><li>0.7.7</li></ul></li><li>zod<ul><li>3.21.4</li></ul></li></ul><p>また、この記事を書くにあたって作成したサンプルコードは以下です。</p><p><a href="https://github.com/Uki884/step-form-with-react-hook-form" target="_blank" rel="noopener noreferrer nofollow">step-form-with-react-hook-form</a></p><h1 id="h82b60cc132">実装方針</h1><p>ステップフォームはページをまたいで情報を共有する必要があるので、state管理にはrecoilを使用します。recoilを組み合わせて使っていく上で、入力ごとにrecoilのstateを更新していくControlled Componentsの方式を取ることも可能ですが、都度stateを更新しないようにしたいので、Uncontrolled Componentsで実装し、React Hook Formの特徴を活かせるようにします。また、簡単にバリデーションが実行できるzodも合わせて使用します。</p><ul><li>新規会員登録のみを対象にする<ul><li>ユーザー情報を少しずつ更新していくのではなく、最後のページで一括で登録させる方式を想定。つまり途中離脱は考慮しない。</li></ul></li><li>バリデーションはinput入力時にリアルタイムに行う。ただし、何も入力されていない場合でも次のページへ進むボタンは押せるようにし、押したタイミングでバリデーションを行う。入力誤りがある場合はページ遷移ができないようにします。</li></ul><h1 id="h26cc3bcbeb">Controlled ComponentsとUncontrolled Componentsについて</h1><p>まず先程触れたControlled ComponentsとUncontrolled Componentsの違いについて説明したいと思います。後述しますが、React Hook FormはUncontrolled Componentsを採用しており、入力時に再レンダリングを発生させずフォームを作成することができ、パフォーマンスが良いフォームを作成することができます。</p><h2 id="hb5123eb9af">Controlled Components(Reactで値を管理する)</h2><p>Controlled Componentsはreactのstateを介して入力状態を管理するコンポーネントのことです。値の更新はonChange関数を介して行い、stateにバインドしているvalueが更新されることでinput自体が再レンダリングされ表示を更新します。</p><h3 id="hdadc0eaacf">特徴</h3><ul><li>入力した値をreactで管理するため、stateの変化を用いた処理を書きやすい<ul><li>例: フォームの値が空だったら、ボタンをdisabledにする等。stateが常に最新になるため、ただ値を参照すればいいだけです。</li></ul></li><li>公式が推奨している</li></ul><blockquote><p><a href="https://ja.legacy.reactjs.org/docs/uncontrolled-components.html" target="_blank" rel="noopener noreferrer nofollow">非制御コンポーネント</a></p></blockquote><h3 id="h86c1eb6dfa">注意点</h3><ul><li>入力するたびに再レンダリングが発生するのでアプリのパフォーマンスが悪くなる場合がある</li></ul><h2 id="hf8a92c6f7f">Uncontrolled Components(DOMで値を管理する)</h2><p>一方、Uncontrolled ComponentsはReactのstateを使用せず、ネイティブの機能(DOM)で値を管理するコンポーネントのことです。値の管理をDOM自身が行うので、再レンダリングを発生させません。</p><h3 id="hdadc0eaacf">特徴</h3><ul><li>値の制御をDOM側で行うため、再レンダリングが発生しないためパフォーマンスが良い</li></ul><h3 id="h86c1eb6dfa">注意点</h3><ul><li>reactのstateに初期値を入れたい場合はdefaultValueに値を渡す必要がある。valueに初期値を渡しても、inputに入力してもonChangeによってreactのstateが更新されないため、機能しません。</li><li>MUI等のControlled Componentsで作られているUIライブラリで使う場合は一工夫必要。ControllerかuseControllerを使用する必要がある</li><li>フォームの入力値を子コンポーネントに渡したい場合はforwardRefを使用しrefを子コンポーネントに渡す必要がある</li></ul><pre><code class="language-tsx">import { forwardRef } from &quot;react&quot;;

interface InputTextProps {
  type: string;
  name: string;
  value?: string;
  onChange: (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void;
  error?: string;
  defaultValue?: string;
}

export const InputText = forwardRef&lt;HTMLInputElement, InputTextProps&gt;(({ error, defaultValue, ...props }, ref) =&gt; {
  return (
    &lt;&gt;
      &lt;input {...props} defaultValue={defaultValue} ref={ref} /&gt;
      &lt;div style={{ color: &apos;red&apos;}}&gt;{ error }&lt;/div&gt;
    &lt;/&gt;
  )
})</code></pre><h1 id="h41bad50da6">作ってみる</h1><pre><code class="language-typescript">import { FieldError, FieldErrors, useForm } from &apos;react-hook-form&apos;
import { atom, useRecoilState } from &apos;recoil&apos;
import { z } from &quot;zod&quot;;
import { zodResolver } from &quot;@hookform/resolvers/zod&quot;;
import { useNavigate } from &apos;react-router-dom&apos;;
import { useEffect } from &apos;react&apos;;

export const userSignUpSchema = z.object({
  name: z
    .string({ required_error: &quot;名前を入力してください&quot; })
    .min(5, { message: &quot;5文字以上入力してください&quot; }),
  email: z
    .string({ required_error: &quot;メールアドレスを入力してください&quot; })
    .email({ message: &quot;メールアドレスの形式に誤りがあります&quot; }),
  corporation: z.object({
    name: z.string({ required_error: &quot;会社名を入力してください&quot; }).min(1, { message: &quot;1文字以上入力してください&quot; }),
  })
});

export type UserSignUpSchemaType = z.infer&lt;typeof userSignUpSchema&gt;;

const userSignUpFormState = atom({
  key: &quot;userSignUpFormState&quot;,
  default: {
    email: &apos;&apos;,
    name: &apos;&apos;,
    corporation: {
      name: &apos;&apos;,
    }
  },
});

type ErrorType = FieldErrors&lt;{
  name: FieldError;
  email: FieldError;
}&gt;;

const errorsState = atom&lt;ErrorType&gt;({
  key: &quot;errorsState&quot;,
  default: {},
});

export const useUserForm = () =&gt; {
  const [userFormValue, setUserFormValue] = useRecoilState(userSignUpFormState);
  const [errorsValue, setErrorsValue] = useRecoilState(errorsState);
  const navigate = useNavigate();

  const {
    register,
    handleSubmit,
    formState: { errors, isValid, isDirty },
    getValues,
    control,
    trigger,
    setError,
  } = useForm&lt;UserSignUpSchemaType&gt;({
    mode: &apos;onChange&apos;,
    resolver: zodResolver(userSignUpSchema),
    defaultValues: userFormValue,
  });

  const handleNavigate = (path: string) =&gt; {
    setErrorsValue(errors);
    setUserFormValue(getValues());
    navigate(path);
  };

  const handleRegister = handleSubmit((data: UserSignUpSchemaType) =&gt; {
    // APIを叩く
    console.log(data);
  });

  useEffect(() =&gt; {
    Object.keys(errorsValue).forEach((key) =&gt; {
      setError(key as keyof UserSignUpSchemaType, {
        message: (errorsValue as any)[key].message,
        type: (errorsValue as any)[key].type,
      });
    });
  }, [errorsValue]);

  return {
    handleSubmit,
    getValues,
    errors,
    control,
    register,
    handleNavigate,
    isValid,
    trigger,
    isDirty,
    handleRegister
  };
};</code></pre><p>state管理にはrecoilを使用しているので、registerのonChangeを上書きし、recoilのstateを直接更新することも考えられますが、</p><p>Controlled Componentsの特性として再レンダリングが発生してしまうため避けます。よって、ページ遷移時にrecoilのstateへの反映を行います。</p><p>例:</p><p>registerの第2引数を渡すことで、onChangeをオーバーライドすることができます。しかし、react-hook-formのstateとrecoilのstateの両方を更新する必要があり、やや冗長です。</p><pre><code class="language-typescript">const emailRegister = register(&quot;email&quot;, {
  onChange: (e) =&gt; {
    setValue(&quot;email&quot;, String(e.target.value));
    setUserFormValue({...getValues(), email: e.target.value});
}})</code></pre><pre><code class="language-tsx">&lt;InputText
  type=&apos;text&apos;
  {...emailRegister}
  value={userFormValue.email}
  error={errors[&apos;email&apos;]?.message}
/&gt;</code></pre><p>useWatchやuseControllerを使用することで、再レンダリングする範囲を狭めることも可能です。</p><p>しかし、UIライブラリを使用していない場合はUncontrolled Componentsとして実装したいですね。</p><p>ページの利用例は以下の通りです。</p><pre><code class="language-tsx">import { useUserForm } from &apos;../../hooks/useUserForm&apos;
import { InputText } from &apos;../../components/inputText&apos;

export const Step1 = () =&gt; {
  const { errors, handleNavigate, register, getValues, trigger } = useUserForm()

  const handleMove = async (path: string) =&gt; {
    const result = await trigger(&apos;email&apos;)
    if (!result) return;
    handleNavigate(path)
  }

  return (
    &lt;&gt;
      メールアドレス
      &lt;InputText
        type=&apos;text&apos;
        {...register(&apos;email&apos;)}
        defaultValue={getValues(&apos;email&apos;)}
        error={errors[&apos;email&apos;]?.message}
      /&gt;
      &lt;button disabled={!!errors.email} onClick={()=&gt; void handleMove(&apos;/step2&apos;)}&gt;次へ&lt;/button&gt;
    &lt;/&gt;
  )
}</code></pre><p>「次へ」ボタンをクリックした際に発動するhandleMove関数について解説します。</p><ul><li>trigger</li></ul><p>triggerを使用して任意のタイミングでバリデーションを実行します。これにより、ユーザーが何も入力していない場合でもバリデーションが行われるようになります。formState.dirtyFieldsを使って同様のことが可能かと思いますが、今回の実装ではtriggerを選択しました。</p><ul><li>handleNavigate</li></ul><p>この関数は次のステップへ遷移する前に、recoilのstateを更新する役割があります。getValues()メソッドを用いて、最新のreact-hook-formの値を取得し、その情報をrecoilのstateに保存しています。</p><p>最後のステップとして、最終ページでhandleRegisterを実行し、ユーザー登録を完了させる機能を追加すれば、実装は完成となります。</p><pre><code class="language-tsx">import { useUserForm } from &apos;../../hooks/useUserForm&apos;

export const FinalStep = () =&gt; {
  const {
    handleSubmit,
    handleNavigate,
    isValid,
    handleRegister
  } = useUserForm()

  return (
    // eslint-disable-next-line @typescript-eslint/no-misused-promises
    &lt;form onSubmit={handleRegister}&gt;
        &lt;button type=&quot;submit&quot; disabled={!isValid}&gt;登録&lt;/button&gt;
      &lt;/div&gt;
      &lt;div style={{ display: &apos;flex&apos;, gap: 16, justifyContent: &apos;center&apos; }}&gt;
        &lt;button disabled={!isValid} onClick={() =&gt; handleNavigate(&apos;/step1&apos;)}&gt;戻る&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  )
}</code></pre><p>「登録」ボタンをクリックすると、&lt;form&gt;タグのonSubmitイベントがトリガーされ、handleRegister関数が実行されます。</p><p>バリデーションを通過した場合、handleRegisterには登録に必要なデータのオブジェクトが渡され、このオブジェクトを使用してユーザー登録のAPIを実行することができます。</p><p>この実装により、Recoilを用いてグローバルステートを管理しつつ、Controlled Componentsを用いて再レンダリングの回数を削減することができました！</p><h1 id="h3bcda3e6b0">最後に</h1><p>初めはControlled ComponentsとUncontrolled Componentsの違いを完全に理解していなかったため、実装が雰囲気主体になってしまいました。</p><p>その結果、再レンダリングが多く発生する実装をやっていたので、今後はドキュメントをしっかりと読んだ上でコードを書いていきたいと思います。</p><p>また、UIライブラリを部分的に使用するなどして、Controlled ComponentsとUncontrolled Componentsを併用する実装パターンについても、今後時間があれば記事に追記したいです。</p><p>今回は以上です！</p>

再レンダリングを抑えながらRecoilで状態管理するステップフォームを作成してみる

<p>お久しぶりです。</p><p>ちょっと前にprisma4がリリースされ</p><p><a href="https://www.prisma.io/docs/concepts/components/prisma-client/client-extensions">client-extensions</a>が正式に使えるようになりました。</p><p>今回はそれを使用してnest.js + prisma4でrepositoryを作成して共通で使えるメソッドを作成してみました。</p><h1 id="h6eee5539fb">prisma client extensionについて</h1><p>client-extensionsによってPrismaClient自体に手を加えられるようになったことで柔軟性が爆上がりしました。</p><p>一番の恩恵だと感じている部分はComputedFieldを定義できるようになったことだと思います。</p><p>例えば、user.fullNameというプロパティをuser.firstNameとuser.lastNameを繋げた値から生成したいとなった場合は以下のようなコードを書くことで、取得した値に手を加えることなく取得できるようになりました。</p><pre><code class="language-typescript">const xprisma = prisma.$extends({
  result: {
    user: {
      fullName: {
        needs: { firstName: true, lastName: true },
        compute(user) {
          return ${user.firstName} ${user.lastName}
        },
      },
    },
  },
})

const user = await xprisma.user.findFirst()</code></pre><p>prisma4以前はPrismaClientのメソッドを拡張することが困難で、複数のカラムから1つのカラムを作ることができず、</p><p>↓のようにfullNameを生やしたい場合は既存のuserに混ぜるしかなく、型も変わってしまうので合わせなければいけないなど、辛いコードを書かざる得ませんでした。</p><pre><code class="language-typescript">const user = await xprisma.user.findFirst()
const userWithFullName = (user: User) =&gt; {
  return { ...user, fullName: ${user.firstName} ${user.lastName} }
}</code></pre><p>一方、prisma.$extendsを使用してprismaのインスタンスを拡張する時に使用するオブジェクトの管理をしっかり行わないと拡張の処理が分散し、バグを生んでしまうなと考えました。</p><p>そこでドメインモデルごとにrepositoryを作成し、状態を永続化するための関数を作成できるようにします。</p><h1 id="h8a175a9b0e">前提</h1><p>以下のnestjs、prismaのバージョンを使用しています。</p><pre><code class="language-shell">&quot;@nestjs/cli&quot;: &quot;8.2.4&quot;,
&quot;@nestjs/common&quot;: &quot;8.4.7&quot;,
&quot;@nestjs/core&quot;: &quot;8.4.7&quot;,
&quot;@prisma/client&quot;: &quot;4.16.1&quot;,
&quot;prisma&quot;: &quot;4.16.1&quot;,</code></pre><h1 id="h682b6e6f45">repositoryを作る</h1><p>例としてuser情報を扱うリポジトリを作ります。</p><p>まず、baseとなるrepositoryを作成し、リポジトリ共通の処理を作成し、リポジトリごとに使用するメソッドを統一します。</p><p>共通の処理なので、appディレクトリに配置することにしました。</p><div data-filename="src/app/repositories/base.repository.ts"><pre><code class="language-typescript">import { Injectable } from &apos;@nestjs/common&apos;;

import { Prisma, PrismaClient } from &apos;@prisma/client&apos;;

import { PrismaService } from &apos;src/prisma/prisma.service&apos;;

export type UncapitalizedModelName = Uncapitalize&lt;Prisma.ModelName&gt;;

@Injectable()
export abstract class BaseRepository&lt;T&gt; {
  constructor(
    protected readonly prismaService: PrismaService,
    readonly type: UncapitalizedModelName,
  ) {}

  private _prisma: PrismaClient;

  protected provideExtended(extendedPrisma) {
    this._prisma = extendedPrisma;
  }

  execute(prisma?: Prisma.TransactionClient) {
    if (prisma) {
      return prisma[this.type] as unknown as T;
    }
    return this._prisma[this.type] as unknown as T;
  }

}</code></pre></div><ul><li>#provideExtended</li></ul><p>各リポジトリで拡張したPrismaClientを渡すことで、executeで拡張したPrismaClientを使用することができるようになります。</p><ul><li>#execute</li></ul><p>BaseRepositoryのconstructorで渡したtypeを使い、baseRepositoryを継承した各リポジトリでexecuteをよびだした場合に特定のモデルのみが呼び出されるようにしていました。</p><p>また、引数にprismaインスタンスを渡せるようにすることで、Transaction処理がある場合にも同一トランザクションで処理できるようにしています。</p><p>次は実際BaseRepositoryを継承したUserRepositoryを作成します。</p><p>UserRepositoryにはsearchというメソッドを追加するclient-extensionsの定義を作成しています。</p><div data-filename="src/user/repositories/user.repository.ts"><pre><code class="language-typescript">import { Prisma } from &apos;@prisma/client&apos;;
import { Injectable } from &apos;@nestjs/common&apos;;
import {
  BaseRepository,
  UncapitalizedModelName,
} from &apos;src/app/repositories/base.repository&apos;;

import { PrismaService } from &apos;src/prisma/prisma.service&apos;;
const clientExtension = Prisma.defineExtension((client) =&gt; {
  return client.$extends({
    model: {
      user: {
        create({ userName, uid, address, email }: { userName: string, uid: string, address: string, email: string }) {
          const prisma = Prisma.getExtensionContext(this);
          return await prisma.create({
            data: {
              name: userName,
              uid: uid,
              email,
              profile: {
                create: {
                  address
                }
              }
            }
          })
        },
        async search(searchText: string) {
          const prisma = Prisma.getExtensionContext(this);
          return prisma.findMany({
            where: searchText
              ? {
                  OR: [
                    {
                      name: searchText
                        ? {
                            contains: searchText,
                            mode: &apos;insensitive&apos;,
                          }
                        : undefined,
                    },
                    {
                      email: searchText
                        ? {
                            contains: searchText,
                            mode: &apos;insensitive&apos;,
                          }
                        : undefined,
                    },
                    {
                      uid: searchText
                        ? {
                            contains: searchText,
                            mode: &apos;insensitive&apos;,
                          }
                        : undefined,
                    },
                  ],
                }
              : undefined,
          });
        },
      },
    },
  });
});

const typeName: UncapitalizedModelName = &apos;user&apos;;

const extendPrisma = (prisma: PrismaService) =&gt; {
  return prisma.$extends(clientExtension);
};

type ExtendedClientType = ReturnType&lt;typeof extendPrisma&gt;;

@Injectable()
export class UserRepository extends BaseRepository&lt;
  ExtendedClientType[typeof typeName]
&gt; {
  constructor(protected readonly prismaService: PrismaService) {
    super(prismaService, typeName);
    this.provideExtended(extendPrisma(prismaService));
  }

  extension(prsima) {
    return extendPrisma(prsima);
  }
}</code></pre></div><p>まずconstructorで継承したBaseRepositoryのconstructorにprismaServiceとtypeNameを渡すことでexecuteを介してはuserモデルの関数のみ実行できる状態にすることができます。</p><p>※prismaServiceがない場合は通常のprismaからimportしたPrismaClientでも問題ないはずです。</p><p>これでUserRepositoryではPrismaのUserモデルの既存メソッド + 拡張したsearchメソッドが使用できるようになりました。</p><p>最後に複数の異なるリポジトリをまたいでTransactionを扱いたい場合があったので、transactionを扱えるようにするリポジトリも作成することにしました。(命名はもう少し検討の余地はあるかもしれない...)</p><pre><code class="language-typescript">import { Injectable } from &apos;@nestjs/common&apos;;

import { PrismaService } from &apos;src/prisma/prisma.service&apos;;

@Injectable()
export class TransactionRepository {
  constructor(readonly prismaService: PrismaService) {}

  public getTransaction(...repositories: any[]): PrismaService[&apos;$transaction&apos;] {
    let newPrismaService = this.prismaService;
    if (repositories.length) {
      newPrismaService = repositories.reduce((acc, client) =&gt; {
        const newClient = client.extension(acc);
        const prevClient = acc.$extends(newClient);
        return newClient.$extends(prevClient);
      }, this.prismaService);
    }
    return newPrismaService.$transaction.bind(newPrismaService);
  }
}</code></pre><p>getTransactionに複数リポジトリを引数で渡せるようにしています。</p><p>こうすることで、this.prismaServiceに対して、各リポジトリで定義したclientExtensionをマージし、1つになったPrismaClientを作成したTransactionalClientを取得することができるようになります。(型がanyなのは改善の余地ありですね)</p><p>※例えばUserRepositoryのsearchメソッド、CompanyRepositoryのfindCompanyByIdという関数があったらその両方が適用されたPrismaClientを作成します。</p><p>そして、TransactionRepositoryをどこでも使えるようにTransactionModuleを作成し、@Global()のデコレーターをつけます。</p><pre><code class="language-typescript">import { Global, Module } from &apos;@nestjs/common&apos;;
import { TransactionRepository } from &apos;../repositories/transaction.repository&apos;;

@Global()
@Module({
  providers: [TransactionRepository],
  exports: [TransactionRepository],
})

export class TransactionModule {}</code></pre><p>最後にapp.moduleで読み込んでおきます</p><div data-filename="src/app/app.module.ts"><pre><code class="language-typescript">import { Module } from &apos;@nestjs/common&apos;;
import { UserModule } from &apos;../user/user.module&apos;;
import { AppController } from &apos;./app.controller&apos;;
import { TransactionModule } from &apos;./modules/transaction.module&apos;;

@Module({
  imports: [
    TransactionModule,
    UserModule,
  ],
  controllers: [AppController],
})
export class AppModule {}</code></pre></div><h1 id="h4d849f4362">使い方</h1><p>使い方は他と同様moduleで読み込んでserviceで使います。</p><pre><code class="language-typescript">import { Module } from &apos;@nestjs/common&apos;;
import { UserService } from &apos;./services//user.service&apos;;
import { UserController } from &apos;./controllers/user.controller&apos;;

@Module({
  controllers: [UserController],
  providers: [
    UserService,
    UserRepository,
  ],
  exports: [UserRepository],
})
export class UserModule {}</code></pre><p>そしてserviceのconstructorでリポジトリを読み込んで使います。</p><pre><code class="language-typescript">import { Injectable } from &apos;@nestjs/common&apos;;
import { UserRepository } from &apos;../repositories/user.repository&apos;;
@Injectable()
export class UserService {
  constructor(private readonly userRepository: UserRepository) {}

  async search(searchQuery: string) {
    return await this.userRepository.execute().search(searchText);
  }
}</code></pre><p>また、トランザクション処理を行いたい場合は以下のように書きます。</p><pre><code class="language-typescript">const transaction = this.transactionRepository.getTransaction(
  this.userRepository,
);
await transaction(async (prisma) =&gt; {
    await this.userRepository.execute(prisma).create({ userName: &apos;user1&apos;, email: &apos;hoge@test.com&apos;, address: &apos;example&apos;, uid: &apos;123&apos; })
    await this.userRepository.execute(prisma).create({ userName: &apos;user2&apos;, email: &apos;hoge2@test.com&apos;,  address: &apos;example&apos;, uid: &apos;456&apos; })
});</code></pre><p>これでどちらか一方のユーザ作成が失敗した場合は処理全体がロールバックされます。</p><h1 id="h8d78e14043">感想</h1><p>これを作ったモチベーションはclient-extensionsを試したいだったのですが、</p><p>実際使ってみて、今まで型の問題でできなかったことができるようになり、prismaの進化に驚いています。</p><p>ただ、トランザクション周りはもう少しいい感じに書けないかなぁと思っています。</p><p>今回はこんな感じで終わろうと思います。</p>

Prisma4でRepositoryを実装する

<p>最近はNest.js + Prismaの構成でAPIを作ることが多いのですが、汎用的なページネーションメソッドを作ってみたので、簡単にご紹介します！</p><p>- Prisma: 3.6.0</p><h1 id="he3a176d1ea">完成コード</h1><p>早速ですが、こちらが完成コードです。</p><p>引数にprismaのインスタンスとクエリを渡せるようにして、共通使用できるようにしています。ロジックの説明は割愛します;;</p><div data-filename="src/prisma/helpers/paginate.ts"><pre><code class="language-typescript">interface Base {

  count: ({ where, take, skip }: any) =&gt; Promise&lt;number&gt;;

  findMany: (query) =&gt; Promise&lt;any&gt;;

}

export interface PaginateData&lt;T&gt; {

  data: T[];

  total: number;

  hasNext: boolean;

}

// ページングでのデータ取得

export const withPaginate = async &lt;T extends Base, P&gt;(

  prisma: T,

  query: any,

): Promise&lt;PaginateData&lt;P&gt;&gt; =&gt; {

  const take = query.take ? Number(query.take) : DEFAULT_PAGINATE_LIMIT;

  const skip = query.skip ? Number(query.skip) : undefined;

  const total = await prisma.count({

    where: query.where,

    take: undefined,

    skip: undefined,

  });

  // 次があるか判定するために1つ多く取得する

  const result = await prisma.findMany({

    ...query,

    take: take + 1,

    skip,

  });

  // 1ページの要素数+1が取得できたら次があると判定する

  const hasNext = result.length &gt; take;

  // 余分に取得した要素を消して1ページ分のデータを返す

  const data = result.slice(0, take);

  return {

    data,

    total,

    hasNext,

  };

};</code></pre></div><h1 id="ha0e95c0643">使用方法</h1><p>こんな感じで使用できます。</p><p>ジェネリクスの第二引数はあらかじめ型を定義したものを渡す必要があって冗長なので改善したいです。。</p><pre><code class="language-typescript">type GetClasses = Class[];

const result = await withPaginate&lt;typeof this.prismaService.class, GetClasses&gt;(this.prismaService.class, query);</code></pre>

Prisma3でlimit,offsetのページネーションを実装する

<p>業務委託で関わってる案件でmonorepoなプロジェクトをHerokuにデプロイしようとしたのですが、結構ハマったので備忘録として書いておきます。</p><h1 id="haba9545297">ディレクトリ構造</h1><pre><code class="language-shell">$ tree ./ -a -L 1
./
├── .git
├── .gitignore
├── admin
├── shared
├── frontend
└── backend</code></pre><p>sharedディレクトリはプロジェクト共通のパッケージで、admin、frontend、backendからシンボリックリンクで参照させる構成をとっている。</p><p>各プロジェクト直下で、`npm install ../shared`とすることで各プロジェクトのnode_modulesにシンボリックリンクとなってインストールされる。</p><h1 id="h90b34e72a9">できなかったやり方</h1><h2 id="ha7f9688711">1.git subtree splitを使う</h2><p>git subtree split で切り出すことによりルートディレクトリを変更してpushすることができる。</p><pre><code class="language-shell">$ git push --force heroku git subtree split --prefix backend HEAD:master</code></pre><p>だが、この例だと、backendディレクトリだけを切り出すので他のディレクトリが削除されてしまい、sharedディレクトリを見つけることができなくなってしまう。</p><p>よってダメだった。</p><h2 id="ha8406189e9">2. heroku-buildpack-monorepoを使う</h2><p>デプロイ手段としてgitやgithub actionsで処理するのではなく、Heroku buildpackに任せるという選択肢もあり、Herokuの認証が不要なためデプロイをHerokuだけで完結することができるが、この方法もダメだった。</p><p>issueにこんなのも上がっていたが、どれもうまく動かなかった。</p><p><a href="https://github.com/lstoll/heroku-buildpack-monorepo/issues/7">https://github.com/lstoll/heroku-buildpack-monorepo/issues/7</a></p><h2 id="h11bd29d6e0">では、なぜできないのか</h2><ul><li>デプロイ対象のディレクトリ以外を削除してしまう動作に問題がありそう。</li></ul><p>→ 全てのディレクトリ残したまま、特定のディレクトリに対してビルドできるようにしたい。</p><h1 id="hcc42147fe1">実現できたやり方</h1><p>色々試行錯誤した結果、このbuildpackで目的の条件を達成することができた。</p><h2 id="h9276b40e27">heroku-buildpack-select-subdirを使う</h2><p><a href="https://github.com/Pagedraw/heroku-buildpack-select-subdir">https://github.com/Pagedraw/heroku-buildpack-select-subdir</a></p><p>これを使うことによって、他のディレクトリを残したままデプロイを行うことができた。</p><p>Deprecatedとなっているが、躊躇せず使って大丈夫そう。</p><p>移行先に書かれているものは全てうまくいかなかった。おそらく上述した問題と同様。</p><p><a href="https://github.com/timanovsky/subdir-heroku-buildpack">https://github.com/timanovsky/subdir-heroku-buildpack</a></p><p><a href="https://github.com/lstoll/heroku-buildpack-monorepo">https://github.com/lstoll/heroku-buildpack-monorepo</a></p><h2 id="h4d849f4362">使い方</h2><p>使い方はBUILDPACKという環境変数に</p><pre><code class="language-bash">backend=https://github.com/heroku/heroku-buildpack-nodejs.git</code></pre><p>ような形で形で設定することで、</p><p>backendに配置されているProcfileをルートディレクトリにコピーしてアプリを起動させることができる。</p><p>なので、各ディレクトリにはProcfileを作成しておく必要がある</p><h3 id="hce137f7854">ハマりポイント</h3><ul><li>Procfileの起動コマンド</li></ul><p>backendディレクトリがルートディレクトリではないので、一度backendディレクトリに移動してからコマンドを実行する必要がある。</p><p>よって、--prefixを使うことでbackendのディレクトリ上でコマンドを実行するようにしなければいけなかった。</p><pre><code class="language-shell">web: npm run start:prod --prefix backend</code></pre><h1 id="h8d78e14043">感想</h1><p>heroku-buildpack-select-subdirを使ったらすぐにできた。</p><p>Deprecatedとなっていたので、他のbuildpackで試行錯誤して時間を溶かしてしまった。。</p><p>時期にHerokuが有料となるので、そろそろ引っ越したい気もする。</p><p>それでは今回はこの辺で！</p><p></p>

Herokuにmonorepoプロジェクトをデプロイした時に少しハマった

<h1 id="h3cc281bdcc">こんにちは</h1><p>どうも転生しました。884です。</p><p>前、Gatsby.jsを使用してブログを作っていたのですが、全然投稿しなくなって完全に技術ブログの執筆から離れてしまっていました。最終投稿1年以上前とかw</p><p>最近、ReactやNext.jsを副業とかで触る機会が増えたので、この期に新しく作ることにしました。さよならGatsyby・・・。</p><p>結構ぱぱって作ったのでめちゃくちゃシンプルな感じですが、今後アップデートしていい感じにしていこうと思います〜。</p><h1 id="hec16d4932f">使った技術</h1><ul><li>next.js</li></ul><p>v12入れた</p><ul><li>markdown-it</li></ul><p>文章のスタイルに[github](<a href="https://github.com/sindresorhus/github-markdown-css)のやつを当ててみた。結構良さそう">https://github.com/sindresorhus/github-markdown-css)のやつを当ててみた。結構良さそう</a></p><ul><li>vanilla-extract</li></ul><p>今までstyled-components使ってたんですが、最近流行っているようなのでこちらをチョイスしました。使った感想は今度ブログにしますわよ</p><h1 id="h6ea52e9c30">追加したいやつ</h1><ul><li>カテゴリー機能</li><li>独自ドメイン取得</li><li>プロフィールページやら追加</li><li>目次でアンカーリンクしたいお</li><li>マークダウンのパッケージ本当にこれでいいのかをもうちょい調べる</li></ul><p>今日はここまで〜。ぼちぼち更新していきたい！</p>

技術ブログをNext.jsで作り直しました

<p>最近、副業でshopifyの案件に携わっているのですが、ストアフロントの部分をliquidではなく、javascriptで書いています。 最初はvueで書いていたのですが、最近はsvelteを使ってストアフロント部分を作成するようになりました。</p><p>svelteは非常にvueに似ているのですが、vueのようにthisに縛られず、typescriptと相性が良く軽いため、最近好きなフレームワークの一つです。</p><p>shopifyでsvelteやvueを使ってストアフロントを作る場合は、script_tag apiを使ってshopify側にコンパイル済みのjavascriptを渡してsvelteアプリを表示するのですが、 マウントする際、マウントするターゲットのDOMを予めhtmlの中に入れて上げる必要があります。(vue等も同じですね)</p><pre><code class="language-html">&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;</code></pre><p>こんなhtmlをliquidのtemplateに書いてあげる必要があるのですが、作成したアプリをインストールするたびにユーザーに手動でテーマを編集してもらうのは申し訳ないし、ユーザー体験的に良くないので、自動でDOM生成してマウントする方法を考えてみました。</p><p>今回紹介するのは、shopifyからデフォルトで提供されているthemeのみ対応しています。</p><p>まず、はじめにshopifyのshopに適用されているthemeによって処理を分岐する部分を書きます。</p><p>テーマのリストです。796とかidで判定してる理由はユーザー側でテーマの名前を変更されてしまった場合に対応するためです。 この番号は一意なので、テーマ名が変わっても変更されることはないです。</p><div data-filename="shopifyThemeList.ts"><pre><code class="language-ts">export const ShopifyThemeList: { [key: number]: string } = {
  796: &apos;Debut&apos;,
  885: &apos;Express&apos;,
  380: &apos;Minimal&apos;,
  766: &apos;Boundless&apos;,
  578: &apos;Simple&apos;,
  775: &apos;Venture&apos;,
  829: &apos;Narrative&apos;,
  679: &apos;Supply&apos;,
  730: &apos;Brooklyn&apos;
}</code></pre></div><p>実際にタグをマウントする処理です。 insertAdjacentHTMLを使ってDOMをマウントしています。</p><div data-filename="setupApp.ts"><pre><code class="language-ts">import { ShopifyThemeList } from &apos;./ShopifyThemeList&apos;

const mountDom = &apos;&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;&apos;;

export const dynamicInsertDom = () =&gt; {
  // windowオブジェクトの中にshopifyの情報が色々入ってるのでそこからtheme_idを取り出す
  const themeNumber: number = (window as any).Shopify.theme.theme_store_id;
  if (!themeNumber) {
    console.error(&apos;this theme is unsupported&apos;)
    return
  }
  const themeName = ShopifyThemeList[themeNumber]
  setInsertDomByTheme(themeName)
}

const setInsertDomByTheme = (themeName: string) =&gt; {
  switch (themeName) {
    case &apos;Express&apos;: {
      const targetDom = document.getElementsByClassName(&apos;cart-drawer__header&apos;)[0];
      setAppTag(targetDom, mountDom, &apos;afterend&apos;);
      break;
    }
    default:
      console.error(&apos;this theme is unsupported&apos;)
      break;
  }
}

const setAppTag = (targetDom: Element, insertDom: string, type: InsertPosition) =&gt; {
  if (!targetDom) return;
  targetDom.insertAdjacentHTML(type, insertDom);
  console.log(&apos;setup success!&apos;)
}</code></pre></div><p>main.tsでアプリをマウントする前にdynamicInsertDomメソッドを呼び出します。</p><p>これで動的に生成したタグに対してsvelteアプリをマウントします。</p><div data-filename="main.ts"><pre><code class="language-ts">import App from &apos;./App.svelte&apos;
import { dynamicInsertDom } from &apos;./setupApp&apos;

// アプリをマウントする
dynamicInsertDom()

let app;
app = new App({
  target: document.querySelector(&apos;#app&apos;)
})

export default app</code></pre></div><p>これでユーザー側に操作してもらうことなくアプリを表示することができるようになります。</p><p>終わりに</p><p>ユーザーに手動でタグを入れるのは手間だとshopify側に言われ、アプリの申請が通らないため、この処理を作成しました。</p><p>なので、javascriptフレームワークを使ったストアフロント画面の作成では必須になってくるとおもいますので、助けになれば！</p><p>あぁ。。。そろそろreactでなにか作りたいなあ。。。</p>

Svelteで作ったアプリを動的に生成したDOMにマウントする

<p>graphqlサーバをServerless Functionとして無料でデプロイできるPaaSのvercelを試してみました。</p><p>完成系のrepositoryは↓です。</p><p><a href="https://github.com/Uki884/vercel-graphql">https://github.com/Uki884/vercel-graphql</a></p><h1 id="he9636dbaaa">Vercelについて</h1><p>Next.jsを作っているVercel社が提供しているPassです。静的サイトとserverless機能を手軽にデプロイできます。</p><p>github等とも連携できるので、githubにpushされたらデプロイを開始する、なんて事も自動でやってくれたりします。</p><h1 id="h9669cfc05f">構築する際の注意点</h1><p>vercelはapi server をserverless functionとしてデプロイできますが、プロジェクトルートのapiディレクトリに配置する必要があります。(next.jsのため？)</p><p>そのため、apiディレクトリ以外にserverを配置するとデプロイがうまくいきません。</p><h1 id="hc7a5b982c7">構築する</h1><p>はじめにgraphql serverを構築するのに必要なモジュールを入れます。今回はkoaを使います。</p><pre><code class="language-shell">npm i koa apollo-server-koa koa-router graphql graphql-tools vercel ts-node typescript</code></pre><p>導入が完了したら、typescriptをコンパイルするための設定を作成します。</p><pre><code class="language-shell">vi tsconfig.json</code></pre><p>targetにes5と指定し、トランスパイルした時にes5で出力されるようにします。</p><p>moduleにはcommonjsと指定し、出力されるjavascriptのモジュールがCommonJSで出力されるように設定します。※今回はnodeからしか出力後のjavascriptが参照されないのでcommonjsとします。</p><p>outDirはvercelのビルド後の出力先が`public`ディレクトリであるため、`public`とする必要があります。</p><div data-filename="json"><pre><code class="language-json">  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;es5&quot;,
    &quot;esModuleInterop&quot;: true,
    &quot;module&quot;: &quot;commonjs&quot;,
    &quot;baseUrl&quot;: &quot;./&quot;,
    &quot;lib&quot;: [
      &quot;es2020&quot;,
      &quot;dom&quot;
    ],
    &quot;types&quot;: [
        &quot;node&quot;
    ],
    &quot;moduleResolution&quot;: &quot;Node&quot;,
    &quot;sourceMap&quot;: true,
    &quot;outDir&quot;: &quot;./public&quot;,
    },
    &quot;include&quot;: [
        &quot;**/*&quot;
    ],
    &quot;allowJs&quot;: true,
    &quot;checkJs&quot;: true,
    &quot;strict&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true
}</code></pre></div><p>上記の設定が完了したらpackage.jsonにtypescriptをコンパイルする設定や、その他のnpm scriptを登録します。</p><p>npm run buildでコンパイル</p><p>npm run devでコンパイルとサーバ起動するようにしています。</p><pre><code class="language-json">{

  &quot;name&quot;: &quot;vercel-graphql&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;vercel-graphql&quot;,
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;tsc &amp;&amp; npm run start&quot;,
    &quot;build&quot;: &quot;tsc&quot;,
    &quot;start&quot;: &quot;node ./public/index.js&quot;,
    &quot;deploy&quot;: &quot;vercel&quot;,
    &quot;deploy:production&quot;: &quot;vercel --prod&quot;
  },
  &quot;author&quot;: &quot;Uki884&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;dependencies&quot;: {
    &quot;@types/node&quot;: &quot;^13.1.1&quot;,
    &quot;apollo-server-koa&quot;: &quot;^2.19.0&quot;,
    &quot;dotenv&quot;: &quot;^8.2.0&quot;,
    &quot;graphql&quot;: &quot;^14.5.8&quot;,
    &quot;graphql-import&quot;: &quot;^1.0.2&quot;,
    &quot;graphql-tools&quot;: &quot;^7.0.2&quot;,
    &quot;koa-router&quot;: &quot;^10.0.0&quot;,
    &quot;nodemon&quot;: &quot;^2.0.2&quot;,
    &quot;ts-node&quot;: &quot;^8.5.4&quot;,
    &quot;vercel&quot;: &quot;^21.0.1&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;concurrently&quot;: &quot;^3.6.0&quot;,
    &quot;nodemon&quot;: &quot;^2.0.2&quot;,
    &quot;ts-loader&quot;: &quot;^8.0.11&quot;,
    &quot;typescript&quot;: &quot;^3.9.7&quot;
  }
}</code></pre><p>上記が完了したら実際にapiサーバを構築していきます。</p><div data-filename="api/index.ts"><pre><code class="language-shell">mkdir api
$vi api/index.ts</code></pre></div><div data-filename="api/index.ts"><pre><code class="language-typescript">import Koa from &apos;koa&apos;;
import { ApolloServer, gql } from &apos;apollo-server-koa&apos;;
import { makeExecutableSchema } from &apos;graphql-tools&apos;;

const books = [
  {
    title: &apos;The Awakening&apos;,
    author: &apos;Kate Chopin&apos;,
  },
  {
    title: &apos;City of Glass&apos;,
    author: &apos;Paul Auster&apos;,
  },
];

const typeDefs = gql`
  type Book {
    title: String
    author: String
  }
  type Query {
    books: [Book]
  }
`;

const resolvers = {
  Query: {
    books: () =&gt; books,
  },
};

const schema = makeExecutableSchema({
  typeDefs,
  resolvers
});

const server = new ApolloServer({
  schema,
  introspection: true,
  playground: true,
});

const app = new Koa();
server.applyMiddleware({ app });

const port = process.env.PORT || 8081

app.listen({ port }, () =&gt;
  console.log(`🚀 Server ready at http://localhost:${port}${server.graphqlPath}`),
);

export default app.callback()</code></pre></div><p>ポイントとしては、``app.callback()``としてexportすることです。</p><p>一回立ち上げてみます。以下のように表示されれば成功です。</p><div data-filename="bash"><pre><code class="language-shell">npm run dev

&gt; vercel-graphql@1.0.0 start /Users/hayashiyuki/Desktop/vercel-graphql

&gt; node ./public/index.js

🚀 Server ready at http://localhost:8081/graphql</code></pre></div><p>ローカルでの動作確認が完了したので、実際にvercelにデプロイしていきます。</p><div data-filename="bash"><pre><code class="language-shell">npm run deploy</code></pre></div><p>以下のように表示されたらメールアドレスを入力して、vercelにログインしてください</p><p>ログイン後、プロジェクトの設定をいくつか求められますが、全てenterで進めてしまって大丈夫です。</p><pre><code class="language-shell">No existing credentials found. Please log in:

Enter your email: </code></pre><p>以下のように表示されればデプロイがうまくいっています</p><pre><code class="language-shell">Vercel CLI 21.0.1

🔍  Inspect: https://vercel.com/uki884/vercel-graphql/87tb9l7df [3s]

✅  Preview: https://vercel-graphql.uki884.vercel.app [copied to clipboard] [31s]

📝  To deploy to production (vercel-graphql-three.vercel.app), run vercel --prod

</code></pre><p>上記で実行したのはpreview環境へのデプロイなので、productionにデプロイするには以下のコマンドを実行します。</p><p>preview環境はコードを変更した場合の確認するための環境で、本番にデプロイせずに実際の動作を確認することができます。staging環境を別途用意する必要がないのは便利ですね。</p><p>以下のコマンドで本番環境へコードが反映されます。</p><pre><code class="language-shell">npm run deploy:production

&gt; vercel --prod

Vercel CLI 21.0.1

🔍  Inspect: https://vercel.com/uki884/vercel-graphql/87tb9l7df [987ms]

✅  Production: https://vercel-graphql-three.vercel.app [copied to clipboard] [2s]</code></pre><p>書かれているurlにアクセスして、正常に画面が表示されたらデプロイ完了です！</p><h1 id="h9be0c3393d">おわりに</h1><p>かなり簡単にapiサーバを立てることができました。</p><p>githubとかと連携したりnext.jsをフロントエンドで使えば、</p><p>ほぼサーバを意識することなく、高速にアプリを作ることができるようになりますね。</p>

GraphQL Server(Koa.js, TypeScript)をVercelを使って無料でデプロイする

<p>今回はvue3 + typescript + composition-apiで認証を作ってみようと思います。 auth0自体のセットアップ等の説明は省きます。</p><p>auth0にはLockとauth0-spa-js主に2つのプラグインがありますが、 それぞれ特徴として以下があります。</p><ul><li>Lock</li></ul><p>UIをアプリ内に埋め込んで、UIを独自にカスタマイズすることができます。</p><ul><li>auth0-spa-js</li></ul><p>こちらはリダイレクト先で認証を行う形式になります。</p><p>細かいカスタマイズが可能なのはLockですが、今回はauth0-spa-jsを使って認証メソッドを作ります。</p><p>vue-cliを使ったvue3プロジェクト上で構築します。</p><h2 id="he5f2dc8d77"> インストール</h2><p>まずはじめにauth0-spa-jsを導入します。 vue3はvue-cliを使用して環境を構築しています。</p><pre><code class="language-bash">npm install @auth0/auth0-spa-js</code></pre><h2 id="he8fa805383">環境変数設定</h2><p>vue-cliだと環境変数にVUE_APPをつけないと正常に認識されないのでちゃんとつけます。</p><pre><code class="language-bash">VUE_APP_AUTH0_DOMAIN=*****.auth0.com // auth0のドメインに書き換える
VUE_APP_AUTH0_CLIENT_ID=aaaaaaaaaaaa // auth0のクライアントIDに書き換える</code></pre><h2 id="h3337ce5f99">auth0認証モジュール作成</h2><p>useAuthという関数を作成し、auth0の認証だけを提供するメソッドを作成します。この後にUserのStoreと連携する部分を作成する流れになります。 まだ、外部に切り出したモジュールについてベストプラクティスがわかってないのですが、外部で使うメソッドはexportする際にcomposition関数であることがわかるようにuseをつけてexportするようにしています。</p><p>以下が完成系です。特に難しいことはしていません。useAuthを呼び出した際に、onMountedでauth0クライアントを作成しています。 また、urlのqueryを見てcodeとstateに文字列が入っていた場合にはauth0で認証するために必要な処理を行っています。 ログインした際に戻される先は&apos;/callback&apos;にリダイレクトするようにしているので、auth0の設定のcallback urlも&apos;/callback&apos;に飛ぶようにする必要があります。</p><div data-filename="auth/index.ts"><pre><code class="language-ts">import createAuth0Client, {
  Auth0Client,
  IdToken,
  RedirectLoginResult
} from &quot;@auth0/auth0-spa-js&quot;;
import { reactive, onMounted } from &quot;vue&quot;;

interface State {
  loading: boolean;
  isAuthenticated: boolean;
  user: User | null;
  idToken: string;
  popupOpen: boolean;
  error: string | null;
  auth0Client: Auth0Client | null;
}

interface UseAuth {
  useLoginWithRedirect: Function;
  useLogout: Function;
  useIsAuthenticated: Function;
  useInitializeUser: Function;
}

export const useAuth = (): UseAuth =&gt; {
  const DOMAIN = process.env.VUE_APP_AUTH0_DOMAIN;
  const CLIENT_ID = process.env.VUE_APP_AUTH0_CLIENT_ID;
  const redirectUri = window.location.origin + &quot;/callback&quot;;

  const state = reactive&lt;State&gt;({
    loading: false,
    isAuthenticated: false,
    user: null,
    idToken: &quot;&quot;,
    error: null,
    auth0Client: null
  });

  const createClient = async (): Promise&lt;void&gt; =&gt; {
    try {
      if (state.auth0Client) return;
      state.auth0Client = await createAuth0Client({
        domain: DOMAIN,
        client_id: CLIENT_ID,
        audience: &quot;&quot;,
        redirect_uri: redirectUri
      });
    } catch (e) {
      return e;
    }
  };

  const loginWithRedirect = async () =&gt; {
    try {
      if (!state.auth0Client) throw new Error(&quot;not created auth0 instance&quot;);
      return await state.auth0Client.loginWithRedirect();
    } catch (e) {
      console.log(e);
    }
  };

  const logout = async (): Promise&lt;void&gt; =&gt; {
    state.isAuthenticated = false;
    return state.auth0Client?.logout();
  };

  const getIdTokenClaims = async (): Promise&lt;string&gt; =&gt; {
    let token: IdToken;
    try {
      if (state.idToken) throw new Error(&quot;already exists idToken&quot;);
      if (!state.auth0Client) throw new Error(&quot;not created auth0 instance&quot;);
      token = await state.auth0Client.getIdTokenClaims();
      state.idToken = token.__raw;
      document.cookie = `token=${token.__raw}`;
      return token.__raw;
    } catch (e) {
      console.log(e);
      return e;
    }
  };

  const handleRedirectCallback = async (): Promise&lt;RedirectLoginResult&gt; =&gt; {
    try {
      if (!state.auth0Client) throw new Error(&quot;not created auth0 instance&quot;);
      return await state.auth0Client.handleRedirectCallback();
    } catch (e) {
      return e;
    }
  };

  const getUser = async (): Promise&lt;Auth0User&gt; =&gt; {
    try {
      if (!state.auth0Client) throw new Error(&quot;not created auth0 instance&quot;);
      return await state.auth0Client.getUser();
    } catch (e) {
      return e;
    }
  };

  const isAuthenticated = async (): Promise&lt;boolean&gt; =&gt; {
    if (!state.auth0Client) new Error(&quot;not created auth0 instance&quot;);
    const result = await state.auth0Client?.isAuthenticated();
    if (!result) {
      return false;
    }
    return result;
  };

  const initializeUser = async &lt;T&gt;(): Promise&lt;{
    user: Auth0User;
    token: string;
    isLoggedIn: boolean;
  }&gt; =&gt; {
    try {
      await createClient();
      const isAuth = await isAuthenticated();
      if (!isAuth) throw new Error(&quot;please login&quot;);
      const user: Auth0User = await getUser();
      const token = await getIdTokenClaims();
      const isLoggedIn: boolean = await isAuthenticated();

      return {
        user,
        token,
        isLoggedIn
      };
    } catch (e) {
      return e;
    }
  };

  onMounted(async () =&gt; {
    await createClient();
    const query = window.location.search;
    if (query.includes(&quot;code=&quot;) &amp;&amp; query.includes(&quot;state=&quot;) &amp;&amp; !state.loading) {
      await handleRedirectCallback();
      window.location.href = &quot;/&quot;;
    }
  });

  return {
    useLoginWithRedirect: loginWithRedirect,
    useLogout: logout,
    useIsAuthenticated: isAuthenticated,
    useInitializeUser: initializeUser
  };
};</code></pre></div><h2 id="h0efab78cde">Storeを作る</h2><p>これでひとまずauth0関連の関数をモジュール化できたので、次はuserのstoreをつくります。 storeはvuexを使わず、provide/injectパターンを使ってやっていきます。</p><p>まずvuexで状態管理をする場合とprovide/injectで状態管理をする場合の違いをイメージで表してみました。</p><figure><img src="https://images.microcms-assets.io/assets/502905b3e7194f778b8ad63613bf4a01/5565b24276d641e0b6c9cf85ece6e96e/provide_inject.png" alt="" width="711" height="391"></figure><h3 id="h7e60a1f588">provide/inject</h3><p>vuexはvueインスタンス全体で状態を共有します。 そのため、グローバルに共有する必要のない状態まで管理することになります。一元管理することによってstoreディレクトリが肥大化し管理が煩雑になる事が考えられます。</p><p>一方、provide/injectパターンでは、トップレベルのコンポーネント毎に状態管理をします。 状態を利用したい場合は、明示的にinjectする必要があるので、状態管理が容易になります。</p><p>以下、メモを書いておきます。</p><ul><li>Vuex<ul><li>fluxパターンによって書き方を統一できるので、開発者ごとにコードの差がでにくい</li><li>vueコンポーネント以外でもstateを使う事ができる。vue-routerファイル等でもimportすれば状態を使える</li><li>vuex-persistedstate等を使えばstateをlocalstoageで管理することが容易にできる</li><li>ドキュメントやエラーの回避策が豊富(ネットを調べれば解決策を見つけやすい)</li><li>型が効きづらい</li></ul></li><li>provide/inject<ul><li>状態のスコープがprovideしたコンポーネント単位になるので、グローバルに持つ必要のない状態を管理しなくてよくなる。</li><li>型がきく</li><li>コードの書き方に決まりがないため、開発者ごとにバラバラなコードを書く事ができるゆえ破綻しやすい。</li><li>コンポーネント以外で状態を使いたい場合には使えない</li></ul></li></ul><p>ある程度の規模ではvuexは必要かなとは思いますが、ディレクトリごとに小さいストアを作ってバケツリレーを緩和させることもできるので、いい手段かなとは思います。</p><p>さて、長くなりましたが、本題にはいります。 今回はstoreディレクトリにuserのストアを作ってルートでprovideしてvuexみたいな使い方をしたいとおもいます。</p><div data-filename="store/userStore.ts"><pre><code class="language-ts">import { reactive, InjectionKey, inject, computed, ComputedRef } from &quot;vue&quot;;

import { useAuth } from &quot;@/auth&quot;;

export const UserKey: InjectionKey&lt;UserStore&gt; = Symbol(&quot;User&quot;);

interface State {
  loading: boolean;
  isAuthenticated: boolean;
  user: User | null;
  accessToken: string;
  popupOpen: boolean;
  error: string | null;
}

interface UseUser {
  useLogin: Function;
  useLogout: Function;
  useInitializeUser: Function;
  user: ComputedRef&lt;User | null&gt;;
  isAuthenticated: ComputedRef&lt;boolean&gt;;
}

export const useUser = (): UseUser =&gt; {
  const { useLoginWithRedirect, useLogout, useInitializeUser } = useAuth();

  const state = reactive&lt;State&gt;({
    loading: false,
    isAuthenticated: false,
    user: null,
    accessToken: &quot;&quot;,
    popupOpen: false,
    error: null
  });

  const user = computed(() =&gt; state.user);
  const isAuthenticated = computed(() =&gt; state.isAuthenticated);

  const login = async () =&gt; {
    await useLoginWithRedirect();
  };

  const logout = async () =&gt; {
    await useLogout();
  };

  const setUser = (payload: {
    user: User;
    isLoggedIn: boolean;
    token: string;
  }) =&gt; {
    state.user = payload.user;
    state.isAuthenticated = payload.isLoggedIn;
    state.accessToken = payload.token;
  };

  const initializeUser = async (): Promise&lt;void&gt; =&gt; {
    try {
      if (!state.user) new Error(&quot;Please Login&quot;);
      const result = await useInitializeUser();
      if (!result) new Error(&quot;Please Login&quot;);
      setUser(result);
    } catch (e) {
      console.log(e);
      return e;
    }
  };

  return {
    useLogin: login,
    useLogout: logout,
    useInitializeUser: initializeUser,
    user,
    isAuthenticated
  };
};

export type UserStore = ReturnType&lt;typeof useUser&gt;;

export const useUserStore = () =&gt; {
  const store = inject(UserKey) as UserStore;
  if (!store) {
    throw new Error(&quot;useUserStore() is called without provider.&quot;);
  }
  return store;
};</code></pre></div><h2 id="hbffb87eec1">使ってみる</h2><p>先ほど作ったuseAuthをimportし、各メソッドで使用しています。またUserKeyを定義し、この値を使用してprovideとinjectを行います。 useUserStoreメソッドを作ることによって、コンポーネントでstoreを利生する場合にimportする物が減るので管理が楽になります。</p><p>このuseUserをvueインスタンスを作成する場所でprovideしていきます。</p><div data-filename="main.ts"><pre><code class="language-ts">import { createApp } from &quot;vue&quot;;
import App from &quot;./App.vue&quot;;
import router from &quot;./router&quot;;
import store from &quot;./store&quot;;
import { useUser, UserKey } from &quot;@/store/UserStore&quot;;

createApp(App)
  .use(store)
  .use(router)
  .provide(UserKey, useUser())
  .mount(&quot;#app&quot;);</code></pre></div><p>createAppにメソッドチェーンしていくことができます。provide()を使ってUserKeyとuseUserをprovideします。 これでどのコンポーネントでもinjectすればuseUserメソッドが使用できるようになりました。</p><p>試しに適当なコンポーネントで作成したstoreの状態を利用してみます。</p><div data-filename="components/HelloWorld.vue"><pre><code class="language-ts">&lt;template&gt;
  &lt;div class=&quot;hello&quot;&gt;
    {{ user }}
    &lt;h3 v-if=&quot;!isAuthenticated&quot; @click=&quot;useLogin()&quot;&gt;ログイン&lt;/h3&gt;
    &lt;h3 v-if=&quot;isAuthenticated&quot; @click=&quot;useLogout()&quot;&gt;ログアウト&lt;/h3&gt;
    &lt;router-link to=&quot;/about&quot;&gt;about&lt;/router-link&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot;&gt;
import { defineComponent } from &quot;vue&quot;;
import { useUserStore } from &quot;@/store/UserStore.ts&quot;;

export default defineComponent({
  name: &quot;HelloWorld&quot;,
  props: {
    msg: String
  },
  setup(props, context) {
    const { useLogin, useLogout, user, isAuthenticated } = useUserStore();
    return {
      useLogin,
      useLogout,
      user,
      isAuthenticated
    };
  }
});
&lt;/script&gt;

&lt;style scoped lang=&quot;scss&quot;&gt;
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
&lt;/style&gt;</code></pre></div><p>コンポーネント内ではuseUserStoreを使ってinjectします。 setup内では明示的にreturnする必要があるのでちゃんとreturnします。 これでログインをクリックするとauth0の認証画面に遷移し、認証が完了すると、/callbackに戻ってきます。※auth0の設定で明示的にcallback URLを設定する必要があります。</p><p>callbackコンポーネントではtokenやユーザー情報の取得等を行います。</p><div data-filename="views/callback.vue"><pre><code class="language-ts">&lt;template&gt;
  &lt;div id=&quot;callback&quot;&gt;
    ログイン中...
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot;&gt;
import { defineComponent, onMounted, SetupContext } from &quot;vue&quot;;
import { useUser } from &quot;@/store/UserStore.ts&quot;;
import { useAuth } from &quot;@/auth/index&quot;;

export default defineComponent({
  setup(props, context: SetupContext) {
    useAuth();
  }
});
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt;&lt;/style&gt;</code></pre></div><p>setup内でuseAuthメソッドを呼ぶことで、uriからtokenを取得したりします。取得できたら/に飛ばし、user storeにuser情報をセットします。</p><p>一応 router設定ものせておきます。かなり適当です。</p><pre><code class="language-ts">import { createRouter, createWebHistory, RouteRecordRaw } from &quot;vue-router&quot;;
import HelloWorld from &quot;@/components/HelloWorld.vue&quot;;
import About from &quot;@/views/About.vue&quot;;
import Callback from &quot;@/views/Callback.vue&quot;;

const routes: Array&lt;RouteRecordRaw&gt; = [
  {
    path: &quot;/&quot;,
    name: &quot;HelloWorld&quot;,
    component: HelloWorld
  },
  {
    path: &quot;/callback&quot;,
    name: &quot;Callback&quot;,
    component: Callback
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;</code></pre><h1 id="hcbec2bf0d9">終わりに</h1><p>以上で、一旦vue3を使ってauth0で認証することはできました。 実際に使う場合は、auth0のユーザー情報をそのまま使うケースはすくないと思うので、その辺りの処理を付け足す必要はありそうですので、時間があったら追記します。</p><p>フロントエンドが進化していってる中で、state管理は永遠の課題感がありますが、今後ともベストプラクティスを模索し続けたいですね。</p>

884 Log