はじめに
大分大学でアプリケーション開発に関するハンズオンセミナーを実施しました
ハンズオンセミナーを実施するにあたって考えたこと、実施してみて感じたことなどを残しておきます
経緯
以前、ハンズオン祭でもお世話になった大分大学の賀川先生から、ハンズオンセミナーのお話をいただきました
受講対象: 大分大学 大学院生5名 + 学部生複数名
ハンズオンの内容: 地図情報を使った街歩きアプリの実装について、ハンズオンで学ぶ
時間: 1日（6時間程度）
制約条件:
- 学生はプログラミングできる言語もあるが、アプリケーション開発は未経験である
- アプリの運用に使用できる経費は限られる
ゴール設定
まずは受講する学生たちと Web 会議を実施し、このハンズオンセミナーのゴールを何とするか、認識合わせを行いました
確認したのは大きく、以下の 2 点です
ハンズオンセミナーの時間内に何を作るか
地図上に場所の情報を登録できるモバイルアプリを作りたいとのことでした
自分たちだけでなく、一般で使われるようにしたいとのことで、短時間での実装、アプリ開発経験などを考慮し、 Web アプリを実装することにしました
ハンズオンセミナーの時間内で何が理解でき、何が出来るようになるか
実行環境、データベースなど、アプリを実装、運用するための仕組み（アーキテクチャー）を学びたいとのことでした
そのため、地図情報の扱い方やプログラミングではなく、環境構築を軸にしました
技術選定
開発言語
JavaScript であれば使えるとのことだったので、純粋な JavaScript だけで実装することにしました
React や Vue 、 Svelte も、 jQuery も、 TypeScript も使いません
あくまでもプログラミング学習は目的ではなく、その部分の学習に時間を割かないためです
（時間が十分あれば ElixirDesktop を使うところですが）
Web サーバーには Node.js の express を使用します
バックエンドも JavaScript 一本勝負です
地図モジュール
サンプルの豊富さから、 Leaflet を採用しました
スタイリング
これはほぼ自分の趣味ですが、 TailwindCSS を採用しました
SCSS の勉強は避けたいし、 TailwindCSS なら HTML に直接スタイルが書けるので迷子になりにくいです
データベース
PostgreSQL は使ったことがあるとのことなので、採用します
クラウドプラットフォーム
AWS や Cloudflare も考えましたが、最終的に Fly.io を選択しました
とにかくシンプルで安く、 PostgreSQL もすぐに安く使えます
そして、学生が「コンテナについて知らない」点も決め手でした
コンテナを使って開発し、そのままクラウドで動かせる、という点で、 Fly.io はコンテナの学習に最適です
「コンテナを使えること」は間違いなく学生にとってプラスになるので、コンテナを軸として Fly.io 上で実行するアプリを作ります
コンテナプラットフォーム
もちろん、 Docker を使います
学生なので Docker Desktop も無償利用可能です
IDE
デファクトスタンダードになった VSCode を使います
バージョン管理ツール
学生が GitHub を使ったことがないとのことだったので、バージョン管理の基礎も組み込むことにしました（強欲）
Backlog も頭をよぎりましたが、やはりまずは GitHub です
実装
実装したサンプルコードはこちら
Vite でビルドしたり、開発サーバーを動かしたりするようにしました
せっかくなので、 Super-Linter による CI も組み込みました
およそ1日で粗々実装しました
バグや機能不足はむしろ学生へのバトンタッチとして残しています（ということにします）
スキルチェック
Google Form でスキルチェックシートを作成し、事前に各学生の経験値を確認しました
今回のハンズオンセミナーで使用する言語やツールなどについて、5段階で自己評価してもらいます
私がスキル傾向を把握しておく、という意味もありますが、学生に自分自身の現状を知ってもらう、そして、受講後の再チェックで成長を実感してもらうことが狙いです
この辺りは Bright の考え方を使っています
資料作成
スキルチェックの結果も踏まえつつ、スライドを作成します
アイスブレイクとして、プログラマーの三大美徳や Stack Overflow Developer Survey などを使ったクイズを入れています
資料内の画像は ChatGPT から Dall-E 3 に作ってもらいました（特に意味はありません）
実施
2024/11/10(日) 大分大学にてハンズオンセミナーを実施しました
やはり実施してみると、学生毎の PC 環境によって色々トラブルが起こり、なかなか思ったようには進みません
よくあった事象
- Windows の場合、コマンドプロンプトと PowerShell でコマンドが違う
- すでに Apache や PostgreSQL をインストールしていた学生もいたため、ポート番号が重複した
- Node.js のインストール時にパスが正しく設定されていなかった
- VSCode 以外の IDE が
codeで動くようになっていた
最後は多少オーバーランしたものの、用意した資料分は実施することができました
元々は資料分の終了後、2時間は各自がサンプルを改造する時間と考えていましたが、そのバッファは消費されました
まとめ
色々苦労もあったものの、無事ハンズオンセミナーを実施することができました
本来であればバージョン管理、コンテナ、クラウドプラットフォームなど、それぞれ半年以上かけて教えたいような内容をギュッと 6 時間に凝縮したので、かなり駆け足にはなっています
それでも、事後アンケートでは「コンテナを使っていきたい」「アプリ開発のイメージがつかめた」などの評価を得られたので、一定の価値はあったように思います
私が実装例として提供したアプリケーションはあくまでも地図アプリケーションのサンプルなので、最終盤のスライドでは、以下のように「ここから先は自分たちで考えて開発すること」を示しています
ここから、サーバーレスで実装してみたり、開発言語を Elixir にしてみたり、全く別のアーキテクチャで作り替える、なんてところまでやってくれたら最高です
