MMMを支える技術スタックをざっくり紹介(2016年1月版)

2016年始まってから初めてのブログエントリーとなり、今更感がだいぶ強いですが…。

2016年も全力で価値のあるサービスを皆様にご提供できるよう、1月から全速力で突っ走っている代表の国本です。

さて、昨年同様に本年も引き続き優秀なエンジニア・デザイナーの採用に力を入れており、2016年が始まってから早速数名の方とコンタクトを取っている状況ですが、面談やメッセージのやり取りの中で、よく(特にエンジニアの方から)

「どのような開発言語やフレームワークを用いているのか?」
「開発はどのように流れになっているのか?」

などのMMMが実際のプロジェクトで活用している技術スタックに関する質問が多くあります。

そこで、2016年1月時点でMMMが実プロジェクトで採用している技術スタックに関して、ざっくりとご紹介しようと思います。

なお、実際にプロジェクトで採用する技術スタックに関しては日々検証・改善を行っており、ビジネス的に価値が出せると考えられる言語やフレームワーク・ツール群についてはガンガン投入・入れ替えを行っているので、あくまで2016年1月時点で採用している技術スタックとなり、今後大きく変わる可能性がかなり高いので、その点は予めご了承くださいm(__)m

UI・デザイン

Webサービスやモバイルアプリ開発時の初期のプロトタイプ製作段階から、Sketchを使うケースが多く、MMMメンバーのみで作業が完結するような場合、デザインファイルの制作もAdobe系のツールは使わずにSketchで行っています。

但し、顧客サイドのデザイナーチームによっては、Adobe系のデザインツールを多く利用されるケースがあるので、そういった場合はPhotoshopやIllustratorを活用することもあります。

Sketchで作成したワイヤーフレームやモックアップを、InVisionやProttなどのプロトタイピングサービスを活用することで、早期に開発しているサービスイメージを関係者で共有し、価値あるプロダクトデザインを実現しています。

また、MMMではUIデザイナー自身がコーディングを行う場合もあり、主にIE11以上をターゲットとしたモダンブラウザ向けのWebコーディングを行う際はHTML5 + CSS3(Less)を活用しています。

用途 プロダクト・サービス
ワイヤーフレーム, モックアップ Sketch, Photoshop, Illustrator
デザイン制作 Sketch, Photoshop, Illustrator
プロトタイピング InVision, Prott
開発言語 HTML5, CSS3
CSSプリプロセッサ Less

フロントエンド

昨今、特に動きが早いフロントエンド(JS)業界ですが、MMMではフロントエンドを本職とするイケイケ?の尖ったJSメンが二人在籍しており、日々情報収集・検証、実践を繰り返しています。

新規Webサービス立ち上げ時にシングルページアプリケーション(SPA)を開発するケースも多く、サーバーサイドではAPIとバックエンドのビジネスロジック実装に集中し、フロントエンドのメンバーがES6(Babel) + Reactを用いてモダンな開発をドライブするというのが現状だと主流のスタイルになっています。

用途 プロダクト・サービス
開発言語 JavaScript(ES6)
トランスパイラ Babel
フレームワーク React, Redux, Vue.js
ビルドツール Webpack, npm
テスト Karma, Nightwatch, Jasmine, React.TestUtils
コーディング規約 eslint, js-beautifier
ロギング 自社開発のデバッグログ収集ツール

サーバーサイド

自社サービス・受託プロジェクトを問わず、MMMでは必ずサーバーサイド側のアプリケーション開発が必須となるため、主にRailsをコアとした技術スタックを組んでいます。

昨今、業界的にも盛り上がってきているGo(lang)に強い思い入れがあるメンバーもおり、局所的なツールではGoを採用しており、システムに求められるパフォーマンスや特性に応じて、今後はRailsと併用してGoをサーバーサイドにおけるサービス開発のプロダクション環境でも利用する事を検討しています。

用途 プロダクト・サービス
開発言語 Ruby, Python, Java, Go(局所的な利用のみ)
フレームワーク Ruby on Rails, Django
テスト Rspec, Capybara, nose, UnitTest
コーディング規約 RuboCop, PEP8
ロギング errbit

インフラ・ミドルウェア

デバッグ環境や開発メンバーが使うツールのデプロイなどでは一部Herokuを使ってたりもしますが、現状では実サービスのインフラは全てAmazon Web Services(AWS)を採用しています。

MMMではAWS認定ソリューションアーキテクトが私含めて3名おり、AWSのマネージドサービスをフル活用することで高い可用性と拡張性を保持したシステム基盤を設計しています。

用途 プロダクト・サービス
IaaS Amamzon Web Services(AWS)
PaaS Heroku
OS Ubuntu
仮想化 Docker, Docker Toolbox
構成管理 CloudFormation, OpsWorks, Chef
CDN CloudFront
Web/AP Nginx, Unicorn, Gunicorn, S3(Static Web Hosting)
キャッシュ ElastiCache for Redis
データベース RDS(MySQL, PostgreSQL)
ログコレクター Fluentd
監視 CloudWatch, Zabbix, 独自開発監視コンソール

開発環境・フロー

サービス開発の全体フローとしては、サービス関係者ミーティングで決定される優先度の高い機能やビジネスロジックを対象に適切な粒度にタスク分割し、Codetreeを使ってGithubのIssueにチケット化しています。

チケット化されたタスクは、開発者に適宜アサインされ、開発が完了後、Github上のPull Requestを用いてエンジニア全員でコードレビューを行います。

コードレビューが完了すると、Pull Requestがマージされ、CircleCIを経由してステージング環境へオートデプロイメントされ、実際のアプリケーションの動作を確認する。ざっくりとこのようなフローになっています。

用途 プロダクト・サービス
開発環境 MacBook + Docker(Ubuntu)
ソース管理 Github, BitBucket
コミュニケーション Slack, Skype
CI・デプロイメント CircleCI
チケット管理 Codetree
エディター Atom, Vim

まとめ

いかがでしたか?

2016年1月時点では、MMMではご紹介したような技術スタックを用いて、日々価値のあるプロダクトやサービス開発に注力しています。

僕も(私も)このような技術スタックを用いてリモートワークがしたい!
そうお考えのそこのデザイナー、エンジニアのあなた!!

是非、お気軽に下記からコンタクトお願いします。

リモートワークで働きたいUI/UXデザイナー募集!

リモートワークで働きたいフロントエンド・エンジニア大募集!

リモートワークで働きたいサーバーサイドエンジニア募集!

ではでは。ご応募を心よりお待ちしておりますm(__)m

また、適切なアーキテクチャやフレームワークを用いたビジネス価値の高いシステム開発やモバイルアプリケーション開発をご検討の企業様は、是非MMMにご相談下さいませ!