Vue.js v-tokyo オンライン Meetup #12 に行ってきた #v_tokyo12

Vue.js v-tokyo オンライン Meetup #12 に参加しました。オンライン開催。簡単に所感をまとめます。

vuejs-meetup.connpass.com

所感

ESLint をマイグレーションの補助として使うのはなるほどという感じ。(本編でも言ってたけどマイグレーションツールではないので注意)

Web アクセシビリティの話は興味深かったです。大事なことだけどあまり意識してなかったかも...。Fragments なんかは div で囲わなくていいからちょっとシンプルになるくらいにしか思ってなかったけど、a11y の観点があったとは...。

最近、Vue から少し離れてしまってるけど、個人的にキャッチアップしていきたい。

以下、メモから抜粋。

Vue3 における eslint-plugin-vue

docs.google.com

  • eslint-plugin-vue
  • Vue スタイルガイドに従うところから始める
  • Vue 3 マイグレーションの補助として使う
  • deprecated/非推奨機能を利用していないか
  • クイックフィックス
  • Composition API サポート
  • script タグの setup はたぶん正式になる?

Nuxt v3に備えて準備してStorybookで躓いた話

kzhrk.github.io

  • Nuxt Vue 3 Support
  • Composition API 対応
  • Atomic Design + Storybook
  • atoms > organisms の順で Composition API 対応
  • .storybook/preview.js に Composition API 追加
  • organisms で Storybook がエラー
    • root.$store 参照不可
  • getCurrentInstance
    • Vue のコンテキストが取得できる
  • Nuxt に Composition API を入れるのはわりと簡単

Vue3 からはじめる Web アクセシビリティ

docs.google.com

  • Vue のドキュメントにアクセシビリティページ追加
  • Vue 3 Fragments
    • template 直下に複数のルートノードが書ける
      • div で囲んだりする必要なし
    • マークアップ観点でよい
    • マシンリーダブル
  • vue-axe
    • a11y チェック
  • a11y の ESLint プラグイン
  • Vue A11y
  • Web アクセシビリティ > いかに情報にアクセスできるか
  • まずはスクリーンリーダーを試してみたり

Vue3で使いやすくなったTypeScript

slides.com

  • VSCode + Vetur
  • template 内の型
  • props の型
    • computed の戻り値の型は注釈が必要
  • import した Vue ファイルの型
  • tsx ファイル内の Vue Component の型
  • tsx ファイルで import した Vue ファイルの型
    • VSCode 上では型情報が落ちる
    • ビルドエラーにはなる
  • emit の型
    • emit する側は型安全, される側は未対応
    • Template Literal Types (TS4.1) で対応されるかも?

TypeScript Compiler APIを利用してVueの型チェックで遊んでいる話

  • Vetur 0.19.0
    • テンプレートの型チェックができるように (props/emit)
  • vue-type-audit
    • CLI による型解析