↓ これを自作できて、しかも解くことができるサービス作りました
画像生成だけじゃないです！
なんと解けます！！作れます！！
↑ 続々投稿されてます
この問題を解きたい方はこちら
サイトで遊ぶ前に記事を読んでください🥺
記事読むの忘れます🥺
せっかく書いたから読んでください🥺
トップページはこっち
機能ドンドン増やしてreCAPTCHA型SNSにしていこうかな（適当）
今回の開発で得た教訓
①何かを真似することから始めた方がいいと思った
真似するってのは「パクる」ではなく、0からアイデアを作るのはなかなか難しいから何かをベースにして作ろうってことでございまする。
正直このサイトをめちゃクソ意識しました。
モノ作りは何かを真似するとこから始めた方がいいって、最近思ってますなー。
パクリではない（念押し）
②マーケティングの勉強をすべし
また当たり前のこと言います👍
今回作ったアプリがいいものなのかはよく分かりませんが、個人的には今のところ納得いっている出来です。
ただ、どれだけ良いものができたとしても誰かに認知されないとまず広まらないです。
試しに「最近流行ってるな～」って思うものを調べてみてほしいです。
実は１年以上前に作られたものでした！ってことが結構あります。
発売当初から流行るモノ・お店とかって、ほんまスゴイ。
③（個人開発向き）設計しすぎも良くないと思った
これは①と一見矛盾するように見えますが、極端に設計にこだわるのも良くないということです。
個人開発なので設計は一旦ぐちゃぐちゃでも、後でリファクタすればＯＫぐらいの気概で書いた方がいいと思いました。
Reactの公式がこういうことを公式サイトに書いてます。
要は「考えすぎんなよ」ってことですな。
Google社の15分ルールも似たり寄ったりって感じなので、やっぱ考えすぎは良くないですねーっと思いました。
④コミットメッセージには接頭辞を付けよう
接頭辞があれば自分が何したか追いやすくなります。
個人開発ですら、自分が何やったかコミットメッセージ見てもピンとこないことあるので、チーム開発では尚更つけないといけないですね。
⑤設計したら誰かに見てもらうべし。何なら誰かと設計した方がいいかもしれぬ。
また当たり前なこと言ってますが、設計は誰かに見てもらいましょう。
今回の開発ではワタクシの友人が設計に指摘をしてくれたおかげで、無駄な通信を省けたり、設計のアイデア出してくれて実装が秒で終わったり、とにかく恩恵受けまくりでした。
設計やロジックをうまく書けるようになるのにいいヒントが得られるので、これは非常に重要だと思います。
⑥結局は設計→コーディングの流れが一番早い。
早く開発進めたいと思って、設計は適当でとりあえずコーディングをしてしまうと、結局途中でワケわからなくなります。
文章書く時も最初に構成考えるのと似た感じですな。
急がば回れとはこのことだ。
⑦マジックナンバーは必ず避ける
これは当たり前ですけど、CSSでついやってしもた記憶がございまして。
md:min-h-[calc(93vh_-_160px_-_48px)]
TailwindCSSを使ってたのですが、1週間ぐらい空いて久々にこのコードを見たら「この48pxって何や！？」ってなりました。
マークアップ言語のHTML、CSSではついマジックナンバーを書きがちなので、これは教訓になりましたと。おーん。
Reactの便利ライブラリ
react-rewards
簡単な紙吹雪のエフェクトが作れるライブラリ
すごく簡単に導入できた。
react-paginate
ページネーションを実装できるライブラリ
王道のやつ。
カスタマイズもしやすいし、ドキュメントのコードそのまま使えるからありがたい。
react-share
SNSシェアボタンをすぐ作れるライブラリ。
こんな感じです。
TwitterとLINEの共有ボタンを作ってみたけど一瞬でできました。
多くのSNSに対応しているので、使う価値アリ。
react-cropper
縮小拡大、トリミング、範囲指定など自由自在な画像切り抜きが実装できます
こんな感じ。デザインも変えられる。
ライブラリなしで画像切り抜きを実装しようとすると、基本的にはcanvasを使わねばならない。
canvasとか全然使わんから無理ぽ。。。そう思った矢先、一筋の光が。
react-cropperだ。
もう感謝しまくりのしまくり。便利でした。ありがとー。
まとめ
良い教訓でした。
また次の個人開発で👋