🏗️

IT企業のフロントエンドリプレイス事情まとめ

2022/09/29に公開

Next.js

仕事でフロントエンドの技術選定をおこなうことになり、その情報収集としてIT企業の先例を調査しました。
jQueryなどのレガシーな技術スタックからモダンなフレームワーク（ライブラリ）への移行をした企業のリプレイス記事をまとめます。

一休.com、Yahoo!トラベル【Nuxt2 -> Nuxt3】

比較的少ない印象のVue/Nuxt系の移行記事です。
Nuxtのバージョンを上げたとのことですが、Vueのマイグレーションガイドをチームで読み合わせたとの記述があるので、Vueも2→3へアプデないし実装の移行をしたのでしょうか。
どちらかというとReactを採用している事例を多く見かける中、Vue/Nuxtの貴重な例ではないでしょうか！

MonotaRO【JavaScript->React/Next.js】

言わずとしれたECサイト「モノタロウ」。~~モノから産まれたモノタロウ。~~

主にVueとReactの比較ですね。
単にライブラリ（フレームワーク）の特徴を比較するのではなく、「会社として大事にしていること」 を洗い出して、それを軸に選定しているところが非常に参考になります。

ペライチ【JavaScript->Vue/Nuxt.js】

手軽にLPやサイトをノーコードで作成・公開できるペライチ。
事業の成長に伴って開発コードもペラいとは言えなくなってきたということでしょうか。（おい怒られろ）

既存メンバーのスキルセットや学習コストを考慮してVueを選択。
段階的に導入していく方針もVueの選択を後押ししていそうです。
リプレイスに取り掛かる前に、モック制作を通じてエンジニアに慣れてもらう期間を設けた というのが素晴らしいです。いい会社や…！

PR TIMES【JavaScript(jQuery)->React/Next.js】

企業のプレスリリース発信を一手に担うメディア。…の、「企業ページ」という箇所をリプレイスした記事。
実はタスク管理Saasの「Jooto」もPR TIMESの事業。

Recoilなど、最近の技術をガッーとチョイスしている。

弊社で React.js を導入するのは初めてということもあり、使える技術に大きな制約はなかったので、今回のプロジェクトでは Emotion や Recoil といった最近注目されている強力なライブラリを選定しました。

とのこと。
そしてこのタイミングでスキーマ駆動開発も導入したそう。1ページのみのリプレイスかつバックエンドとの連携がスムーズなところならではかも？

WEAR【JavaScript(jQuery)->Next.js】

ZOZOが運営する、おしゃんてぃなコーディネートをたくさん見れるWEAR。
裏側はオンプレWindowsサーバー＆VBScriptと、レガシーな構成だったそう。

リプレイスにあたって、ミッション、MUST、WANTを決めているのがさすが。
Preact+Fastifyの構成になりかけつつも、やっぱりNext.js。途中まで前者で実装したのに問題点に気づくとすぐに切り替えるところがすごい。サンクコストに囚われないかっこよさ。

食べログ【jQuery->React】

Web界の大食漢、カカクコムの食べログ。
「価格.com」と「食べログ」の運営元が同じ会社だということはIT界隈の外では認知されていないことがままある。

歴史も長く大規模なサービスであるため、「インセプションデッキ」 を大切にしているとのこと。知らない概念だったので勉強になった。

インセプションデッキとは

プロジェクトの目的や背景、大切にしたい価値などを端的にまとめたドキュメント。リリースサイクルの速いアジャイル開発で使われる概念で、都度このドキュメントに立ち戻ることで軸をぶらさない開発を目指す。

「壊れにくい」、「迅速なリリース」、「デファクトに追従しやすい」というインセプションデッキの内容にマッチしたReact/TypeScriptを選択。

コンポーネントごとにリリースするための試行錯誤も大型サービスならではで、コンポーネントベースのモダンな技術とマッチしていますね。

pixiv【jQuery/React->Next.js】

我々オタクの強い味方、ピクシブ。

2018年からjQueryのReact化は行ってきており、2022年にNext.jsへの移行に踏み切ったとのこと。
大規模で多機能なpixivであってもコツコツ部分的にリプレイスすることが可能であると光明を見せてくれます。（ぼくも頑張ろ）

まとめ

どの企業にも共通しているのが、単なる技術の新しさや流行に乗るのではなく、「自分たちには何が重要か」 をしっかり検討しているところ。…いや、当たり前っちゃ当たり前なんですけど、その目線は絶対に忘れてはならないんだと改めて認識できました。

そして、選ばれる技術は（予想通り）React/Next.jsが多いですね。今回挙げた以外のつよいIT企業たち（LINE、メルカリ、CA等）も、サービスによりますがReactが多いかなーという印象。
TypeScriptとの相性がいいと言われることも多く、静的型付けの安定感はもはや必須と言っていいかもですね。

Vueは3系になって良くなった（要出典）という記事も散見されますが、保守の面で双方向データバインディングがネックになっていそう。

なにはともあれ、2022年の今からフロントエンドの技術を選ぶとなったら、

jQueryでは限界がある
Angularは学習コストが高くマイナー
VueよりReact多め
Nuxt.jsやNext.jsを使うのはわりと当たり前

このあたりを念頭において選定していく必要がありそうです。

最後に、技術ブログを書いてくださっている各企業のみなさま、本当にありがとうございます！