Vue.js v-tokyo オンライン Meetup #12 に参加しました。オンライン開催。簡単に所感をまとめます。
所感
ESLint をマイグレーションの補助として使うのはなるほどという感じ。(本編でも言ってたけどマイグレーションツールではないので注意)
Web アクセシビリティの話は興味深かったです。大事なことだけどあまり意識してなかったかも...。Fragments なんかは div
で囲わなくていいからちょっとシンプルになるくらいにしか思ってなかったけど、a11y の観点があったとは...。
最近、Vue から少し離れてしまってるけど、個人的にキャッチアップしていきたい。
以下、メモから抜粋。
Vue3 における eslint-plugin-vue
- eslint-plugin-vue
- Vue スタイルガイドに従うところから始める
- Vue 3 マイグレーションの補助として使う
- deprecated/非推奨機能を利用していないか
- クイックフィックス
- Composition API サポート
- script タグの setup はたぶん正式になる?
Nuxt v3に備えて準備してStorybookで躓いた話
- 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 アクセシビリティ
- Vue のドキュメントにアクセシビリティページ追加
- Vue 3 Fragments
- template 直下に複数のルートノードが書ける
div
で囲んだりする必要なし
- マークアップ観点でよい
- マシンリーダブル
- template 直下に複数のルートノードが書ける
- vue-axe
- a11y チェック
- a11y の ESLint プラグイン
- Vue A11y
- Web アクセシビリティ > いかに情報にアクセスできるか
- まずはスクリーンリーダーを試してみたり
Vue3で使いやすくなったTypeScript
- 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 による型解析