CSSについてtailwindとともに整理する～コンテンツの中央揃え～

はじめに

• だいぶ昔に学習したCSSですが、仕事上の役割とともにだいぶ忘れているなぁと思いますので、再度知識を整理したいと思います。
• 今回は、コンテンツ領域を中央に揃えるやつです。
  • 昔に比べて横幅が1920を超えるPCは当たり前になってきまいたが、コンテンツ領域が画面いっぱいにあると見にくいです。
  • なので、一般的にはコンテンツは、中央に配置する感じが普通かなと思います。

注意点

• メインはCSSの整理ですが、プログラムはReactで書きます。
• また、CSSライブラリのtailwindの書き味も確認します。

やってみた

• サンプル

import { FC, PropsWithChildren } from 'react';

type Props = PropsWithChildren;

const Container: FC<Props> = ({ children }) => {
  return (
    <>
      <div className="containerCSS">{children}</div>

      <div className="max-w-5xl mx-[10px] my-3 bg-gray-500 lg:mx-auto ">
        {children}
      </div>

      <div className="container bg-gray-700 mx-auto">fugafuga</div>
    </>
  );
};

export default Container;

@tailwind base;
@tailwind components;
@tailwind utilities;


.containerCSS {
  margin: 12px 10px;
  background-color: gray;
}

@media (min-width: 1024px) {
  .containerCSS {
    max-width: 1024px;
    margin: 12px auto;
    background-color: gray;
  }
}

• 表示イメージ

CSS解説

• 注目すべきは、 margin: 12px auto; ここです。
  • margin: 〇 ×と書くことで、〇は上下のマージン領域の指定、×は左右のマージン領域の指定となります。
  • margin: 〇 △ □ × と書くことで、〇は上、△は右、□は下、×は左のマージン領域の指定をすることになります。
  • marginにautoをつけることで、親要素の幅 - 当該要素の幅を計算して、自動的にマージン領域を設定してくれます。
    • これによりautoを左右のマージンに設定することで、コンテンツ領域を中央に寄せることができます。

tailwind解説

• 注目すべきは、lg:mx-autoです。
  • lgをつけることで、@media (min-width: 1024px)におけるクラス指定の意味になります。
    • つまり、画面幅が、1024pxを超えた場合は、mx-autoを使いますよ♪という意味です。
    • mx-autoは、X軸方向のマージンの意味で、設定する値がautoになります。
• 他に注目すべきは、mx-[10px]です。
  • tailwindはある程度の幅に応じたマージンをmx-4、mx-6といった形で用意していますが、細かい値を指定したい場合は[]に単位付きで設定することができます。
• なお、tailwindでは、様々な画面幅に応じたcontainerというクラスが用意されていました。

マージンのたたき込み

• 一つ目のdivの領域（上下のマージンは、12とっている）

• 二つ目のdivの領域（上下のマージンは、12とっている）

• 一つ目の下マージンは12pxで、二つ目の上マージンは12pxだから、間は24pxマージンされるはずじゃ？？？

解説

• これは、マージンのたたき込みといわれるCSSの仕様です。
• マージンのたたき込みとは、ふたつの要素に設定した上下マージンが隣接するとき、どちらか大きい方のマージンが採用されるというルールです。
• なお、たたき込みが行われるのは、上下マージンだけで、左右のマージンの場合は発生しません。
• 今回の例は、兄弟要素におけるマージンのたたき込みです。
  • 他に親要素と子要素のマージンのたたき込みも発生します。
    • 親要素の上マージンと最初の子要素の上マージン、親要素の下マージンと最後の子要素の下マージンが叩き込まれます。
    • この場合、親要素の外側にマージンが作られます。
    • 親要素のマージンが0の場合でもたたみ込みが行われ、この場合は子要素のマージンが親要素の外側にできます。

所感…

徐々に投稿していきますね。。

Reactについて学ぶ～まとめ～

はじめに　

Reactについて学んでいっていますが、記事がたまってきたので、まとめておきます。

Reactについて学ぶ記事たち

コンポーネントにstateを持たせる編

what-is-a-correct-answer.hatenablog.com

コンポーネントの副作用について考える(useEffect)編

what-is-a-correct-answer.hatenablog.com

なお、参考サイトとしては、↓が大変役に立ちます！

【React】誤解される useMemo と 誤用される useState ―― 「A の変更に反応して B の値が変わる」と考えるべきでない #初心者 - Qiita

