2016.01.23 2022.10.26

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

kuni

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

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

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

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

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

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

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

Contents

UI・デザイン
フロントエンド
サーバーサイド
インフラ・ミドルウェア
開発環境・フロー
まとめ

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