Vue.js v-tokyo Meetup #17 に参加してきました

2023/05/18 GMOさんのオフィスで開催された Vue.jsのMeetupイベントにリアル参加してきましたので、お聞きしたLT内容など、メモを元にご紹介します。

※ 間違い/解釈違いが含まれる可能性があります ご注意ください

イベント概要

Vue.js 日本ユーザーグループのMeetupイベント、参加者は60名ほどでした。

Connpass

LT

Nuxt 3でElement Plusを使ってみた (Munieruさん)

#あの日のツイートを表示するやつ というWebアプリに (Vuetifyをやめて) ElementPlus (旧 Element)を使ったというご紹介。

• 良かったこと
  • レスポンシブ
  • ダークモード対応
  • i18n
  • Vuetifyと比較すると マテリアルデザイン感が薄い
• 良くなかったこと
  • アイコンリンクコンポーネントがなかった
  • 若干CSSカスタマイズが必要な場面があった

感想

Vue2以降、Webアプリを作っておらず、UIフレームワークをBuefyとVuetifyぐらいしかしらないので新情報でした。ダークモード対応は魅力、あとマテリアルマテリアルしていると、どこかで見たことある見た目になりがちなので、これは良さげに思いました。(あと紹介されていたWebアプリの目の付け所がいいなーと思いました)

Vue.jsとReactに対応した社内UI Componentsライブラリを構築した話 (nokki_yさん)

• なぜ作るのか?
  • 既存のVueプロジェクトと別にReactのプロジェクトができたため
    • Vue以外の技術の知見も得るため
• 作ってみた
  • 予想ほど手間はかからなかった
  • ロジックは共通にできるため、React対応の追加工数は20%ほどで済んだ
  • React/VueそれぞれのためのStorybook環境を用意した
• よかったこと
  • UIのユニットテストは1つで済む
  • 関数を切り出すことを意識する必要があるため 必然的にきれいになる
  • Vue or Reactでなく Vue + React 両対応を考えられるようになった
• 困ったこと
  • React/Vueそれぞれの環境を構築する必要がある
  • 複雑なUIになるとやはり相応に時間はかかる

感想

• 本当に20%の工数でできるなら、めちゃくちゃきれいにロジックが切り出されているんだろうなぁと思いました。(素敵)そして環境構築はやっぱり難しい。

デザイナーと協業しているNuxtプロジェクトを、ChromaticによるVRTでさらに改善した話 (もずさん)

• 現状のUI
  • 新旧のUIが混ざっている
  • "isNewDesign" propで表示を切り替えたりしてしまっている
• 課題
  • FigmaとUIコンポーネントが一致していない
  • コンポーネントを探すのに時間がかかってしまう
    • Figmaと同期したUIコンポーネント環境を実現する必要性
• 解決策
  • エンジニアルールでコンポーネントを作り デザイナーがFigmaに反映するように
    • コンポーネントの粒度はエンジニアが決めるとよりよいと判断
  • Chromaticのステータス機能を使い FigmaとUIコンポーネントが同期していれば Acceptに
    • (差分があればAcceptにならない?)
    • タスクリストを作るのにも使える
  • 使ったツール
    • Storybook
    • Chromatic

感想

• (正直なところ知識不足のためやったことを理解しきれませんでした💦)
• やはりStorybookを使っている事例は多く、自分もStorybookを使えるようにしないとなと感じました。

デザインシステム Sefirotについての話 (kiakingさん)

• デザインシステムを作るのは つらい
  • メンテナンスのコストは膨大にかかる
    • (Figma/コンポーネント/テスト/レビュー etc...
  • そもそも難しい、めちゃくちゃ難しい
    • Appleですら 一部ページでは日本語の改行位置がズレている
    • でも必要
• 既存のデザインシステムを見る
  • Githubの Primerという デザインフレームワーク
    • チェックボックスとトグルの使い分けまで 細かなルールも決められている
    • が、実際のGithubで全ては守られてない (デザインが変化し続けている)
• やはりデザインシステムは つらい
  • 後から変化することが当然ある
• 作るならしたほうがいいこと
  • 1 なんでもすぐにデザインシステムにしない
    • 一度機能を追加すると 維持し続けなければならない、むやみに追加しない。
    • No is temporary, Yes is forever (参考1) (参考2)
  • 2 テストとドキュメントは最初から用意する
    • あとからまとめて追加するのは困難
  • 3 システム化したらすぐに使う
    • (未使用のコンポーネントを生み出さない)
  • 4 破壊を恐れない
    • No pain, no gain (weblio辞書)

感想

何でもかんでも1つのデザインシステムに取り込むのは確かにやめたほうが良さそう。Vuetify2 -> 3を見ていても VDataTableなどの高度なコンポーネントがなかなか正式移行されないのを見ているので、最小限なデザインが大事かも。でも、デザイン以外も含めて様々揃っている方が利用者には便利、悩ましい。 (あと、発表がエネルギッシュというか、スマートでかっこよかったです。)

完走した感想

MeetUpイベントは、今回が初の参加でした。この記事書くまでMeetUpの意味を知らなかったのですが、カンファレンスとは違い、交流が主な目的なんですね。割りと和やかな感じの進行で良かったです。LT後の交流会参加し、緊張しましたが半年以上ぐらいぶりに知らない人と話せて新鮮でした。こういうところで、色んなエンジニアに関わっていけたらいいなぁと思います。カンファレンスではなんというか とてもガッツリな発表が多かった印象だったので、技術的な発表に場慣れしていくには、こういった小規模なLTからが良さそうです。

発表者の皆さん、ありがとうございました！

蛇足

前回よりは短時間で記事がかけたものの、やっぱり記事書くの難しい...