とにかくタイピングができるサイト

こんにちは。たいらといいます。

Webサービスを1週間で作るイベントが開催されていることは知っていました。しかし、ネタが思い浮かばないので参加予定ではありませんでした。

ところが、ふとタイピングという言葉が頭に浮かび、タイピングといえば「ホームポジション」、「ホーム」いけるやん！
ということで作ってみました。

作ったもの

https://home-typing.netlify.com/
PCのみです。

シンプルにタイピングができるだけのものです。
申し訳程度に、経過時間と正解打数、そこから計算できる平均打数をリアルタイムっぽく表示しています。
Firestoreに全ユーザでのハイスコアを記録しています。
すべて打ち終わったあとはスペースで、もう一度プレイできます。
Escを押すと、タイトルに戻ります。
すべてキーボードで操作できるはずです。

使った技術とか

使った技術要素はReactとFirestoreです。
Reduxは使っておらず、Context APIも利用していません。
Hooksとかちゃんと使ったことがなかったので、今回の制作で少し使い方を理解しました。

文章は https://baconipsum.com/ こちらのAPIを呼び出しています。

感想とか

普段は業務系のWebアプリを作ることのが多いので、OGPとかSNS連携とかが全然理解できていないことが改めて認識できました。
また、デザインは苦手なので、今回も見た目の調整にかなりの時間がかかりました。（そしてこのダサさ。絶望的です。）
他にも、文章を取得するためにAPIを叩いたらCORS周りのエラーが出たりと、きちんと理解できていないことがたくさん出てきました。

このようなアウトプットによって、まだまだ勉強不足だなと感じはしましたが、
それを糧にもっと学んでいきたいと改めて決意しました。