pipopotamasu

function validateDuplicatedEmail(email) {
  const { users } = this.from[1].value;
  if (users.length < 2) return true;

  let dupCount = 0;
  for (let i = 0; i < users.length; i += 1) {
    if (users[i].email === email) {
      dupCount += 1;
      if (dupCount > 1) {
        return false;

pipopotamasu

const schema = yup.object().shape({
  users: yup.array(
    yup.object().shape({
      name: yup.string().required('name is required.'),
      email: yup
        .string()
        .required('email is required.')
        .email('invalid email type.')
        .test('email-dup', 'duplicated email', () => { /* バリデーションロジック */ }) // 新しく追加
    }),

pipopotamasu

import React from 'react';
import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers';
import * as yup from "yup";

const schema = yup.object().shape({
  users: yup.array(
    yup.object().shape({
      name: yup.string().required('name is required.'),
      email: yup

pipopotamasu

タイトル

0からGraphQLをどう学習するか？

初めに

6月に入社しましたフロントエンドエンジニアの村上(@pipopotamasu)です。 普段はideagramというプロダクトのフロントエンドをメインに開発をしています。

ideagramではフロントエンドとバックエンド間のAPIにGraphQLを採用しています。

私は今まで業務でGraphQLを使う機会がなかったので、入社を機にGraphQLの学習を本格的に始めました。

pipopotamasu

a

pipopotamasu

# immutable設定
https://github.com/pipopotamasu/gql-todo/pull/31

ver3でデフォルトonになるらしい
https://www.apollographql.com/blog/whats-new-in-apollo-client-2-6-b3acf28ecad1#bff1

# query, mutationの型の自動生成

# local state manegement
https://apollographql-jp.com/tutorial/local-state/

pipopotamasu

タイトル

react-hook-formとyupを使った重複チェックバリデーション

初めに

最近yupに値の重複チェックするためのいい感じの機能が入ったので、react-hook-formと組み合わせて重複チェックをする方法を備忘のため書き綴っていきます。 今まではデータのネストが深い場合、ネストを遡って他のデータにアクセスしデータのバリデーションが難しかったのですが、yupのv0.29.1から追加されたtest関数のコンテキストのfromプロパティを使用することによってネストを遡ることが容易になりました。
jquense/yup#556

今回はそのfromを使用し、フォームの重複チェックバリデーションを作ってみます。

pipopotamasu

タイトル

dom参照以外でuseRefを使う

初めに(背景)

最近お仕事でReactを使い始め(ずっとVue.jsやってました)、色々と知見が溜まってきたので投稿していきます。 今日はReact hooksのuseRefについてです。 今までReact使ってきて、useRefはdomへの参照をしたい場合に使うものだと思っていましたが、実はそれだけだけではなかったということを最近学びましたので復習をかねて書き綴っていきます。

useRefの説明

https://ja.reactjs.org/docs/hooks-reference.html#useref

pipopotamasu

step1

macにvirtualboxとwindowsのイメージをDL。 多分下の記事見てやれば大丈夫。 https://qiita.com/geek_takayuki/items/97a86b1ab3d0b32a6a43

step2

画面サイズがデフォルトの設定だと小さいので、倍率変える。

pipopotamasu

bucket for images