薬物の呼称でWORDLE作った (薬物WORDLE) 【Next.js】

はじめに

どうもyoshiiです。
今回は新しく作ったアプリの紹介です。
あんま技術的な話とかはないです。

薬物WORDLE

薬物の呼称でWORLDEができます。
ぜひ遊んでみてね。

薬物WORDLE作りました
俺が薬物の呼称に詳しくないので90個しか単語なくてめちゃくちゃ難しいです
この後0時から毎日解答が更新されます
ぜひ遊んでみてねhttps://t.co/2lrJxIuZaU#薬物WORDLE pic.twitter.com/6VaNTYLXL9

— yoshii🍻 (@ganja_tuber) February 22, 2022

制作期間

3日

使った技術

Python: 薬物の呼称を収集
Next.js(TypeScript): フロントエンドとAPIルートでバックエンドもちょっと
Firestore: その日の解答情報を保存

実装方法を簡単に説明

単語の収集方法

薬物をまとめているサイトから、pythonでhtml解析して収集しました。
TypeScriptでもurllibとbeautifulsoupみたいなのほしいなあ…

単語の入力方法

ボタンではなく、キーボードで入力できるようにしています。
これはPOKÉDLEさんを参考にしました。

実装方法は、divを6個(今回は6文字なので)flex-boxで並べて、そこにinputを透過して重ねています。

詳しく説明するのはかなり面倒なので、気になったらTwitterとかで聞いてください。

モーダルビュー

モーダルビューはreact-modalっていうクソ便利なライブラリがあったのでお借りしました。

作ってみて

最近Next.jsのドキュメントを1から全部読んで、なんか作りたいな〜と思ったのがきっかけでした。
APIルートを使えば、サーバー側との簡単なやりとりくらいはNext.jsだけで完結できて便利でした。

Next.jsは個人開発で真価を発揮すると思いました。自分ルールでガンガン書いてもそれなりに綺麗な感じになって、後から修正するのも簡単そうです。

逆に言えば、チーム開発でも、事前にしっかりルールをチーム内で決めておけば、いい速度で開発が進みそうだなと思いました。

最後に

普段からなんのありがたみもないアプリを作ったり、飲酒ツイートしかしてないですが、友達になってくれると嬉しいです。