React使ってSPAを作るよ(15)


React使ってSPAを作るよ目次

React使ってSPAを作るよ(14)の続きです。

今回やることは、共通のコンポーネントを使って、タグの一覧をヘッダにもレンダリングすること。

さて、いきなりですがUIを変えてみました。
モックはこちら。

See the Pen dMNavJ by natsumi (@mayo31) on CodePen.

新規タブでフルページを開く

※全体的にピンクになっているのは同僚がAKBファンで、ピンクにしてくれってことだったので、もらったカラーコードを使うことになりました。

ときどきこうやってモックのHTML構造を変えたり、JSONのキーを変えたりしてるところもあるので、過去の記事のソースをそのままコピペして試している方がいたら気を付けてください。

ヘッダのフォームと、タグの絞り込みリストをドロワーにしました。
ボタンのアイコンはsvgでそれらしいものを作ってみました。
アニメーションをちゃんと設定していないので細かい調整は必要ですが、やりたいことのイメージはつかんでもらえるかと思います。

Reactのコンポーネント志向が活かされる、パーツの再利用

今回、タグで絞り込めるボタンのリストは、2箇所あります。
ヘッダにあるタグ絞り込みリストと、記事に紐づけられたタグのリストです。

どちらも同じ.tag-listで、同じスタイルがあたっている同じHTML構造のリストです。

これまではヘッダのリストはなかったので、ArticleArea.jsxの中にタグコンポーネントを書いていました。
でも、同じソースなんだし、2回書くのは嫌ですね。
共通で利用できたらいいですよね。

とりあえず管理しやすいように、いったんTag.jsxを作ってしまいましょう。

ArticleArea.jsxに書いてあったtagコンポーネントやTagListコンポーネントを削除して、Tag.jsxからインポートするのを忘れずに。
同様に、今回追加するヘッダでも利用できるように、SiteHeader.jsxでも読み込んでおきましょう。

で、今まではヘッダにはh1とURLFormコンポーネントしかなかったのですが、アイコンボタンのナビゲーションに変えたいので、ナビゲーションのコンポーネントをあらたに作ります。
ほとんどモックのHTMLをそのまま突っ込んでいます。

この中で、URLFormコンポーネントと、TagListコンポーネントを呼び出していますね。
TagListに渡すデータは、このあと親のコンポーネントでとってきますので少々お待ちを。

ReactでJSXを書くときの注意点いくつか

Navigationコンポーネントの中には、HTMLしか書けないWebデザイナー的ハマりポイントがたくさんあるので、JSXで書くときに修正しないといけないところをいくつか紹介します。
(勉強していくうちに追記するかもしれません。)

ラジオボタンのchecked属性
defaultCheckedにします。

labelのfor属性
htmlForにします。

inputのvalue属性
defaultValueにします。

input、imgなどの空要素
ベースがHTML5であっても、XMLと同じように、/をつけて閉じます。

SVGのxml絡みの属性
Illustratorで書き出したSVGコードからxml絡みの属性はすべて削除します。
コンパイルできないぞ、ってなっちゃうので…
fillやstroke、サイズなどのスタイル指定はCSS側でしています。

Reactを紹介している記事を見ていると、「JSXならWebデザイナーでも修正しやすい!」というメリットが多く見られるのですが、実際にはこのようにJSXの記法に慣れる必要があります。

子コンポーネントにデータを渡す

ということでNavigationコンポーネントができたら…
今度はSiteHeaderコンポーネントで呼び出しましょう。
以前はURLFormが入っていたところですが、ここをNavigationにしておきます。

また、Navigationコンポーネントの中で使うタグリストのデータを渡すために、data={this.state.data}をつけています。
じゃあこのdataってのはどうやって取ってくるのよ、というと…
これまでにやったのと同じように、APIを叩いてJSON形式のデータを取得します。

ちなみに今のAPIだと、こんな感じのJSONが返ってきます。

ここでとってくるデータは、ArticleAreaの中のリストとは異なります。
ArticleAreaでとってくるデータは、ある記事に紐づいたタグのリストなので、

といった感じで、/api/articleという記事リストを返すAPIを叩いています。

こういう感じのJSONが返ってきています。

この中に、記事に紐づいたタグのリスト、tagDataという配列を持っているのでこれをTagListに渡していますね。

このTagListコンポーネント自体は、Navigationコンポーネントで使っているのと同じコンポーネントですが、渡すデータが別のものなので、生成されるリストも異なります。

こうやって、同じ構造のHTMLを共通のコンポーネントにして、再利用できるわけですね!

React使ってSPAを作るよ目次