処理の共通化と

コンポーネントの分割/分類/粒度

Vue.js v-tokyo Meetup #10

2019/07/25

@nakajmg

じまぐ

@nakajmg

Frontend Engineer at PixelGrid Inc. + 副業

(元DMM.comラボ 7年前?

技術書典5でコンポーネント設計の本を出しました

「コンポーネント設計についてのお気持ち関係を聞きたいです」

話すこと

  1. コンポーネント設計について

ちょっと抽象的🤔

お気持ち語ります

  1. 処理の共通化について
  2. コンポーネントの分割/分類/粒度について

処理の共通化

共通化の方法

  1. コンポーネントのmixin
  2. storeのgetters

mixin

mixinを使えば処理をまとめて

簡単に共通化(使いまわし)できる

できるけど、デメリットも多く

mixinでやる必然性がない

  • 簡単に使えるが、コードの見通しが悪くなる
  • 超便利mixinみたいな大きなものができがち
  • 依存しているmixin自体はわかるが、どのプロパティに依存しているか把握が難しく、mixin側の変更の影響範囲が読みづらい

$routerなど、thisに生えるのが仕方ないものを共通化する目的で使うのだけは許容できるかな?というところ

mixinだけに限らず、thisに何かを生やすのは基本的によろしくない。

便利(簡単)な一方で、コードの見通しと変更しやすさを犠牲にしている。

getters

storeのstateを都合のいい感じに

整形して使える

  • 特定のコンポーネントと1対1になるようなgetters
  • gettersに処理があるせいでstoreを介さないと使えないコンポーネントが存在する
  • ページAでは使うけどページBでは使わないgettersがある
  • storeはapiの値をそのままstateで保持
  • 値を整形する場合はページコンポーネントで

関数を外に出しましょう

mixinでthisに生やす意味も、getters自体に整形処理を持たせる必要もない。関数で使い回せるようにしておけばもっと都合がよくなる

helperとかtransformerとか、用途ごとに名前をつけてディレクトリを切っておくと取り回しやすい

Q. ファイル多くなるとimportめんどくさくない?

A. めんどくささから逃げた先にあるのは別のめんどくささです

片付けるのがめんどくさくて引き出しに全部ぶち込んだような状態は健全ではない

目先の楽さに流されない強い心と、先を見通す視点を持ちましょう。

コンポーネントの分割/粒度/分類

分割の粒度は

分類方法によって決まる

分類がうまくできれば

分割もうまくいく

分類 = 粒度の決定

優れた分類方法の要素

  • 迷わず分類できること
  • 複数人の間で共通認識として機能すること
  • 開発体験を損なわないこと

迷わず分類できること

自分自信がなんの迷いもなく「これはこれ」と分類できる方法であること。

自分でできないなら他の人もできない

共通認識として機能すること

共通認識として機能してない例

A「このコンポーネントはstoreを参照してないので

〇〇に分類しました。」

B「ビジネスロジックを含んでるからXXじゃない?

感覚的にもXXだと思う。あとそのコンポーネントもっと分割できそうじゃない?」

共通認識として機能してる例

A「このコンポーネントの役割を考えると

     分類は〇〇でいいよね。」

B「そうだね。その役割なら〇〇だね。」

  • 共通認識できる指標を定める
  • 機能するなら指標はなんでもいい
  • 関係する人たちの間で通じればよい

開発体験を損なわないこと

開発体験が損なわれがち

  • 正しく分類されてるけど細かく分割されすぎてて使いづらい
  • 特定のコンポーネントでしか絶対使わないのに分類上の都合で別のディレクトリにあってしんどい
  • など…

分類するときだけでなく

コンポーネントを使用/変更するときの

ことが考慮されているかどうか

具体的な分類方法は?

Atomic Design?

Q. Atomic Designをもとにコンポーネントを分類したことがある人?

Q. 結構うまくいった経験がある方?

Atomic Designがもたらした分類には価値がある一方、フロントエンドに与えた混乱も大きい

Atom/Molecule/Organismのような単位で分割する手法が当たり前に行われるようになったのは素晴らしい

原子が分子を構成して〜的な、

だれでも理解できそうだけど

人の数だけ捉え方が異なるやつ

ボタン1つの分類で迷ったことありませんか?

捉え方が異なるのにあたかも

「共通認識が取れてます」という雰囲気で採用するとうまくいかない

Atomic Designの指標を再定義、もしくは追加しなければ共通認識として機能させることは難しい(多くの人達にとっては

Alternative Atomic Designをさがして

(Ryo Yoshitake | THE GUILD) 

https://note.mu/ryopan/n/n5663632cc48e

Atomic Designがフィットしなかったチーム/企業が自分たちにフィットする分類を模索している

あらゆるプロジェクトや

チームにフィットするような

万能な分類はない

優れた分類方法の要素

  • 迷わず分類できること
  • 複数人の間で共通認識として機能すること
  • 開発体験を損なわないこと

これらは人やチームによって異なるもの

誰かが考えた分類が

あなた(達)にとっての最良の分類である可能性は低い

自分たちにとっての最良の分類方法を模索することを止めないでください。思考停止の先にあるのは緩やかな破滅です。

おしまい

処理の共通化とコンポーネントの分割/分類/粒度について

By nakajmg

処理の共通化とコンポーネントの分割/分類/粒度について

処理の共通化、Vueコンポーネントの分割/分類/粒度について

  • 9,285