Vue.jsを10分で再定義する

Vue.jsの特徴、他フレームワークとの比較についてのLT発表資料です。

Transcript

1. 2026.02.28 / VueSapporo #1 三浦　恒樹 (MIURA KOUKI) / 医療ITエンジニア Vue.jsを10分で再定義する
2. 自己紹介 - ドゥウェル株式会社 に所属（マネージャー） - 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 - TypeScript / Vue.js / Node.js / Java / C# / PHP - 3兄弟の父、休日は習い事の送り迎えとか... - 参加している勉強会 札幌PHP勉強会 JBUG札幌 JavaDO ゆるWeb勉強会 えびてく クラメソ札幌IT勉強会（仮） AWS初心者LT会in札幌 札幌すごいAI会 札幌IT石狩鍋 hokkaido.js 函館本線沿線勉強会 VueSapporo - コーディングBGM ラックライフ - Naru, 名前を呼ぶよ BLUE ENCOUNT - Survivor, ポラリス SHANK Dizzy Sun Fist
3. INDEX - Vue.jsとは何か - JavaScriptをそのまま書くのとの違い - JQueryとの違い - Angularとの違い - Reactとの違い - Svelteとの違い - まとめ
5. Vue.jsとは何か
6. Vue.jsとは何か JavaScriptの場合=命令的 Vue.jsの場合=宣言的 countを表示する。と宣言するだけで、 状態に応じた値が表示される。
7. Vue.jsとは何か コンポーネントごとに開発→統合できる App.vue my-job.vue my-message.vue 表示結果
8. Vue.jsとは何か refを使用すると変更が監視され、ビューに自動反映される 表示結果
9. JavaScriptをそのまま書くのとの違い
10. jQueryとの違い
11. Angularとの違い
12. Reactとの違い
13. Reactとの違い index.html src/main.tsx src/app.tsx
14. Svelteとの違い
15. Svelteとの違い index.html src/main.ts src/App.svelte
16. まとめ 宣言的レンダリング： UIを”どう操作するか”ではなく、”どう表示されるべきか”で書くこと。　宣言的≠命令的 コンポーネントベース設計： 画面を”再利用可能な部品（コンポーネント）”の組合せとして設計すること。　SFC リアクティブ（反応的）： データが変わると自動で画面も更新される仕組み。　ref、reactive、computed、watch ※SFC=シングル・ファイル・コンポーネント
17. ご清聴ありがとうございました。