Vue

Vuex

DI

Class Based Store Option

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

kahirokunn

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

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

twitterアカウント

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

・最近のマイトレンドは関数型プログラミング。なので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パターンライクなのを実現できるヘルパー関数

mapComputed

・selectorの実装

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

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

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

サジェスチャデモ

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

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