Vue

Vuex

DI

Class Based Store Option

シングルトンインスタンスへの一切の依存を排除

kahirokunn

@kahirokunn 又は k-okina の名前で活動

たまにQiitaでVue.jsやフロント全般設計に関して投稿してます

・新しい事をするのと、型が強いのが好きです。

・最近のマイトレンドは関数型プログラミング。なのでElm好き

・実は漫画とゲームと昼寝が何より好き

綺麗な設計とは?🤔

綺麗な設計 => 翻訳 => Clean Architecture

本来のクリーンアーキテクチャの事を1ミリも伝えられない言葉ですが、凄いざっくりレイヤードとの違いを言うと、外部通信への依存をOOPのDIPを利用して逆転させ、ロジックがそのままの意味でコードの一番深い所に持ってこれるようにする事.

 

クリーンアーキテクチャ自体を学びたい方はこちら

外部通信への依存がなければstorybookに全てをマウントできるし、外部通信モジュール以外の全てのコードを単体テストも結合テストもモック無しでできるし、画像回帰テストも余裕のよっちゃん🤗

実際にはどうやって追い出すの?

サンプルコード

シンプル

もう1歩

Class Based Store Option

DIはInversifyJS任せ

サンプルコード

外部通信するコンテナコンポーネントの単体テスト

外部通信をするストアの単体テストをモックにもjestのサンドボックスにも頼らずに可能

恩恵: テスト辺

typescript-fsa-vuex

vuex-typescript-fsaのfork

・reduxで人気なtypescript-fsaライク

・痒い所に手が届くようにしている

VuexのAction, Mutation周りの秩序とタイプセーフ、凡ミス等の問題を解決

じゃあGetter側は?

Reactのselectorパターンライクなのを実現できるヘルパー関数

selectorの実装

     selectorにrootStateをDIするのでそこから必要な値を計算するだけ

    ただの関数なのでテストしやすい

bindが超楽で、サジェスチャもちゃんとつく

サジェスチャデモ

フロントだってやればちゃんとクラスベースのオブジェクト指向もできるんです!

ありがとうございました!

Made with Slides.com