🐓

Reactのチュートリアルその2

na8esin

2024/05/28に公開

はじめに

この前、reactのチュートリアルをやってみました。その続きになります。

GitHub Pagesに表示させる

その前に、GitHub Pagesで表示されるようにしてみました。

昔は、ビルドしたファイルをpushして表示してたと思いますが、今は、GitHub Actionsを使うと表示されるようになるそうです。
なので、色々なサイトの見様見真似で下記を書いてみました。

一見成功しているように見えるんですが、jsとかcssとかのパスが間違ってます。

昔、create-react-appでプロジェクト作ったとき(vite使ってないとき)はpackage.jsonのhomepageで調整した記憶があるので、一応入れてみたんですが、違うようでした。

なので、下記を参考に、

こんな感じで修正。

動作している様子
https://youtu.be/u724k22Oeig

手順を昇順または降順でソートできるトグルボタンを追加する

GitHub Pagesに表示できたところで、チュートリアルの続きを行います。

トグルボタンのデザインはこちらを参考にさせていただきました。

それで、cssのクラス名を他のコンポーネントと衝突させたくなかったので、CSS Modulesを使います。

ファイル名にmoduleをつけて、クラス名をキャメルケースにすればいいようです。
あとちょっと、サイズが大きかったので、全体的に半分の大きさにしてます。

toggle.module.css

.toggleButton {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 25px;
  border-radius: 50px;
  background-color: #dddddd;
  cursor: pointer;
  transition: background-color .4s;
}

.toggleButton:has(:checked) {
  background-color: #4bd865;
}

.toggleButton::after { /* 押せるところの丸の部分 */
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  background-color: #fff;
  content: '';
  transition: left .4s;
}

.toggleButton:has(:checked)::after {
    left: 25px;
}

.toggleButton input {
    display: none;
}

Toggle.tsx

import styles from './toggle.module.css';

export default function Toggle() {
  return (
    <label className={styles.toggleButton}>
      <input type="checkbox"/>
    </label>
  )
}

App.tsx

export default function Game() {
// ...

  return (
    <div className="game">
      <div className="game-board">
      <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <div style={{ paddingInlineStart: '40px' }}>
          <Toggle />
        </div>
        <ol>
          {moves}
        </ol>
      </div>
    </div>
  );
}

それとcssのクラス名が他で使えないことはこんな感じで試してます。

あと↑のpaddingInlineStartの部分ですが、一文字でも違うとエラーが出ます。

ちゃんと定義されてます↓。

世の中すごい人たちがいるもんです。

肝心の昇順または降順する処理はこんな感じで切り出してます。

これって、パフォーマンス的に悪かったりするのでしょうか。flutterのhelper method問題みたいな感じ？
ちょっと調べた感じだと特にそんな感じのドキュメントは見当たらなかったです。

ただ、ここを見た感じだと、JSX.Element[]を返すような場合もコンポーネントにしてるので、それに従った方が良さそうです。

ということで、直してみました。

ここで、動作確認してる時に、olの数字も一緒に逆順になるとわかりやすいんじゃないかと思いました。
ということで、reversed={!onOff}の部分だけ追加してます。

<ol reversed={!onOff}>
  <Moves history={history} currentMove={currentMove} jumpTo={jumpTo} onOff={onOff} />
</ol>

そして、こんな感じになりました。
https://youtu.be/euJcirxOnAI
以上です。

しくみのテックブログPublication

しくみ製作所の有志によるテックブログです。

はじめに

GitHub Pagesに表示させる

手順を昇順または降順でソートできるトグルボタンを追加する

Discussion