筑波大学のシラバス閲覧アプリをつくった

目次

はじめに

夏なのにサマーインターン受けなかった @ITF_hikary です。 さて、今回はシラバスっぽいなにかを作ってみました。以下からログインなしで遊べます。

↓↓

syllabi.vercel.app

はじめに使い方について説明したあとに、 今回の開発に至った経緯と、どのように開発を行ったのかについてお話できればと思っています。

どういったアプリ?

https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc50f21aa-69e4-440a-b4b8-dd2533ea9719%2Fpsychic-enigma.vercel.app__(2).png?table=block&id=1ab1fd17-aad1-471b-a7d8-b81630d3f2ae&cache=v2

このアプリは筑波大学で履修できる授業を検索し閲覧できるようにするアプリです。 追加機能として、授業に対して★星レビューができるようになっています。(Googleログイン)

開発に至った経緯

授業情報であるシラバスkdbを通して閲覧することができます。しかしこのkdbは処理が重く、変わりのアプリとして「kdbっぽいなにか」っていうプロダクトをみんな使っている現状です。

make-it-tsukuba.github.io

このアプリではシラバスについてはとくに何もしてないのですが、シラバス自体もかなり不便です。 多くの人がいまだに紙の履修要覧を利用しているのではないでしょうか?

具体的には東京大学の履修検索システムでは、マイリスト機能(kdbっぽいなにかにある)などwebならではの機能がついており、履修仮組に便利です。

catalog.he.u-tokyo.ac.jp

こちらは有志によるものですが、立教大学ではレビュー機能、オススメ授業レコメンド、チャットなどSNSを利用した履修をさらに強化する機能がついており、とても便利です。

web.rep-rikkyo.com

シラバスページをおしゃれにして、シンプルなレビュー機能をつけてみたら便利になるのではと思いアプリを作成してみました。

開発過程

今回のアプリは3日(2日目にリリース)で実装しました。

1日目の段階でシラバスが表示できるようになり、 2日目には検索機能とレビュー機能を追加してリリース。 3日目はアルゴリズムの修正による高速化のみを行っています。

今回のアプリはフレームワークとしてNext.js(React)を採用しており、Vercelにてホスティング、Firebaseをデータベース、認証に使っています。

Next.jsについて

Next.jsを採用した背景としては、SSRによるAPI機能によりバックエンドを統合した開発を行おうと思ったからです。ホスティングにVercelを利用しているのもそのためです。

テンプレートとして、先日作成したRSSリーダーのプロジェクトを用いて開発を行いました。

mini-rss-reader.vercel.app

github.com

Vueとの比較

vite(vue3)と比較すると、Firebaseをクライアントで操作する場合はvueのほうが使いやすかったしホスティングもFirebaseにまとめやすかった印象でした。

github.com

@vueuse/firebaseで一貫した開発ができたのはとても良かったです。

vueuse.org

さいごに

レビュー機能は荒れる心配があるので、ちょっとだけためらいがある印象です。 ユーザーの声を参考に便利な機能を増やしていくのがいいと考え、機能を最小限に抑えたリリースを行いました。(MVP) この記事を最後まで見ていただいた方にはぜひアプリを触っていただけたらいいなと思います!

https://psychic-enigma.vercel.app/psychic-enigma.vercel.app