spacelyのブログ

Spacely Engineer's Blog

JavaScriptライブラリ選定プロセス

はじめまして！スペースリーでエンジニアをしているohtsuです！

弊社が提供する360度VR活用ソフト「Spacely」はサービス開始から３年以上が経過し、当初使われていた技術が今では技術負債として解消すべき課題となりつつあります。
その代表例がWebフロンドエンドで使用されるJavaScriptライブラリであるjQueryです。
スペースリーでは今年になってjQueryによる新機能開発を禁止し、代わりにVue.jsを導入することを決めました。
現在開発チームではVue.jsとVuetifyを活用してガンガン開発を進めています。

今回は数あるJavaScriptライブラリの中からスペースリーがVue.jsを選択した理由をご紹介します。

目次

はじめに

まずはじめに前提となるJavaScriptライブラリ導入検討理由と、当時のスペースリーで使用していたWebフロントエンド技術について述べます。

なぜ新しいJavaScriptライブラリを導入するのか

１つ目の理由は先述した通り技術負債を解消するためです。
スペースリーで使用していたjQueryは2006年に登場して以来、その手軽さや各ブラウザ間の差異を吸収するといった特徴により、長い間JavaScriptライブラリのデファクトスタンダードとして多くのプロジェクトで活用されてきました。
しかし、現在ではブラウザ間の差異が殆どなくなりつつあることや標準のJavaScriptで出来ることが多くなり、jQueryを利用するメリットが薄れています。
さらにjQueryは再利用性、保守性、パフォーマンスの低さといった多くの問題を抱えています。

２つ目の理由は開発スピードを加速するためです。 「Spacely」では大規模なフロントエンドの実装を複数控えており、その開発を効率良く行うためにモダンなJavaScriptライブラリの導入が必要だと声が上がりました。
当時採用していた技術では急成長するプロダクトを開発・保守していくことが難しいという判断です。
モダンなJavaScriptライブラリを導入することで「コードの局所性を高めて、レビュアーの負担を減らす」「デザインガイドを基にコンポーネント化する」といったことが可能となり、チーム全体で開発スピードを上げることが出来ます。

当時採用していたWebフロントエンド技術

採用を検討したJavaScriptライブラリ

まず最初に候補として上がったのがReact.js、Vue.jsでした。
利用者数と満足度の高さから、世界的にはReact.js、Vue.jsの２つが最も人気なJavaScriptライブラリであると言えます。（The State of JavaScript 2019）

世界的に見るとReact.jsが圧倒的に利用者数が多くVue.jsの２倍近く存在しますが、日本に限ってはReact.jsとVue.jsで人気が二分されています。
利用者の満足度はどちらも良好で、2019年においても利用者の数は右肩上がりなため今後急速に廃れるといった心配は不要と判断しました。

スペースリーではサーバーサイドにRuby on Railsを採用しているため、TurbolinksとStimulusも候補として上がりました。

TurbolinksはRuby on Rails 4からデフォルトで導入されている高速なページ遷移の機能を導入するためのツールです。
Turbolinksを有効にすると、ページ遷移はロードを行わずにの中身だけをAjaxで書き換えます。

StimulusはBasecampが開発したシンプルなJSフレームワークです。(BasecampはRuby on Railsを生み出した会社)
HTMLに特定の属性を付与することで、HTMLをコンポーネント単位でJavaScriptオブジェクトに紐づけます。
HTMLとJavaScriptの知識があれば扱うことが出来るため、気軽に使えることが特徴です。

そして最後に、JavaScriptライブラリを利用せずに生のJavaScriptだけで実装を行うという選択肢も候補として上がりました。
その理由は大規模なフロントエンドの開発が差し迫っていたため、新しいライブラリの学習が間に合わない可能性があったことと、 一時的に開発スピードが落ちることが懸念されたからです。

スペースリーにおける各ライブラリ導入によるメリット・デメリット

①React.js

メリット
  • 開発スピードの向上が見込める。
  • 利用者数が多くコミュニティが大きく、ドキュメントも充実している。
  • 最も利用者が多く増え続けているため、将来性が最も高い。
  • React Nativeでモバイル開発も可能であること。（スペースリーではiOS/Androidアプリの開発も行っている）
  • 大規模、複雑なアプリに向いている。（但し現時点の規模では大きな恩恵はなさそう）
  • スペースリーに経験者が数名いる。
デメリット
  • 学習コストが高い。予定していた開発までに学習が終わらないリスクがある。
  • JSX記法が肌に合わない人がいる。
  • 一時的に実装・レビューの負担が増える。短期間で見た時に効率が上がるとは言い切れない。

②Vue.js

メリット
  • 開発スピードの向上が見込める。
  • Reactには劣るがドキュメントが充実している。
  • 日本おいてはReactと同じ程度の人気があり、利用者数の伸びも引けを取らない。
  • 学習コストが低い。
  • 既存のページを部分的に改修する時に使いやすい。
