フロントエンドの最新技術による事業会社においての成功体験

はじめまして、ビズリーチ事業部フロントエンドエンジニアの小枝です。

私はここ一年で、多くの方が抱えているであろう「どのフロントエンドのフレームワークを利用すればベストなのかわからない」
といった悩みにぶつかりました。

その中で悩んだこと、そして得られた成功体験について、記事として共有させていただき、
みなさまの導入障壁を下げる助けになれればと思っています。

理由なくフレームワークを選ぶ事が嫌でした

• Vue.js
• Angular (as Angular2)
• React
• Riot
• etc

昨今は素晴らしいフロントエンドのフレームワーク、ライブラリが数々存在しています。
その中で、時流にのって「これ！」というものを選ぶのは本当に難しいことでした。
単純に『流されたくない』という個人的な感情と、『ビズリーチという会社の中で一番大きなプロダクトに対して、アーキテクチャを変えるレベルの変更をして良いものか』という不安に直面していたからです。
時流に乗ると苦労をしそう、そもそも事業課題に対してインパクトのある行為か？色々考えました。

しかし、ある時フレームワークを選定するタイミングが突然やってきました。

選ぶべきタイミング

「選ぶべき」というよりは、「本当に選びたくなる」という言い方が正しいのかもしれません。
そしてその「選びたくなる」に至るきっかけが4つほどありました。

• dwrという衰退したテクノロジーから、社内でREST APIがようやく活発になってきた
• REST API化したことにより、フロントエンドの責務の範囲が大幅に広がった
• フロントエンドのコード量も比例して増加した
• もっと効率的に、かつソースコードを読みやすく、効率的に管理するにはどうすれば良いのか考えるようになった

REST APIを効率的に利用するためには、jQueryのajaxメソッドでは無理が生じてきました。
また、ES6を利用したい、大きなプロダクトのため、型安全にしたいという想いも生まれました。

ES6 + 型安全 = TypeScript と フレームワーク

TypeScriptを利用するとしたらどのフレームワークが良いか？

前評判や、AngularJS（バージョン1）を利用したことのある経験から、
フレームワーク自体がTypeScriptで作られているAngularの利用を考え始めました。

導入するとしたら、サイトリニューアル？

新しい技術を取り入れる時に頭に浮かぶことは、

• どこに入れよう？
• 入れるとしたらサイトをフルリニューアルしてアーキテクチャも刷新する？
• リニューアルなんて無理、あきらめよう…

こんなところです。全体最適か部分最適か、やはりプロダクトの大きさによっては
全体最適は不可能か、それに限りなく近いかもしれません。

私は「できる理由」を考えた結果、部分最適を採用しました。
具体的には、下記の場合に新アーキテクチャを適用する、という方法になります。

• 新しい画面を作る時
• 既存の画面の機能を大きく変える時
• 既存の画面に大きな機能を付け加える時
• 「大きな新しい機能はもはや別プロダクトとして作ってしまおう！」という時

事業や会社の承認

企業によってはとても難しい課題かもしれない本項。
ビズリーチではとてもスムーズに話が進みました。

• 新アーキテクチャによるメリット、デメリットの説明
• 未来を考えた結果であること
• ROIは正確に算出できないが、必ず生産性を上げられること

導入した結果

TypeScript + Angularを導入したことによって感じられたメリットは

• コンパイル時点で細かいバグに気付けるため、ヒューマンエラーが驚くほど減った
• コンポーネントごとにhtml, css, tsファイルを一つ以上ずつ持つような構造にしているため、マークアップエンジニアにはビューを作ってもらい、スクリプトを書ける者が諸々の処理を書くような分業体制を築けた
• Angularはコンポーネントで完全に閉じたスタイルを設定できるため、CSSの設計思想から解放され、CSSではなくスクリプト側にコンポーネントの管理を任せることができるようになった
• AngularはRxJSと親和性が高く、ngrxなどのライブラリを用いればReduxの導入も容易で、ステート管理も効率的かつ可読性や汎用性の高い形に保つことができている
• TypeScriptはIntelliJ IDEAでの編集が大変しやすく、IntelliJのAngularプラグインは驚くほど作業効率を上げてくれる
• サーバーサイドエンジニアはTypeScriptが読みやすいため、簡単な不具合は見つけてコミュニケーションを取ってくれるようになった
• 社内のサーバーサイドエンジニアはTypeScript + Angularに興味津々。社内勉強会がとても活発になった

他にも挙げようと思うとたくさんのメリットがあります。
また、総じてみると結局は生産性の向上に繋がっています。

これまでは何時間もかけて実装、修正していたコードは比べ物にならないほど読みやすく、管理しやすくなりました。
ここまで変化が得られるとは感じていなかったため、尚の事技術を追いかけるべきだと学びました。

こういったメリットを感じたい方、更に生産性を高めて事業会社をフロントエンドドリブンでグロースさせたい方は、新しいアーキテクチャの導入を考えてみてはいかがでしょうか。

さいごに

今回は最初ということもあり、きっかけやどんなことをやってきたか、といった解説になりましたが、
更に具体的にソースコードや構成を近いうちに共有させていただきます。

国内では調べてみても導入実績などを見つけづらいため、「この事業ではこんな構成でやっているのか」
という参考資料を今後お見せできるよう、頑張ります。

最後までお読みいただき、ありがとうございました。
次回も是非、よろしくお願いいたします！