「Vue Fes Japan 2023」に参加してきました

勉強会メモ

Vue Fes Japan 2023

キーノート

  • Evan you

Rolldown

  • まだearly WIP
  • esbuild代替?
  • Rust?
  • Rspackの人が開発
  • ビルドツール?バンドラー?

社内UIコンポーネントライブラリがエンジニアチームにもたらした本当の価値

chromatic

画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法

A11y

  • Webはそもそもアクセシビル
  • 改正障害者差別解消法
    • 2024/4から障害を持つ人に対する合理的配慮が民間も義務化される
  • VueやNuxtで作られたアプリはアクセシブルになっているだろうか
    • 調査の結果は改善してるが良くない

クライアントサイドルーティングという手法について

  • 通常はサーバでHTML作って返すが、クライアント側でHMTL作って遷移する
  • ViewTransitionsAPI
    • アニメーションつきで遷移できる
    • Nuxtは現在experimentral/対応するブラウザでしか動かない

画面遷移のアクセシビリティの問題点

①何が変化したか支援技術に伝わらない

  • 資格では変化がわかっても支援技術には伝わらないことも
  • wai-ariaのライブリージョンを使う
    • titleの変更を通知する
    • aria-live="assertive" をつけた要素のテキストを変えると読み上げられる
    • 支援技術向けの要素は非表示にするが display: none は駄目

②フォーカスマネジメント

  • ページ遷移したときにフォーカス位置が遷移前の場所になってしまう
  • ページ遷移時にフォーカスしてほしい位置に当たるように制御する
    • 必要に応じて tabIndex="-1" をつける
  • どこにフォーカスを当てるか
    • コンテンツが多い要素にあててしまうと全部読み上げられてしまう(NVDA)
    • 見出し要素に当てるのがいい
    • 見出しがないならスキップリンクへ移動しタイトルを読み上げるといい
    • 上部から始まるようにしておくとよい

③過渡なアニメーションで閲覧阻害

  • アニメーションが原因で体調不良を起こす人もいる
  • 視差効果を切る設定がありその設定による制御ができる
    • prefers-reduced-motion
    • 設定されてたらアニメーションを起こさないといった処理を入れると良い
    • CSSでもmediaクエリで指定できる

画面遷移をWebAPIで解決

  • HistoryAPI
    • 課題はいろいろある
    • vue routerなど使う必要ある
  • NavigationAPI
    • 画面遷移の視点終点とれる
    • スクロール位置やフォーカス位置の復元もできる

Nuxtのa11y

  • ロードマップにa11yが含まれている
    • axe core入れるとか

Nuxt 3でJamstackテンプレートを作るときの考え方

  • まぁし(TAM)

Jamstack

  • JavaScript/API/Markup
  • フロントエンドとデータを分離できる

2023年のJamstack

  • フロントエンドとバックエンドを分離してマイクロサービスを組み合わせて構築していくことそのものを呼ぶようになっている
    • NextやNuxtをVercelやNetlifyでSSRするようなこと

ディレクトリルール

Vue Language Serverから生まれたVolar.jsと、それが秘める可能性

エディタの言語機能

  • 言語機能
    • コード補完
    • リネーム
    • 検索
    • アウトライン
  • Languahe Server Protcol

VueにおけるLanguage Server

  • VueはSFCが独自のフォーマット
    • Vue独自のLanguage Serverがある
    • 今はVue Language Features(Volar)
    • 昔はVeture
  • SFCはvueファイルの中にHTML/JS/CSSがかける
    • 3言語分の機能提供が必要
    • Embedded Language
  • 組み込み言語のLanguage Server
    • ファイルをブロックに分けて仮想的なファイルがあるとみなす
    • 書く言語向けのServiceで処理する
  • templateの中にJSを埋め込める
    • templateの中にもJSの仮想ファイルが含まれている
    • scriptで定義下変数をtemplate内の埋め込みで補完しないと

Volar.js

  • 組み込み言語のツールを作れる
    • Astroやsvelteなども困っている
    • FW固有の最小限のコードを書くだけでLanguage Serverを作れる
    • Language Server以外にもチェッカー(lint的な)なども作れる