ES2015で書き換えましたフロントエンドフロントエンドエンジニアの岡田です。昨年末に、弊社のサービス:夜行バス比較なびの一部分をReactで書き換えました。www.bushikaku.net夜行バス比較なびのJavaScriptは、構築から3年以上たつこともあり、コードの見通しが悪くなってきています。リグレッションテストなども導入しながら、不具合が起きないように努めてはいますが、テストに時間がかかりすぎるなどの問題がありました。techblog.lclco.comそこで今回、Reactを導入して、リファクタリングをしました。つまずくところもあったので、この記事では、夜行バス比較なびでどうやってReactを使っているかをご紹介します。SPAサイトの事例はけっこうありますが、運用中のサイトの一部にだけReactを導入、という事例はあまりなさそうなので参考になれば幸いです。以下の組み合わせで使っています。browser-syncwebpackの環境は、各自の開発PC(Mac)につくります。Webpackで書き出したファイルを、sprocketsで管理しているディレクトリ以下へコミットしてしまいます。(良い方法ではないと思いますが、サーバーにnode.jsの環境を作るまでのつなぎです。],};最初は圧縮&難読化もsprocketsへ任せていましたが、本番環境でJSエラーが出るため、webpackで行うことにしました。webpack.config.jsclassは1ファイル1クラス関数は1ファイルに複数可エントリーポイントの書き方Reactを導入しているのは一部のページなので、エントリーポイントで必要な場所にrenderしたり、関数を呼び出すよう指定をします。ES2015ファイルを読み込んでいます。今後の課題まだ手探りで進めていて、今後も順次置き換え・リリース予定です。今のところ課題は以下のとおりです。buildはサーバーへ任せたい)これらもまた解決したらご報告したいと思います。