import { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const incrementDouble = () => {
    increment();
    increment();
  };
  const decrement = () => setCount(count - 1);

  const increment2 = () => setCount((prevCount) => prevCount + 1);
  const increment2Double = () => {
    increment2();
    increment2();
  };
  const decrement2 = () => setCount((prevCount) => prevCount - 1);

  const reset = () => setCount(0);
  const double = () => setCount(count * 2);
  const divideThree = () =>
    setCount((prevCount) => (prevCount % 3 === 0 ? prevCount / 3 : prevCount));

  return (
    <>
      <div className='App'>count: {count}</div>
      <br />
      <div>
        <span>通常の関数型</span>
        <button onClick={increment}>+1</button>
        <button onClick={incrementDouble}>+2にしたい</button>
        <button onClick={decrement}>-1</button>
      </div>
      <br />
      <div>
        <span>引数として元の値を受け取る型</span>
        <button onClick={increment2}>+1</button>
        <button onClick={increment2Double}>+2</button>
        <button onClick={decrement2}>-1</button>
      </div>
      <br />
      <button onClick={reset}>Reset</button>
      <button onClick={double}>*2</button>
      <button onClick={divideThree}>3の倍数の時だけ3でわる</button>
    </>
  );
}

export default App;

埋め込まれたコードブロックがはみ出ていたので改善

原因

• 変換時に<pre>タグに変換されることが判明。スタイリングが当てられてない。

対策

• global.cssにpreタグにoverflow-autoを追加。ついでに背景を黒に。

シンタックスハイライト化

参考記事

https://qiita.com/cawauchi/items/ff6489b17800c5676908

ほぼコピー。
constとかが色つかないのはなぜ？

tsxに変更完了

• あまり使ってこなかったオブジェクト型が結構出てくる。
• 一か所だけanyを使ってしまった。client.getの部分の理解ができてない。

TailwindCSS

カラーを追加したいときは

const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        // // Build your palette here
        transparent: 'transparent',
        current: 'currentColor',
        teal: colors.teal,
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

このように記述することで用意されているカラーを追加できる。
もちろんオリジナルも追加可能。

tailwindでスタイリング

• 以前作成したものを流用。小改善

Layout改善

• componentsフォルダにLayoutコンポーネントを作成してスタイリングホーム画面の場合propsでhomeを渡して、レイアウトがちょっと変わる。公式でそう書いてた意味が自分で描いてみてしっかり理解できた！そういう書き方があるんだなぁ。
• microCMSで標準で搭載されている時間表示publishedAtの表示が日本時間ではなかったので、日本時間になるように修正。こちらmicroCMSの公式を参照。dayjsで変換するなど少し手間がかかる。

tsconfigのstrictをtrueへ

• 型チェックが厳しくなるが、そもそもそうしないと意味がない。
• unknown型はfalseでも弾かれるので良く分からなくなった。

index.jsをindex.tsxへ

• GetStaticProps型(Nextの標準)
• type PropsでHome画面に表示するためにわたってくるprops"blog"の型付け。今のところidとtitleがstringの配列型
• getStaticProps内でmicroCMSにアクセスして取得するデータにも型付けが必要。これがunknown型になっていたが、オブジェクト型にして上で定義したPropsで型付けした。これでいいのかな？