LCL Engineers' Blog

バス比較なび・格安移動・バスとりっぷを運営する LCLの開発者ブログです。

React バージョンアップ(v15.3.2 → v16.4.1) を行いました

フロントエンドエンジニアの田中です。

React の導入からバージョンを変えずに古いまま使用をしていましたが、「使いたいと思った機能がバージョンを上げないと使えない」「Webに載っている情報は新しいバージョンで記述されていることが多いため、古いバージョンで動作する方法を調査する」などの作業が発生することもありました。そのため、今回は React のバージョンアップ対応を行いました。

techblog.lclco.com

パッケージの変更内容

今まで使用していたパッケージのバージョンは以下の通りです。 今回のバージョンアップで変えることになったパッケージの一覧です。

パッケージ アップデート前 アップデート後
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 での変更内容が主です。

対応する時間が中々取れないこともありますが、影響範囲が少ないうちにフレームワークのバージョン対応するのも一つの手かもしれません。

参考