Design学び始めると起きるできごとフロントエンドのコンポーネントの粒度どうしよう。どのファイルがどのコンポーネントで、何があって何がないのかよくわからない。見つけたと思ったら作りが合わなさすぎて全然再利用できなかった。我々が開発しているのは、フロントエンド。悩んでいたのは最近のコンポーネントシステムの設計。Designが話しているのはデザインシステムの話し。Frostさんに現代のフロントエンドが抱えている事情に適した設計を出してくれって言っても困るでしょう。仕事を依頼する窓口はあるので、頑張って依頼して一緒に考えてもらうのも面白そうですよね。Designのエッセンスを取り入れた設計は結構あったりしますよね。Designではないので別名つけて欲しいよね。ここで別名とか区別をつけないで話すから混乱の原因になっている。Nardoさんがmediumで記事を公開していたのですが、先日からその記事が404になってしまい、現在その記事を見る方法は多分以前自分が和訳したこの記事しかないはずYoutube解説youtubeで見つけたが、他の方が2015年のjsconfで発表していたらしい。Designどうすれば良いか耐えずに議論しているが、世界では2015年時点で既にそこよりずっと先に進んでいた。Designのままでいられるそもそもこの辺そんなにキャッチアップしていない人は参考資料になる話すこと概要だけ。前のページに詳しく解説してくれているyoutubeへのリンクを貼ってあるので、詳しくはそちらを見て欲しい。Componentsは、扱うデータが多い、スケーラブルなWebアプリケーションとモバイルアプリケーションの作成と管理を容易にするためにPatternlab.ioのチームによって設計されました。Designの派生系です。Designの原則を拡張して変更することで、データの委任やコンポーネントの構造化などの技術的詳細を触媒化するのに役立ちます。Componentsの簡単な見方Atomは、アプリケーションの基礎的要素です。これらは通常セマンティックなHTML要素で、コンテナ以外の唯一の原子要素です。現実の世界の原子のように、これらは抽象化しても意味をなさない最小限の構成要素を表すはずです。単純なテキストとアイコン、いくつかのスタイルである返信ボタンを考えてみてください。Componentsを構成します。Moleculesは、再利用されるUIインターフェースの静的な要素グループです。※2いいねボタン、共有ボタン、ブックマークボタン、etcなどが含まれます。それらはどの階層にでも現れることができますが、Moleculesは反復するOrganismsの中で最も頻繁に見られますOrganismsは実際には動的Webアプリケーションの中核コンポーネントでもあり、これらのコンポーネントは、UI全体で一貫して繰り返される情報の動的コンテナを表します。ツイートボックス、マテリアルカードなどを考えてみましょうEcosystemは、主要なコンテナコンポーネントとインターフェイスが通信しようとしているアイデアを表す必要があります。これは、スタイルのための独立した外部コンテキストも提供します。データ管理にReduxを使用している場合、EcosystemはEcosystem-to-Ecosystemレベルでの相互のコミュニケーションを容易にするスマートコンポーネントとなります。componentsに委譲するだけでなく、Reduxを介して還元されたデータを処理する責任があります。環境はビュー全体またはページに対応します。静的なアプリケーションを作成している場合や、別々のルートで完全に別々のビューを持っている場合は、複数の環境があります。Slides.com。