IT留学のアプリ発表会！生徒さんと僕が、AIと作った2つのアプリを紹介

2026年10月28日
講座/実践

アクトハウスのミーティングスペースで、スクリーンの前に立って発表する様子と、聞いている生徒さんたち — アプリ発表会の様子

こんにちは！セブ島IT留学「アクトハウス」スタッフのいっちーです。

10月27日、アクトハウスでアプリ発表会を開きました。在籍している生徒さん全員が参加してくれて、生徒さんのSoumaさんと僕が、それぞれ作ったアプリを発表しました。

発表したのは、Soumaさんの「Fast Code Typing」と、僕の「Cebu Café Map」の2つです。どちらもAIを使って作りました。画面側にはJavaScriptを使っていて、PHPは使っていません。

Fast Code Typingは、なぜ作ったの？

Soumaさんは、留学前からタイピングを練習していて、日本語はかなり速くなったそうです。タイピングゲームの「寿司打」では、5000円コースで約3000円だったところから、10000円コースで1万2000〜3000円ほどまで出るようになったと話していました。

でも、セブに来てコードを書くと、< > / { } ; : " ' = のような記号で手が止まります。「留学前に、記号にもっと慣れておけばよかった」。その思いが、アプリを作ったきっかけでした。

どんなアプリなの？

HTMLとCSSの実際のコードを、全部で180問打ち込むアプリです。初級・中級・上級があって、5問で1セット。コードの意味は考えず、まずは打って記号に慣れることがねらいです。画面は、CursorやVS Codeのようなテキストエディタに寄せていて、見た目から慣れてもらう作りになっています。

結果は、見習いコーダー（D）から伝説のコーダー（SSS）まで13段階のランクで出ます。スコアは「入力速度×正確率の2乗」で、速さより正確さを重く見ています。低いスコアほどランクを細かく刻んで、初心者でも上達を実感できるようにしたそうです。

効果音は、どうやって作っているの？

おもしろかったのは、効果音です。音声ファイルは使わず、ブラウザの機能（Web Audio API）で、その場で音を作っています。音の元・音量・スピーカーの3つをつなぐだけで、最小のコードは49行でした。

場面ごとに4種類の音を作り分けています。正しく打ったときは「ポッ」、ミスタイプは「ブゥン」。スタートの合図は「ポーン」で、5問を打ち終えるとド・ミ・ソの和音が鳴ります。発表の途中では、鍵盤のように音階を鳴らして、ピアノの音も聞かせてくれました。

AIとは、どう付き合ったの？

制作は、ClaudeとCursorを使って、9月30日から10月21日までの約3週間だったそうです。まず仕様書を書いて、AIの「判断の基準」にします。仕様書は最終的にv1.39（変更履歴40件）になり、コミットは130回、プルリクエストは約50件。AIが実装したものを、自分で確認してからマージして、10月21日に独自ドメインで公開したそうです。

Soumaさんが一番強く感じたのは、「AIは作業員として使う。どうするかを決めるのは自分」ということ。開発のスピードと調べる力には助けられた一方で、頼んでいない所まで直されることもあったそうです。だから、仕様とデザインは自分で決めて、AIのアイデアは鵜呑みにしない。「最終判断は自分でする」と話していました。

Cebu Café Mapは、どんなアプリ？

ここからは、僕の発表です。作ったのは、セブのカフェを探す地図アプリ「Cebu Café Map」。技術の話は難しく聞こえやすいので、アプリを「お店」に例えて話しました。画面（Next.js）がお店のホール、API（FastAPI）が注文を聞く受付係、データベース（Supabase）が倉庫です。地図の表示にはMapboxを使っています。

使う人が条件を選ぶと、地図が変わります。電源コンセントの有無・カード払い・Googleの評価・Wi-Fiの速さなどで絞り込めて、選ぶたびに条件に合う店の数もすぐ変わります。