RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

RAKUS Meetup Tokyo #2 フロントエンドNight : イベントレポート

f:id:moomoo-ya:20190308181401p:plain
RAKUS Meetup のロゴ

@moomooya こと 勉強会最速オジサン を目指している鈴木です。 先日弊社にて RAKUS Meetup Tokyo #2 フロントエンドNight と称したイベントを開催しましたので、そちらのイベントレポートを投稿します。

いつもはイベント閉幕後3秒以内にレポートを公開しているのですが、今回は1,688,400秒ほど経過してしまいましたorz

当日の様子

f:id:moomoo-ya:20190308183042p:plain
RAKUS Meetup Tokyo #2 会場の様子

今回は30人の募集枠を予定していたのですが、予想外の好評につき会場をグループ企業であるラクスパートナーズのオフィスに変更しての開催となりました。

当日は雨も降る悪天候の中ご参加いただきありがとうございました。

発表の紹介

Vue.js の新規プロダクトで楽して UI を提供しようと思ったらそこまで楽じゃなかった話

好きな言葉は YAGNI と "Done is better than perfect."*1 という弊社デザイナー竹川の発表です。

新規サービスで利用する UI フレームワークを選定した時の話です。

話の経緯と発端

新規サービス開発プロジェクトにスクラム開発のプロダクトオーナーとして参画。プロジェクトの方針が「提供してから考えよう」というものだったため、UIについてはどんどん変わるものとして自前での作り込みを避ける方向に意思決定したとのこと。

選択肢として BootstrapMaterial Design か検討したところ、仕様として技術レイヤから独立している Material Designを採用することに。 さらに主だった3種類の UI フレームワークのなかから Vuetify を採用。

f:id:moomoo-ya:20190308191458p:plain
Material Design な UI フレームワークの特徴比較

選択の成否

ただし、現状ではどの選択肢も完璧ではない様子。一時は選定をミスしたと思い再度検証したものの、Material Design の仕様に対する充足度はどれも一長一短であることがわかった。採用した Vuetify の作者は Twitter 上でこのように発言している。

「仕様と公式実装の差異も多いが、 UI フレームワーク側で吸収していくしかなさそう」(意訳)

鈴木の感想

「Bootstrap は Twitter Geek 向け」

というなかなかパンクな発言が面白かったです。

既存 Web アプリケーションへの React.js 適用

devドメイン購入予定のポケモンGOオジサンで、弊社楽楽明細リードエンジニアの三田の発表です。

2017年後半に楽楽明細の新機能を開発する際に React.js を導入した話です。

話の経緯と発端

既存のフロントエンドの実装は jQuery を用いたものだったが、このとき開発する機能はフロントエンドの要件が複雑なものだった。 DOM を基軸に操作を行う jQuery では状態の管理が難しく、フロントエンドフレームワークの導入を検討。 選定当時は特に日本国内で React.js が突出して流行っていた。JSX の見た目のインパクトとは裏腹に覚えることが少なく、マークアップをシンプルに保てそうだったことが魅力に感じた。加えて、流行っていたため情報量が多いこともプラス評価になった。

React 導入にあたってやったこと

導入にあたってはチーム内で小さなツールを開発してみた。実際に開発してみると state と props の管理が大変だったため、最初から Redux を採用することに。小さく試してみることは大事だった。 さらに ES2015 勉強会をチーム内で開催。資料として WEB+DB vol.87 は神号なのでオススメ。

既存実装との共存と、その後の課題

jQuery との共存はできていて、適材適所に使い分けている。本番移行後に React に起因したバグはまだ起きていない。 当時まだ v15 系だったので現在 v16 系への以降を頑張っているが、破壊的な変更もあり少しつらい。

他画面への適用は簡単な画面でも適用するべきかどうかなど悩んでいるが、古いシステムを少しずつ React に置き換えていくことは可能そう。

鈴木の感想

「人類にDOMを扱うのは難しすぎる」

という発言がすごくわかりみが深かったです。DOM ベースで複雑な状態管理はすごく難しいです。

ちなみにスライド5枚目の出番のないSさんは私のことです(当時楽楽明細開発チームにいました)。

余談ですが、楽楽明細もついに CM を作ってもらえました

Vue.js を初めてプロダクトに導入して直面した課題と得られた幸せ

Qiitaで勉強会最速オジサンを目指している 弊社エンジニア鈴木(私のことです)の発表です。

竹川の発表にも出てくる新規サービスの開発に Vue.js を導入した話です。

弊社のサービスでは一部 Vue.js を採用しているサービスはあるものの、プロダクションレベルで全面的にフロントエンドフレームワークとして Vue.js を導入したのは今回のプロジェクトが初でした。 ちょうど私がこのプロジェクトに参画する際に Vue 熱が高まっていたこともあり、半ばゴリ押しで 採用にこぎつけました。

とはいえ本格的に利用するにあたって以下のような課題にぶつかりました。

プロダクトに Vue.js を導入してぶつかった課題

  • アロー演算子使えない
  • 初期化時に存在しないプロパティをオブジェクトに追加するときは注意が必要
  • ライブラリ間で要素名が衝突してしまうと動作しなくなる
  • セオリーがわからない
  • Vuex使いすぎ?問題
    • コンポーネントに閉じるような非同期なデータ取得処理*2も Vuex に実装していた
      • React (というか Redux )だとそれが正解らしい*3ですが、Vue だとコンポーネントに実装したほうが扱いやすかった
  • mixins 使いすぎた
    • props やローカルステートを mixins で定義してしまい、 mixins が解決されるまでの一瞬の間 undefined になって困った

Vue.js を採用して幸せだったこと

懇親会

f:id:moomoo-ya:20190308201646p:plain
お約束の Sushi と Pizza と Beer を用意しました

次回開催について

次回の東京での開催は5月に 「BtoBサービスが自社DCにAmazon S3互換ストレージを導入したときの苦悩」 をテーマに開催予定です。

今月3月の後半には募集を開始できると思います。Connpassのグループに入っていただけると通知が飛びますのでそちらもよろしくおねがいします。

*1:Facebook本社の壁に貼られているという標語。日本では「完璧を目指すよりまず終わらせろ」と訳されている。

*2:API 叩いてデータ取得するような処理

*3:懇親会で教えていただきました

Copyright © RAKUS Co., Ltd. All rights reserved.