©MNTSQ, Ltd. 2023/08/08 Vue.js LT発表資料 Vue.jsの今までをざっくり 2023/08/08 v-tokyo

©MNTSQ, Ltd. 2 自己紹介 MNTSQ株式会社 ソフトウェアエンジニア フロントエンド担当 安積洋（Azumi Hiroshi）(@cyber_snufkin) エンジニア的変遷 LAMPでバックエンド > フロントエンド > ネイティブアプリPjM > アナリティクス > フロントエンドに戻る（今ここ） Vue.jsはv0.11からv1, v2 Vue3へのマイグレーション頑張ってます！

©MNTSQ, Ltd. 3 はじめに 今年でVue.jsは最初の公開から10年となりました。 昔は大変だったとか、良かった、等の話をしたいわけでは全く無くて、 各機能が実装されていく様子からEvanYou氏とVueJS開発チームの 優先度の判断、考え方の変遷、利用者の声の拾い上げ方等から学びがあると思ったことから、 Vue.jsの歩みをざっくりですが振り返ってみたいと思います。

©MNTSQ, Ltd. 4 はじめに 新しい技術というものを、以下の2つに分けて考えてみます ・手段が新しいもの ・得られる価値が新しいもの 後者のようなGiant Stepは、前者の手段の積み重ねと無縁では乗れない事も多いことは皆さんもよくご存知だと思います。 Vueの開発チームの足跡から、手段をアップデートしながら新たな価値の獲得にアプローチしているところを 一緒に探してみましょう

©MNTSQ, Ltd. 5 初期のVue.jsの進化 まず、今普通に使っている各種APIがいつどの様に取り込まれたのか見てみます。

©MNTSQ, Ltd. 6 v.0.11で公開されるより前、 v0.6.0からのトピックで個人的に面白いものを挙げてみます。 公開前夜 初期のVue.jsの進化

©MNTSQ, Ltd. 7 ● 0.7.3 (2014/01) ○ vm.$watch, vm.$emit が追加 ● v0.8.0 (2014/01) ○ computed property追加 ● v0.8.6 (2014/02) ○ v-cloak 追加 ● v0.9.0 (2014/02) ○ Animatrix https://github.com/vuejs/vue/releases/tag/v0.9.0 ○ vm.$watch バッチ化 ■ 一つのイベントで一つの値に複数の変更が走った場合、 最新の値を使用して一回だけコールバックが起動されるように ● v0.10.0 (2014/03) ○ Blade Runner https://github.com/vuejs/vue/releases/tag/v0.10.0 ○ Objectをループしてリストレンダリングできるように ○ v-repeatにfilterdByとorderBy追加 ○ v-on追加 公開前夜 初期のVue.jsの進化 この辺は https://github.com/vuejs/vue/releases?page=25 から辿れます

©MNTSQ, Ltd. 8 ● v0.10.6 (2014/07) ○ vm.$destroy() のoptionに noRemove追加 trueならVMが破棄されてもDOMが残るように ● v0.11.0-rc2 (2014/10) ○ デフォルトでは __proto__ への変更をしないように ○ 細部の調整に入っている印象 ● 0.11.0 (2014/02) ○ Cowboy Bebop https://github.com/vuejs/vue/releases/tag/0.11.0 ○ https://vuejs.org/ 立ち上げ ● 0.11.1 (2019/12) ○ v-componentに、イベント発火まで当該Componentのレンダリングを待つwait-forの指定 ● 0.11.4 (2014/12) ○ v-eventsディレクティブ 子Componentのイベントを購読できるように 公開前夜 初期のVue.jsの進化

©MNTSQ, Ltd. 9 ● 0.11.5 (2015/02) ○ Vue.nextTickがMutationObserverを使うように、フォールバックにsetTimeout()をコール タブがフォーカス外のときに更新されない問題に対応 ● 0.11.6 (2015/04) ○ v-modelがjQuery eventsと相互運用できるように 面白そう、と思いますが良く解らない ● 0.11.9 (2015/05) ○ obj.$set(key, val)追加 ○ v-transition の引数に変数が指定できるように（動的にTransitionできるように） ● 0.12.0-beta2 (2015/05) ○ paramAttributesオプションがpropsに名前を変更 公開前夜 初期のVue.jsの進化

