はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、新規機能実装などに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか なぜ移行
本記事では、Reactでのコード例をもとに、どういったポイントを押さえればAtomic Design（アトミックデザイン）を上手く運用することができ、開発効率を上げることができるかをご紹介します。 「Reactを使ったAtomic Designの構成で開発を進めたい」 「Atomic Designで開発を進めるにあたっての注意点を知りたい」 そんな悩みがあればぜひご覧ください！ 開発技術について定期的に情報収集したいという方は、ぜひクランチタイマーのニュースレターにご登録ください。 月に1回程度、おすすめ記事や更新情報などをメールでお届けいたします。 とりあえず登録する！ Atomic Design（アトミックデザイン）とは？ アメリカのWebデザイナーBrad Frost氏が考案、提唱したフロントエンドの設計手法です。 参照：http://bradfrost.com/blog/post/
Micro Atomic Design｜mizno
こんにちは、株式会社POLでエンジニアをしているミズノです。前回はフロントエンド の取り組みについてお伝えしました。今回はその続きで、レイヤードアーキテクチャと合わせて取り組んでいるのがAtomic Designの考え方です。その部分を紹介したいと思います。 課題我々のフロントエンド開発において、2つの大きな課題がありました。 1.影響範囲の調査コストが高い 当時コンポーネントを利用し各機能を表現していましたが、コンポーネントの利用範囲はアプリケーション全体であるため、改修が他のページで思わぬ影響をあたえることがありました。開発時に入念な影響範囲調査が行われていましたが、この工程は正直楽しいものではく、スタートアップで求められるスピード感が欠如していると感じていました。 2.コンポーネントの複雑化 コンポーネントの再利用は良い考えですが、扱いを誤るとコンポーネントの複雑化が起きます。例えば
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのディレクトリ設計を移行した話 | Atomic Design → Feature
Atomic DesignによるReactコンポーネントの設計手法 | クランチタイマー株式会社