DEV Community: Haruto Hirakawa

そのSVGはSVGElementではない

Haruto Hirakawa — Fri, 09 Dec 2022 10:26:29 +0000

React + TypeScript で開発しているときに陥りがちな罠なんですが、SVGなどの要素をコンポーネントとして使用する際にReactElementに変化してしまっている可能性があるので気をつけたほうが良いよねってお話です。

const Icon = () => {
  <svg>
    ...
  </svg>
}

こういう風なコンポーネントを定義していた場合、これをpropsで渡すときに受け取る側の型は以下のようにしないとダメですね。

import type { ReactElement } from 'react'

interface Props {
  ...
  icon: ReactElement
  ...
}

小話でした

Aiming for LightHouse high score with services built with React+NextJS.

Haruto Hirakawa — Thu, 08 Dec 2022 06:52:00 +0000

I've recently been working on a web service that I've been developing for a long time, and I've been working hard on tuning it and have been getting good scores on LightHouse, so I would like to share what I was care of during my development.

Performance

Delay component loading as needed using loadable/@component, react/lazy, or something else.
- To retrieve external resources, use in combination with react/Suspense, etc.
Correctly apply useMemo and useCallback to values and functions.
- Values and functions are all memoized by setting deps, which prevents unnecessary regenerations when re-rendering.
- Other details are in the Properly understand Hooks to improve your application performance.
Compress resources and source code to reduce communication volume.
Implementing computationally expensive processes with WASM.
- It is also a good idea to use WebAssembly for heavy functions.

Follow HTML5 semantics

This should always be done with care from the implementation stage. Below are some examples that could be put into practice.

Observe the order of Heading tags (<h1>, <h2>), etc.
- e.g. Don't use <h2> before <h1>.
Don't forget to assign the necessary attributes to the tag
- e.g. Always add width, height, and alt attributes to <img>.
- Learn more about Accessible Names.
Don't assign inappropriate attributes to any tag
- e.g. Don't add aria-label attribute to <span>.
Don't bind inappropriate events to any tag
- Don't bind onClick to <div> (use <button> if you want it to click)
etc...

Accessibility

Don't use .png or .jpeg as image resources
- Use .webp for images.
  - By far the best conversion tool is Squoosh!
