LayerX エンジニアブログ

LayerX の エンジニアブログです。

デザイナーからみた爆速開発

こんにちは、LayerXでデザインを担当しています森です。
今回は、爆速と呼ばれるDX事業部での開発の様子をお話ししたいと思います。

デザインをしない

以前に @yyoshiki41 がお話ししたように、開発チームは横断的で、エンジニアはフロントエンド、バックエンドを問わず、機能単位で担当し開発しています。その中で私も、フロントエンド、主に表示まわりの開発に関わっています。

tech.layerx.co.jp

事業責任者の @mosa_siru が、「デザインプロセスを挟まない開発」と呼んでいますが、仕様が相談された後、詳細なワイヤーや画面デザインを待つことなく開発が進んでいきます。
機能が実装された後、デザイナーがレイアウトの調整や、少し手間のかかる表示まわりの実装を行っていきます。

デザインをしない、は言い過ぎですが、SketchやFigmaを使う代わりに、IDEを使ってデザインと実装を同時に進めているような感じです。
このスタイルが爆速を生む理由の一つだと思っています。

f:id:hiroakimori:20210415145610p:plain
実際、チームに参加してから起こした画面イメージは2〜3枚程度で、共有目的というよりは、自分用に方向性の確認程度に作った程度です。

Nuxt+Bootstrap

フロントエンドはNuxt+Bootstrapで作られています。

BootstrapなどのUIフレームワークを使った開発は、スピードが出しやすく、手軽に機能検証もしやすいので、プロダクトの立ち上げには相性のいいものだと思います。

エンジニアの手によってBootstrapで実装された後、レイアウトやスタイルの調整、カスタマイズが必要なコンポーネントなどに手を入れて行っていきます。

最初は手を入れるところが多かったですが、型ができてきて使いまわせる様になると、個別に調整することも少なくなり、スタイルのリファクタや、コンポーネントへの切り出しなどを徐々にやったりしています。

ここ数年はネイティブ開発のみで、重めのSPA開発は初めてでしたが、Nuxtは馴染みやすく使い勝手のよいものでした。

コンポーネント単位に、テンプレート、スクリプト、スタイルが一つにまとまっているのは見通しがよく、値やステータスなど、表示に必要なものは大体そこにあるので開発がしやすいです。

v-bindなども表示を制御しやすく、enumをclass名にしておいて、ステータスに応じてスタイルを変えるなど、ちょっと楽しいです。eventのハンドリングも楽ですね。

<div :class="{ active: isActive }"></div>

<span :class="request.status">{{ request.label }}</span>

<input @focus="doThis()" @blur="doThat()" @change="doWhatever()" />

また、コンポーネントの切り出しもしやすく、例えば、CSSで色やサイズを変更したいグラフィックパーツなどは、SVGをコンポーネント化しておくと便利でした。

<template>
  <svg
    ~
    :width="size"
    :height="size"
  >
    <path ~ />
  </svg>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    size: {
      type: String,
      default: '16',
    },
  },
})
</script>

<style lang="scss" scoped>
svg {
  fill: currentColor;
}
</style>

快適な開発環境

開発はエンジニアと同様に、サーバーサイドも含め、開発環境をlocalに用意して行っています。

一見、非エンジニアには敷居が高そうですが、ストレスを感じることはなく、むしろこの環境でなければ彼らについていくスピードは出せていないと思います。

実際にlocalで動かすと、コンポーネントが複数あるため、ターミナルが常時9~10枚開いている状態で管理が大変そうですが、リポジトリを最新にして、用意されたコマンドを叩くことで問題なく動かすことができます。

また、機能毎に開発、マージされていくので、バックエンド/フロントエンド、権限基盤/プロダクトなどの進捗差分による混乱などがなく、コード以外で動かない理由を探す時間は少ないです。

そして、localで動くものは、dev/stg/prd環境でも問題なく動きます。認証まわりも整備されていて、リモート開発でもVPNを通すことなく、SSOによる認証でdev/stg環境に快適につなぐことができました。

非エンジニアが開発に関わる場合、実際に動く物とは別の環境(モックなど)で行うことが多く、不自由なことが多かったですが、実際に動く、管理コストの低い開発環境はとてもありがたいです。

プルリクを止めない

リポジトリを見ると、マージ待ちになっているようなプルリクはなく、どんどんマージされていきます。

localでじっくりブランチを温めていると、大量の差分が降ってきて、思わぬコンフリクトに泣くことになるので笑、私も頻繁にプッシュしていっています。

今でこそ躊躇しませんが、チームに参加当初は、プルリクを出すのに慎重になっていたこともありました。しかし、プルリクを止めるなという話しを聞いてからはどんどんマージしていっています。

「プルリクを止めてはいけない」by @yyoshiki41

一見、勢いでガンガン行けととられそうですが、@mosa_siru の言う「背中を預け合う」スタイル、お互いに信頼し、信頼には責任をもって応える文化をよく表した言葉だと思います。

全員で走る

爆速なんて言うと、優秀な人のマンパワーに頼っているだけだと思われる方もいるかもしれません。

そういった側面もありますが、特定の人だけでなく、PMもエンジニアもQAもCSもSalesもBackofficeも、顧客とプロダクトに向かい合い、最良の結果を生み出せるバランスを見極めながら、走り続けている結果なのだと思います。

そして、みんな楽しそうです。

私は、何をするかと同じくらい、誰とするかも大切だと思っています。
LayerXに入った理由のほとんどは、そこにあります。

そんな、楽しそうに爆速で走る人たちに興味がわきませんか?
是非、下記のリンクからご連絡ください!

herp.careers