クソアプリ Advent Calendar 2024 14日目の記事です。
初アドカレです
ごきげんよう！株式会社スーパーハムスターでエンジニア見習いをしているちなっちゃんです。授業レベルのC言語以外ほぼ何もわからないレベルの完全未経験からスタートして、React/Typescriptを触り始めて9ヶ月くらいが経ちました。普段はフロントエンドに参画してます。
今回はアドカレに登録して、自分でcreate next appから業務外で作ろう！という環境をつくることで、趣味開発デビューしました✨
▼リポジトリはこちら（publicリポジトリ作るのはじめて）▼
想定外にも前日夜しか時間が取れず、高倉町珈琲で修論がやばい友達と一緒に限界作業祭でなんとか完成👏 所要時間４時間くらいです
できあがったもの
ハム語でおしゃべりしてくれるwebアプリをつくりました🐹
▼ここから遊べます（アプリ名は初期のまま変えてないクソ仕様）▼
https://hamu-language.vercel.app/
会社がハムちゃんなので、ハムネタにしたいなと思いハムベースで考えてました。そういえば私ハム語マスターだな！と思いハムちゃんとおしゃべりできるもの作りたいな〜というのがきっかけです。
みため
斜めストライプです🩵🤍🩵🤍
作りながら見た目を考えたので、CSSで指定している数値は目分量です。
最初はレスポンシブ非対応で作ってましたが、スマホの方が使うかなと思ってスマホでも見た目が（あんまり）崩れないように記事投稿前にちょっと修正しました。
パソ（MacBookAir13inch）
スマホ（iPhone13mini）
（クソみたいな）仕様
任天堂のハムご！（https://www.nintendo.co.jp/n02/dmg/b86j/hamugo01/index.html ）に掲載されているハム語を完全ランダムで返してくれます。
ハム語はワードリストとしてデータを持っているので、その中から適当にハムちゃんがお返事してくれるという感じです
const hamWords: string[] = [
"アウチッチ",
"うちゃー",
"あかいトーン",
"うにに～",
"あたっちゅ",
.....以下略
];
const randomWord: string = hamWords[Math.floor(Math.random() * hamWords.length)];
ランダムなのにたまにぴったりなお返事が来ることがあって、ちょっと嬉しい🐹✨
ユーザーからメッセージが送られたら、1秒後にハムちゃんがお返事をくれます。この部分はちょっと工夫しました。
try {
const res = await fetch("/api/randomWord");
if (!res.ok) {
throw new Error("Failed to fetch random word");
}
const data: { word: string } = await res.json();
// ユーザーのメッセージを会話履歴に追加
setConversation((prevConversation) => [
...prevConversation,
{ ham: '' , user: message}, // ハム語はまだ空で追加
]);
setMessage(''); // メッセージを送信後、入力欄を空にする
// 1秒後にハム語の返答を会話履歴に追加
setTimeout(() => {
setConversation((prevConversation) => {
const updatedConversation = [...prevConversation];
updatedConversation[updatedConversation.length - 1].ham = data.word;
return updatedConversation;
});
}, 1000); // 1秒後にハム語を更新
} catch (error) {
console.error("Error fetching word:", error);
}
つくるプロセス
大体何するか考える→適当に作り始める→困ったらGPTに聞く→…を繰り返したらできました。
特に、ランダムに単語を返すAPIの部分は全然わからなかったのでGPTに頑張ってもらいました〜時代だ〜！
ちょっとしたこだわりポイント
- ハム語の返答が表示されるのを「1秒後」にしました。考えてる感を演出したく…🧐
- チャットみたいな見た目にしました！喋ってる感出るかなと思って
- メッセージ送信ボタンを「送信」じゃなくて「📤」にしました、スマホで見るとちょうど良くなります
さいごに
create next appから作るの難しいと思ってたけど、適当で良ければ思ったより簡単に触れるということがわかってよかったです！！次はちゃんとした何か作りたい〜！！
来年もクソアプリアドカレ参加したいです！！最後までご覧くださりありがとうございました！！