©MNTSQ, Ltd. 10 ● 0.12.0 (2015/06) ○ Dragon Ball https://github.com/vuejs/vue/releases/tag/0.12.0 ○ v-with廃止 子Componentにはprops経由のみ ○ vm.$watch() にdeepとimmidiate指定ができるように ○ Async components 追加 ○ v-repeatがtracked-by="$index"をサポート ■ インタラクティブでないリストレンダリングでの使用のみ推奨 ○ Element Directives追加 ■ 的な記法ができるように ○ コミュニティのフィードバックから 動的Compoentの記法変更 ■ v-component がdeprecatedに ● だけ利用 ● :isを使う 公開前夜 初期のVue.jsの進化

©MNTSQ, Ltd. 11 ● 1.0.0-beta.1 (2015/09) ○ 追加 廃止 ● 1.0.0-rc.1 (2015/10) ○ v-repeat がdeprecated ■ v-forに ○ v-class v-style が v-bind:class.等に ○ v-componentが deprecated :is に ○ v-else 追加 公開後 初期のVue.jsの進化

©MNTSQ, Ltd. 12 2.0に向けて 公開後のVue.jsの進化 v2.0.0-alpha.2 2016/06 v-for iteration syntax change Update loop syntax for arrays and objects, deprecate $index and $key #3073 v2.0.0-alpha.3 2016/06 scoped CSS v2.0.0-alpha.4 2016/06 Vue.config.ignoredElements 追加 外部に定義されたカスタム要素（Component）を無視できるように v2.0.0-alpha.5 2016/06 Functional components v-ref 書式変更（ref="foo" 形式） v2.0.0-alpha.6 2016/06 works with vue-devtools 2.0.0 Custom keyCodes (Vue.config.keyCodes） v2.0.0-alpha.7 2016/06 ライフサイクル名変更 init → beforeCreated Vue.config.errorHandler 追加 v2.0.0-beta.1 2016/07 updateライフサイクルフックがコンポーネントの更新後毎回コールされるように ライフサイクル名変更 postupdate → componentUpdated v2.0.0-beta.2 2016/07 Componet追加 VirtualDOM描画レイヤがどのケースでもTransitionから確認できるようにするため Component追加 Transitionの再利用 v2.0.0-beta.3 2016/07 v-onに .native が追加 v-bind でpropに渡す値だけではなくDOM propertyも扱えるように vm.$watch の発火タイミングがComponentの再描画前に、再描画後にDOMに対して何かする場合にはupdatedライフサイクル フックを使うように明記 v2.0.0-beta.7 2016/08 :class と :style が使えるように v2.0.0-beta.8 2016/08 が特別な属性からラッパーに Allow 2 root nodes with v-if and v-else #3329

©MNTSQ, Ltd. 13 フロントエンドのエコシステムの中のVue.js まずフロントエンドのエコシステム全体から見たVueの成り立ちと発展を見てみます。

©MNTSQ, Ltd. 14 まずフロントエンドのエコシステム全体から見た Vueの成り立ちと発展を見てみます。 フロントエンド エコシステム

©MNTSQ, Ltd. 15

©MNTSQ, Ltd. 16 全体像を示します。 思いつくままに書いたので抜け漏れあるとは思 いますが、右上から 全体Map フロントエンド エコシステムの中のVue.js ● ビルドツール ● PackageManager ● npm各種ライブラリ ○ フレームワーク ● エディタ/IDE ● デバッグツール ● コードの品質保持のツール（ESLint等） ● テストツール ● 言語

