DMM.com #2 Advent Calendar 2017 18日目の記事です。

カレンダーのURLはコチラ
DMM.com #1 Advent Calendar 2017
DMM.com #2 Advent Calendar 2017

こんにちは。
普段はフロントエンド周りの設計、実装を行っています@abcdartsと申します。
Qiitaには初めて投稿させていただきます。よろしくお願いします。

本記事は時代に取り残されていたフロントエンドの開発環境をなんとか現代レベルに引き上げるために行なった軌跡を記述していますので
最新技術を使ってみた話などエモい話は出てきませんのでご了承ください。

はじめに

私は現在のプロダクトに今年の6月頃にJoinしました。
それまでいたプロダクトでは、すでにフロンドエンドの開発環境周りは整備済みで、
リファクタリングの余地はあるものの、特段大きく改修をかける必要はないかな？といった状況でした。
現在のプロダクトは6月時点でビルドツールやメタ言語も使っておらず、はっきり言って流れの激しいフロントエンド界隈から遅れをとっていました。
私の直近のミッションは遅れをとっていたフロントエンド開発環境を見直し、生産性の高い現場を作ることでした。

考慮すべきこと

DMMではデザイナーもコードを触っています。
ただし、コードの品質の責任はフロントエンドエンジニアが持っているのでコードレビューには
フロントエンドエンジニアの承認が必須といった開発体制をとっています。
ですので開発環境を見直すといってもデザイナーも使いこなせるようなものでないと意味がないと考えました。
また、私の以前いたプロダクトとJoinしたプロダクトは大きな組織体でいうと繋がっていましたので、
その間の人員の流動性が高いことを見越して、ある程度開発環境についてはSyncされているのが望ましいという結論にいたりました。

どのように技術選定していったか

考慮すべきことで２つの制約条件を述べました。

デザイナーでも理解しやすい（学習コストが高くない）
人員の入れ替えに対応しやすい

上記を網羅した上で技術選定を行なっていきました。
まずは1をクリアするためにデザイナーに向けてフロントエンド知識についてのGoogle Formを使ってアンケートをとって情報収集しました。
そこで「gulp, gruntは知ってるよー」だったり、「Sassは聞いたことがある」といった声が聞けたのでとりあえず導入してもいいということが確認できました。
次に2についてです。前いたプロダクトではビルドツールにgulp+webpack、CSSメタ言語にはSassを利用していて、一部ではJSフレームワークを使用しており、Reactを採用していましたのでそれに準拠した形が望ましかったのですが、1のアンケート結果から同じものを使用できる礎があることがわかったのでこちらを採用していくことに決めました。

デザイナーへの普及

使用するツールは決まりました。
早速作業ブランチを切り、せこせこと環境を構築していきます。
当時CSSのデプロイはデザイナー側が持っていたので一旦はデザイナーへ普及することが課題となっていました。
私自身は六本木所属で、デザイナーの拠点は石川にありましたので出張して、直接ハンズオンを通して環境構築から使い方までを講義し、環境改善後の開発フローの学習を行いました。
他の方の記事でも紹介されていますが、DMMではslackがメインのコミュニケーションツールとなっていて、不明点などあれば都度メッセージを飛ばすか電話を使って技術的バックアップを行いました。

今の状況と今後の課題

ほぼデザイナーへの普及は完了して使いこなせるようになったと思います。
担当プロダクトは現在過渡期を迎えていて、開発体制も変わろうとしています。
今後はバックエンドエンジニアもフロント側のコードを触るようになるのでそちら側へのハンズオンもしていかないとなーっと思っています。
またこの開発環境改善作業、ほぼ一人で行なっていました（笑）
なのでconfigなど仕様がわかるのが今のところ私一人しかおりません。。。
この点も属人化に繋がるので開発者全員に浸透させていくのが課題となっています。

まとめ

これまで開発者全員が使えて生産性を上げることができるように動いてきました。
そのためには「今この技術流行ってるみたいだから採用！」とかではなく周りの環境に合わせて
適切なツールを選んでいくことが大事ということを学びました。

そしてこれから

現在担当プロダクトは開発体制について大きな過渡期を迎えています。
記事中で太字にしたのですが抜本的なデプロイフローについても改善されつつあります。
ここまでつらつらと開発環境改善したんだぜ、すげーだろと書いてきましたが、効果が現れるのは開発体制が変わったこれからだと思っています。
それに合わせ、開発環境も変えていく余地が出てくるので、柔軟に対応できる設計を心がけようと思っています。以上。

明日はいのひー@ino_moeです。お楽しみに！