はじめに
初めまして。
未経験から独学でフロントエンドエンジニアを目指している、
かせい(@kaseispace)と申します。
この度、対話型振り返りシステム「ReCap」を開発しましたので、ご紹介させていただきます。
興味を持っていただけたら、開発したアプリを触っていただけると嬉しいです。また、簡単なアンケートにもご協力いただければさらに感謝いたします。アンケートは以下のリンクからご意見をお寄せください。
皆様のフィードバックをお待ちしております。
ポートフォリオの紹介
サービス概要
「ReCap」は、教員と学生のための振り返り学習プラットフォームです。
教育現場での利用を想定しており、教員が作成したプロンプトに基づき、学生はチャット形式で対話を通じて振り返りを行います。対話型の振り返りは、学生が自分の考えを自由に表現しやすいという特徴があります。振り返りの内容がすべて提出された後には、個別のフィードバックを受け取ることができます。これにより、学びを深め、新たな気づきを得るサポートをしています。
サービスURL
推奨端末について
ReCapはレスポンシブ対応しておりますが、システムの特性上、PCでの利用を推奨しております。
システムの特性上、教員と学生がいて初めて成り立ちます。
これに伴い、開発者側であらかじめ「フルスタック大学」で教員アカウントを作成し、いくつかの授業を登録しておきました。
振り返りだけを試してみたい方は、「フルスタック大学」で学生アカウントを作成し、以下の中から好きな授業に参加してください。
ただし、授業が開講されている曜日でないと振り返りができないので、その点にご注意ください。
現在、ReCapの登録は大学に限定されています。そのため、大学以外の学校（中学校、高校、専門学校など）は登録できませんので、ご了承ください。
| 授業名 | クラスコード | 開講日 |
|---|---|---|
| プログラミング入門 | mascxLE | 月 |
| HTMLとCSSの基本 | AcbS9Zb | 火 |
| JavaScript入門 | krkrSID | 水 |
| コンピュータサイエンス概論 | NSpY1lD | 木 |
| データベースの基礎 | Zgr0i3S | 金 |
| ネットワークの基礎 | NBhym9z | 土 |
| バックエンド開発入門 | ET6C0Ie | 日 |
Figmaで体験する「ReCap」
「ReCap」の使い勝手を簡単に体験していただくために、Figmaを使用したプロトタイプを作成しました。アカウント作成の手間を省き、まずは気軽に操作感を試したい方に最適です。このプロトタイプで「ReCap」の魅力を感じたら、ぜひ実際のシステムも試してみてください。
GitHubリポジトリ
フロントエンド
バックエンド
開発背景
私が初めて振り返りの大切さを実感したのは、学生時代の授業で振り返りをする機会があったときです。それまでは、勉強したことをそのままにして、振り返ることなんてほとんどありませんでした。
でも、その授業では、授業後に振り返りをすることが求められていて、私は言われるがままに振り返りを行っていました。当時はその重要性をあまり感じていませんでしたが、後でその振り返りを見返すと、自分の学びをもう一度確認することができ、深く理解する助けとなっていることに気づきました。
特に、テスト対策のときに振り返りがすごく役立ちました。自分ができなかったことに対して振り返ることで、理解が足りなかった部分をはっきりさせて、効率よく復習することができました。
この経験から、振り返りは学習効果を高めるためにとても重要な手法であることを痛感しました。
振り返り学習は、学んだことをもう一度見直して、次の学習に活かす大切なプロセスです。でも、多くの学生は勉強したことをそのままにしてしまい、振り返りをすることが少ないのが現実です。
「ReCap」の目的
「ReCap」は、振り返りの導入や改善を考えている教員の皆様に向けて開発しました。このアプリは、学生たちが自分の学びを振り返り、より効果的に活用できるよう支援することを目的としています。
「ReCap」の特徴
- チャット形式の振り返り：学生が自由に考えを表現しやすい対話型の振り返り
- 個別フィードバック：振り返り内容に基づくフィードバックで学びを深める
- クラスの振り返り共有：クラス全体の振り返りを閲覧し、他の学生の意見や気づきを共有
- 新たな気づきを得る：他人の振り返りから学び、自己成長を促進
システムの利用イメージ
1. 授業開始前（教員向け）
まず、教員は授業前に以下の準備を行います。
- システムに授業の日付を登録
- 授業内容に合わせた振り返り用のプロンプト（質問）を作成し、生徒に公開
2. 授業中（学生向け）
授業が進行する中で、学生は以下の活動を行います。
- 授業中、教員が振り返りの時間を指示します。そのタイミングで、学生は自分の学びを振り返り、システムに記録します。このとき、教員が提示したプロンプト（質問）に沿って入力
3. 振り返り終了後（教員・学生向け）
振り返りが完了した後、以下の活動を実施します。
- 教員
- システムを通じて学生の振り返り状況を確認
- 学生
- システムからのフィードバックを確認し、必要に応じて振り返り内容を修正
- 他の学生の振り返りを参考にし、自分の学びを深める
機能紹介 - 教員ページ
| 担当授業登録機能 | 振り返りプロンプト作成機能 |
|---|---|
|
|
|
担当授業の登録を行ってください。 登録後、授業ページにてクラスコードが発行されます。 このクラスコードを学生に共有してください。 |
学生に振り返らせたいプロンプトの登録をしてください。 プロンプトは複数登録可能です。 |
| 振り返りプロンプト公開機能 | 振り返りプレビュー機能 |
|---|---|
|
|
|
作成したプロンプトを有効化すると、学生に公開されます。 有効化後、チャットアイコンが表示されます。 |
チャットアイコンをクリックすると、プレビューを確認できます。 |
| 授業日登録機能 | 振り返り履歴閲覧機能 |
|---|---|
|
|
|
授業日の登録を行ってください。 現在の授業日が終了するまで、次の授業日の登録はできません。 編集・削除は可能です。 |
学生が各授業回で行った振り返り内容を閲覧できます。 |
機能紹介 - 学生ページ
| 授業参加機能 | 振り返り登録・閲覧機能 |
|---|---|
|
|
|
教員から共有されたクラスコードを入力してください。 クラスコードが一致すると、そのクラスへの参加が完了します。 |
チャットアイコンをクリックします。 振り返りが開始され、指示に従って振り返りを行います。 全ての振り返りが終了後、振り返り履歴から登録内容を確認できます。また、振り返りに対してフィードバックが返されます。 |
| 振り返り編集機能 | みんなの振り返り機能 |
|---|---|
|
|
| 登録済みの振り返りをフィードバックや他の学生の振り返りを参考にして編集できます。 |
他の学生の振り返りを閲覧できます。 振り返りは内容のみが表示されますが、カードをクリックすると質問を含めた全文や省略された部分が表示されます。 |
こだわりポイント
付箋風カードによる振り返り共有
学生が記入した振り返りの内容を付箋風のカードに表示することで、クラスメートの振り返りを簡単に閲覧できるようにしています。
このデザインには、教室で学生が各々の意見を付箋に書いて模造紙に貼り付け、共有するという情景をシステムに取り入れたいという思いを込めています。視覚的に振り返りを共有することで、他の学生の意見や考えを取り入れることができ、自分自身の学びを深める手助けとなります。
振り返りの記入状況の可視化
学生の振り返り状況を簡単に確認できるよう、記入済みの場合はチェックマーク、未記入の場合はバツ印や黄色の四角で表示しています。
これにより、グラフとアイコンを使って直感的に情報を把握できるようにしました。
使用技術一覧
フロントエンド
- Vue 3.5.11
- Nuxt 3.13.2
- TypeScript 5.6.2
- コード解析/フォーマッター：Nuxt ESLint
- テストフレームワーク：Vitest / Nuxt Test Utils
- UIライブラリ：Tailwind CSS
- 主要パッケージ： VueUse / Nuxt Icon / Nuxt Image / vue-chartjs
バックエンド
- Ruby 3.3.4
- Ruby on Rails 7.1.3
- コード解析/フォーマッター：Rubocop
- テストフレームワーク：RSpec
インフラ
- Vercel (フロントエンド)
- Render (バックエンド)
CI/CD
- Github Actions
環境構築
- Docker
認証
- Firebase Authentication
API
- 学校コード検索 API
- OpenAI API
技術選定の理由
フロントエンド
検討した技術：React / Next.js
ReactやNext.jsは非常に魅力的なフレームワークですが、私がプログラミングを始めた頃、挫折せずに開発を続けるためには、学習難易度の低い技術が重要でした。
VueはJavaScriptをそのまま書いているような感覚で、Reactに比べて学習のハードルが低いと感じました。また、Vueはシンプルで直感的な設計がされており、コンポーネントベースのアーキテクチャを直感的に理解できました。
Nuxt3は、今回はSPAモードで運用しているため、SSRやSSGの恩恵はありませんが、オートインポートなどの便利な機能が豊富であるため、開発効率を向上させることができました。
今後は、Nuxt3を使用したSSRの開発にも挑戦し、さらに深い知識と経験を積みたいと考えています。また、ReactやNext.jsにも挑戦し、その豊富なエコシステムと高いパフォーマンスを活用した開発にも取り組みたいと思っています。
UI
検討した技術：Vuetify
Vuetifyは、Vue.jsに基づいた人気の高いUIライブラリで、多くのコンポーネントが揃っています。これらのコンポーネントを使うことで、複雑なCSSをほとんど書かずに美しいUIを簡単に作成することができます。
しかし、今回はCSSの学習も兼ねて、自由にカスタマイズ可能なTailwind CSSを採用しました。Tailwind CSSを使用することで、CSSの基礎をしっかりと身につけることができました。確かにVuetifyと比べて工数はかかりましたが、結果として得た知識と経験は非常に良い学びになりました。
バックエンド
検討した技術：PHP / Laravel
プログラミングを始めた当初、私は有名な「Railsチュートリアル」というサービスを利用して学びました。Railsチュートリアルは、初心者が挫折せずに学びやすい内容で構成されており、私にとって非常に理解しやすかったです。そのため、最初に習得したフレームワークがRailsでした。
ポートフォリオを開発する際にも、すでに馴染みのある技術を使うことが効率的だと判断し、Railsを採用しました。これにより、学習コストを抑えつつ、開発を進めることができました。
インフラ
検討した技術：AWS
バックエンドのデプロイ先としてAWSを検討しましたが、今回は見送りました。その理由は、学習コストと費用の面からです。AWSは非常に強力なプラットフォームですが、使いこなすためにはかなりの学習が必要です。また、コストも考慮する必要があります。
画面遷移図
ER図
インフラ構成図
ポートフォリオを開発する際に学習・参考にした教材や記事
HTML・CSS / JavaScript・TypeScript
Vue / Nuxt
Rails
Docker
Figma
ポートフォリオ紹介記事
上記で紹介した以外にもQiitaやZennなど、多くの記事やサイトに本当にお世話になりました。この場を借りて、心から感謝しています。
おわりに
ここまで読んでいただき、心から感謝いたします。
ReCapの開発は、挑戦の連続でしたが、その分多くの学びを得ることができました。途中で何度も完成しないのではないか、これまでの努力が無駄になるのではないかと不安に感じましたが、それでも最後までやり遂げることができました。
まだまだ改善の余地はありますが、この経験を通じて得た知識とスキルを、今後も活かしていきたいと思います。この記事が、少しでも誰かの参考になれば幸いです。
ReCapへのアクセスは、下記リンクからご利用ください。
また、再度のお願いになりますが、アンケートにご協力いただけると非常に嬉しいです。アンケートは、以下のリンクからご意見をお寄せください。
最後に、システムの不具合やご質問等がございましたら、コメントや、X(@kaseispace)、アンケートからご連絡いただけますと幸いです。
最後までお読みいただき、ありがとうございました！