AtomicDesignとデザインシステム、CSS設計について
開発部で週1で新しいことをやってみる『Dev実験室』の取り組み AtomicDesignを知る デザインシステムを知る CSS設計どうするのが良い？ って話をする
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
開発部で週1で新しいことをやってみる『Dev実験室』の取り組み AtomicDesignを知る デザインシステムを知る CSS設計どうするのが良い？ って話をする
こんにちは！Magic Momentのフロントエンドエンジニアの石田です！ Magic MomentのフロントエンドではReactを採用しており、 コンポーネント設計にはAtomicDesignを採用しています。 みなさんはコンポーネントを使い回せていますか？ 今回は僕がMagic Momentで実施しているコンポーネントを使い回すための開発手法をご紹介します。 コンポーネント駆動開発 コンポーネント駆動開発とは、画面を作る際に小さなコンポーネントから作成していき、小さなコンポーネントを組み合わせて画面を作る「ボトムアップ」の開発プロセスになります。 この手法を使用すると、小さなコンポーネントとして再利用できる部品を設計できます。そのため、コードの重複を減らし、保守性を向上させることができます。また、コンポーネントを組み合わせて画面を作成するため、開発の効率性も向上します。 Magic M
学生エンジニアのためのチャットサービスをNext.js + TypeScript + AtomicDesign + Firebase9 + Dockerで作った（β） - Qiita
はじめに ※今回の開発は、株式会社OwN様からいただいた技術課題の一環で行ったものになります。 自己紹介 会社員やりつつ、趣味で個人開発を行っております。 フロントエンジニアのふぁると申します。 【Twitterリンク】 itamaster サービスについて サービス名 hacker-class-roomを略して、「はかくら」です！ リポジトリURL こちらになります。 https://github.com/FAL-coffee/hacker-class-room サービスの概要 「プログラミングの授業が始まるが、ついていけるのか不安......」 「情報処理の勉強が難しい。もしかして、こんなに苦労しているのは私だけ？」 「ゲーム作りに興味があって、プログラミングを始めてみたいけど、何から始めればいいのかわからない」 「ネットで見た通りにやったのに、環境構築でつまずいてしまった。」 「プロ
AtomicDesign の仕分けをテストで判定する
AtomicDesign には「Atoms か Molecules か？、Molecules か Organisms か？」の判定が悩ましい…という課題があります。これは、フロントエンド・デザイナー間ではもちろん、デザイナー同士でも解釈差異があるようです。明確な判定軸がなければ、いずれブレが生じ、規律のないデザインシステムになりかねません。 この状況に対し「アクセシビリティを軸にする」という発想に至り、どのように仕分けるかを先日の投稿で紹介しました。このアイディアはタイトルのとおり「テスト」で機械的に判定可能です。 AtomicDesign カスタムマッチャー関数 「AtomicDesign の仕分けをテストで判定する」ために、独自のカスタムマッチャー関数を設けます。普段利用している'@testing-library/jest-dom'もカスタムマッチャーのライブラリですが、このカスタムマ
【MUI】Next.js×MUI×AtomicDesignにおけるオリジナルテーマの適応とコンポーネント設計について
タイトルがどっかの論文みたいになってしまいましたが、要はこういうことです。 「MUIの機能は継承しつつ、スタイルだけオリジナルに定義して設計はAtomicDesignにしたい！」 というときの個人的なベスト？プラクティスです（もっといい方法があれば教えてください...）。 この実装は需要があるだろうと思いつつ、調べてもあまり記事を見かけなくて困っていました。 なので実現方法と設計・運用ルールを自分なりに考えた結果をまとめてみます。 （Next.js、MUI、Atomic Designなど登場人物の紹介は省きます。 すでにすばらしい記事がたくさんあるのでわからない方はぜひ調べてみてください） ⛰ 目的 MUIの機能を引き継ぎつつスタイルのみを上書きする 都度スタイルを上書きするのではなく、オリジナルテーマを定義して運用する デザイン設計はAtomicDesignを採用する 📦 前提 Nex
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AtomicDesignを活用する「コンポーネント駆動開発」のススメ
shiho5.ag.ebb.jp
anchanh2.hatenablog.jp
diamond.jp
kevinsjournal.ca
kishibe-kureko.hatenablog.com
www.arbeit-work.jp