📖

そうだ!英語を覚えるためにアプリを作ろう

2021/10/06に公開約2,700字

はじめに

みなさん、日々、英語の文書読んでますか?
筆者はdaily.devでおもしろそうな記事だったり、使ってるライブラリやフレームワークのドキュメントだったり、GitHubのissueだったり、読みたいものが(読む必要が)あるので読んでます

大学生の時に研究室の教授に英語の論文をたくさん読まされた読ませていただいたおかげ[1]で、今も上記のような英語の文章をなんとなく読めています[2]

まぁただ、なんとなく読めるだけであって、わかんない単語や熟語、接続詞なんかは当然出てくるのでその都度、翻訳アプリやweblioなどの辞書でググったりするんですが、毎回ググってるとやっぱ日本語の記事を読むときに比べて読むのに時間がかかっちゃうんですよね
高校や大学の時に学んだものだけで、英語の記事を読み続けても読むスピードがあがんないなぁと思ったので、技術記事を読んだときにわからなかったや単語や熟語を覚えることにしました

さて、ここから本題なんですが、どうやって英語を覚えるのがいいかなと考えた結果、そうだ!アプリを作ろうと思い至り、実際に作ったので、その紹介をさせてください

作ったもの

https://word-quiz-nus3.vercel.app/

ソースコードはこちら

https://github.com/nus3/word-quiz

構成とか使ってるライブラリとか

  • Next.js
  • TypeScript
  • Vercel
  • TailwindCSS
  • Gist

使い方

  1. タンゴ一覧で出てくる単語や熟語とその答えを覚える
  2. 回答するで回答開始
  3. 中央のinputに回答を入力して回答するボタンを押す
    • わからない場合はわかりませんボタンを押す
  4. 10問回答すると結果が表示される
  5. 結果画面のもう一度で同じ問題の回答ができる

実装について

コンポーネント

https://zenn.dev/yuki0410/articles/2ad97915768826

以前にこの記事を読んでhookにロジックを集約する構成おもしろそうだなーと思って、この記事で紹介されてる構成でコンポーネントを実装しました。きれいにhookで分離してるので時間があればhookのテストを書きたい

Lint

https://zenn.dev/yoshiko/articles/0994f518015c04
Lintのルールはこの記事のルールを試してみたかったので、この記事のルールを使わせていただきました。import/orderunused-imports/no-unused-imports-tsがめちゃめちゃ開発体験よくなって泣いた

今回のリポジトリに適用したルール

Gist

https://blog.h13i32maru.jp/entry/2021/09/13/092340

単語とその意味をとってこれればよかったのでDBとか用意するのめんどくさーと思ってたら、この記事でGistにデータを保存してるって記載があって、Gistあんま使ったことなかったんですが調べてみたら、publicなGistのjsonファイルとかapiで取得できるので、とりあえず採用
単語と意味を増やしたかったらGistを直接編集する運用にしました

octokit経由でGistのapi叩いているんですが、想定する対象のユーザーが筆者なのでapiのレート制限とかひっかからないだろうぐらいの軽いお気持ちで使っています

デザイン

筆者はダークモードが大好物なので、カラーテーマはダークモードの配色にしました
(なお、通常モードなんてものはありません)

また、このタンゴは気軽に習慣になるように使いたかったので、スマホで使うことしか想定していません。なんで、レスポンシブなんてものは知りませんし、PCでみたらワーオーな感じになります

答えがあっているかどうかの判別

https://github.com/nus3/word-quiz/blob/312f77dd7171a03f3c3ef28a07a635f386694649/src/pages/quiz.tsx#L39

入力した回答があっているかどうかの判断はincludes()でしています
なので(何を言いたいのか感のいい人はわかるかと思いますが)、登録されている答えから一文字でも異なるものを入力してしまうとタンゴでは不正解と判定されます
スペースが入ってたらtrimするとか部分一致したらとかそんなものはありません
でもいいんです
使う想定は筆者なので

最後に

作っていく中で、回答開始とかタンゴ一覧のレスポンスまでに時間がかかるからローディング入れたいなとか、〇〇の機能もあったら便利だよなとか、OGP作りたいなとか色々欲が出てくるんですが、まず筆者が欲しかったのは習慣的に英語を覚えるアプリだったので、多少おかしくても自分が使えたらええんや!ぐらいの気持ちで一気に作りました

この記事を読んでタンゴが気になって触ってくださった方で、バグとか気になるとことかありましたら、Issueやコメントで教えていただけるととても喜びます

脚注
  1. 情報系の論文じゃないです。主にキノコの生態系についての論文です。おかげさまで今でもfungi、fungusって単語がスッと出てくる ↩︎

  2. 英語の論文読むのだるぅとか言ってた当時の自分を撲殺したいです。あの時、論文をいっぱい読んだおかげで、今のお仕事でめちゃめちゃ役立ってます ↩︎

GitHubで編集を提案

Discussion

ログインするとコメントできます