大学で学生が使えるportalsiteのプロトタイプ作成
~経験内容~ 【使用言語】 Vue.js、HTML、CSS、SQLite3、javascript(一部だけ) 【制作物】 学生用Portal Site 【概要】 私の通う東京情報デザイン専門職大学には学生用にPortalSiteというものが提供されています。 このSiteでは学生が日頃講義の際に使用する出欠席用Siteや講義資料、講義動画、Microsoft365のツール等が用意されていて学生が日常的に使用するものです。 これまでWebサイトの個人開発経験がなかったため既存のものを再現してみようと開発を始めました。 【構造】 お知らせメール(管理者)画面では内容を入力し、投稿ボタンを押すことでJavaScriptがバックエンドサーバーにJASON形式のデータをPOSTします。 POSTされたデータはバックエンドサーバーに書き込まれている//app.use(express.jason());//という設定により、自動的に内容が解析されます。 そしてSQLite3を使って、上記で解析されたデータをデータベースに保存します。 フロントエンドではページが開かれたらref変数に保存されているデータを更新するリクエストを送るよう書いています。 なのでフロントエンドが受け取ったデータを変数refに保存し、変数の中身が変更されていることをVueが変更を検知すると、自動的にHTMLを更新し、画面に表示します。 【今後の学習予定と方法】 今後は生成AIとの平行開発がより浸透していくと私は考えているので大学生向けに無料アップデートされたGeminiを活用し、基本の開発は自分で行いますが、関数の説明やエラーの解説、SyntaxErrorの有無の確認等はCLI任せ、生成AIを取り入れたコーディングを学習していきたいと考えています。