KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

システム, コンポーネント設計について

sytem component architecture

component arch, コンポーネント設計

why

qiita.com

やめたろう さんの記事を読んだ

<v-btn
  rounded
  depressed
  min-width="120"
  large
  outlined
  @click="cancel"
>
  キャンセル
</v-btn>
<v-btn
  rounded
  depressed
  min-width="120"
  large
  color="primary"
  @click="ok"
>
  OK
</v-btn>

このOK buttonとCancel buttonを各自component化しないと

複数ページ帰るときにぐちゃぐちゃになるというエピソード.

<CancelButton @click="cancel" />
<OkButton @click="ok" />

こうして使えばroundedを消すときに一斉痴漢より

遥かに安全に置換ができる

また,全てのページで使っているならば

/components/Heading2.vue
<template>
  <h2 class="heading2">
    <slot />
  </h2>
</template>

のようなとても小さいtag群すらもcomponentを作るメリットが

十分にある.

conclude

まとめると,徹底的にcomponentにしていくことで,仕様変更に非常に強く,

壊れる可能性が低いメンテナンス性の高いサイトが作れるということだった.

これだけだとどの設計書にも書いてありそうだが,非常にシンプルで具体的で

尚且つジョークも豊富でストンと理解できた.

qiita.com

彼の記事は非常にわかりやすい.

system-design-primer

https://github.com/donnemartin/system-design-primer/blob/master/README-ja.md

これを読んでまとめる

Twitterで流れてた

https://github.com/donnemartin/system-design-primer/blob/master/README-ja.md