React 習作 第12回 ラグマス スキルシミュレータβ版

投稿日

大分久しぶりのスキルシミュレータの更新となります。とは言っても本体の更新ではなく使っているReact環境を簡単に作るヤツ、ことCreate React Appのメジャーバージョンが上がっていたので、それにアップデートするに当たってやらなくてはならなかった修正をまとめておきます。

※β版につき各自の責任でお使いください。

Create React App v4 → v5にする際の修正箇所について

既存環境の最新化をする

npm outdatedを叩いて出てきたライブラリの内のreact-scripts以外をアップデートしました。一例としてはnpm install ress@latestみたいな感じです。

Create React App(react-scripts)のバージョンアップする

npm install react-scripts@latestを叩いて少し待ったら完了です。この時点で内部的に使っているwebpackのバージョンが4から5に上がっているせいで、いろいろエラーが出るのです。

webpackがPolyfillしていたライブラリの設定を追加する

この状態でサーバを動かしてみるとエラー画面が出て止まります。曰く、webpackの設定にresolve.fallback: { "buffer": require.resolve("buffer/") }を追加してnpm install -D bufferをしろ、だそうです。しかし、使っているのはいろいろ丸々ラッピングしてしまっているCreate React Appです。どこに設定を書いたら良いのかしばらく分かりませんでした。

いろいろ調べてたり試したりして得た答えは./node_modules/react-scripts/config/webpack.config.jsでした。この設定ファイル内に書き込むとCreate React App環境に反映されるようです。弊シミュレータで使っているライブラリはbufferとzlibでした。更にzlibがassertとstreamを使っているようでした。よって、エラー表示を見つつ設定ファイルに以下を追記しました。

webpack.config.js
1
2
3
4
5
6
7
8
9
resolve: {
  fallback: {
    "assert": require.resolve("assert/"),
    "buffer": require.resolve("buffer/"),
    "stream": require.resolve("stream-browserify"),
    "zlib": require.resolve("browserify-zlib"),
  },
(略...)
},

そして、追記したライブラリを実際にインストールしてやります。

1
npm install -D assert buffer stream-browserify browserify-zlib

これで一応動作ができるようになりました。しかし、TypeScriptが少しエラーを出しているのでもう少し対応します。

TypeScriptでPNGファイルをimportする際の型定義をする

1
2
3
4
import JobIcon0 from './2-1_magician.png';
import JobIcon1 from './2-5_sage.png';
import JobIcon2 from './2-6_professor.png';
import JobIcon3 from './2-7_sorcerer.png';

上記のようにPNGファイルをimportしていたのですが、型の設定が無いよ！とエラーが出るようになりました。なのでPNGファイルはanyで受けるようにしてしまいます。

react-app-env.d.ts
1
2
/// <reference types="react-scripts" />
declare module '*.png';

適当な.d.tsファイルを作るとあったのですが適当で良かろうということでデフォルトで存在するreact-app-env.d.tsに書いてしまいました。

これにて全てのエラーは解消されました。軽くテストしてからbuildしたモノをアップロードしてあります。少し様子を見て問題が無いようなら他の職業のシミュレータもバージョンアップしてみようと考えています。

作ってみた感想とか

実のところ、Create React App v5は2021年12月に出ていて試してはいたんです。が、結局どこの設定ファイルに設定を書いたら良いのか分からなくて一旦諦めていたんですね。それをふと思い出していろいろ調べたり試したところ上手くいったので今回の更新となったわけです。なんとかなって良かったです。

ToDo

  • Reactのお作法がまだまだ分かってないので勉強する(次はreduxかrouter辺りかな
  • そもそもJavaScriptの勉強が足りてないのでは？(別件で実感が強くなったヤツ
  • 合法的に画像が手に入るならスキルアイコンを付けたい(なさそう
  • 入力データの保存・復元をできるようにする(URL保存でいいよね？
  • URL入出力のチェックを厳しくする(まあとりあえずはいいか…
  • webpackの動作を制御したい(今回のポイント。他の設定もいじれるのかな？

まとめ

というわけで使っている内部ライブラリの更新とその設定でした。いつものことですがバグが潜んでいる可能性があるので、発見の際にはできればお知らせください。コンタクトかTwitter辺りに投げて頂けると非常に喜びます。

それでは。