小さいVue.jsを30分で作る

2026/5/9 フロントエンドカンファレンス名古屋2026で登壇した際のスライドです。
ハンズオン部分は含まれていません。

Transcript

1. Copyright © LIXIL Corporation. All rights reserved. アプリケーションエキスパート Hal 小さいVue.jsを30分で作る
2. 1 Hal 株式会社LIXIL Japan SoE DevOps. Digital アプリケーションエキスパート 自己紹介 技術的関心 • Vue.js/Nuxt • Rust • パフォーマンスチューニング 趣味 • 映画 • ロードバイク • 一眼レフ 2025.3 LIXIL入社 Vue.js JP ソフトウェアエンジニアとして活動しています。 最近はプロダクトエンジニアリングに力を入れています。
3. 2 Vue.jsとは？ • UIを構築するためのJavaScriptフレームワーク • 標準的なHTML,JS,CSSで書ける • リアクティブに状態監視し、効率的にUIに反映 Web ユーザーインタフェース構築のための、親しみやすく、 パフォーマンスと汎用性の高いフレームワーク
4. 3 本セッションで取り扱う書籍: The chibivue Book The chibivue Bookとは、「Vue.jsを実際に書き、理解を深めること」を目的として ubugeeei 氏が公開した書籍です。 本セッションの内容はchibivueをベースに構成しています。
5. 4 謝辞 本セッションを構成するにあたり、ubugeeei氏の 著書：The chibivue Bookを多大に参考に させていただきました。 素晴らしいガイド、および書籍の公開に 感謝いたします。
6. 5 早速Vue.jsを作ってみよう
7. 6 サンプルコード置き場 以下リポジトリにサンプルコードを配置しています。
8. 7 おしながき 1. createApp API (Vueインスタンスを作成) 2. Virtual DOM(仮想DOM) 3. Render / Patch Rendering(仮想DOMの変更差分を見てレンダリング) 4. Reactivity System(状態のリアクティブ監視) 5. Template Compiler(Vue特有のsyntaxをcode,HTMLに変換) 6. SFC Compiler(Vue SFCをコードに変換) 7. Vite Plugin(Vite環境で自作Vue.jsを動かす)
9. 8 IDEをひらく
10. 9 Vapor Modeとは？ 仮想DOMを利用しない新たなレンダリングモード 高速化・パフォーマンス改善が期待される • これまで仮想DOM処理の最適化が行われていたが、それでも限界があった • JSXを利用できる(vue-jsx-vapor) • Vue.js 3.6(ベータ)でお試しあれ
11. 10 最後に 10/24 Vue Fes Japan2026 恒例のハンズオンコーナー 今年はchibivueメインでやります！
12. 11 ①LIXIL IT・Digitalの求人一覧 https://hrmos.co/pages/lixil/jobs?category=1807273222947917832 募集中のポジションがあります。 ②LIXIL採用情報ページ https://www.lixil.co.jp/corporate/recruit/career/ →社員インタビューやニュース、 LIXILの働き方などがまとまっております。 LIXILの採用関連ページの紹介