ウェブアプリを作って授業で使う話

授業で使うウェブアプリを開発したので，その話をします．

自分は大学工学部の教員です．このアプリでやりたいことは，学生さんにアプリ上で数値計算の問題を提示して，その解答をアプリから提出させ，正解か不正解かを表示することです．次のような機能がほしいと思いました．

・カテゴリーに分かれた問題をたくさん用意しておき，ランダムに問題を提示する．ただしすでに解いた問題は提示しない．

・学生はアプリ上で計算をすることができる．関数電卓．ただしプログラムを組む機能（ループを回すなど）は持たない．

・解答を提出する機能がある．

・解答提出後，すぐに正解か不正解かが分かる．

・解答には許容誤差を設定して，正解±許容誤差の範囲内の解答は正解とする．たとえば0.4997が真の解で，許容誤差が0.01のとき，0.4975も正解とする．

・学生の計算過程と解答をデータベースに記録して，あとで成績評価に使える．

・アプリはPCでもスマートフォンでも使える．

自分が担当している授業のひとつに，数値計算法の基礎を教えるものがあります．その授業で学生に数値計算の演習させるのに，前からこんなアプリがほしかったのですが，ちょうどいいものが見つからなかったので，一念発起して自分で作りました．（それならこんなのがあるよ，と知っている方は教えてください．）

2020年の7月から約2ヶ月間，約150人が受講する授業で実際に使いました．途中で機能を拡張したり，見つかったバグを直したり，画面のデザインを変えたりしましたが，大きなトラブル無く運用できたようで，胸をなで下ろしています．

構想と動機

自分は情報系ではなくて機械系の教員ですが，研究で使うプログラムはちょくちょく作ってきました．ウェブサイトを構築したことやPHPでウェブプログラムを書いて運用したこともありますので，これをウェブアプリに入れてよいなら経験者と言えます（入れないものと思われますが）．まぁ，初心者より多少経験がある素人です．

今回はブラウザ上でJavaScriptを使って動作する，いわゆるウェブアプリにしました．PCでもスマートフォンでも使えるようにしたかったのと，PHPのようにサーバーにあれこれさせると遅くて使えないと思ったからです．関数電卓の機能を持たせたいので，足し算やかけ算をするたびにサーバーと通信して，PHPが動いて，…とやっていたら学生さんのストレスが溜まるだろうと予想しました．

またアプリはスマートフォンで使えるようにしたかったのですが，iOSでもAndroidでも動くアプリをつくる技術は持っていないので，どちらでも使えるためにはウェブアプリが妥当な選択肢でした．このアプリを構想しはじめたときは授業中にスマートフォンで使ってもらうことを想定ていましたが，2020年のCOVID-19対応のためうちの大学では遠隔で授業を実施したので，多くの学生さんはPCで授業を受けています．PCでも動くウェブアプリは結果的に好都合でした．

それから，関数電卓よりは賢いけど，プログラミング言語の機能は持たない，ちょっとおバカなプログラマブル電卓のような機能をつけました．具体的にはこんな感じです．

・加減乗除と累乗の計算ができる．

・関数電卓にあるような初等関数が使える．平方根，三角関数，指数関数，対数関数を使えるようにしました．

・変数を6個だけ使える．a, b, c, x, y, z

・関数を2個だけ定義できる．fとg．1変数関数に限る．

・前に行ったのと同じ計算を実行できる．↑ボタンまたは矢印キーで過去の計算を呼び出して，もういちど実行できます．

ほどほどに賢くて，変数と関数を使えて，でもプログラミングはできない．このぐらいの計算機能を持つ電卓を与えて，これで学生に計算させたかった．これはなぜかというと，授業の目的が数値計算を学ぶことにあって，プログラミングの授業ではないからです．この授業は講義（座学）で，去年（2019年）まではプリントを配って学生に問題を解かせていました．数値計算法の授業なのにプリントなの? プログラミングとかさせるんじゃないの? と疑問に思うかもしれませんが，プログラミングをさせるとそっちの授業になってしまって，数値計算の大事なところを見落としかねません．たとえばニュートン法で方程式の根を求める計算だと，残差の評価をしないでただ10000回ループを回しても，授業のプリントに載せる程度の問題だと正解が出てしまいます．でもそれでは反復計算の大切なポイントである，どこで計算を打ち切るかの判断（収束判定）がおろそかになります．

