react

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


React使ってSPAを作るよ目次

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

なんとかReactでレンダリングができた

さっそく、残りのパーツをすべて組み込んじゃいましょう。
JSONがとうとうこんなに長くなってしまいました…
ぜひとも外部ファイル化したいですね。

tagDataと、markDataのふたつをネストしました。

追加のコンポーネントを書いていきます。

タグリストのコンポーネントと、

読んだ人リストのコンポーネントを追加しました。

記事コンポーネントでそれぞれのコンポーネントを包括して、見出しのh3も追加しました。

そして最後に、JSONのデータを渡すのを忘れずに…

articleTag={article.tagData} articleMark={article.markData}を追加しましたよ。
ここまでくると、モックと同じ要素が揃いましたね!
ブラウザで見たらこんな感じになりました。

react

脱線して横並びリストの話

ちょっとここで脱線しますが、意外とこれを知らなくて躓く人が多いので触れておきます。
今回のタグリストや読んだ人リストのような、横並びにしたリストで、ときどき困ることがあります。

それは、謎のmargin。

今回まででできた画面と、モックのCodePenの画面、よ~く見ると、ちょっと違いませんか?

li要素同士の空き幅が、モックの方が広くなっています。

これ、実は意外な原因、「ソースコード上の改行」のせいで起こっているんです!

liを横並びにするとき、display:inline-block;の指定をすると、liがテキストの1文字のように扱われて横に並んでいきます。
改行は見た目にはわかりませんが、改行コードが文字(テキストノード)の1要素として扱われてしまい、liとliの間に挟まってしまうのです。

親要素の幅や、リストの幅をきっちり指定しているはずなのにどうしても右端の要素が入りきらずに折り返されてしまう、なんてことありませんか?
その場合、ほとんどはこれが原因だったりします。

これを知らないと、改行による隙間がある状態のままCSSを調整していて、ブラウザによって崩れたり崩れなかったりと差異が出てしまいさらに困ったことになる場合もあります。

つまり、モックのソースのように

liを閉じたあと改行していると、幅が生まれます。
本当は閉じタグと次の要素の開始タグの間は無視してほしいですが、テキストを直接流し込んだ場合にも仮想block要素として扱われるのと同じことだと思えば仕方ないことかも…

これを解消するためにletter-spacingを調整したりする手法もあるのですが、それはそれで不要な指定なので、もっと単純に

改行をなくす…とするのが良いでしょう…ファイルを開いたときに見た目が…とか、編集しづらい…とかありますが…

個人でちまちま静的ページを作ってるときならいいんですが、それなりのプロジェクトでテンプレートエンジンを使う場合は、エンジニアさんがこれを知らないとご丁寧に改行してしまって崩れちゃうなんてことが起こったりします。

smartyを使っていたプロジェクトのとき、問題が起こるたび、エンジニアさんひとりひとりに毎回毎回「{strip}を使ってくれ!」と説明していました。{strip}で挟むとホワイトスペースやキャリッジリターンを無視してくれるんですね。

そして、Angularを使ったプロジェクトになって、そのへんの事情を知っているエンジニアさんに「{strip}みたいなやつないの?」と聞いたら、「それが、調べてるんだけど見つからないんだよね~、もしかしたらそういう機能ないのかも?」と言われて絶句しました。

いや、そんなまさか…Angularに詳しい方なら方法を知っているかもしれません…しかしそのプロジェクトが始まったとき、ほとんど誰も経験がない状態でAngularが採用されてしまったために誰もわからず、とうとう私がプロジェクトを離れるまで解決しませんでした。
きっと今でもviewの中でベタ書きされた</li><li>が動いているのでしょう…
Angular識者の方、誰か教えてください…

そういったこともあって私のAngularアレルギーがひどくなったように思います。

長々と説明しましたが、とにかく、Reactでレンダリングした要素は何も対策しなくても隙間が空かないのが素晴らしいです!。゚(゚´Д`゚)゚。

これだけでもWebデザイナーはReact推しになるわ!!

JSONを外部ファイルにする

…ご、ごめんなさい…今回のJSXのソースが長くなってしまったのでこれは次回にまわします(;´Д`)

React使ってSPAを作るよ目次

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です