フロントエンドエンジニアの田中です。
React の導入からバージョンを変えずに古いまま使用をしていましたが、「使いたいと思った機能がバージョンを上げないと使えない」「Webに載っている情報は新しいバージョンで記述されていることが多いため、古いバージョンで動作する方法を調査する」などの作業が発生することもありました。そのため、今回は React のバージョンアップ対応を行いました。
パッケージの変更内容
今まで使用していたパッケージのバージョンは以下の通りです。 今回のバージョンアップで変えることになったパッケージの一覧です。
| パッケージ | アップデート前 | アップデート後 |
|---|---|---|
| react | ^15.3.2 | ^16.4.1 |
| react-dom | ^15.3.2 | ^16.4.1 |
| prop-types | - | ^15.6.2 |
| react-transition-group | - | ^2.3.1 |
| react-addons-css-transition-group | ^15.3.2 | - |
対応内容
React のバージョンアップに伴い、以下の対応が必要でした。
- React.PropTypes 廃止
- Reactアニメーション パッケージの変更
React.PropTypes 廃止
型定義をすることができるPropTypes が v15.5.0 で廃止されていました。
とは言っても、機能がパッケージとして切り離されただけです。
このようなタイミングで Typescript などを導入することもあるかもしれませんが、今回はそのまま使うことにするため、
prop-types パッケージを使用することしました。
参照
react-addons-css-transition-group の廃止
まだまだ アニメーションなどの使用に乏しい? ライブラリの React ですが、react-addons-css-transition-group を使用して簡単なアニメーション動作を実装していました。
このreact-addons-css-transition-group も v15.5.0 で廃止されたため、互換用のプラグインの react-transition-group へ変更が必要でした。
今では v2.3.1 となり記述方法も変わっています。
参照
まとめ
v15.3.2 から v16.4.1 へのバージョン変更では、本来もう少し必要な対応がありそうでしたが、 弊社では部分的な導入だったため、対応項目はそれほど多くありませんでした。 詳しくはReact Blogを追ってみてください。ちなみに、今回行った対応は React Blog - React v15.5.0 での変更内容が主です。
対応する時間が中々取れないこともありますが、影響範囲が少ないうちにフレームワークのバージョン対応するのも一つの手かもしれません。
