鍋をやりたくてサイトを立ち上げた話

## これはなに
- 鍋をやるために[鍋.net](https://鍋.net)というサイトを立ち上げた
- クソサイトでもいいじゃない。やっていく気持ちが大切。

## なぜ
- 鍋をやりまくるぞという強い気持ち
- jQueryもサーバサイドも見たくないよ
- React[完全に理解した](https://zenn.dev/e99h2121/articles/c11daf42169beb)

## どうやって
鍋をやる際の３大要素を成立させるためのサイトを作った。
![名称未設定-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003972/8ddb8900-d873-1443-d596-a973d8fd41da.png)

### 1. Google スプレッドシートにレコード追加するだけのサイトを作った
HTMLでフォームを作り、[IFTTT](https://ifttt.com/explore)経由で[Google スプレッドシート](https://docs.google.com/spreadsheets/)にレコード追加するだけのサイトを作りました。IFTTTのWebhook便利。
これで３大要素は抑えることができたな。
![スクリーンショット 2022-12-04 12.44.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003972/57cef382-390e-b113-d78c-59d4bfb5a7f6.png)

### 2. 調整・アーカイブができるように掲示板を作った
DBよくわからんし、[レンサバ](https://lolipop.jp/)でできる範囲で解決したい。
ということでPHPで作ることにして、下記のサイトを参考にしてみた。
[phpの簡易掲示板の作り方 - Qiita](https://qiita.com/S-Kta/items/2f06a3bc6ea1b3e0ca6d)
[PHP:特定dirからファイル名のみ取り出すやり方色々 - Qiita](https://qiita.com/ksyunnnn/items/1f1411f7647399751ac1)
[PHPでファイルのアップロード、ダウンロード - Qiita](https://qiita.com/panax/items/7fca8f1207afb5c2de51)

#### 画像をアップロードして表示するだけの掲示板のソース
ページネーションも画像圧縮もしてないからどんどん重くなる。
``` php:photo.php
<h1>画像アップロード</h1>
<?php
$dir = "images/";
$filelist = glob($dir . '*');
foreach ($filelist as $file) {
	if (is_file($file)) {
echo <<< eof
  <li><img src="{$file}" width="300" height="300"></li>
eof;
	}
}
?>

<!--送信ボタンが押された場合-->
<?php if (isset($_POST['upload'])): ?>
    <p><?php echo $message; ?></p>
<?php else: ?>
    <form method="post" enctype="multipart/form-data">
        <p>アップロード画像</p>
        <input type="file" name="image">
        <button><input type="submit" name="upload" value="送信"></button>
    </form>
<?php endif;?>
```

### 3. スケジュールをなんか簡単に表示したい
日程のボタン押したらモーダルが開く挙動ををなんか遠回りに実装した。
- 絶対にjQuery使いたくない
- Markdownでサクッと日程ごとの記事作りたい

日程のボタンを押すと・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003972/15a4451a-d07b-66e8-a270-7d8b48ef4af3.png)

モーダルが開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003972/8db1ee7c-940f-908b-03b5-9350b3be76e7.png)

### jQuery使いたくないからReact使った
1. npm使いたくないからまずはyarnを入れた
    ```
    $ npm install --global yarn
    ```
2. 楽したいのでgeneratorを使ってアプリの雛形を作った
    ```
    $ yarn create react-app nabe_net
    ```
3. モーダルをサクッと実装するために`Modal`モジュールを使った
    ``` react:Schedule.js
    import { useState } from "react";
    import Modal from "react-modal";
    import Date221216 from "./schedules/Date221216";
    
    function Schedule() {
        const [date221216ModalIsOpen, set221216ModalIsOpen] = useState(false);
    
    
        return (
            <div className="Schedule">
                <div>
                    <h2>開催予定</h2>
                    <div className="date221216 scheduled_date"
                        variant="contained"
                        color="primary"
                        onClick={() => {
                            set221216ModalIsOpen(true);
                        }}>
                        12月16日(金)
                    </div>
                </div>
    
                <Modal isOpen={date221216ModalIsOpen}>
                    <div>
                        <Date221216 />
                    </div>
                    <div className="close" onClick={() => set221216ModalIsOpen(false)}>
                        閉じる
                    </div>
                </Modal>
            </div>
        );
    
    }
    
    export default Schedule;
    ```
4. モーダルで表示する内容をMarkdownで書くために`react-markdown`モジュールを使った
    ``` react:Date221216.js
    import ReactMarkdown from "react-markdown";
    
    const markdownText = `
    ## 2022年12月16日(金)の予定
    - 場所: [最寄りの駅](https://goo.gl/maps/)
    - 日時: 19:00~
    - 費用: 酒や食べ物
    - 連絡先: 000-1234-5678
    - 備考：-
    `
    
    function Date221216() {
        return <ReactMarkdown>{markdownText}</ReactMarkdown>;
    
    }
    
    export default Date221216;
    ```
5. ビルドしてサイトにデータをアップする
    ```
    $ yarn build
    ```

なんか楽になった気がしない・・・

## まとめ
目的と手段が混沌としてきました。
この内容だったらWordpressやGatsby使えば早かったような気もしますが、これはこれで良かったんだ（きっと）
今後は通知機能や予定の投稿機能を実装するぞ！