フォームをバインドする編

what-is-a-correct-answer.hatenablog.com

再計算を防ぐuseMemo編

what-is-a-correct-answer.hatenablog.com

Reactについて学ぶ～再計算を防ぐuseMemo編～

はじめに

今回は、ReactのuseMemoについて、学びます。

useMemoの使いどころですか、以下の通りとなります。

• コンポーネント内における任意の関数を呼び出した結果を後で再利用するために保持しておき、その関数が呼び出されるたびに再計算されることを防ぐ
• 結果が同じなのにそれが毎回のレンダリングで関数が実行されるのを防ぐ

なお、useMemo と useCallback は、不要な再レンダリングを防ぐために提供されている模様

では、早速見ていきましょう

useMemoの使わない場合

• サンプルコード

import { FC, useMemo, useState } from 'react';

const AboutUseMemo: FC = () => {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(999);

  const countUpA = () => {
    console.log('count-up-a');
    setCountA((a) => a + 1);
  };
  const countUpB = () => {
    console.log('count-up-b');
    setCountB((b) => b + 1);
  };

  const heavyFunction = (value: number) => {
    let sum = 0;
    for (let i = 1; i <= 10000000; i++) {
      sum += i;
    }
    console.log(sum);
    return value + 1;
  };

  const hoge = heavyFunction(countA);

  return (
    <div>
      <div>
        <p>{countA}</p>
        <button onClick={countUpA}>Aをカウントアップ</button>
      </div>
      <div>
        <p>{countB}</p>
        <button onClick={countUpB}>Bをカウントアップ</button>
      </div>
      <div>{hoge}</div>
    </div>
  );
};

export default AboutUseMemo;

解説

• 「Aをカウントアップ」ボタンを押下すると、countAに＋１します。
• 「Bをカウントアップ」ボタンを押下すると、countBに＋１します。
• 画面上の{hoge}の値は、countAに＋１した値が表示されます。
  • 計算のため、重い関数が実行されます。(便宜上、重い感じの処理にしていますが、本来なら不要な処理ですね♪)
• ボタンを押下したときの挙動は…？
  • 「Aをカウントアップ」ボタンを押下すると、heavyFunctionが実行されます。
    • ここはcountAに依存する処理なので、動いても問題ないです。
  • 「Bをカウントアップ」ボタンを押下すると、それでもheavyFunctionが実行されます。
    • 本来ここは動かなくてよいです。なぜなら、この計算結果は変わらないためです。
    • ここで、計算結果をメモしておく仕組み必要になり、登場するのが useMemoとなります。

useMemoの使ってみる

• サンプルコード

import { FC, useMemo, useState } from 'react';

const AboutUseMemo: FC = () => {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(999);

  const countUpA = () => {
    console.log('count-up-a');
    setCountA((a) => a + 1);
  };
  const countUpB = () => {
    console.log('count-up-b');
    setCountB((b) => b + 1);
  };

  const heavyFunction = (value: number) => {
    let sum = 0;
    for (let i = 1; i <= 10000000; i++) {
      sum += i;
    }
    console.log(sum);
    return value + 1;
  };

  // 変更したよ🎵
  const hoge = useMemo(() => heavyFunction(countA), [countA]);

  return (
    <div>
      <div>
        <p>{countA}</p>
        <button onClick={countUpA}>Aをカウントアップ</button>
      </div>
      <div>
        <p>{countB}</p>
        <button onClick={countUpB}>Bをカウントアップ</button>
      </div>
      <div>{hoge}</div>
    </div>
  );
};

export default AboutUseMemo;

解説

• hogeを計算している関数呼び出しを、useMemoを使うように変更しました。
  • 第一引数は、関数呼び出しを行う
  • 第二引数は、依存配列を指定する。
    • 今回の場合は、countAのみ
• ボタンを押下したときの挙動は…？
  • 「Aをカウントアップ」ボタンを押下すると、heavyFunctionが実行されます。
    • ここは問題なし。
  • 「Bをカウントアップ」ボタンを押下すると、heavyFunctionが実行されていません。
    • ボタンを押下したときにcountAについては、何も変化しないので、メモを変更する必要がないためです。

所感･･･

• useMemoはこんな感じですかね…。
• 次はuseCallbackを学ぼうかと思いますが、ざっと読んだ感じだとうまく使いこなせるか難しそうな予感です。

Reactの旅は続く！