⚛️

りあクト！第3.1版を読んでハマったこと（2022/05）

2022/06/03に公開

2件

React

TypeScript

tech

この記事は2021年9月発行の『りあクト！ TypeScriptで始めるつらくないReact開発第3.1版』を、2022年5月に読んでハマったことのまとめです。

https://booth.pm/ja/items/2368045

Ⅰ. 言語・環境編

1-2. プロジェクトを作成する

p.33: `npx create-react-app hello-world --template=typescript` でパッケージマネージャがnpmになってしまう。

2021年12月14日にリリースされたCreate React Appのバージョン5から、パッケージマネージャは環境変数・コマンドによって変化するようです。

コマンド： npmもしくはnpxで実行されたならパッケージマネージャはnpm、 yarnで実行されたならyarnとなります。
環境変数： npm_config_user_agent でパッケージマネージャを指定できます。環境変数の指定は、コマンドでの指定を上書きするようです。

以下のコマンドで対処しました。

env npm_config_user_agent=yarn npx create-react-app hello-world --template typescript

II. React基礎編

5-2. JSX の書き方

p.37: `children` は暗黙のprops

React18から children は明示的に型指定する必要があるので注意が必要そうです。

p.44

~~「warningが消えましたね！」とありますが、コードに変更が加えられていないように見えます（……が見落としているだけかもしれません）。~~

→ 正誤表に内容が追加されています。

正誤表更新前の対処法

以下のようなコードでwarningが消えそうです。

return (
    <>
      {[...Array(times)].map((_, index) => (
        <p key={index}>Hello, {name}! {children}</p>
      ))}
    </>
  );

6-1. ESLint

p.51: `yarn eslint --init` でエラーが発生する。

✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb@latest

Oops! Something went wrong! :(

ESLint: 7.14.0

TypeError: Invalid Version: undefined

原因：各種パッケージの一部しか最新版にしていなかったため。

上記ログでは、react-scriptsとeslint-config-airbnbで依存するeslintのバージョンが異なっていて、それでconflictしていたようでした。

対処： yarn upgrade-interactive --latest でパッケージをすべて最新版にする。

p.64: App.tsxを修正しても「Function component is not a function declaration eslint(react/function-component-definition)」と赤の波線が表示される

デフォだとアロー関数が許可されてないようです。以下を .eslintrc.js のrulesに追加しました。

'react/function-component-definition': [
  'error',
  {
    namedComponents: [
      'arrow-function',
    ],
  },
],

6-3. stylelint

コードではstylelintのバージョンが13なのですが、VSCodeの拡張機能はstylelint 14以上しかサポートしてないようです。

stylelint 13から14への移行方法はこちらに載っています。

6-4. さらに進んだ設定

p.84

macOSの場合 lint-staged-around の実行でエラーになってしまうそうです。

詳細は U (ユウ) さんの以下のコメントを参照ください。

8-2. コンポーネントとProps

VFCはdeprecatedになっているので注意が必要そうです。

りあクト！の作者さんによると、 React.PropsWithChildren<P> を使う方法もあるようです。

Ⅲ. React 応用編

10-4. React Routerをアプリケーションで使う

p.39

「インラインコメントでマークしてる部分」が本文、コード、どちらからも見つけられませんでした。

本来は以下のあたりにインラインコメントが付いているのかなと思います。

if (schoolCodeList.includes(schoolCode)) {
  const { school, players } = charactersData[schoolCode];

11-2. Reduxの使い方

p.68

マウスホバーで (property) type: "ADD" | "DECREMENT" | "INCREMENT" と表示されるとありますが、自分の環境だと以下のように表示されました。VSCodeのバージョン依存の問題なのか、原因がちょっと分からなかったです。

(property) type: ValueOf<{
    readonly ADD: "ADD";
    readonly DECREMENT: "DECREMENT";
    readonly INCREMENT: "INCREMENT";
}>

12-1. 過ぎ去りし Redux ミドルウェアの時代

p.117: Redux DevToolsにDispatcher, Dispatchボタンがない

Redux DevTools 右下の >_ ボタンをクリックしてDispatcher欄を表示し、「Dispatch」ボタンを押すと実行できます。

13-4. Suspense とConcurrent Mode が革新するUX

GitHub APIのrate limitを超えてしまい、ずっとローディング中になってしまうことがありました。

以下のコマンドで、制限が解除される時間を確認し、制限が解除されてから再度 yarn start を実行することで対処しました。

curl \
  -H "Accept: application/vnd.github.v3+json" \
  https://api.github.com/rate_limit

Discussion

U (ユウ)

わかりやすいまとめ記事ありがとうございます。大変参考になりました！
6-4のGit Hooksの設定の部分で、MacOSの場合にはlint-staged-aroundファイルがエラーになってしまうようでした。この部分に関しても記事に追加いただけると嬉しいです。ご検討よろしくお願いします🙇‍♂️

MacOSの場合にはスクリプト内のsed -rをsed -Eに書き換える必要がありそうです。
以下のような変更でMacOSでは動作が確認できました。

lint-staged-around

 else
 	 against=$(git hash-object -t tree /dev/null)
  fi

+ if [ "$(uname)" == "Darwin" ]; then
+        sedOption='-E'
+ else
+        sedOption='-r'
+ fi
+ 
  # pick staged projects
  stagedProjects=$( \
    git diff --cached --name-only --diff-filter=AM $against | \
    grep -E ".*($target)\/" | \
    grep -E "^.*\/.*\.($fileTypes)$" | \
    grep -vE "(package|tsconfig).*\.json" | \
-   sed -r "s/($target)\/.*$//g" | \
+   sed $sedOption "s/($target)\/.*$//g" | \
    uniq \
  )
 
  # execute each lint-staged
- rootDir=$(pwd | sed -r "s/\/\.git\/hooks//")
+ rootDir=$(pwd | sed $sedOption "s/\/\.git\/hooks//")

nafuka11

コメントありがとうございます！
記事にコメントいただいた内容を追加しました！