[個人開発] 数学好きのためのWebアプリを作ってみた (Rails ＋ Typescript）

まずはじめに

私は数学好きな高校３年生です。プログラミングは１年ほど前から独学で始めました。
今回、個人開発で数学好きのための 「$Mualphatheta$」というWEBアプリを作ってみたのでこの記事でアプリの紹介をしようと思います。

アプリのURL$\; \to\;$ https://mualphatheta.herokuapp.com

なぜつくったのか

TwitterやInstagramなどで数学アカウントなるものがたくさんあり、みなさん文章や画像などで面白いと思った問題、自作問題、解いて欲しい問題を投稿しています。
今のシステムでは２点ほどもったいないと感じてしまうことがあります。

• 媒体がTwitterやInstagramなどで分散してしまう
• 他の媒体ではTexに対応していないため $\raise 5px{x^2}$ などがx^2などで表現され、長い式だとわかりずらい

これらの問題を解決するためにアプリを作りました。

どんなアプリか

まずはスクリーンショットを見てください

基本的にレスポンシブデザインになっているのでPC, スマホ, タブレットどれで見ても綺麗に表示されるはずです。

アプリの機能

機能は以下の通りです。

• ログイン機能
• フォロー機能
• いいね機能
• 検索機能
• 問題・解答の投稿機能
  • Tex(KaTex)による記述
  • 画像投稿
• コメント機能

　Texテキストによる投稿を可能にしたことで、より数学的な見た目で問題を作成することができます。また、画像投稿も可能なので図形やグラフを明示することもできます。
　普段Texに書き慣れている人はもちろん、書き方がわからない人にもしっかりとTexの書き方を紹介しているページがあるのでそれを見れば誰でもTexを書けるようになっています。また、文章をPCやスマホで書くのが面倒な人は紙に書いたものを写真に撮って画像として投稿するのもありです。
　このように様々な方法で問題が投稿できるのでユーザーが数学を楽しみやすくなっています。

使用技術

バックエンド

• Ruby
• Rails

　今回バックエンドはRailsをAPIとして使っています。しかしAPIモードではなく、Route.rbでフロントエンドへのpathは全て同一のコントローラー、アクションに対応させ、ReactのIndex.tsxを読み込んでいるviewをレンダーするようにしています。

　コントローラーの設計は以下のようになっています。

• api
  • v1
    • users
    • problems
    • solutions
    • comments
    • likes(いいね機能)
    • relationships(フォロー機能)
• sites (indexアクションでReactをレンダー)

　ログイン機能はRails tutorialと基本的に同じような構造で、個人情報をあまり取り扱いたくなかったのでユーザー名とパスワードだけのログインになっています。

　テストはrspecを採用しています。直感的にテストが書けるのでとても使いやすいです。

フロントエンド

• Typescript
• React
• Material-Ui

　フロントエンドはReactをTypescriptで書いています。今までに一度だけJavascript x ReactでSNSアプリを練習で作ったことがありますがほとんどJavascriptは使ったことがない状態でした。しかし型安全ということで世間的にTypescriptがかなり普及しているので今回は拙いながらもTypescriptで書いてみることにしました。正直まだTypescriptの恩恵を受けるような使い方はできていないと思っています。Reactについてもhooksの使い方をもう少し上手くなりたいです。

　API通信はaxiosを使っています。
　styleはCSSファイルではなくstyled-componentというライブラリを使ってTSファイルに直接書いています。また、UIは使いやすそうだったのでMaterial-UIを採用しました。

インフラ

• Heroku
• AWS s3 (画像ストレージ)

　インフラについてはまだ勉強したことがないのでHerokuにあげています。add-onでpostgre-sql、AWS s3を使用しています。もともとは画像ストレージでcloudinaryを使用しようと思っていたのですが、なぜだか上手くいかなかったのでAWS s3を使うことにしました。

反省点

　今回の開発を通して感じたのは、要件定義をしっかり初期段階でやっておかないと途中で何をやっていいかわからなくなることがあるということ。フロントのレイアウトについてもふわふわとしたイメージだけで作ってしまったので開発中に何回も変更が生じて苦労しました。

　コンポーネントをもっと細かく作って再利用性の高いコードを書く必要があると感じました。(似たようなコードを何回も書いているので)

さいごに

　はじめての本格的なアプリ開発でしたが制作物自体はまあまあ上手くできたのではないかと思います。フィードバックがあればより改良していきたいと思います。
　このアプリは数学が好きな人にとってはとても楽しめるアプリになっていると思います。数学に興味がある方、自作問題を作っている方、良問を共有したい方はぜひ使ってみてフィードバックをくださると励みになります。私もいくつか自作問題を投稿してみたのでぜひ挑戦してみてください。