テクノロジー

復習に特化した学習サイトを開発してみた

著者近影
小林 隆弘

皆さんこんにちは、DSU所属の小林隆弘です。
初めてのカンタービレへの投稿となるので、簡単に自己紹介させていただきます!

前職は、食品工場に勤務していました。実は、フィリピンと日本のハーフです。
英語はペラペラではありませんが、日常会話程度であれば喋れます!オンライン英会話で英語力UP中です。
最近はコロナ禍で10kg近く太ったため、ステッパーを踏みながらリモートワークしています。

みなさんはIT業界、エンジニアという仕事に対してどういうイメージを持っていますか?
IT業界に転職をしてすぐの頃、同業である友人から、「IT業界は一生勉強だよ」と言われていたことが印象に残っています。最初は疑っていましたが、今はしみじみその通りであると痛感しております。

今後IT企業に務める上で、「いかに効率良く学習をしていくか?」が、ワークライフバランスや良いキャリアを形成してく上で、非常に重要になってくる課題であると考えています。

無いなら作ってしまえ!から始まった学習サイト作り

私自身、学習していく中で重要と分かってはいるのですが、ついつい忘れてしまうのが復習でした。エビングハウス忘却曲線という言葉を聞いたことはあるでしょうか。

エビングハウス忘却曲線
忘却曲線と命名されていますが、実際は記憶の節約率を表したグラフです。
節約率とは「ある程度時間をおいてから再び記憶するまでにかかる手間をどれだけ節約できたか?」ということです。

エビングハウス忘却曲線に基づいて、「翌日、1週間後、2週間後、1ヵ月後、2ヵ月後」と復習をするのが理想的なタイミングと言われたりしています。

しかしながら、復習のタイミングを理解はしていても、仕事をこなしながら復習日程を記録・管理するのが大変手間で、どうにかできないかと、復習する日程をスマートフォン付属のカレンダーアプリに都度登録するか等を検討したりと、試行錯誤の日々でした。

手間になっていた工程を、エンジニアの力で自動化出来ないかと調査をしたところ、様々なスマートフォン向けの学習アプリが存在していました。
その中でも、自分で問題を作成し、その問題を回答する。回答した時のスコアに応じて、翌日、1週間後、2週間後、1ヵ月後、2ヵ月後、と復習していくという機能があるアプリを見つけることができました。
数ある学習アプリの中から自分が探し求めていたものが見つかり、大変気に入っていました。

しかし、満足したのも束の間、アプリ内にマークダウン形式で書けず、ソースコードを入力して登録するのは向いていないことが発覚したのです。
また、普段はパソコンで作業していることが多いため、作業しながら「この内容は覚えたい!」と思った内容をすぐにコピーして、新規問題とてしペーストするだけで問題が作成出来たらかなり便利だと考えました。

スマートフォンだとパソコンと並行して使用することになってしまい、手間になるなと考えた私は「無いなら、自分で作ってしまえば良いのでは?」と思い、時間が許す限り学習サイトの作成に取り掛かりました。

完成までの道のり

作成するにあたり、チームメンバーを募りました。
入社日が近かったメンバーが集まりサイトのデザインから各ページのソースコードまでを手分けして取り組みました。
当初は一人で作ってみようという気持ちが大きく、プロトタイプだし、とにかくデザインを気にせず、動くものを作ろう!と考えていました。

しかし、実際に作成してみると、希望通りの動きはしましたが、デザインがダサかったり、バグが多かったりと、とてもスムーズに作業ができるものではありませんでした。
改めて、チームメンバーで協力して作成ができて良かったと思います。
各自が課題に取り組むと同時にスキルアップに繋がりました。

苦労するところ約2ヶ月。
完成したサイトがこちらです。

▼学習の復習を効率化するアプリ「CodeReminder」Topデザイン

[サイト名]
CodeReminder

[技術スタック]
FW:Spring Boot
サーバーサイド:Java
フロントエンド: HTML、CSS、Javascript 、Bootstrap、Vue.js


サイトの名前は、開発エンジニアのソースコードのコードを定期的にリマインド(思い出す)するという意味を込めて、チームメンバーと決めました。

ここがポイント!サイト内のこだわりポイント

こだわった点は大きく分けて4点あります。

  1. マークダウン形式で内容を入力出来るようにし、その結果をVue.jsを使用して、即座にプレビュー画面に反映させたこと。
  2. LINE Notifyと連携し、携帯に通知を送れるようにしたこと。
  3. レスポンシブデザインに対応したこと。
  4. 他人の公開している問題を自分のところにコピー出来るようにしたこと。

私の様々な学習サイトを体験してきた経験を活かし、如何に使用者が快適で使いやすいサイトにできるかを最優先に考えて作成しました。
その結果がこだわりポイントとして現れています。

▼問題作成画面

▼問題を作成すれば、登録者全員で共有が可能

▼学習言語の選択が可能

ひとりじゃないから解決!要望を現実に

日々生活する中で、思った通りに物事が進んでくれなかったなんて経験、沢山ありますよね。
今回サイトを作成する上でも、「こう作りたい。」という要望と実際できたものが異なることは多々ありました。
そんな時も、チームメンバーで意見を絞り出し、解決作を見つけることで徐々に考えていた通りのサイトを作ることができました。

どうせ作るのであれば、今流行っている技術を使用したかったため、ラムダ式を取り入れたり、JavaとVue.jsを連携させること、Junitでテストの自動化、Spring Bootの公式ドキュメントを読んで、それをプロジェクトに反映させたこと(翻訳がうまく行かなくて苦労しました…)、Gitの扱い、他人のコードを読むこと、Herokuにデプロイする等、挙げればきりがありません。
一人ではまず開発出来なかったと思います。同期でお互いの苦手な部分を補強しあって、助け合いながら開発することが出来ました。

設計書はほとんど無く、私の口頭ベースだったのにも関わらず、それをそつなくコードに反映させることが出来るチームメンバーは本当に優秀だなと思いました。

目標は多くの人の学習効率の上昇

現在もリファクタリングにテスト、機能開発を進めています。
1度完成したからと、作業を止めずにこれからもより快適で効率の良い学習ができるように、サイトの改良をメンバーで進めていくつもりです。
実は、今回作成したサイトは多くの人に確認して欲しいと考えています。
そのために、テストユーザーとしてログインができるアカウントを共有します。

テストログインID
ID:test@code-reminder.co.jp
PW:password

まだまだ、リリースしたてということもあり、サイト内のバグや、使ってみたら使いづらいという部分が多数発生すると思います。
そんな時は、サイト内の右下にあるお問い合わせフォームまでご連絡ください。

▼お問い合わせフォーム

引き続き、多くの方のご意見ご感想を聞いて、より良い改善に努めて行きたいと思いました。
私自身、サイトを使って学習を効率化し短時間で多くの知識を得ることができることを目指します。

小林 隆弘(こばやし たかひろ)
中途入社 Development Scale Unit(DSU)所属。
フィリピンと日本のハーフ。オンライン英会話を受講中。
ダイエットのためステッパーを踏みながらリモートワーク中。

この記事を書いた人

著者近影

小林 隆弘 (こばやし たかひろ)

中途入社 Development Scale Unit(DSU)所属。
フィリピンと日本のハーフ。オンライン英会話を受講中。
ダイエットのためステッパーを踏みながらリモートワーク中。 このライターの他の記事を見る

この記事をシェアする