質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.40%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

設計相談

システムの設計についての相談や質問を投稿する際にご使用ください。

命名規則

命名規則は、プログラミングする際に識別子の名称である文字列を決める表記法のことです。ネーミング規則・ネーミング規約・命名規約とも呼びます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

174閲覧

コンポーネント指向のディレクトリ構成・命名・役割の分担について

meronobu.no1

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

設計相談

システムの設計についての相談や質問を投稿する際にご使用ください。

命名規則

命名規則は、プログラミングする際に識別子の名称である文字列を決める表記法のことです。ネーミング規則・ネーミング規約・命名規約とも呼びます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

2クリップ

投稿2024/06/20 08:02

実現したいこと

小説・漫画などの書籍をまとめた本棚アプリを作るにあたっての
・ディレクトリ構成、命名についての理解
・ディレクトリ単位の役割の分担についての理解

前提

features ->novel(小説)  ->components   ->pages    ->list.ts    (一覧ページ)    ->retrieve.ts    (単体ページ)       ->containers    ->list.ts(一覧ページ)    ->retrieve.ts(単体ページ)    ->retrieve-detail-relation-cards.ts(単体ページの関連小説一覧)     ※API実行    ->retrieve-comments.ts(単体ページの小説コメント一覧)     ※API実行     ※トップページからも利用    ->list-cards.ts(小説一覧)     ※API実行    ->list-cards-pagination.ts(小説一覧+ページング)     ※トップページからも利用    ->list-cards-filter.ts(小説一覧+フィルタリング)    ->list-cards-pagination-filter.ts(小説一覧+ページング+フィルタリング)       ->presenters    ->list-card.ts(一覧ページ用の簡易な小説情報)    ->retrieve-detail-card.ts(単体ページ用の詳細な小説情報)    ->comment.ts(コメント)     ->comic(漫画)  ->...省略   ->home(トップページ)  ->...省略

役割

◆ pages
・ルーティング

◆ containers
・APIからデータの取得・状態管理
・ロジック、データ加工

◆ presenters
・UI

質問内容

  1. 「ページ名 + 機能 + 機能 + ...」の命名規則でファイル名を定義しているのですが、ただただ冗長で融通の効かない印象なのですがこういうものなのでしょうか?それとも根本的に間違っているのでしょうか?

  2. 「小説一覧」「ページング」「フィルタリング」の各コンポーネントを組み合わせて一つのコンポーネントとして作成する際に、都度似たようなコンポーネントを作っていくのでしょうか?
    たとえば、ページングを無限スクロールにする・小説一覧の並びを「grid」「table」「marsonry」にするなどCSSだけでは対応できない場合もあるのでロジックを含んだcontainerを新しく作る必要にかられるのでしょうか?
    そしたら芋づる式にどんどんとコンポーネントが増えていく解釈で恐怖があります。
    (対応させるレイアウトのプロパティフラグを持って可変のレイアウト対応もできるでしょうが、テンプレートを膨らませると碌なことにならないので避けたい所存です。)

  3. 役割の考え方は上述の考え方であっているのでしょうか?他のコンポーネントからも利用できるように[containers]でのみAPIからデータを取得する想定とすると、[pages]がただのルータ・ラッパーにしかならない解釈で、[containers]にページのためだけの・実際に出力されるページデザインのコンポーネントを余計に作る必要が生じます。
    ただ、[page]側でapiデータを取得すると今度はコンポーネントの再利用性という観点からも外れてしまう気もしますので、自分の中でどちらにも納得がつかない状況です。

補足情報(FW/ツールのバージョンなど)

angular 18

まとめ

コンポーネント指向の考え方について理解が不十分な上での質問となってしまい、的を得ていない・基本を理解できていない質問になっていたら申し訳ありません。
ただ、個人開発ですのでせっかくなら納得の行く構成にしたいと思い質問させていただきました。
もちろん、この類の設計思想に明確な答えがないことは重々承知ですが、どうか方向性を理解するためにも回答を頂けるとありがたいです。

yahoo2023👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.40%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問