最近のediplexでの開発

こんにちわ。主にフロントエンドをやりながら、インフラもみているエンジニアのdsuketです。今回は最近の案件で使った技術などについて少し紹介したいと思います。

 

AngularJS

この案件は完全SPA（Single Page Application）ではなかったのですが、かなりインタラクティブかつ複雑なUIを実現する必要があったため AngularJS を採用しました。

前回のBlog（Webフロントエンドでリアクティブプログラミング）でも紹介した、最近流行ってる React や、全く流行ってないけど僕的にすごく興味ある Elm など使ってみたいフレームワークは色々あるのですが、やはり実案件ではまだ少し難しいところがあります（開発開始当初）。ある程度こなれて情報が多いこと、チームで開発するためみんなが使えること、そしてIE8をサポートしていることが決定打となり、AngularJSとなりました。

AngularJSといえば、カスタムディレクティブのconfig指定のイケテなさに定評がありますよね。restrict指定がなんで'E'と'A'とか文字列指定なんだ、scope指定が true/false/Object の複数型受け入れて、おまけに '@'、'&'、'=' とか文字列で指定するとか、かなりイラッとしますが、最終的には慣れました（ｗ

AngularJSでは基本的にコンポーネント毎にコントローラーまたはカスタムディレクティブを作り組み上げていきます。今回のケースでは複数のコンポーネントにわたる連携がかなりあったため苦労しました。今から思えば、$rootScopeでメディエーターパターンを使ったイベントアグリゲーターのようにすれば良かったかもしれない、とも思います。複雑なUIでは最初にしっかり設計することがより重要になりますね。今後も要検討課題です。

C3.js

この案件ではインタラクティブなチャートが重要な要素の一つでした。サポートブラウザは結局IE9以上となったためSVGが使えます。そこで以前も使用実績のある D3.js を使うことは決まりました。しかし生で使うのは納期的に厳しい。D3.jsをラップしたチャートライブラリが沢山有り、そららを使うことを検討しました。

最終的に NVD3 か、C3.js の二つに絞りました。NVD3のほうがアニメーションが面白かったりするのですが、IE10+サポートなのと、当時は大幅リファクタリング中だったことがネックでした。またデザイン面での要求も多く、それに合うようにカスタマイズするには、NVD3ではグラフのモデルを新しく作る必要があり実装コストが高くなりそうです。

その点、C3.js は使い方が非常にシンプルで、拡張ポイントも多くあります。またコードを修正することも簡単そうなため、こちらを採用しました。

結果、やはりいくつか機能拡張やバグフィックスが必要であったため、自分でコードを修正できるものにしてよかったと思っています。（落ち着いたら修正点をプルリクしたいと思いながら。。。）

 

MongoDB

この件では、ある膨大なマスターデータを元に計算した結果を保存、表示します。しかしそのマスターデータが正規化されておらず、レコード毎にカラムもバラバラというものでした。カラムは変更されることもあり、その度にデータを整理してRDBのテーブルに入れ直すことは運用コストも掛かります。

そこで、マスターデータはスキーマレスの mongoDB で管理することにしました。コレクション毎にデータが独立しており、更新もさほどないため、本件では最適でした。一方、計算結果の保存は複数のデータセットと関連するため、こちらはRDBで管理することにしました。RDBとmongoDBの併用により、よいパフォーマンスが出せたと思います。

懸念としては単一障害点が増えてしまうことがあります。予算次第ではそれぞれ冗長化することもありますが、そこまでクリティカルではないということ、監視とモニタリングにより障害の事前検知によりカバーしています。

 

Github + Jenkins + slack

コード管理は github で、github flow のような開発フローを採用しました。devブランチをmasterとし、そこから開発者はチケット毎にフィーチャーブランチを作成し、完成したらプルリクエストを出す。レビュー後devへマージすると、 jenkins が検知して開発サーバーへデプロイします。ある程度切りの良いところで、devブランチからstgブランチへマージすると、ステージング環境へデプロイされクライアントレビューします。問題なければreleaseブランチへマージすると本番リリースされます。

デプロイは最初はシンプルだったため自作のスクリプトで行いましたが、やはり段々とやることが増えてきます。最初から Capistrano や Rocketeer などを使っておけば良かったかな、と思うところもあります。

チームコミュニケーションは slack を使っています。みなさんよく使ってるのを目にしますね。プルリクエストやjenkinsのビルド結果などもこちらに通知されます。最近のWeb開発では割と一般的なフローではないでしょうか。

さいごに

ediplexはデザイン中心の会社とみられることが多いですが、裏のエンジニアリングもこんなことをやってますよ！というご紹介でした。

すごくエッジというわけではありませんが、新しい技術や方法をどんどんと取り入れて開発を効率化し、品質を高くしていきたいと思っています。

ediplexでは新しい事に挑戦して楽しく効率的に開発したいエンジニアを募集しています。
一緒に勉強しましょう！