- Use .mp4 or .webm if you want animation (don't use gif)
  - You can use ffmpeg to convert to webm and so on.
Pay attention to the contrast ratio between the background and the elements (consideration for users with color vision characteristics).
- If you are using Chrome, you can use DevTools to focus on an element to see if it has the proper contrast.

package.json

I used bundlephobia to scan package.json. It also gives me an estimate of how long it takes to load in a 2G or 3G environment.

next.config.json

For now, I will definitely enable swcMinify. But I don't have any other settings in particular.

Firebase Auth (v9)で複数のProviderをリンクさせる

Haruto Hirakawa — Sun, 13 Nov 2022 07:52:23 +0000

firebase/auth は認証周りの機能を提供してくれるSDKです。今回はそれを用いて複数のプロバイダー（GoogleやGithub、Twitterなど）の認証情報を一人のユーザーと結びつける方法の紹介です。

具体的なケース

signInWithPopup という関数が提供されていて、アプリケーションとプロバイダーを引数に渡すことでユーザー認証が行えるようになっています。以下のコードはGoogleアカウントを用いた認証の例です。

import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth'
 // appはinitializeAppを用いてconfigファイルを元に生成したもの
import { app } from '../utils/firebase/client'

const provider = new GoogleAuthProvider()
const auth = getAuth(app)

// 認証を行う処理
const handleSignIn = () => {
  signInWithPopup(auth, provider).then(/* ... */)
}

この時点で認証を試してみると、問題なく動きます。さてここに、GitHubアカウントを用いた認証を追加します。引数にProviderを渡せるようにして、Google同様にインスタンスを初期化しておきます。

import { getAuth, signInWithPopup, GoogleAuthProvider, GithubAuthProvider } from 'firebase/auth'

const googleProvider = new GoogleAuthProvider()
const githubProvider = new GithubAuthProvider()

const handleSignIn = (provider: AuthProvider) => {
  signInWithPopup(auth, provider).then(/* ... */)
}

この状態でGitHubでの認証を試みると次のようなエラーが発生します。

auth/account-exists-with-different-credential

一旦エラーハンドリングする

ハンドラでエラーの内容を見てみます。エラーはオブジェクト形式で渡され、codeプロパティにエラーを示す文章が入います。内容は先程と同じ auth/account-exists-with-different-credential が格納されています。

const handleSignIn = (provider: AuthProvider) => {
  signInWithPopup(auth, provider)
    .then(/* ... */)
    .catch(error => {
      console.log(error.code)
    })
}

エラーから認証情報を生成する

OAuthProvider というクラスを用いることでエラーからcredentialを生成できます。失敗した場合はnullが返ってきます。とりあえず生成して早期リターンさせておきます。（エラーが正しい場合は失敗する可能性はないのですが、コンパイラが警告を出してくる場合があるので正しく型とガード節を書いたほうが良いです。）

const credential: AuthCredential | null = OAuthProvider.credentialFromError(error)
if (credential === null) return

次に fetchSignInMethodsForEmail という関数を用いて、メールアドレスから認証情報を取得します。メールアドレスは customData プロパティから取得できます。

const email = error.customData.email
fetchSignInMethodsForEmail(auth, email).then(/* ... */)

resolveされたら、メールアドレスが使用しているメソッドが配列形式で得られます。今回のケースの場合、先にGoogle認証を行ってからGitHubでの認証を試みているので、google.comが出力されるはずです。

fetchSignInMethodsForEmail(auth, email).then((methods: string[]) => {
  console.log(methods[0]) // 認証に用いた方式を取り出せる
})

次に、得られた認証方式の文字列からプロバイダーを得る関数を定義してあげます。ここでreturnしているものは最初に初期化したインスタンスです。

const getProviderById = (id: string) => {
  switch (id) {
    default: {
      return null
    }
    case 'google.com': {
      return googleProvider
    }
  }
}

あとは linkWithCredential 関数を用いてこれらの情報をリンクさせ、同一ユーザーであることをFirebaseに教えてあげます。

.catch((error) => {
  if (error.code === 'auth/account-exists-with-different-credential') {
    const email = error.customData.email
    const credential: AuthCredential | null = OAuthProvider.credentialFromError(error)
    if (credential === null) return

    fetchSignInMethodsForEmail(auth, email).then((methods: string[]) => {
      const provider = getProviderById(methods[0])
      if (provider === null) return
      signInWithPopup(auth, provider).then(result => {
        // 紐付けを行い、以降ログイン時はここまでのフローがスキップできる
        linkWithCredential(result.user, credential)
      })
    })
  }
})

Properly understand Hooks to improve your application performance

Haruto Hirakawa — Fri, 04 Nov 2022 17:37:30 +0000

When developing a product with React, if you write components and use Hooks a lot without paying special attention, the overall operation may become slow, even if the project size is not large.

It's important to understand the role of Hooks and to use them in the right places. In this article, we summarize the explanations of some of the Hooks provided by React.

📌 useMemo

useMemo is a hook to save (memoize) the result of a function and retrieve the value when it is called again. This eliminates unnecessary recalculation and improves performance.

const value = useMemo(() => {
  // doSomething
}, [])

It's effective when used for functions with high computational cost. Also, unlike useCallback, it is not a Hook that memoizes the function itself. Also, by passing variables as the second argument (deps), the function can be called to recalculate when thosae values are changed.

👎 The following code calls a function each time a component is rendered.

const Component = () => {
  const doSomething = () => {
    // A function with a with high computational cost
  }

  return (
    <div>{doSomething()}</div>
  )
}

👍 The following code calls the function only when the component is rendered for the first time or when the value passed to deps is updated.

import { useMemo } from 'react'

const Component = () => {
  const doSomething = useMemo(() => {
    // A function with a with high computational cost
  }, [])

  return (
    <div>{doSomething}</div>
  )
}

📌 useCallback

useCallback memoizes the function itself. It is mainly used for functions defined inside components such as handlers.

All functions defined inside a component are regenerated when the component is re-rendered (e.g., when the props value is updated or the parent component is re-rendered).

Basically, there is no need to regenerate functions on every rendering pass, so the use of useCallback improves performance.

⚡ Example

For example, suppose you have the following code In this code, re-rendering of the Child component will occur at the following times:

When setValue is called by some action
When someData is updated by some action

Assuming that this action can occur frequently, each time this happens, the old function is discarded and a new function is created and bound to the button. The accumulation of such components will needlessly degrade performance.

const Parent = () => {
  const [value, setValue] = useState(0)

  return (
    <>
      <div>{value}</div>
      <Child data={someData} />
    </>
  )
}

const Child = (props) => {
  const handleClick = () => {
    // doSomething
  }

  return (
    <>
      <div>{props.data}</div>
      <button onClick={handleClick}></button>
    </>
  )
}

In this case, you can wrap the handleClick function with useCallback.

import { useCallback } from 'react'

// ...

const Child = (props) => {
  const handleClick = useCallback(() => {
    // doSomething
  })

  // ...
}

⚡ React.memo

In addition, re-rendering of child components, which occurs when rendering parent components, can be avoided by using React.memo.

import { memo } from 'react'

// ...

const Child = memo((props) => {
  // ...
})

Components wrapped in React.memo will return memoized values as long as the props do not change. This reduces unnecessary re-rendering.

Boundaryを意識せずにsuspendをすると世界は消滅するしHooksはSuspenseできない

Haruto Hirakawa — Fri, 04 Nov 2022 08:42:08 +0000

Next12+React18にて、Streaming SSRを用いてSuspenseを行う際の注意点みたいな話です。

Reactは全体で一貫性を保つために、内包するコンポーネントがsuspendした場合は全てのレンダリングを行いません。

これは非同期処理を用いたコンポーネントが正しくPromiseをThrow出来なかったり不正な値をreturnした場合などに、全体のレンダリングを中断する機能です。

これによりページが部分的に破損してしまうなんてことはなくなりますが、逆に言えば一箇所がコケるだけで全てが見えなくなってしまいますので、注意が必要です。

注意点1

また、これは公式ドキュメントにPitfallとして書かれている情報で、独自の手段によるデータのfetchはSuspenseは気が付かないよ、ということが書かれています。具体的にはuseEffect内部で発生させたPromiseなどです。

const [data, setData] = useState(null)
useEffect(() => {
  FetchData().then(setData)
}, [])

一見すると動作するのですがSuspenseは効いていないのでコンポーネントがPromiseを投げられる恩恵を受けられていません。意味が無いです。

注意点2

また、APIデータをuseStateなどのHooksで持たせる場合にも注意が必要です。Hooksはコンポーネントのレンダリングが完了しない限り、毎回再生成されます。これが意味することは、無限ループの発生を招く危険性があるということです。具体的には以下のような実装で起こり得ます。

const [data, setData] = useState(null)
if (data === null) {
  throw FetchData().then(setData)
}

SWRを使う

実装する手段の1つとして、SWRを使うと良いです。SWRはSuspenseをサポートしています。この様に定義されたComponentであればSuspenseでラップすることでその恩恵を正しく受けることが出来ます。

// Data.tsx
import useSWR from 'swr'
const { data } = useSWR('endpoint', fetcher, option)
/* render components with data */

// index.tsx
import { lazy, Suspense } from 'react'
const Data = lazy(() => import('../components/Data'))

<Suspense fallback={<Loading />}>
  <Data />
</Suspense>

また、useSWRを多用する場合はカスタムフックにしてあげることでnullやundefinedを隠蔽してあげることが出来ます。必要に応じて抽象化していきましょう。

React18のStreaming SSRを使ってNextJSのアプリケーションを部分的にHydrateさせてUXを向上させる

Haruto Hirakawa — Wed, 02 Nov 2022 16:57:07 +0000

React16.6から追加され、いまだにexperimentalではある<Suspense />というコンポーネントがあります。React18から Streaming SSR が実装され、コンポーネントを非同期にレンダリングできるようになりました。それによってSSRを効かせたアプリケーションを部分的に読み込ませたままユーザーに返すことで実時間を短縮してユーザー体験を向上させよう！という話です。

SSRについて

そもそもSSRのデータフローについて軽く話しておきます。ここでは、レンダリングの際に何らかのWebAPIからデータをFetchするアプリケーションを想定します。

まずクライアントがURLにアクセスしてリクエストを飛ばします。リクエストを受け取ったサーバーはgetServerSidePropsを通してWebAPIからデータをFetchしてきます。データのFetchが完了するのを待った上でpropsが定義され、コンポーネントがレンダリングされます。

export async function getServerSideProps(context) {
  const data = await fetch('...')
  return {
    props: {
      // ...
    },
  }
}

レンダリングされたHTMLをクライアントに送り、JSを読み込み、最終的にHTMLにHydrateします。Hydrateが完了するとユーザーがWebページを操作できる状態になります。

さて、この段階で「待たなければいけない瞬間」が存在しています。データのFetch、JSの読み込み、Hydrate、これらの処理が実行されている間ユーザーは待つしかありません。フロント側でいくらチューニングされていても、呼び出したWebAPIが遅ければ、それだけでページのレスポンスが悪くなってしまいます。

Streaming SSR

目玉機能の登場です。こいつの登場によって、これらの「待たなければいけない瞬間」を有効活用できるようになります。

例えば、以下のようなコンポーネントが存在するとします。非同期にデータをfetchするコンポーネントCがある場合、fetchが完了するまで関係のないコンポーネント（A、B）も待つ必要がありました。しかしReact18からは以下のように<Suspense />コンポーネントでラップしたコンポーネントを除いたコンポーネントのHTMLが先にクライアントに返却されるようになります。代わりにfallbackpropsに渡したコンポーネントが描画されます。

import { Suspense } from 'react'

const Component = (props: Props) => {
  return (
    <Container>
      <A />
      <B />
      <Suspense fallback={<Loading />}>
        <C />
      </Suspense>
    </Container>
  )
}

クライアントサイド側でコンポーネントCのデータFetchを行い、完了した時点でレンダリングされます。これによってAPIによるページ全体のレンダリングの遅延は解決できるようになりました。

Hydrate

しかしこの状態、表示はされますがページが操作可能な状態にはなっていないので、周りのUIはハリボテ状態になっています。しかし、React.lazyを組み合わせることで、Fetchが完了する前にコンポーネントCを待たずにHydrateさせることができます。（<Suspense />と組み合わせることでSSRでも効くように）

import { Suspense, lazy } from 'react'

const C = lazy(() => import('./C.tsx'))

const Component = (props: Props) => {
  return (
    <Container>
      <A />
      <B />
      <Suspense fallback={<Loading />}>
        <C />
      </Suspense>
    </Container>
  )
}

うれしい！

styled-componentsでラップした複数の子要素に同じpropsを同時に渡す

Haruto Hirakawa — Wed, 02 Nov 2022 15:18:58 +0000

タイトルの通りです。あるコンポーネント内で配下にある全ての子要素（styled-componentsでラップされたものであるとします）に共通したpropsを渡す場合のやり方の話です。愚直に書いていたらキリがなく最悪なコードが出来上がります。

結論

styled-components/ThemeContext を使おう。

import { ThemeContext } from 'styled-components'

具体例

まずこんな感じの複雑なコンポーネント Component が存在しているとします。多くのコンポーネントやDOMを内包していますが、それらは全てstyled-componentsでラップされています。

const A = styled.div`
  /* ... */
  ${props => props.value}
  /* ... */
`

const B = styled.div`
  /* ... */
  ${props => props.value}
  /* ... */
`

const C = styled.div`
  /* ... */
  ${props => props.value}
  /* ... */
`

// ...

const Z = styled.div`
  /* ... */
  ${props => props.value}
  /* ... */
`

const Component = () => {
  return (
    <Container>
      <A />
      <B />
      <C />
      {/* ... */}
      <Z />
    </Container>
  )
}

ここで、全ての（あるいは殆どの）内包したコンポーネントで value という共通した値を使いまわしたいとします。（この value は useContext などで更に上層から受け取ったものとします）

そんな時に、こんなこと↓なんてやていられません。

const Component = () => {
  return (
    <Container>
      <A value={value} />
      <B value={value} />
      <C value={value} />
      {/* ... */}
      <Z value={value} />
    </Container>
  )
}

こういうときは ThemeContext を使いましょう、一発で解決します。

const Component = () => {
  return (
    <ThemeContext.Provider value={/* 任意の値 */}>
      <Container>
        <A />
        <B />
        <C />
        {/* ... */}
        <Z />
      </Container>
    </ThemeContext.Provider>
  )
}

ただし、注意点として呼び出す際のpropsのプロパティがthemeになるので、既に違うプロパティで定義してる場合は修正しましょう。

- ${props => props.value}
+ ${props => props.theme}

また当然ではありますがthemeにオブジェクトを渡すことでpropsを一層ラップした状態でこれまで通りに値を扱えます。

interface Attrs {
  // 渡したいpropsの型定義
}

const A = styled.div`
  /* ... */
  ${({ theme: props }: { theme: Attrs }) => props.aaa}
  ${({ theme: props }: { theme: Attrs }) => props.bbb}
  ${({ theme: props }: { theme: Attrs }) => props.ccc}
  /* ... */
`

const Component = () => {
  const attrs: Attrs = { /* ... */ }

  return (
    <ThemeContext.Provider value={attrs}>
      <Container>
        <A />
        <B />
        <C />
        ...
        <Z />
      </Container>
    </ThemeContext.Provider>
  )
}

以上です。