「世界中の“むずかしい”を簡単に」でお馴染みの
株式会社diffeasy 井上 (@Nunnally_Engr)です。
先日、弊社が主催している勉強会で登壇したのですが、
全てお話できなかったので、その時に使用したスライドと併せてこちらの記事を読んでいただければ幸いです。
【Key Note - Vue 3.0 Update @EvanYou】
概要
- Vue.js 3.0のアップデート内容
セッションのポイント
◉ Vue.js 3.0はメモリ使用量が減り初期化が高速に
- 仮想DOMの実装をフルスクラッチで作り直したそうで、mountとpatch処理が最大100％向上。また、プロキシを用いた監視で完全な言語レベル＆速度向上を目指したとのこと。
- コンポーネントインスタンスの初期化が最大で100％も高速化し、アプリ全体の速度が2倍になり、メモリ使用量が半減するとのこと。
◉ Vue.js 3.0の新コアのランタイムはgzipで10KB以下
- Tree-shakingへの対応
- ビルトインのコンポーネント
◉ カスタムレンダラAPI
- カスタムレンダラを作成するためのファーストクラス API が利用可能となる。
- それらの改変のために Vue コードベースをフォークする必要はなくなり、さまざまな目的のためにカスタムレンダラを作成することが簡単になる。
◉ リアクティビティAPI
- 今後はVuexを利用せずに済む
- Stateを変更するだけで全ての値を変更できる
◉ TSXが使えるように対応
- TypeScriptで書きやすくなる
◉ Hooks API
◉ Time Slicing
【WebComponentsとVue.jsのこれから @Takanori Oki】
概要
- Vue.js と Web Components の関係を整理し、両者がこれからどのように関わっていくべきかについての考察。
セッションのポイント
◉ 現時点でWebコンポーネントを導入するにはデメリットとどう向き合っていくかを考えることが必要。
- 外部から渡されるイベントのハンドリングが難しい部分や、CSSの設計を大幅に見直す必要がある。
◉ フレームワークに依存し続けるのは危険。
- フレームワークに依存すると、メンテナンス停止やフレームワークの開発自体が止まってしまった時に使い続けるのが困るときがくる。
- フレームワークに依存した、コンポーネント利用をしていると他のフレームワークに移行する際に負債になりかねない。
- Webコンポーネントであれば、Web標準なため使い続けることが可能である。
◉ Vue.jsはアプリケーションを作るもの、WebコンポーネントはUIのもの
- 上流のデータ構造の管理やデータバインディングはVue.jsが担って、WebコンポーネントはUIパーツ的なイメージで扱っていければ今後は幸せになるのかもしれない。
【Unit testing a Vuex store @Edd Yerburgh】
概要
- Vuexの単体テストのポイントと、Vue Test Utils を使ったVuexの単体テスト方法について。
セッションのポイント
◉ テストのパターンとしては、「Store部分を個別にする方法」と「Storeインスタンスを利用する方法」がある
◉ Store部分を個別にテストするメリット・デメリット
- メリット：きめ細かくテストができる
- デメリット：Storeインスタンステストに比べると脆い
◉ Storeインスタンスを利用したテストのメリット・デメリット
- メリット：テストが脆弱にならず、テストコードが少なくて済む
- デメリット：コードの行が増える為テストのデバッグが困難になることがある
◉ Eddさんのテストの使い分け方法
- 小規模の場合は、Storeインスタンスのテストを実施し、中規模・大規模の場合はStore部分を個別にテストしているとのことでした。
【Nuxt.js 2.0 @Sébastien Chopin】
概要
- Webpack 4、フック、モジュール、ESM、Nuxt.jsの改善点から、Vue.jsアプリケーションの作成方法の解説。
- サーバーサイドのレンダリングに関する注意事項とベストプラクティスについて。
セッションのポイント
◉ ESモジュールをサーバーミドルウェアやnuxt.config.jsで直接記述できるようになった。
◉ より速いビルドへ
- 具体的には、起動速度を34％向上、再コンパイル速度も45％向上。
◉ バンドルの分離
- クライアント／サーバを分離できるようになった。
◉ Nuxt.js 2.3.0ではモダンブラウザ向けビルドが備わる予定
- より小さなバンドル、より少ないポリフィルを実現。
【note のフロントエンドを Nuxt.js で再構築した話 @福井烈】
概要
- なぜ Nuxt.js（Vue.js）を採用したのか
- 既存システムとの共存と移行プロセスについて
- Atomic Design を採用したコンポーネント設計へのシフト
- デザイナーチームとの協業
- 今後の課題
セッションのポイント
◉ パス（URL）ベースで小さく移行するのは有効である。
- 既存の言語やフレームワークの成約に縛られない
- ドッグフーディングが容易にできる
- ロールバックが容易にできる
- デメリットとしては、完全移行するまでは２重メンテとなる。
◉ SSRをデフォルトでサポートしているNuxtは大幅に高速化できるし導入も簡単。
- SSRが必要なら導入しない手はない
◉ 導入が簡単な反面学習コストや運用コストはかかる
- 導入自体は簡単かもしれないが学習コスト/運用コストはかかる。
- ユニバーサル対応（クライアントとサーバ）のどちらでも実行できるコードしないといけない
- Node.jsの運用が必要(noteさんはAWSのLambdaを利用)
- Node.jsを運用するにあたって、VersionがLambdaに依存してしまう。
- Nuxt.jsの最新versionに追従できなくなる可能性
- Lambdaにdeployできるパッケージ容量の最大サイズ（現状50MBまで）
- cold start問題によるレイテンシの悪化
【1年間単体テストを書き続けた現場から送る Vue Component のテスト @土屋和良】
概要
- どこをテストするか
- 表示のテスト
- Form binding/validation
- Componentから Vuex の commit/dispatch
- どのように表示をテストするか
- 単純な assertion
- Snapshot Testing
- Visual Testing
- テストを書いてみた結果、どのテストがメンテナンスのコストが低く、効果が高かったか考察
- テスト方針の見直し結果とその効果
セッションのポイント
◉ 外部からみた振る舞いをテストする
- Componentでいうと、TriggerやOutput
- Triggerに関してはLifecycleやProps、VuexState
- Outputは、HTMLやCSS、Event、VueAction
◉ storybookでの「Props/Vuex State → 表示」のテストだけでもあると安心
- Snapshot Testingで、componentのDOM（Snapshot）を比較
- Jestの機能を使ったテスト
◉ 「User Interaction → 表示」のテストもあると更に安心の幅が広がる
- 重要なFormだけでもやっておくといい
- それ以外は難易度高いので諦めも肝心、ややこしいテストはしないという割り切りも大事（笑）
- User Interaction後のスクショをとってVisual Testingはすごい便利
個人的なまとめ＆感想
Vue Fes Japanに参加してみて全体の感想ですが、
自分が実際使っている、Nuxt.jsの話とかは内容的にすんなり入ってきました。
あと、Vue.js 3.0が待ち遠しいですね～。
また、Vue Fesといいながら、今回はあまり触れてませんが、
noteの方のセクションでAtomic Designを採用したお話での現場の声など、
Vue.js以外の現場のお話が聞けたのでとても勉強になったし、実際色々試したくなりました。
特に、テストに関しては触れたこともないので…
やってみて皆さんの前でもフードバックできればいいなと思います。