Next.jsとDgraphで作るクイズ・アプリ (1) アプリの構想

Dgraph Nextjs

アプリの構想

どんなアプリか?

クイズ・アプリなのでクイズができるアプリになる予定ですが, どちらかというとクイズベースの学習システムと考えています. クイズという名前も通りが良いから使ってるだけで実際は問です. ここで問とは答えがあるものを指します.

基本的な機能としては,

クイズ・データベース
テスト
成績管理
スキル・マップ
レコメンド
サーティフィケート

ができたら良いなぁと思っています. レコメンドやらサーティフィケートとかは現時点では構想というよりは誇大妄想的な感じもします(金力もないですしね). 能力の可視化ができたらとりあえずは完成でしょうか.

何故クイズ?

なんかの本でクイズ(練習問題)が効率的な学習法だと読んだからです. 本は忘れましたが多分以下のどれかの本です.

『Learn Better』
『脳が認める勉強法』
『「学力」の経済学』

技術スタック

上記のことをクリアするには, いろんな技術が必要になります. 当面はクイズ風のブログという感じで公開して行く予定ですが以下のような技術(というかライブラリやらフレームワークやらSaaS)を使う予定です.

Next.js
Netlify
Semantic UI React
Dgraph

他にも以下を検討中です.

モバイル (Android)
SaaS

選定理由・用途

Next.js & Jamstack

Next.jsはクイズ用のエディタの作成やクイズの公開に使いたいと思います.

Next.jsはSPA(Single Page Application)からSSR(Server Side Rendering)そしてJamstackまでカバーしたWebアプリケーション・フレームワークです. Jamstackというのはwebサイトやwebアプリケーション開発のアーキテクチャの一つです.

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale.

もともとはJavaScript, APIs, Markupから作られた造語です. フロントは静的サイト・ジェネレータ(Markup)で静的なファイル(HTML)として作ってCDNで配布, 動的な部分はJavaScriptとAPIsを使って更新するというような考え方です. ある意味Ajaxへの回帰と言えるでしょうか.

Next.jsのポイントはページをReactアプリケーションとして構築できるところです. React自体はUIライブラリという位置づけだったのでWebアプリケーション開発となると面倒なことも多かったです. Reactやって, クライアントサイド・ルーティング勉強して, 別個にAPIサーバーを立ててなどと考える必要はなく, 一つのフレームワークで完結します.

Next.jsならファイル・パスとルートが対応したり, API(バックエンド)も作れたりと考えることが少なくて良いです. 過去この点で何度も失敗しているのでNext.jsを触ったときは感動しました.

またNext.jsを作っているVercelのホスティング・サービスを使えばサイトのデプロイや配信なども簡単にできるので技術ブログなんかにはちょうど良いのかもしれません.

個人的には簡易なサーバーからフロントエンドまで完結する点を評価してエディタの開発に採用しました(これだけ流行っているフレームワークなので小賢しい後付に近いですが).