タグ

関連タグで絞り込む (3)

タグの絞り込みを解除

atomicdesignに関するgriefworkerのブックマーク (5)

  • 私のフロントエンドディレクトリ構成・テスト観点 2022


    近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します︵あくまで執筆現在の脳内アウトプットになりますのでご了承ください︶ フロントエンドディレクトリ構成の事情 タイトルの﹁フロントエンドディレクトリ構成﹂をさす﹁Components﹂のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは﹁デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点﹂の3つの観点が混在するため事情が複雑です。どうせ作るのなら﹁デザイナー・フロントエンド﹂どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが﹁デザインシステム的に捨てていいの？﹂と思うこともあるので、とくに要望がなければ、筆者は﹁
    私のフロントエンドディレクトリ構成・テスト観点 2022

  • Atomic Designの実装例 〜Atomic Designを使ったコンポーネント指向のUI開発：Q〜 - UGAP Engineer's Blog


    本稿は︵序︶︵破︶︵Q︶のシリーズの3番目の記事になります。 本稿では前回︵破︶で説明したAtomic Designを導入する際に工夫した点をふまえた実装例をJSフレームワークを使用する場合と使用しない場合の2つの場合について紹介します。 シリーズ︵序︶ではAtomic Designの概要 シリーズ︵破︶ではAtomic Designの導入に際して工夫した点 について説明していますので、そちらをご覧ください。 実装例題材 下のサイトテンプレートを題材に実装していきます。 https://html5up.net/prologueシチュエーションとしては、デザイナーからもらったデザインカンプをエンジニアが実装する想定で説明します。 コンポーネントの分割 エンジニアはデザインカンプをAtomic Designのコンポーネント単位に分割していきます。 コンポーネントの分割フロー図は︵破︶で以下の
    Atomic Designの実装例 〜Atomic Designを使ったコンポーネント指向のUI開発：Q〜 - UGAP Engineer's Blog

  • Atomic Designの導入に際して工夫したこと 〜Atomic Designを使ったコンポーネント指向のUI開発：破〜 - UGAP Engineer's Blog


    本稿は︵序︶︵破︶︵Q︶のシリーズの2番目の記事︵破︶になります。 シリーズ︵序︶ではAtomic Designの概要 を、 シリーズ︵Q︶ではAtomic Designの実装例を説明していますので、そちらをご覧ください。 Atomic Design︵アトミックデザイン︶とは、UI︵画面︶をコンポーネント単位で設計し、それらを組み合わせて使い回し可能なUIを作成するための手法です。 Atomic Designの考えのものとUIコンポーネントを切り出していくことはいくつかの利点があります。 しかし、Atomic Design はUIを構築するための方法論でしかありません。 つまり、デザインや実装方法、運用方法は独自に考える必要があります。 実際に導入してみるといくつか乗り越えなくてならないハードルが存在することがわかりました。 本稿︵破︶ではそのハードルを乗り越えるために、どのような工夫した
    Atomic Designの導入に際して工夫したこと 〜Atomic Designを使ったコンポーネント指向のUI開発：破〜 - UGAP Engineer's Blog

  • Atomic Designとは 〜Atomic Designを使ったコンポーネント指向のUI開発：序〜 - UGAP Engineer's Blog


    はじめに UI︵画面︶コンポーネントを切り出したいときにどういう粒度で切り出したらいいか迷う時があります。 適切な粒度で切り出しておかないと、位置を組み替えたりデザインを修正したい場合に、使い勝手が悪くて作り直しになってしまうからです。 メンテナブルなUIコンポーネントに切り出すにはどうしたらよいでしょうか。 いろいろ調べた末、Atomic Design︵アトミックデザイン︶というアイデアに行き着きました。 このAtomic Designを使ったコンポーネント指向のUI開発を︵序︶︵破︶︵Q︶のシリーズを使って紹介したいと思います。 ︵序︶では、Atomic Designがどのようなものかをご紹介します。 ︵破︶では、Atomic Designを導入した際にうまくいかなかった点と工夫した点をご紹介します。 ︵Q︶では、具体的な開発例をご紹介します。 このシリーズが同様に困っている現場の参考
    Atomic Designとは 〜Atomic Designを使ったコンポーネント指向のUI開発：序〜 - UGAP Engineer's Blog

  • Vue.js からみた AtomicDesign

    この記事はVue.js #3 Advent Calendar 2017の13日目の記事です Atomic Design自体の記事は色々ありますので、この記事ではAtomicDesignで設計したコンポーネントをVue.jsで実際に運用してみて感じた事をまとめてみました 実際にどんな感じになるか結論から言うと、AtomとMoleculeにStoreを持たせず。 OrganismsとTemplateあたりの粒度でStoreを利用するとIA的にも収まりがいい様に思えます。是非デザイナーにツッコミ入れましょう。 VueコンポーネントをAtomicDesignで実装するとだいたいこんな感じになります。Atomの役割色・タイポ・ボタン固定文言など 直接描画要素にデータをレンダリング描画要素のイベントを発行親要素からのデータ受け取り登場箇所がすごく多いのでステートレスを徹底するStoreみちゃダメ絶対！

    Vue.js からみた AtomicDesign
    griefworker
    griefworker 2018/09/13
    「AtomとMoleculeにStoreを持たせず。 OrganismsとTemplateあたりの粒度でStoreを利用するとIA的にも収まりがいい様に思えます。」
    リンク
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.