デメリット
  • スペースリーには経験者が一人しかいない。
  • Reactに比べると情報が少ない。
  • 一時的に実装・レビューの負担が増える。短期間で見た時に効率が上がるとは言い切れない。

③Turbolinks

メリット
  • Ruby on Railsに標準で入っており、導入コストがかからない。
  • 学習コストが低い（実装方法の変化が少ない。サーバ側でレンダリング行うので、View/Controllerは今まで通りの実装になる）
  • サイトの応答性は高くなる。（の中身だけはAJAXで書き換えられるのでJavaScriptやCSSを毎回ロードしない）
デメリット
  • 挙動の単位はページロードなので、Reactなどと同じくインタラクションはできない（Stimulusと合わせると可能）
  • JSのイベントのフックはonloadではなくてturbolinks:loadイベントで行う。
  • renderが使えない。（gemを使えば可能）

④Stimulus

メリット
  • 軽いライブラリなので、Reactなどと比べてページダウンロードサイズは小さい。
  • 純粋なHTMLで使える（Railsのviewが使える）
  • シンプルなので学習コストが低い
デメリット
  • 英語のドキュメント充実しているが、困った時には検索性は低いと思われる。
  • 利用者数が少ない。

⑤ライブラリを導入しない

メリット
  • ライブラリ導入による一時的なトラブルを避けられる。
  • 学習コストを払う必要がない。
  • 短期間で見た時に実装・レビューの負担が増えることがない。
デメリット
  • 新しいライブラリ導入による開発スピード向上の恩恵が得られない。
  • エンジニアの技術力向上に繋がらない。

選定方法

各ライブラリの長所・短所を踏まえた上で話し合い、エンジニアによる多数決を実施。

Vue.jsに決定した理由

多数決を実施と書きましたが、話し合いの末、満場一致でVue.jsに決まりました。

最初に候補から外れたのは「ライブラリを導入しない」でした。
こちらは開発スピードの鈍化が懸念されましたが、それ以前に『退職者が出そう』ということで真っ先に選択肢から外れました笑。
スペースリーのエンジニアは新しいものを好む人が多いので自然な流れだと思います。

続いて候補から外れたのは「Turbolinks」「Stimulus」です。
経験者がいないこと、世界的に利用者数が少ないこと、将来性が低いことが主な理由です。

そして「React.js」と「Vue.js」の一騎打ちとなり、最後は「Vue.js」の採用が決まりました。
正直なところ話し合いを行う前はReact.jsに直ぐに決まると思っていました。
React.jsはスペースリーでも経験者が数名居ることや試験的に一部で利用していたことなど、純粋なライブラリとしての特徴以外にも優位な点があったからです。

それでは何故Vue.jsが採用されたかと言うと、理由は以下の通りです。

  • 学習コストが低いため全員が習得しやすく、短い移行期間で開発スピードの向上の恩恵を受けることが出来る。
  • Vue.jsの方が採用を検討しているVRの技術との親和性が高いと思われた。
  • 多機能故に局所的に複雑なロジックを持つスペースリーのサービスには、簡潔でシンプルに記述出来るVue.jsの方が適している。
  • 既存のページを部分的に改修する時にはVue.jsの方が適している。既存のjQueryとも共存しやすい。
  • 現時点ではReact.jsの利用者が多いが、最近はVue.jsの利用者も急増しており、年単位で将来を考えた時にReact.jsが優位とは言い切れない。
  • スペースリーでは趣味でVue.jsに触ったことがある or 興味を持っているエンジニアが多い。
  • React.jsはアプリ等の開発も想定しているため、純粋にWebフロントエンドのJavaScriptライブラリとして見た時に違和感を覚えることがある。

総合するとVue.jsも持つシンプルさや学習コストの低さといった特性が、スピードを重視するスペースリーの開発方針に上手くマッチしており、結果としてより良いプロダクトを生み出せると考えたからです。
また今後のスペースリーの核となり得るVR技術との親和性も、Vue.jsの方が優れていると思われたことも大きく影響しています。
プロダクトを中心に考えた時に自然と『Vue.jsがベストでは？』という流れになり、最終的には満場一致で「Vue.js」の採用が決まりました。

おわりに

今回はVue.jsを選択した理由をご紹介しました。
私は入社してから初めて技術選定に参加しましたが、技術のことだけではなくプロダクトの将来についても考えられている良い採用プロセスとなったと思います。
とかカッコつけたことを言いつつ、単にVue.jsに興味がある人が多く、エンジニア採用にも有利かもしれないという理由もありましたが笑

Vue.jsは採用を決めた直後に開始したプロジェクトで導入され、現在はVue.jsをフルに活用した開発を行っています。
このスピード感がスペースリーの強みだと感じています。

エンジニアブログでは今後も使用技術や業務内容について記事を投稿していく予定なので是非そちらもご覧いただけたらと思います。