8月26日（月） に 株式会社メルカリ 東京支社オフィス で開催された NuxtMeetUp#9 オールスターズ に行ってきました。

ちょっと長くなりそうなので、前後編に分けます。こちらは後編です。

前編はこちら 詳しく見たい方はそれぞれの登壇者のスライドをご覧ください（リンクを載せています）

noteのがんばらないAtomic Design

スライドのアップはありませんでした。

登壇者： 株式会社ピースオブケイク

Q. Atomic Design頑張ってますか？

Atomic Design

• プロダクト開発の共通言語を作るもの

  • 誰かが頑張って管理するものじゃない

• 最初からうまくやろうとしない

  • プロダクトは研ぎ澄ましていくもの

• 基礎の定義をしっかりやろう

  • トライアンドエラーの下地をつくる

Nuxt.jsとAtomic Design

• Nuxt way + Atomic Design

  • 二つの規約によってもたらされる責務と見通しの容易さ

• 関わる人によってそれぞれ認識が変わってしまうもの

  • 全員でコンポーネント分けをして認識を揃える → 全員で共通言語を作る

noteにとってAtomicDesignはどうだったのか

• 正直Atomsしかちゃんとやってない

• カイゼンを繰り返すnoteによって密/疎結合が必要な部分は柔軟な方が速度が出る

コメント

Atomic Design での開発になれすぎて、これでやっとけばいいと思っちゃってるけど、無理してやるより開発の主目的とかをしっかり考えないとなぁと思う。

Nuxtマイクロサービスを3つに分割した話

登壇者： @_tanakaworld 株式会社メルペイ

メルペイの管理画面

以前まで全て一つのNuxtアプリケーション、APIGatewayで一旦リクエスト受けている

• CSTool

• MSTool

• Setting

分割する理由

• プロダクトチームが1から2になった

  • 異なるPdM、Operation

• CCSTool、MSToolでプロダクトチームが分離された

• Conflict起きまくる

• 週1,2リリース

• QAコスト増大

分割前提条件

• メルペイの技術的負債改善

• 2ヶ月で

• CSTool、MSTool、Commonで分割

• デザインは共通GCP プロジェクトは共通

分割

• request pathでサービスを分岐

• 分割したサービスとかぶらないように pages の第一階層をprefixとして使う

• public path も変更

リリース

2段階リリースでサービスを止めないように

1. Nginx で Routing

   1. 古いNuxtにアクセスすることもありえるので、新旧どちらにも新旧のリクエストを追加しておく

2. API Gateway で Routing

まとめ

• プロダクトチームの粒度に合わせてマイクロサービスを分割

• 独立して管理できるメリットが多い

コメント

私が関わっているサービスでは、マイクロサービス化するまでもない規模のものが多いので、今後そのような状況になったときにしっかり考えていきたい

事業の初期フェーズにおけるTypeScriptの付き合い方

登壇者： @daijiro_ma 株式会社テックピット

テックピットでは、Nuxt.js TypeScript を使用していましたが、TypeScriptやめました

前提

• 事業の初期フェーズ

• 開発チーム

  • 業務委託

  • フリーランス

  • インターン

TypeScript導入して…

MVPの段階では、仕様変更が頻繁に起こったり、1ページだけ変更したいということも多い

↓

全体的に適応する型システムで作成したいけど、スピードが落ちる

部分的に優先したガラパゴス的な Component ができてしまう

↓

TypeScript の恩恵が受けられなくなった

また、開発チームの流動性やスキルセットにより、TypeScriptでの管理が難しくなって any 型が乱用される

結果、TypeScriptやめました

VueX だけは TypeScript のままに

• API はシンプルな RESTful で、データがそんなに変更されない

• API のデータは影響範囲が広く、様々な場所で利用されるのでデータの整合性を保っておきたい

まとめ

TypeScript の導入は以下の点を考慮する

• 事業フェーズ

  • 初期フェーズ、仮説検証をガンガン回していくフェーズでないこと

  • 短期ではなく長期的な生産性を求める場合

• 開発チームの状態

  • TypeScript の知見

  • メンバーの流動性が低い

コメント

最近 Nuxt.js TypeScriptを勉強し始めたが、結構考慮して作っておかないといけない部分が多いと感じた。

すでに知見を持っている人にひな形的なものを作ってもらわないと、結局独自の作成方法になっていきそうなので話してみたい

Nuxt.jsでもFunction APIを使う

登壇者： @dreamroot46(うしろのこ) 株式会社ROXX

登壇者ブログが出ていました： NuxtMeetUpに登壇してきました - NuxtMeetUpに登壇してきました

Function API

みなさん Function API やってますか？

• Vue 3.0 で追加される

• 関数ベースで Component がかける API

• mixin とか HOC の代わりになる

  • 名前衝突がない

  • 不要なインスタンスが作成されない

• 型が効く

• Component を返したり返さなかったりする

• Component の外にいたりいなかったりする

実際に使ってみると… （詳しくはスライドで）

• 処理を Component から抽出できる

• this とおさらばできる

• 直感的に型が効く

• 関数以上 Component 未満

  • リアクティブな関数を自作できる

現状の対応

Nuxt.js 独自のものは未対応

• asyncData

• fetch

• context に色々入ってない

Vue の Context はある

• parent

• slots

• root

• refs

• attrs

• emit

まとめ

• Nuxt.js でも plugins で登録すれば使える

• Component を返さない純粋な関数としても有用

コメント

Vue.js 3.0、Nuxt.js 3.0 に向けて軽く予習して使えるようになっておきたいと思います。

まとめ

NuxtMeetUp 9 まとめは以上となります！

今回は実質 TypeScript MeetUp っぽかった内容で、最近はじめた私にとって非常に有用な情報が多かったです。

ちなみに、今回会場提供のメルペイさんからの飲み物の提供があり、無料自動販売機で各々好きなものをもらっていたのですが、さすが結構お高めな特茶が速攻で売り切れてました。

メルペイさん太っ腹！

もうすぐ Vue Fes Japan 2019 もあることですし、もっと Vue.js をうまく活用していき、色んな話が聞けるようにしたいです。

ここまでご覧下さりありがとうございました！