Reactで教習所Lifeをちょっと助けてくれるかもしれないアプリをつくってみた

この記事は、フラー株式会社 [Advent Calendar 2021](https://qiita.com/advent-calendar/2021/fuller-inc) の15日目の記事です。
14日目の記事は @SaturnR7 さんによる [TouchDesignerとpythonに触れる](https://qiita.com/SaturnR7/items/1b8dc55ff8e2d5839eb5) でした。

---

こんにちは。
フラーのフロントエンドエンジニアの曽我部です。

私事ですが、最近自動車免許を取るために教習所に通いはじめました。（まだほぼ行ってない）
教習所の予定表をみながら、見づらい！これは予定立てるのめっちゃめんどいやつ！と思い、ちょうどアドベントカレンダーもあったので、Reactでちょっとしたアプリを作ってみることにしました。

できたのはこちら！ででん
https://aikosogabe.github.io/driving-school-schedule/
![FireShot Capture 155 - 🚗 - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946029/ef34599e-f170-c78f-f31c-1f471a2d4cb9.png)

ではこちらの紹介をしていきます！

## つかったもの
- vite
- React
- TypeScript
- Radix

## 教習所の予定表のデータの取得
これはかなりアナログです😭
教習所のサイトからPDFでダウンロードしてきてそれをcsvファイルに変換したものを直接置いています。

そのままだと不要な情報（備考など）が入っていたり、変なスペースが入ったりしているのでいい感じに整形して使います。。

## 機能１ 選択済みの他の授業をdisableにする
`1-10` など授業名が入ったボタンを選択すると、他の`1-10`はdisableにします。
![スクリーンショット 2021-12-15 15.59.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946029/182c356e-674a-b408-4a86-3b40bda74f9b.png)

単純ですがこれが一番ほしかったやつ

## 機能２　除外条件を追加する
仕事をしながらだと平日日中は無理なので、それを表に反映させたい！と思って作った機能です。

表の上にある除外条件を追加のボタンをクリックすると、ダイアログが開きます
![スクリーンショット 2021-12-15 16.09.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946029/4f1a1b06-c2a3-f9c0-c06b-c62b3d5b059f.png)

このダイアログは[Radix](https://www.radix-ui.com/) というコンポーネントライブラリを使って実装してみました！
何を隠そう今回の裏テーマは Radixをつかってみた でもあるのです…！

公式のドキュメントの[ここ](https://www.radix-ui.com/docs/primitives/components/dialog#anatomy) にパーツが全部書いてあるのでそれを適宜カスタマイズしました。

ダイアログ部分はこんな感じ（一部省略）です。

```typescript
import { css } from "@emotion/react";
import * as Dialog from "@radix-ui/react-dialog";
import { Cross2Icon, ChevronDownIcon, PlusIcon } from "@radix-ui/react-icons";

const StyledOverlay = css`
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  inset: 0;
`;
...省略...

export const CustomDialog: React.FC = () => {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button className="text-button">除外条件を追加</button>
      </Dialog.Trigger>
      <Dialog.Overlay css={StyledOverlay} />
      <Dialog.Content css={StyledContent}>
        <Dialog.Close asChild>
          <button css={StyledCloseButton}>
            <Cross2Icon />
          </button>
        </Dialog.Close>
        <Dialog.Title css={StyledTitle}>除外条件を追加</Dialog.Title>
        ...省略...
      </Dialog.Content>
    </Dialog.Root>
  );
};
```
便利！！！！！！！！！！！！
RadixはCSSもあたっていなくてまっさらな状態なので自由にカスタマイズできます。

なにより最高なのはアクセシビリティが担保されていること…！
たとえばこのダイアログのコンポーネントだと、開くとダイアログの一番最初の要素にフォーカスが当たるようになっていて、かつ、フォーカスがダイアログの外に出ないようになっています。（tabキーで操作してみてください😌 ）
こういった実装は地味に大変なのですごく便利です。

---

機能の紹介に戻ります！

ダイアログでは条件名・対象・開始時間・終了時間を入力するようになっています。
フラーは10-15時がコアタイムなので、平日のこの時間は除外しましょう。

青い＋ボタンを押すと条件が追加されます。
追加した条件の右にある赤い−ボタンを押すと条件が削除できます。
![スクリーンショット 2021-12-15 17.31.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946029/19410359-27c0-8208-3c3b-9f777b6c475a.png)
じゃん！
このように、条件を追加すると対象の時間はグレーになり、ボタンも押せなくなります。
![スクリーンショット 2021-12-15 17.33.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946029/6afcaadc-24b9-238e-14c8-f6387ff5ceb9.png)
あと、休みの日はゆっくり寝たいので8-13時は…さよならします👋
こうみると自分が通える時間がわかりやすくなって選びやすくなりますね。
![スクリーンショット 2021-12-15 17.37.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946029/e99c93c8-4563-2e6e-5ce8-ba9886589fbd.png)

１日に複数の条件を適用することもできます。
![スクリーンショット 2021-12-15 17.40.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946029/4f15b023-9270-6606-356a-c12c44ec5a91.png)
![スクリーンショット 2021-12-15 17.40.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946029/be1590af-7760-40a2-b735-c6f08a16abc9.png)

条件を追加したところで授業を選んでいきます…
![スクリーンショット 2021-12-15 17.53.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946029/b60ab68d-be0e-16c1-e9d5-8d3ec12b78aa.png)
頑張れば年内７個くらい授業受けれそう！（受けるとは言っていない）

## 改善・これから実装したいこと
- 選択中（反転）と未選択だと未選択の方が目立つので改善したい
- 今は仮免前で一段回目なので2-Xのボタンは非表示にしたい（切り替えられるといいかも？）
- すでに受講済みの授業を登録できるようにしたい（これは完全に必要だった）

## おわり
役に立つかは置いておいて、試してみたいライブラリを試せたし、見た目もできるだけ可愛くしたり、、いろいろできたので良しとします！
自分があったらいいな、と思うものを作るのは楽しいですね。

教習所頑張って通うぞ…
ではみなさまよいお年を👋