こんにちは。スタメンでデザイナー兼フロントエンドエンジニアをしているナガキです。
以前、スタメンの開発環境についてお話させていただきましたが、デザイナー兼フロントエンドエンジニアという立場から、スタメンではどのように TUNAG をデザイン、開発しているかご紹介させていただきます。
デザイン制作
大きな機能開発が必要な場合、まずは手書きのワイヤーフレームで必要な要素や画面遷移、機能を確認します。その後、実際にデザインデータを作成しますが、この時に主に使用するソフトは、
- Sketch
- Adobe Photoshop
- Adobe Illustrator
の3つです。
Photoshop は画像の加工に、Illustrator はアイコンパーツの作成や印刷物の作成に使用していますが、メインに使うのは Sketch です。
Sketch + Zeplin
TUNAG は Web 版とアプリ版があり、Web 版には PC とスマホが、アプリ版には iOS と Android があるため、全部で4パターンのデザインが必要になります。共通のパーツを使いまわしながら、解像度に依存しない UI デザインを作るには Sketch が最適です。
Sketch で作成した UI デザインを Zeplin に取り込み、セールスやディレクター、エンジニアを交えて仕様とデザインの確認を行います。スタメンには名古屋と東京に拠点がありますが、物理的な距離や立場を気にせずディスカッションができるため、Sketch + Zeplin でのデザイン制作はオススメです。
デザインカンプを見ながら気になった部分にコメントし、細かい仕様を確認することで、アウトプットのイメージが統一できます。
フロントエンド開発
細かな仕様とデザインが固まったら、いよいよ実装。
TUNAG のフロントエンドは、
- HTML (ERB)
- Sass (SCSS)
- JavaScript
- jQuery
- React
で実装しています。
Web システムの開発現場では、マークアップエンジニアが静的な HTML を先に用意し、それを後からバックエンドのエンジニアが動的なデータに差し替えていく、という流れが多いように思いますが、スタメンではどちらかというと逆。
（フロントエンドエンジニアのリソースが足りていないということもありますが…）バックエンドのエンジニアがロジックを書き、ビュー側もある程度作り上げたものを、フロントエンドエンジニアが微調整する、という開発フローが多いように感じます。
さらに、小さな機能追加・改修であれば、各エンジニアがバックエンドからフロントエンドまですべての開発を担当します。
この場合のフロントエンド開発は、前項のようなデザイン制作過程を飛ばし、既存機能のデザインや使い勝手をベースに、カスタマイズして作り上げます。見た目や使い勝手は、 Pull Request の段階で確認し、必要に応じて修正します。
このように小規模なフロントエンド開発を積み重ねることで、デザインなどに苦手意識の強いエンジニアであっても、着実にフロントエンドの開発スキルが身に付きます。
また、フロントエンドエンジニアもバックエンドのロジックやコードを意識する必要があるため、お互いが非常に近い環境で開発を進めることができます。
Sass (SCSS)
スタイルは BEM (MindBEMding) の命名規則に従って SCSS で記述しています。
親セレクタを参照する "&" を利用することで、非常にスマートでシンプルな書き方ができるため重宝しています。
.block { &__element { // ... } &--modifier { // ... } }
現在は Sprockets でコンパイルしていますが、Webpack (Webpacker) でのビルド環境も整ってきていますし、PostCSS も一般化しつつあるので、このあたりの環境も見直したいと考えています。
JavaScript
スタメンの開発環境についてでふれた通り、TUNAG の JavaScript は jQuery を利用したものがほとんどで、一部機能に限って React で実装しています。
ほとんどのコードが jQuery に依存しており、さらに ES6 (ES2015) 以降のシンタックスに対応していないのがネックだと感じていましたが、最近、とある追加機能開発のために新たな JavaScript のビルド環境を構築しました。
現在そのビルド環境では、React + Redux での SPA を開発していますが、一段落がついた段階で、順次既存コードのリプレイスも行っていきたいと考えています。
新機能の開発についても追ってお話できればと考えていますので、ぜひ楽しみにしていてください。
おわりに
デザイナー兼フロントエンドエンジニアの立場から、スタメンの開発環境を掘り下げてご紹介させていただきました。
バックエンドのエンジニアやビジネスサイドとも密接な関係にある、スタメンのデザイナー／フロントエンドエンジニアに興味を持っていただけたら幸いです。
スタメンでは、一緒にサービスを作るデザイナー、フロントエンドエンジニアを募集しています。一緒にサービスを作り上げながら成長しましょう！
もちろん、バックエンドやアプリ、インフラのエンジニアも大募集中です。まずは気軽に、オフィスに遊びに来てください！
