転職後2週間でフロントエンドの開発環境を大工事して、React を導入した話
※注意: 2021年7月に書いた記事です。
ども、今月スタートアップ企業に転職した nappa です。現在新規事業の開発に携わっています。
今日は転職後2週間でフロントエンドの環境を大工事 & React 導入した話を書きます。
面接まで
面接では「新規事業では Vue.js を使っている」と言われて、ある程度フロントエンドの環境が整ってるだろうと思っていました。サーバサイドは Rails を使っているとのことだったので、技術的には前職の経験もあるので、大丈夫だろうと思っていました。
入社後、フタを開けてみたら...
入社後、ソースコードを拝見して度肝を抜かれました。
当初、面接から入社まで Vue.js を使っていると思っていましたが、使ってませんでした。
というか、環境すらありませんでした。
そこにあったのは、 jQuery とゴリゴリに書かれた Rails のテンプレートエンジン ERB しかありませんでした。しかもビルドツールは評判悪い Webpacker でやってました。
もちろん、スタートアップの新規事業なんで、色々考える余裕はありません。まずは、携わっているフロントエンドエンジニアのパートナーさんとお話するために連絡しました。
消息を絶ったパートナーさん...全ては僕に託された...
しかし、連絡が一向に取れず。
社長も連絡しましたが、やはり連絡が取れなかったので、全て僕に託されることになりました...
(どうやら、今月になって連絡がつかなくなったらしい)
Vue.js 導入したが....
とりあえず、導入作業途中で止まっていた Vue.js 導入タスクを行いました。
ただ TypeScript の導入も考えていたので、個人的には React のほうが良いのではないかと思っていましたが、当時稼働してるフロントエンドが僕1人であったことや例のパートナーさんが消息を絶って間もなかったこともあり、技術変更の決断が難しい状況にありました。
新しく来たパートナーさんの意見で、流れが変わった
ちょうど、入社して1週間後、新しいパートナーさんが来ました。
そこで、社長と一緒に３者面談をしたのですが、新しいパートナーさんとの話で「TypeScript 導入するなら、React が良いよね!」という話になり、社長も技術変更に快く同意してくれました。
React を入れようとしたが....
と言っても、ERB で構築された画面を今から全て React に置き換えるのはβ版リリース時期を考慮しても、かなり無理なことでした。β版リリースは ERB と共存するしかなかったので、描画が複雑なところなどを部分的に React に置き換えることにしました。
React on Rails を利用して、React を導入してみましたが、まぁクソ重い。 ただ重いだけなら良いんですが、CIで確実に落ちる。。。
Webpacker なので、メンテンナスも難しい.....どうすれば。。。
考えた末、一つの答えにたどり着きました。純正の Webpack を使うぞと。
こうして、フロントエンド開発環境の大工事が始まりました。
大改造!フロントエンド開発環境改善
改造した内容は以下の通り。
- Webpacker → Simpacker + Webpack に変更
- Vue.js → React に変更
- Node.js を最新版にアップデート
- ESLint + Prettier 導入
Webpacker → Simpacker + Webpack
純正 Webpack を使うために、Simpacker という Gem を使用しました。これは、前職でも使っていたもので、簡単に説明すると、純正 Webpack を Webpacker のように扱ってくれることが出来るようにするものです。
今回は Webpacker を使っていたこともあり、Webpack を導入する上で複雑な部分を考えず、スムーズに移行できると考え、Simpacker を導入しました。
また、当時はビルド後に大量の node_modules が生成されて、巨大なバンドルファイルが生成されていましたが、node_modules のみ、別ファイルで出力させる事により、大量生成が解消されて、バンドルファイルの軽減に成功しました。
Vue.js → React
上記の改善でクソ重いビルドが軽減されたので、React入れても問題ありませんでした。
フォルダの構造なども変更して導入はスムーズにフィニッシュしました。
Node.js アップデート & ESLint + Prettier 導入
Node.js のバージョンが古かったのと、フォーマットルールがなかったので、取り入れました。
最後に
やっと環境改善に一旦終止符をうち、これからフロントエンド実装をゴリゴリやっていきます 💪
まだまだ、改善の余地はあるので、これからどんどん設計面も良くしていこうと思います。
Discussion