学習アプリ開発の進捗と振り返り

はじめに

ここ数日はずっと学習アプリのプロトタイプ開発をしていました。

一旦動作問題なさそうでレビュー依頼出すまで来たので、この辺で一回振り返ります。

プロトタイプは問題一覧画面、問題詳細画面のみの実装、ワイヤーがあるのが詳細画面のみという感じで開発進めています。

仕様Notionの共有をしていただいたのが、確か12/6で、12/7に打ち合わせしてからその後即着手しました。

今回はザっと仕様を教えて頂いて、ぶべさん作のワイヤー(figma)を元に作っていきました。

プロトタイプは12-1月というスケジュールだったのですが、暇でコーディングに飢えていたのでガッツいて作ったのでぶべさんの想定より結構早かったみたいです。

精一杯頑張りましたが、いくつか山アリでした。

でも、意外とそんなにハマるポイントとかはなかったです。

学習アプリの開発については画面もコードもなんでもオープンにと言われていますので、え？見せていいの？喋っていいの？等のご心配されずに安心してお読みください♪

出来た画面

課題未提出

提出済

レビュー画面

担当範囲

DB設計、バックエンド、フロントエンド

全部です。

山場

その1　エディター

初見どうやって？でしたが、こちら調べたら普通に便利なライブラリがあったので問題なかったです。

その2　ユーザー入力スクリプトの実行

evalとかfunctionsとかやり方ありましたが、これらはDOMの書き換えされるなどのリスクを伴うので使うなという情報がたくさん目について、ダメなんだなと思いどうやれば安全に実行できるんやとひたすら調べました。

結局隠しiframeタグにsandbox属性をつけてその別ウィンドウ中で実行する、親ウィンドウにはpostMessageを使ってログ情報を伝えるという手段で実装しました。

なんとかできましたが、だいぶ私には難しかったです。

その3　AIチャットボット

チャット自体実装した経験がなかったので、どうやってやるんやろ～って思ってたんですが、prismaスキーマを作成する段階でどうやるかが見えました。

チャット自体は意外とやってみると難しくなかったです。

今回は最初に提出したコードをレビューしてもらう為にPOSTしたメッセージはチャット内に表示したくない、でもmessageテーブルには登録するという感じで実装したので単純に全メッセージをGETして表示ではいけなかったです(このあたりはバックエンドで調整しましたし大した内容ではないのですが・・)。

それと、コードレビューのレスポンスにAIの回答を含めてそれを表示しようとしていたのですが、その後のチャットで表示するメッセージの管理がおかしくなると思って、問題とメッセージとユーザーが紐づくanswerIdをステートで管理、コードレビューのバックエンド処理内でanswerIdが初めて出来るので、そのanswerIdを元にメッセージをリクエストしてモーダルにチャットの内容を表示することにしました。

これでコードレビューでもモーダルを開くボタン(提出後に出現する)でも同じエンドポイントにリクエストすることが出来ます。

というところも最初バグらせてあれ？ってなったのでちょっとした山でした。

でもだいぶ慣れてきたので、なんであんな挙動するんだろ～？あぁanswerId空なんやな多分！ステートで管理したらいいだけじゃない？って息子と遊びながらPCの前にいなくとも考えられるようになっていました。自分、成長してる！って感じたポイントです。

所感と反省

上記の山さえ越えたら何日も溶かすようなハマるポイントは今回なかったですが、反省として最初にAPIリストはやっぱり作った方が良かったかもと思いました。

サイトマップもAPIリストもない状態でプロトタイプだからと始めましたが、仕様変更あるのが前提とはいえ手戻り多くなるとやはり効率は悪いと思うので、ザっとでもいいから最初に考えるべきだったかなと思いました。

エンドポイントのURLとか、あれ？ちがうか、こうか？？(他進めて)やっぱ違うか・・がホントに多かったですw

多分レビューでこうじゃないはコメントたくさんいただくと思います(笑)

大きな声では言えないのですが、ワイヤー見ながら10日足らずでここまで作れたら上等やろ！？ってちょっと思ってるので、レビューでボコボコにされても私は全く気にしないと思いますw

ほう！そうだったのか！とブツブツ言いながらせっせと修正します！！

おわりに

まだこれからですが、一旦動作は成立しているかなってところまでプロトタイプ実装してみての振り返りとして書いてみました。

とりあえず楽しいです！！

ぶべさんにボコボコにされながら引き続き頑張ります！！