"atomic design"の検索結果1 - 5 件 / 5件

• あとで読む

  Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話

  • 451 users
  • techblog.yahoo.co.jp
  • テクノロジー
  • 2019/12/03

  ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ

  • react
  • TypeScript
  • yahoo
  • atomic design
  • あとで読む
  • redux
  • design
  • 開発
  • atomicdesign
  • 技術

  
• あとで読む

  Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ

  • 365 users
  • note.com/tabelog_frontend
  • テクノロジー
  • 2021/05/21

  こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな

  • react
  • あとで読む
  • フロントエンド
  • atomic design
  • design
  • AtomicDesign
  • 設計
  • デザイン
  • UI
  • frontend

  
• あとで読む

  Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division

  • 291 users
  • speakerdeck.com/nrslib
  • テクノロジー
  • 2019/07/10

  Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib

  • Vue
  • あとで読む
  • vue.js
  • atomic design
  • コンポーネント
  • design
  • javascript
  • SPA
  • js
  • FrontEnd

  
• あとで読む

  【Atomic Designに懐疑的なあなたへ】改めて考えたい React / Next.js のデザインパターン

  • 215 users
  • zenn.dev/mutex_inc
  • テクノロジー
  • 2022/05/15

  フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法（デザインパターン）が考えられてきました。 しかし、React / Next.js を使ってチーム開発を行う際に、現状のデザインパターンでの運用では「どうもうまくいかないな」と思う場面に多々遭遇しました。そのような経験を踏まえて、「コンポーネントをどのように設計するか」「どのようにディレクトリを分けるか」を徹底的に考え、新しいデザインパターン「Tree Design」にまとめました。 Tree Design はまだまだ仮説段階です。今後弊社チームで運用していく中でブラッシュアップする予定です。しかし、他のフロントエンド開発チームがデザインパターンを再考する際

  • react
  • あとで読む
  • Next.js
  • デザイン
  • 設計
  • Atomic Design
  • 開発
  • design

  
• あとで読む

  脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita

  • 113 users
  • qiita.com/croco_works
  • テクノロジー
  • 2020/02/26

  はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト…　といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし

  • css
  • html
  • AtomicDesign
  • あとで読む
  • コーディング
  • sass
  • 設計
  • component
  • design
  • qiita