フロントエンドのコンポーネント設計に立ち向かう - Qiita

ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計？なにそれ？おいしいの？」という方 初めてコンポーネント設計でアプリ作ってみたけど、本当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー

[hiroyt]

なにこれすごい

[ytkibk]

“そして、このコンポーネントを構成する要素は以下の4つがあります。 情報構造 スタイル 状態 インタラクション・機能”

[d4-1977]

フロントエンドの設計しっかりやりたい

[muraaa6]

“ととなります。アプリケーションは複数の画面で構成されることが多く、同じパーツが繰り返し使われることが頻発します。例えばヘッダーやフッターなんかはほぼ全部の画面に登場するでしょうし、ボタンやテキストフ

[pokuwagata]

良い

[mosco-mule]

最近のフロントエンドのコンポーネント設計に立ち向かう ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、

[vanbraam]

フロントエンドに限定されない話の方が多い様に感じた;やってみないと実感できない事が多そう

[takatoshiono]

atomとか何だろ？と思ってたけどatomic designというやつなのか

[endok]

すごいためになりそうだけどフロントエンド開発してないからよくわからん。。いつかまた読もう。

[nokogiring]

丁寧

[syou6162]

よさみ

[ko-ya-ma]

多くの人が悩むところであり、悩んだ末にきっとたどり着くところ。こんなに見事に説明してくれるなんて……

[cpw]

かなり参考になる。次のコンポーネント設計ではこれを参考にレベルの高い設計をしたい。でもこれ徹底するの相当難しいと思う。

[rryu]

こういうのは単なる静的HTMLでもやったりするのだろうか。

[umai_bow]

人間の言語でまとめられてる。非常によい

[nabeen919]

[あとで読む:]最近のフロントエンドのコンポーネント設計に立ち向かう - Qiita:

[headless_pasta]

"3回出現したら単一のコンポーネントとして切り出す、というルールを設けると意思決定がスムーズかと思います。"