一方で，プリントを配って電卓で計算させる方法にも不満がありました．電卓を叩くのが面倒くさいので学生が手抜きをしたり，つまらない計算間違いのせいでつまずいたりします．「方程式−2x^3+11x^2+5x+11=0の根を数値計算により求めよ」のような問題だと，あるxに対して−2x^3+11x^2+5x+11の値を計算する必要がありますが，そこで間違える．それだと数値計算の勉強にならないので，関数の定義はできてほしいし，変数も使いたい．「ちょっとおバカなプログラマブル電卓」という目標はこのようにして決まりました．

プリントのもう一つの不満は，問題数をたくさん提示できないことです．皆で同じ問題を解くと，最初に解いた学生に答えを聞く学生が現れてつまらないので，去年までは学籍番号に応じて違う問題を解かせていましたが，1枚のプリントに掲載できる問題はせいぜい10問程度で，限界があります．たくさんの問題の中からランダムに問題を提示し，それを解かせるようにしたかった．これと上の関数電卓機能をセットにすることで，去年までよりもたくさんの問題を学生に解かせることができます．

解答の評価（○，×）も，こうなったら人間がやっていられなので，アプリにやらせます．このとき，誤差を許容するようにしたかった．数値計算法ではある許容誤差（または許容残差）の範囲内で答えを出そうとするので，学生の解答が正解とぴったり一致しなくても，許容誤差の範囲内であれば○にしたい．これも既存のアプリで対応できるものを見つけられず，自分でアプリをつくる動機になりました．

今年は前にも書いたようにCOVID-19の影響で遠隔授業をやっているのですが，これもアプリを完成させて実運用する後押しになりました．

実際に使ってみて

アプリの構想は以前から持っていて，関数電卓機能は昨年のうちに作っていたのですが，それ以外の部分，たとえば認証とか，問題データベースは作っていませんでした．これを6月後半に一気に作って，7月頭からの実運用，つまり自分の授業担当回に間に合わせました．

最初は何かトラブルがあるんじゃないかと冷や冷やしながらのスタートでしたが，何とか最後まで（自分の気づいている範囲では）大きなトラブルなく終わらせることができました．学生さんに授業のアンケートを取ったところ，おおむね好評で，前向きに取り組んでくれたみたいです．アプリの使い方がわかりにくかったという指摘も散見されましたが，これはアプリそのものの問題というよりは説明が不十分だったからだろうと思っています．

教員としては，これまでプリントを配ってやってきた授業より多くの問題を学生さんに解かせることができてよかったです．去年までやりたかったのにできなかったことが，今年はできるようになってうれしい．またプリントを採点する手間を考えると，プログラミングで苦労した面を差し引いても以前より楽に授業を回せるようになりました．

技術的なこと

素人が作ったウェブアプリの技術に興味を持ってもらえるかどうか分かりませんが，概要だけ書いてみます．

・バックエンド：Firebaseを使いました．認証機能，hosting，データベース（Firestore），functions（JavaScript）を使っています．（データベースのバックアップにStorageも使っています．）

・フロントエンド：Vue.jsを使いました．ボタンのデザインなどにはBootstrap 4を使っています．それからMathJaxで数式の表示をしています．

・関数電卓機能：PEG.jsで生成したパーサーを使いました．

Firebaseの存在を知ったのが6月に入ってからだった（と思う）のですが，そこからいろいろ調べたり作ったりして，7月の頭には何とか形になりました．必要な機能は全部提供してくれるので実に便利でした．特に認証．うちの大学では全学生がGoogle IDを持っているので，Google認証を有効にするだけで全学生を対象としたアプリになり，学生ごとの解答状況を把握できました．非常にらくちんで，ありがたかったです．

JavaScriptで本格的（？）なアプリを作るのははじめてでした．もちろん自分でもコードを書きましたが，それ以上にVueやPEG.jsなどの既存技術を使わせてもらっているところが大部分を占めます．ネット上のプログラミングに関する情報も大変参考になりました．

結び

自作のアプリを授業に使うのには不安もありましたが，何とか運用でき，業務が楽になった上に学生さんにもたくさんの課題に取り組んでもらうことができて，全体としては成功だったと思っています．今後は使い方の解説や例題を充実させつつ，学生さんの達成度の表示をもっと魅力的に変える方法を模索していくつもりです．

とは言っても今年度のこの授業は終わりで，次の実施は来年度になりますけど．