あしたのベストとは
- 服のルーレットをグルグル回して、止めたところを僕に送りつけると翌日などに僕がその服を着てくる、というアプリケーション
- 全てはここから始まった
動機
DOM操作の苦労を知りたかった
- 2ヶ月ぐらい前にReactの勉強を始めた
- それまではなんでもBootstrapとコピペしたjQueryで作ってた
- イケてる流行りの技術を使えるとかっこよさそう
- React Hooksを学べるありがたい教材
- これのReduxの章で詰まって、落ち着きフェーズに
- そもそもなぜReactで作るのだろう
- そもそもなぜReactという技術が生まれたんだろう
- 仮想DOMというもの
- なんか魂が震えるらしい
- アバウトだけど経緯が把握できた
- もう誰もDOM操作で苦労したくなかった
- でもそもそもDOM操作の苦労を自分は知らない
- 知らないから仮想DOMのありがたみが分からない
- 苦労を知るためにvanillaなJavaScriptでアプリケーションを作ってみよう
やったこと
- まず画像を用意しないことには始まらない
- 写真を撮る
- 撮った写真を「頭 胴 脚」に3分割する
- 「頭 胴 脚」のどのパーツの組み合わせでも噛み合うようにトリミングする
- 地味でたいへん。ここまでコード全く書いていない
- 素材が用意できた
- はじめにメインであるルーレットを作る
- シュッと作れた
- herokuにデプロイして動くか確認
- サイトの見た目、骨組みを作る
- ルーレットで決めた服装をツイートでkazuhi_raに送れるようにしたい
- Twitterカードの画像部分で伝えられると良さそう↓
- 「頭 胴 脚」で3分割されてる素材しかないというのが悩みポイント
- JavaScriptのCanvasで3つの画像を合体させて......というのを企んで実装までできた
- でもそれをTwitterカードの画像部分に設定するのは無理だったので無駄足だった
- 作戦2「合体させた画像を手で作る」
- エンジニアっぽくない解決方法だったけど他にいい案が思い浮かばなかった
- 成功
- DOM
- ボタンを押す系には全てついてる
- はじめはクラスを作ったりして上手く設計しようとしていた
- 動くものを作っていると、どんどんアイデアが降ってくる
- 思いつきの実装が増えだし、取り返しのつかない崩壊が始まる
- こういう処理はこの辺に書く、などの勘が全くなく、たいへん自由なコードに
- DOMの苦労を知る前に、自身のJavaScriptをオブジェクト指向的に書く能力の低さを思い知る
- おもてなしを考えるフェーズ
感想
- 賞味期限の短さを感じる
- あしたのベスト、明日以降使ってくれる人いないと思う
- それは作りながら気づいていたので、あきらめて1回目使うときの面白さに注力した
- 結果そういうのが作れたと思う
- ルーレット回したけどツイートはしなかったという人がかなりいて、意外な感じだった
- 作っている間追い詰められていて生活に余裕がなかった
- 作ったものに人から反応があるとめちゃくちゃ嬉しい
