【個人開発】 自分でつくる英単語帳アプリをリリースしました

背景

自分でつくる単語帳アプリをリリースしました。
https://tes-tan.me/

アプリといってもWebサービスです。
未経験でフロントエンジニアになろうと思い、Progateやドットインストールで独学をすすめていたのですが、就職のために1つくらいプロダクトを開発する経験をしようと思いつくりました。
単語アプリをつくった理由は、英会話の勉強をしている姉が、苦手な単語を覚えるのに苦労していたことです。
英単語って、苦手な単語・覚えられない単語はいつまで経っても覚えられないし、覚えた単語に時間を使うのももったいない。
そこで、復習にフォーカスできる英単語アプリをつくろうと思いました。

機能

提供する機能は、初めての開発ということもあり、できるだけシンプルにしました。

①単語登録 画像 単語を登録できます。英語-日本語の登録ができます。
②テスト機能 画像 登録した単語をランダムに出題します。
正答率などに応じて、苦手そうな単語から順番に出題します。
③単語一覧 画像 登録した単語の一覧が見れます。
正答率の確認や、覚えた単語は出題停止もできます。

技術的な話

技術的な話も少しだけ書きます。
技術的な部分はあまり深くは書けないのですが、私は独学でフロントエンジニアになろうと思っていたので、できるだけJSに触れたいと思いNode.jsを使いました。（Progateでコースが準備されていたのも大きな理由です）

主な使用言語など

・HTML
・CSS
・JavaScript（Node.js/Express）
・MySQL
・さくらのVPS

開発期間

2月〜5月（約4ヶ月）

体制

体制 個人開発なのですが、就職のためにチーム開発の経験をしてみました。
WBSの運用、要件定義、仕様書作成、チャットでのやりとり、オンライン会議、テスト設計、GitHubでのソース管理、デバックなど極力実践に近い形での開発をしました。
PM・デザイン：姉夫婦
フロント・バック実装：わたし

難しかったこと・苦労したこと

テスト機能の実装

ユーザーの登録した単語をランダムで10問出題する機能を作りました。
回答後はDB上の正解あるいは不正解の数をカウントします。
10問テスト結果も最後に表示できるようにしました。
はじめは画面遷移なしで10問出題し、10問終わったら画面を遷移して結果を表示するという方法を考えていました。
しかし画面遷移なしでそれぞれの結果をDBとやり取りする方法が難しかったです。
10問テスト結果の表示の方法もわからず苦戦しました。 以下の方法で解決しました。
１：MySQLの単語を登録してあるテーブルに「test_process」というカラムを用意する。デフォルト値は０。
２：テスト開始と同時にランダムで10個の単語に「test_process = 1」を付与。
３：「test_process = 1」の中からランダムで１問選択して出題。
４：回答したらDBに正解あるいは不正解のカウント追加。「test_process = 問題番号+1」を付与。
５：「test_process = 1」がDBからなくなった時点で結果画面に遷移させる。
６：テスト結果は「test_process >= 2」のものを順番に表示。
このようにテスト機能を実装しました。

単語リストのソート機能・絞り込み機能の実装

DBからデータを表示させたものをそのままソートすることができないので苦戦しました。
データをJavaScriptを用いて配列化した後にソートや絞り込みをできるようしました。
実装はできたものの、別画面から戻った時にはソートと絞り込みがリセットされてしまったり、 単語詳細画面での「次の単語」「前の単語」はDB順にしか作動しないというところは解決できませんでした。
勉強してここも解消したいと考えております。

環境構築

Node.jsやMySQLをつなぐこと、さまざまなパッケージを導入すること、サーバー契約をしてサーバーにつなぐこと、ドメインを導入することなどの環境構築は難しく、時間がかかりました。調べながら行いました。

最後に

まだまだ追加したい機能や落とした機能もあります。
これからさらにスキルアップして実装していけるようにしていきたいです。