読者です 読者をやめる 読者になる 読者になる

2000名以上の日本人英語学習者のデータからあなたに必要な学習時間を計算してくれるWebアプリ、作りました

React Express Webアプリ

エンジニアインターン生として働いているサウスピークにて、新たにWebアプリを作成しました。公開できるものとしては初のアプリですね。

どんなものか

英語学習時間シミュレーター

目標の英語力と現在の英語力から必要な英語時間を算出するWebアプリです。

使い方としては、まず、目標の英語力を選択します。

アルゴリズム的な話をすると、選択肢の英語力はTOEICの点数に換算されます。

現在の英語力の選択肢(下図)もすべてTOEICの点数に換算されます。

で、この2つの情報とサウスピークの卒業生のデータを照らし合わせ、到達に必要な英語学習時間を導き出します。

アプリ内では「一日あたり2時間の勉強で〇〇日の計算になります」と言ってはいますが、"お金を出して留学するほどやる気があり""フィリピン人からのレッスンを受け""英語学習のスペシャリストが作成したカリキュラムに沿って勉強する"サウスピークの生徒のデータから作成しているので、一般的な英語学習者のデータから作成したものと比較すれば、短く見積もられているはずです。なので英語学習の道しるべ程度にどうぞ。

使用したもの

フロントにはReact、サーバーフレームワークはExpressのJSオンリーの構成になっています。

グラフの生成にはRechartを使用。使いやすくて好きなライブラリです。

悩んだところ

SNSのシェアがうまく行かず、やたらと時間を食いました。

当初はreact-helmetで、フロント側で結果の画像毎に動的にOpen Graph用にmetaタグを埋め込んでいました。

<Helmet
  meta={[
    {"property": "og:title", "content": "英語学習時間シュミレーター"},
    {"property": "og:type", "content": "website"},
    {"property": "og:image", "content": imageId},
    {"property": "og:url", "content": "http://simulator.souspeak.com/"}
  ]}
/>

が、駄目。FacebookやTwitterのスクレイパーは正しく読み込んでくれませんでした。

ググってみると、全く同様のことで悩んでいる方がいらしたので、その方の解決法を参考にサーバーサイドで対処しています。ありがとうございます。

気づいたこと

データ活用のアルゴリズムについては一人であーでもないこーでもないと悩みながら作っていたんですが、最初はコードがやたら汚くなってしまっていました。そこらへんもレビューしてもらいながら改善していって、デザインをすごくきれいにしてもらって、作り始めてから1ヶ月少しで公開となりました。

コードが汚いまま公開して、公開日に重大なバグ発見、公開取りやめってのは考えうる中で最悪のシナリオですが、当初はコードをきれいにする必要性を理解してもらえず、早く公開しろ、とせっつかれ、納期に迫られるエンジニアの気持ちが少しわかりました。上司がエンジニアではない場合、デモ見せの時点でコードをきれいにして、バグを見つけやすく保守しやすくしておく方がいいのかも。

もう一つ気づいたこと、というか前から思っていたんですが、プログラマーには基礎的な数学の教養が必要です。

プログラマーは、与えられたデータからほしい結果を得るための計算問題を考えて、それをコードに落とし込むことで、アプリケーションの核であるアルゴリズムを作ります。そのために、最低限の数学の教養、高3までの数学の知識ぐらいは必要ではないかと思いました。

だとするとプログラマーは文系が不利かって言うとそうでもなく、大学で数学やコンピューターサイエンスを修めるような人には人工知能やインターネットの高速化のアルゴリズムなんかを研究してもらって、文系は世界中の数学好きが発表するアルゴリズム(人工知能フレームワークとか高速化されたインフラとか)を、コントリビューションまではいかなくとも、英語と最低限の数学の知識でがんがん吸収して使えるようにして、アプリとして利用できるようにすれば、住み分けができるんじゃないかと。

まあ、プログラマー1年目の意見なので、数年後には真逆のことを言っているかもしれませんが。

最後に

さて、あと数日でプログラミングを学び始めて、2年目に入ります。アプリのアイデアがいくつかあるので、2年目はそれを実現していきます。