とろろこんぶろぐ

かけだしR&Dフロントエンジニアの小言

【LIG・エアークローゼット・DMM】3社のフロントエンド開発最新事情 を聞いた

概要

【LIG・エアークローゼット・DMM】3社のフロントエンド開発最新事情 dmm.connpass.com

聞きに行ったのでメモ。

f:id:ka2jun8:20181114100830j:plain

グラフィック表現に関して、デザイン領域に踏み込んで開発を行える制作体制の魅力(LIG)

  • フロントエンドエンジニアとデザイナーとの距離が近い。
  • LIGは, "Life Is Good"の略。
  • 事例紹介

liginc.co.jp hanabi.liginc.co.jp

上記をみてもらうのが早そうだけど、デザインのセンスが強い。 これらのデザインはデザイナからもらった静的な絵を、エンジニアからも提案していく形をとってブラッシュアップしているとのこと。

確かにデザイナーと分業されてしまっていると、デザイナから渡された絵を再現するに留まり、そこから削ることはあれど、ブラッシュアップすることってなかなかない。「動き」の提案は、エンジニアから開発目線でした方がいいってことなのかも。

ただあくまでもエンジニアなので僕はそんなアイデア思いつかないしセンスもないんだよな、とも思う。

フルJSアーキテクトで作るエアークローゼット

@YutamaKotaro さん

speakerdeck.com

フロント・バックエンド・ネイティブの開発を全てJavaScriptに統一している。

  • node.js/koa.js
  • SSR
  • redux/redux-thunk
  • react-native etc.

メリット

  • 学習コストがかからない
  • エディタ・ツールが使い回しやすい
  • ナレッジの共有もしやすい
  • 処理をまとめて使いまわせる

斬新な考えだが、確かに理想的にはすべての開発で切り出したメソッドをライブラリ化して共有可能ではあるかもしれない。 仕様はコードとして、APIコンポーネントをweb/app/native全てから呼び出せるようにしている。

デメリット

  • 他の言語に対する知見がたまらない
  • RNで実際jsだけに閉じない
  • jsは言語仕様やフレームワークのアップデートに追いつくのがきつい

styled-componentsなど、取り外し可能なものはどんどん試すようにしているとのこと。jsとしての深い知見は溜まってそうな会社だなと思った。フロントエンドではあったけど、バックエンドだったり、ネイティブでjsオンリーな面でのつらみをもっと聞きたかった。

www.air-closet.com

DMMのサービスを支える最近のフロントエンド技術 ~ next.js の実践利用 ~

  • DMMの開発について
  • Next.js使って案件やりました

DMM、各事業部にエンジニアを配置しているとのこと。 横断的なフロントエンド組織より、各事業部においた方がいいんだろうか?なんかこの辺りは本編ではないけど、きになるところだった。

案件の話は、テックブログにも載っているそう。

inside.dmm.com

  • 利用環境

    • next.js
    • Koa.js
    • AWS(ECS/Fargate)
  • next.jsは、SSRあり、styled-jsxで、reactが環境構築コストほとんど0ですぐ使えるのが便利。

  • next.js単体だとルーティングでうまくいかい。
    • koa.jsなどを併用しないといけない。
  • redux-form/react-dropzoneで、フォームとアップロードを実装。
  • PlantUMLで構成と状態管理を図示してまとめてから実装

パネルディスカッション"フロントエンド悩みゴト相談会"

事業会社・制作会社の違い

  • LIG:受託だと案件ペースが1,2週間。質も様々。
  • DMM:ユーザの声が直接届く。
  • エア:プロダクトに愛を込めて開発が進められる。

開発の進め方

  • LIG:ディレクター・デザイナーがヒアリング。デザイナが絵を起こす。フロントが書く。バックエンドが作る。という流れ。
  • DMM:スクラム。プロダクト主体で改善・新規リリース。
  • エア:企画からエンジニアが密に入っていく。

技術選定の方法

  • LIG: エンジニアに任されてる。"ちょうどいいもの"を選ぶ。オーバースペックすぎず、プリミティブすぎないものを選ぶように心がけている。
  • DMM: react/vueはデザイナまで含めて検討する。技術だけみてエンジニアだけで決めない。
  • エア: githubスター数、コミット頻度などはみる。 先見の明は大事そう。例えば、react hooksは主流になってくるかも、とか。アンテナをはっておく。

reactとvueは数年後どうなってるか?

  • DMM: 個人的にはweb標準的にwebコンポーネントベースで話が進むと思ってる。react/vueも標準ではないし。ただreact/vueは残ってるんじゃないかな、とは思うくらい。あと、Web assemblyという選択肢もある。
  • エア:vueはrubyライク、reactはjavaライクで堅いイメージ 。 住み分けが変わってくるのでは、と思ってる。reactは決まった書き方になってくるので保守性は高いと思ってる。

今後のフロントエンドの変化

  • LIG: スペシャリストのいろんな道ができてくるかも、WebGLエンジニアとか。
  • エア: 画面つくんなくてよくない?sketchからコードに落とす精度があがるとか。
  • DMM: 使う技術をプロダクトに落としこめる力が重要なのではないか。マークアップとか表面的なところではない、Webの低レイヤまで知ると、もっとやりたいことができるようになりそう。
  • LIG: マークアップは人がやらなくなるんではないか。