そうだ！英語を覚えるためにアプリを作ろう
はじめに
みなさん、日々、英語の文書読んでますか？
筆者はdaily.devでおもしろそうな記事だったり、使ってるライブラリやフレームワークのドキュメントだったり、GitHubのissueだったり、読みたいものが(読む必要が)あるので読んでます
大学生の時に研究室の教授に英語の論文をたくさん読まされた読ませていただいたおかげ[1]で、今も上記のような英語の文章をなんとなく読めています[2]
まぁただ、なんとなく読めるだけであって、わかんない単語や熟語、接続詞なんかは当然出てくるのでその都度、翻訳アプリやweblioなどの辞書でググったりするんですが、毎回ググってるとやっぱ日本語の記事を読むときに比べて読むのに時間がかかっちゃうんですよね
高校や大学の時に学んだものだけで、英語の記事を読み続けても読むスピードがあがんないなぁと思ったので、技術記事を読んだときにわからなかったや単語や熟語を覚えることにしました
さて、ここから本題なんですが、どうやって英語を覚えるのがいいかなと考えた結果、そうだ！アプリを作ろうと思い至り、実際に作ったので、その紹介をさせてください
作ったもの
ソースコードはこちら
構成とか使ってるライブラリとか
- Next.js
- TypeScript
- Vercel
- TailwindCSS
- Gist
使い方
-
タンゴ一覧で出てくる単語や熟語とその答えを覚える -
回答するで回答開始 - 中央のinputに回答を入力して
回答するボタンを押す- わからない場合は
わかりませんボタンを押す
- わからない場合は
- 10問回答すると結果が表示される
- 結果画面の
もう一度で同じ問題の回答ができる
実装について
コンポーネント
以前にこの記事を読んでhookにロジックを集約する構成おもしろそうだなーと思って、この記事で紹介されてる構成でコンポーネントを実装しました。きれいにhookで分離してるので時間があればhookのテストを書きたい
Lint
Lintのルールはこの記事のルールを試してみたかったので、この記事のルールを使わせていただきました。import/orderとunused-imports/no-unused-imports-tsがめちゃめちゃ開発体験よくなって泣いた
Gist
単語とその意味をとってこれればよかったのでDBとか用意するのめんどくさーと思ってたら、この記事でGistにデータを保存してるって記載があって、Gistあんま使ったことなかったんですが調べてみたら、publicなGistのjsonファイルとかapiで取得できるので、とりあえず採用
単語と意味を増やしたかったらGistを直接編集する運用にしました
octokit経由でGistのapi叩いているんですが、想定する対象のユーザーが筆者なのでapiのレート制限とかひっかからないだろうぐらいの軽いお気持ちで使っています
デザイン
筆者はダークモードが大好物なので、カラーテーマはダークモードの配色にしました
(なお、通常モードなんてものはありません)
また、このタンゴは気軽に習慣になるように使いたかったので、スマホで使うことしか想定していません。なんで、レスポンシブなんてものは知りませんし、PCでみたらワーオーな感じになります
答えがあっているかどうかの判別
入力した回答があっているかどうかの判断はincludes()でしています
なので(何を言いたいのか感のいい人はわかるかと思いますが)、登録されている答えから一文字でも異なるものを入力してしまうとタンゴでは不正解と判定されます
スペースが入ってたらtrimするとか部分一致したらとかそんなものはありません
でもいいんです
使う想定は筆者なので
最後に
作っていく中で、回答開始とかタンゴ一覧のレスポンスまでに時間がかかるからローディング入れたいなとか、〇〇の機能もあったら便利だよなとか、OGP作りたいなとか色々欲が出てくるんですが、まず筆者が欲しかったのは習慣的に英語を覚えるアプリだったので、多少おかしくても自分が使えたらええんや！ぐらいの気持ちで一気に作りました
この記事を読んでタンゴが気になって触ってくださった方で、バグとか気になるとことかありましたら、Issueやコメントで教えていただけるととても喜びます
Discussion