Vue.js v-tokyo Meetup #23
https://gyazo.com/a50e7a35bf3dbac31242b4d0e6f77184
Vue.js v-tokyo Meetup #23 - connpass
Nuxt3と踏み出す、大規模基幹システム刷新の第一歩
Hal
株式会社LIXIL
期間システム移行の背景
フレームワークサポート終了
レガシーシステム設計見直し
スケーラビリティ・おブザーばビリティ
モダン
移行時の課題
現行開発が進行している
刷新しつつ、現在の変更も取り入れる必要あり
システム障害許容率
複数システムとの連携があり
B2Cでの利用もあるので
方針
アジャイル開発
スクラム
システムの際設計
柔軟な開発コミュニケーション
スキーマ駆動開発
テスト・監視の強化
VueとWeb Componentsで作るAgnostic UI
Vue と WebComponents で作る Agnostic UI - Slidev
Anthony Fu
背景
Nuxt Dev ToolsのUIがユーザーごとで異なって見えることがある
CSSを漏れないようにしたい
style scopedは内部のCSS漏洩を防ぐが、外部CSSの侵入は防げない
Web ComponentsのShadow DOMを活用したい
ワークフロー
defineCustomElementでWeb Componentsにする
index.tsでコンポーネントを際エクスポート
tsdownでバンドル
tsdownがUnoCSSをトリガーしてCSS文字列を生成する
パッケージにバンドルする
GitHub - antfu/starter-vue-webcomponent-uno: Starter for creating agnostic WebComponents using Vue and UnoCSS
Studioのカラースタイルの作り方
Studio株式会社
カラースタイル機能
ユーザーが色の登録を行う
CSS変数として登録
スタイルで参照する
ブラウザ標準のCSS Variablesを使っている
実装上の工夫
headのstyleタグを書くより、bodyの中に書く方がパフォーマンスがよくなる
色が単色かグラデーションか
グラデーションはCSSの実装に一工夫いる
GUI側ではグラデーションを選択できないようにしている
変数名による階層管理
Figmaにもある機能
文字列で並び替えができる
インタラクティブな ICT 教材の実装に DSL で立ち向かう
ナイトウコウスケ
株式会社メイツ
ICT教材開発の課題
学校教材は複雑ドメイン
学習形式と問題形式が多様
エイムアットで扱う問題形式
ChoiceFormat
選択肢問題
WriteFormat
記述式問題
実際のコンテンツ開発の課題
LaTeXは表現力は高いが、Webとの親和性の問題
HTMLはWeb表現力があるが、手書きが大変
Markdownは拡張性がある
ACDL
Aim@Contents Definition Language
WebからモバイルへVue.js × Capacitor 活用事例
Naoki Haba
株式会社コドモン
2025-06-13