コードの汎用性可読性が悪いのを直したいです。（GatsbyとContentfulで作ったサイト）

前提・実現したいこと

Gatsby（React）でWEBサイトを作っていて、
以下のソースコードをスッキリさせたいのですが、どう記述できるのでしょうか？
(ContentfulというヘッドレスCMSを使用して、データを取得しています。)

表示イメージ

発生している問題・エラーメッセージ

categoryS、categoryS2、categoryS3、categoryS4...categoryS20と数が増えても見やすいソースにしたい。

該当のソースコード

React
1export const query = graphql`
2    query() {
3        bigcate:allContentfulCategory(filter: {navadd: {eq: "add"}}) {
4            edges {
5                node {
6                    category
7                    id
8                    categorySlug
9                    blogpost {
10                        title
11                        slug
12                    }
13                    categoryS
14                    categoryS2
15                    categoryS3
16                    categoryS4
17                }
18            }
19        }
20        all:allContentfulCategory(sort: {fields: blogpost___createdAt, order: ASC}) {
21            edges {
22                node {
23                    category
24                    id
25                    categorySlug
26                    blogpost {
27                        id
28                        title
29                        slug
30                    }
31                    categoryS
32                    categoryS2
33                    categoryS3
34                    categoryS4
35                }
36            }
37        }
38   }
39` 
40.
41.
42.
43{data.bigcate.edges.map(bigcate => (<div className="wrapper">
44    <div className="bigcate">
45        <h2 className="bar l"><p><span>about </span><i>{bigcate.node.categorySlug}</i></p><p>{bigcate.node.category}について</p></h2>
46        <p className="topTitle"><Link to={`/${bigcate.node.categorySlug}/`}>{bigcate.node.category}TOP</Link></p>
47        <ul>
48            {bigcate.node.blogpost.map(catlower => (
49                <li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
50                    {catlower.title}
51                </Link></li>
52            ))}
53        </ul>
54    </div>
55
56    <ul className="smallcate">
57        {data.all.edges.map(allcate => (<>
58            {bigcate.node.categoryS === allcate.node.categorySlug && (<li key={allcate.node.id}>
59                <p className="topTitle"><Link to={`/${allcate.node.categorySlug}/`}>{allcate.node.category}TOP</Link></p>
60                <ul>
61                    {allcate.node.blogpost.map(catlower => (<>
62                        <li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
63                            {catlower.title}
64                        </Link></li>
65                        {allcate.node.categoryS !== `no-category` && (<li>
66                            {data.all.edges.map(categorySlug => (<>
67                                {allcate.node.categoryS === categorySlug.node.categorySlug && (<>
68                                    <p className="topTitle"><Link to={`/${allcate.node.categoryS}/`}>
69                                        {`${categorySlug.node.category}TOP`}
70                                    </Link></p>
71                                    <ul>
72                                        {categorySlug.node.blogpost.map(catlower => (<>
73                                            <li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
74                                                {catlower.title}
75                                            </Link></li>
76                                        </>))}
77                                    </ul>
78                                </>)}
79                            </>))}
80                        </li>)}
81                        {allcate.node.categoryS2 !== `no-category` && (<li>
82                            {data.all.edges.map(categorySlug => (<>
83                                {allcate.node.categoryS2 === categorySlug.node.categorySlug && (<>
84                                    <p className="topTitle"><Link to={`/${allcate.node.categoryS2}/`}>
85                                        {`${categorySlug.node.category}TOP`}
86                                    </Link></p>
87                                    <ul>
88                                        {categorySlug.node.blogpost.map(catlower => (<>
89                                            <li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
90                                                {catlower.title}
91                                            </Link></li>
92                                        </>))}
93                                    </ul>
94                                </>)}
95                            </>))}
96                        </li>)}
97                        {allcate.node.categoryS3 !== `no-category` && (<li>
98                            {data.all.edges.map(categorySlug => (<>
99                                {allcate.node.categoryS3 === categorySlug.node.categorySlug && (<>
100                                    <p className="topTitle"><Link to={`/${allcate.node.categoryS3}/`}>
101                                        {`${categorySlug.node.category}TOP`}
102                                    </Link></p>
103                                    <ul>
104                                        {categorySlug.node.blogpost.map(catlower => (<>
105                                            <li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
106                                                {catlower.title}
107                                            </Link></li>
108                                        </>))}
109                                    </ul>
110                                </>)}
111                            </>))}
112                        </li>)}
113                        {allcate.node.categoryS4 !== `no-category` && (<li>
114                            {data.all.edges.map(categorySlug => (<>
115                                {allcate.node.categoryS4 === categorySlug.node.categorySlug && (<>
116                                    <p className="topTitle"><Link to={`/${allcate.node.categoryS4}/`}>
117                                        {`${categorySlug.node.category}TOP`}
118                                    </Link></p>
119                                    <ul>
120                                        {categorySlug.node.blogpost.map(catlower => (<>
121                                            <li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
122                                                {catlower.title}
123                                            </Link></li>
124                                        </>))}
125                                    </ul>
126                                </>)}
127                            </>))}
128                        </li>)}
129                    </>))}
130                </ul>
131            </li>)}
132            {bigcate.node.categoryS2 === allcate.node.categorySlug && (<li key={allcate.node.id}>
133            .
134            .
135            .    
136            </li>)}
137            {bigcate.node.categoryS3 === allcate.node.categorySlug && (<li key={allcate.node.id}>
138            .
139            .
140            .
141            </li>)}
142            {bigcate.node.categoryS4 === allcate.node.categorySlug && (<li key={allcate.node.id}>
143            .
144            .
145            .
146            </li>)}
147        </>))}
148.
149.
150.
151</div>))}

試したこと

『{bigcate.node.categoryS === 』の所のcategorySを配列にしてmapで処理。

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

Gatsby　https://www.gatsbyjs.com/
contentful　https://www.contentful.com/

行動規範の内容に同意します

回答1件

コンポーネントを分けましょう。<div> 1 個あったらコンポーネントにする勢いでいいです。また、render() の中で条件判断するのを極力避けましょう。必要な変数は render() の前に計算を済ませてから render() に入りましょう。これを守るだけでぐっと可読性のよいコードになるはずです。

投稿2021/01/14 03:21