©MNTSQ, Ltd. 17 左上から 全体Map フロントエンド エコシステムの中のVue.js ● JavaScriptランタイム(Node.js等） ● UserAgent（ブラウザ）のコンポーネント ○ JavaScriptエンジン ○ レンダリングエンジン ○ WebAPIあれこれ ● HTTP ● HTML ● CSS ○ バージョン ○ プリプロセッサ

©MNTSQ, Ltd. 18 それぞれについて年月毎のバージョンの進化を並べて比較してみました。 バージョン比較 フロントエンド エコシステムの中のVue.js スプレッドシート 公開用URL: https://docs.google.com/spreadsheets/u/1/d/e/2PACX-1vSf7qGhst43_NoDkpxlIruPc70JKIEQ ZTOf84xopJYo6asLw2ccbh2gQv8475hLrVfM0GfgvmUhrXsg/pubhtml

©MNTSQ, Ltd. 19 ですがすみません、時間切れです 一件だけ

©MNTSQ, Ltd. 20 Vue2は2018年に入ってから、バージョンアップが落ち着いています。 そして2018年9月に vuejs/coreに最初のcommitが行われています。 後のVue3です。 その月にはNuxtの2.0.0が公開されています。 Vue2からVue3 フロントエンド エコシステムの中のVue.js Year/Month vuejs/vue vuejs/core Nuxt 2017/12 v2.5.13 - 1.0.0-gh-806287 e 2018/01 - - 1.2.1 2018/02 - - 1.3.0 2018/03 v2.5.17-beta.0 - 1.4.0 2018/04 - - - 2018/05 - - - 2018/06 - - 1.4.1 2018/07 - - - 2018/08 v2.5.17 - 1.4.2 2018/09 - first commit 2.0.0 2018/10 - - 1.4.4 2018/11 - - 1.4.5 2018/12 v2.5.21 - - 2019/01 v2.6.0-beta.3 - 2.4.2

©MNTSQ, Ltd. 21 背景には、前年の2017年9月に公開されたReact v16があるように見えます。 Reactはv16で大きな変更が行われ、SSR周りの改善が入っています。 Vue2からVue3 フロントエンド エコシステムの中のVue.js Year/Month vuejs/vue vuejs/core Nuxt React 2017/08 - - 1.0.0-rc8 16.0.0-beta.5 2017/09 v2.4.4 - 1.0.0-rc11 16.0.0 2017/10 v2.5.2 - - - 2017/11 v2.5.9 - 1.0.0-gh-06ae3 86 16.2.0 2017/12 v2.5.13 - 1.0.0-gh-806287 e - 2018/01 - - 1.2.1 - 2018/02 - - 1.3.0 16.4.0-alpha.09 11da3 2018/03 v2.5.17-beta.0 - 1.4.0 16.3.0 2018/04 - - - 16.3.2 2018/05 - - - 16.4.0 2018/06 - - 1.4.1 16.4.1 2018/07 - - - - 2018/08 v2.5.17 - 1.4.2 16.4.2 2018/09 - first commit 2.0.0 16.5.2

©MNTSQ, Ltd. 22 ドキュメンテーションについて Vueを普及させるために何が必要と考えていたのか、という 所からも大きな学びがあると思います。 私が最初にVueに出会って使うようになった大きな理由は、 そのドキュメントです。 v0.11のドキュメントは英文でしたが、読みやすく使える情報 が詰まっていたと記憶しています。 Vue0.11のドキュメントは、まだこのURLで読めます https://011.vuejs.org/guide/

©MNTSQ, Ltd. 23 ドキュメンテーションについて その後もドキュメンテーションの重要性はVueの歴史の中で しばしば語られていると思います。 Release v2.0.0-alpha.1 · vuejs/vue · GitHub https://github.com/vuejs/vue/releases/tag/v2.0.0-alpha.1 > Documentation still needs to be worked on. In the meanwhile for changes from 1.x and upgrade information, please refer to this thread.

©MNTSQ, Ltd. 24 まとめ ● 歴史を紐解くことで以下の事が読み取れるのでは ● 他のFWとの競争の中でVue.js開発チームとそのリーダーであるEvan You氏が何を大切にしてどうやって舵切りしてきたのか ● Vue.jsの開発者が実装した順番から、普及に必要とされる機能は何と 考えられていたのか、優先順はどうだったのか ● 今日は触れられませんでしたが、背景にはフロントエンドを取り巻くエコ システムの発展があります。 特にEcmaScriptとJavaScriptエンジンの発展が寄与するところは大きい

©MNTSQ, Ltd. 25 まとめ ● 歴史を振り返ることで、自分が次にどのような準備をして舵を切るか、 考える材料になれば幸いです。

©MNTSQ, Ltd. 26 ご清聴ありがとうございました！

No content