KLMS

https://github.com/takunori0607/KLMS

React

CSS

JavaScript

Node.js

HTML

Learning Management System

森下拓紀

推しアイデア

KLMS:慶應生のためのLearning Management Systemということで、勉強をサポートするアプリを作った。 今回は、「統計」の内容に絞ったが、全ての科目に対して拡張していくことを将来的に展望している。

作った背景

自分が統計の勉強をしたいと思った時に「Progate」のようなツールがあれば便利だと思った。 慶應生としてのあらゆる勉強を同じようなフォーマットに載せられるのではないかと考えた。

推し技術

数式レンダリングとProgate風カリキュラム学習フローの組み合わせ。解説→理解度チェック→進捗管理をシングルページで統合したこと。

プロジェクト詳細

KLMS — 統計検定準1級 学習管理システム

「(統計学を含め)勉強は、範囲が広くてどこまで進んだかが見えにくい。教科書を読んでも、本当に理解できたか不安なまま次に進んでしまう。」

KLMSはその課題を解決するために作ったWebアプリです。Progateのように「解説を読む → その場で問題を解く → 正解したら次へ」という流れで、14章・61セクションのカリキュラムを進められます。

数式はKaTeXでリアルタイムレンダリングしているので、確率分布や検定統計量などの数式もきれいに表示されます。進捗はブラウザに自動保存されるので、途中でやめてもまた続きから始められます。

フロントエンドはReact + TailwindCSS、バックエンドはNode.js + Prisma + PostgreSQLで構築し、Render.comにデプロイしてます。管理者用の画面とユーザー向けSPA(シングルページアプリケーション)を1つのサーバーで共存させる設計にしました。

森下拓紀

@3fc5e875408f4bbb