Roppongi.vue #4 参加レポート

Vue.js + a11y

• @yamanoku さん, @rhirayamaaan さん
• www.youtube.com
• Web アクセシビリティ
  • Webの情報やコンテンツにあらゆる人がアクセスできるようにすること
  • アクセシビリティは「参加可能」
  • ユーザビシティは「使いやすさ」
    • アクセシビリティとは少し違う
• アクセ渋るな実装・コンポーネント
  • セマンティックな実装にする
  • キーボードで操作可能にする
    • aタグよりbuttonタグの方がいい
  • アクセシビリティを考慮したライブラリ
  • SPAならではの考慮
    • よくない例
      • タイトルがそのままになっていることがある
    • AirBnBのLintルール厳しい
      • コメント: 自分のLintルールの参考にしたい
  • ルートエレメントの変更
    • 参考: https://devblog.thebase.in/entry/2019/12/15/110000_1
• アクセシビリティのチェック・テスト
  • Storybook
    • https://github.com/storybookjs/storybook/tree/next/addons/a11y
  • eslint-plugin-vue-a11y
    • https://www.npmjs.com/package/eslint-plugin-vue-a11y
  • vue-axe
    • https://github.com/vue-a11y/vue-axe
  • ユーザテスト
• Vue.jsとアクセシビリティの関わりについて
  • 参加しやすさ
    • 日本語翻訳があったのがでかい
  • 公式ドキュメントであまり言及されていない話
    • アクセシビリティに対して言及があまりない
      • issueは立っていた
      • Reactは結構豊富
  • Vue3.0でのFragment
    • ReactでいうFragmentが実装される
      • 参考: https://qiita.com/superyusuke/items/ef37aabc70f4e9df41c5
  • Vue A11Yグループができている
    • https://vue-a11y.com/
    • Comming soonであったり、これから作っていくところが多そう？
  • アクセシビリティの課題とこれからの展望
    • 重要度の認知不足
      • コメント: 海外だと裁判沙汰になってりもするみたいなので、重要性は増していきそう。https://www.mitsue.co.jp/knowledge/column/20190125.html
    • 対応を継続していく難しさ
    • 多様性が発展の鍵になる

Vueで着せ替えアプリ作ろうとしてハマったこと & リアクティブなコンポーネント設計とpropsの話

• docs.google.com
• @yuneco さん
  • フロントエンドエンジニア
• Vueで着せ替えアプリ作ろうとしてハマったこと
  • 作ったアプリ
    • https://uchinoko-c130.web.app/
• リアクティブなコンポーネント設計とprops
  • コンポーネントの役割を整理
    • 親コンポーネントの役割
      • 初期値設定
      • 必要に応じて更新
    • 子コンポーネントの役割
      • propsに基づき描画
      • マウス操作を元に自律的に更新
  • 更新が二箇所にあり競合
    • ＝ブラック上司と同じ
  • 解決策
    • v-modelを使えばいい感じに行きそう
    • v-modelでラップしたコンポーネントを作る
  • まとめ
    • インタラクティブなコンポーネントは設計も利用も間違いやすい
    • 迷ったら親がデータ管理の責任を持たせる
    • インタラクティブなコンポーネントは抽象してv-modelで書くといい

コメント

イラストがかわいくてすごい！！

ポートフォリオサイトもすごい！！ https://pf.nekobooks.com/

サーバーレスアーキテクチャとNuxtで特設サイトを作った話

• speakerdeck.com
• @potproject さん
  • 株式会社アイスタイルメディア
  • cosmeサイトの名でもエンジニア
• @cosme Beauty Day
  • https://beautyday.cosme.net/
  • サーバレスアーキテクチャ
  • Nuxt.js
  • BDDのためAPIも共存していた
• 採用した理由
  • Nuxt.js
    • Vue.jsを使ってWebアプリフレームワーク
    • Vue.jsの知見があった
    • 新規のWeb開発だったため
  • サーバレスアーキテクチャ
    • 大量アクセスが見込まれる
    • サーバを意識せず工数もそこまでないので、開発に専念したい
• デプロイ
  • https://ja.nuxtjs.org/faq/deployment-aws-s3-cloudfront/
• サーバーレス＋Nuxt.jsでSSRを実現するには？
  • API GatewayとLambdaを使用してサーバレスアプリケーションを構築する必要がある
    • ExpressのミドルウェアとしてNuxt.jsを動かす
• Serverless Framework
  • CI/CD
  • yamlに構成を書くとデプロイできる
• パフォーマンスチューニング
  • Vue-lazyload
    • 画像を遅延読み込みにできる
• 当日
  • アクセスが20倍になった
    • 応答時間が変わらず表示できていた
  • Nuxt.jsでは問題なかったけど、FBBとかで障害などがあった

VeeValidate 3.0について

• @igayamaguchi さん
• 株式会社 一休
• VeeValidate
  • https://logaretm.github.io/vee-validate/
  • Vueのバリデーションライブラリ
  • できること
    • コンポーネントの組み合わせでバリデーションができる
  • VeeValidate 3.0
    • 1年半腰にアップデートがきた
  • やること
    • バリデーションルールの設定
    • コンポーネントの使用
    • コンポーネントから提供されるメソッドの使用
  • 初期設定
    • 必要最低限にバリデーションルールもある
  • ValidationProvider
    • inputに設定されたv-modelを監視してくれる
  • ValidationObserver
  • VeeValidate
    • RuleはView側に寄っていく
      • 素のVue.jsで書いていくのであれば、watchになりそう？

コメント

あまり聞きなれない単語ばかりで、ついていくのが大変だった。（一部ついていけなかった） 勉強しないと・・・

Vueのリアクティブシステムを理解してパフォーマンス低下を防ごう

• https://scrapbox.io/ninjinkun/Vue%E3%81%AE%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E7%90%86%E8%A7%A3%E3%81%97%E3%81%A6%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E4%BD%8E%E4%B8%8B%E3%82%92%E9%98%B2%E3%81%94%E3%81%86(Roppongi.vue%234_)

• @ninjinkun さん

• 株式会社 一休
• 問題
  • 一休レストランの管理画面
    • 体感速度が遅い
      • １万個のチェックボックスが重い
• 一つのチェックボックスを更新するたび、毎回全部更新していた
• コンポーネントに渡すオブジェクトを毎回再生性していた
  • オブジェクトはイミュータブルに更新したほうが早いと思っていた
• 根本原因
  • Vueのコンポーネントが再レンダリングされる条件がわかっていなかった
• Vueのリアクティブシステム
  • props, dataが更新されると画面が自動更新される
    • これを支えるのがリアクティブシステム
• リアクティブシステムの実装
  • https://jp.vuejs.org/v2/guide/reactivity.html
• オブジェクトの変更監視はプロパティのgetter/setterベース
  • オブジェクトを入れ替えると、全部見直すことになる
• 遅い原因
  • イミュータブル
  • 再代入すると遅い
• 変更したオブジェクトをミュータブルに更新する

• Reactはイミュータブルが主流

  • Reactにはリアクティブシステムがない

• まとめ

  • 変更したプロパティだけをmutableに更新する
  • Vueのリアクティブシステムを理解すると捗る

コメント

ReactとVueの変更点を具体的に一つ知れた！（React全く触ったことがない）

あとがき

• ライブ配信の仕方も実況動画っぽくて面白かったです。GameWithさんのゲーム会社ならではの設備があってこそなのかな〜と思いました。
• Vue.js
  • まだライブラリなどが出揃っていないのかな？といった印象を受けました。（まだ出て5年ということもあると思いますが）
  • これからもどんどん増えていくのかなと思います。