もはや "動くわけのない" 学生時代のシステム達を復活させてみた


みなさん、**学生時代に作ったシステム**って、覚えてますか？
もう動かないとか、そもそもどこにいったか分からない…なんて人も多いんじゃないでしょうか。

最近、リポジトリを整理していて、散らばっているリポジトリを全部GitHubに移行しました。
そのときに、学生の頃に作ったシステムがいくつか出てきて、「おぉ、懐かしい」と思いながら作業してました。

当然もう動かないし、設計書なんか当然作ってない…。
でもせっかくなので、「**動くとこまで復活させてみよう！**」と思い、軽く修正して動かしてみました。

ちなみに今は学生にプログラミングを教える仕事もしているので、
「**自分が学生の時に作ったシステムを復活させてみる**」というのは、
何らかの形で役に立つかもしれないな〜と思ってやってみました。

たぶんリポジトリに入ってない、どこかで眠ってるやつもまだあるとは思うんですが、
今回はまず「リポジトリに残ってるやつ」に絞って復活チャレンジしてます。

セキュリティ？エラーハンドリング？なにそれ？って感じのコードばかりで、バグも盛りだくさん。
エラーは普通に画面にスタックトレースが出ます（笑）

当時は**MVC**とか**MVVM**とか知らなかったし、**フレームワーク**も使わず、素で全部書いてました。
コードはかなりアレでしたが、一応動くものとして公開してみたので、よかったら覗いてみてください👇

https://hts-portfolio-app.onrender.com?v=2

:::note warn
※ Renderの無料枠を使用しているため、アクセス時にWebサービスが止まってることがあります。（Application loading が表示されている状態）
その場合は、数十秒待っていると起動するので、しばらく待ってみてください。
:::

この記事では、そんな「昔の自分が作ったシステム」をどうやって復活させたのか、ゆるっと振り返ってみます。
これからプログラミングを始める方や、学生エンジニアの方には、
「**こんな感じの学生がいたんだな〜**」くらいのノリで読んでもらえたら嬉しいです！

## リホスト作業

### システム構成を調べてみる

当時作っていたのは、基本的に**PHPで構成されたクライアントサーバー型のシステム**。
なので「WebサーバーとDBサーバーの2つを用意すれば動くんじゃない？」というノリで、今回は **Docker** を使ってローカル環境を立ててみることにしました。

ちなみに学生時代は、お手軽に環境構築できる **XAMPP** を愛用してました。

Webサーバー側は特に問題なさそうだったので、まずは**DBのテーブル設計を逆算して復元する作業**からスタート。
具体的には、コードやSQL文を読み解きながら、テーブルの構成やデータ型を地道に推測して再現していく…という、なかなか根気のいる作業です。

当時はプログラミングを学び始めたばかりだったこともあり、コードはかなりカオス状態。
それでも少しずつ修正しながら、なんとか動かせるところまで持っていきました。

そんな感じで、ローカルの構成はこんな形に👇

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/463b7d89-4806-4fef-84b9-03fdef929893.jpeg" width="500">

あとはこれがちゃんと動けば、Docker対応のホスティングサービスにデプロイして公開する…という流れです。

### ホスティングサービスを選ぶ

Dockerコンテナをデプロイするにあたって、無料で使えるホスティングサービスをいろいろ探してみました。
やっぱり使いやすさで選ぶなら **Render** が一番かな、ということで今回はRenderを採用しました。

https://render.com/

学生時代に作ったシステムはすべて **MySQL** で動いていたんですが、Renderでの運用を考えると
**PostgreSQL** に移行したほうが何かと都合が良さそうだったので、ついでに移行作業も行いました。

それから、Renderには **Render Blueprints（IaC）** という便利な仕組みがあります。
インフラ構成をコードで管理できるので、次回以降も簡単に再現できて便利です。

https://render.com/docs/infrastructure-as-code

というわけで、今回は以下のような構成でデプロイしてみました👇

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/c64c660e-b538-4475-b1fc-d3e12cab7c48.jpeg" width="500">

## 学生時代に開発したシステム達

では、Renderにデプロイすることができたので、
実際にどんなシステムを開発していたのか、振り返ってみたいと思います。

### 日常行動スコアシート

https://hts-portfolio-app.onrender.com/nitizyo/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/05fbac39-d988-4ff4-b036-2df821755f05.png" width="600">

これは、私がプログラミングを学び始めてから、一番最初に開発したシステムです。

きっかけは、先生から「**紙のスコアシートをWeb上で作ってみない？**」と言われたことでした。

最初は「**結果を画面に出すだけ**」にしていましたが、「**これ、記録もできたら便利じゃない？**」と考えるようになり、そこから、世の中のシステムがデータを記録する際に、 **データベース** というものを使っていることを知りました。

そんな感じで、クライアントサーバー型のシステムに一歩踏み出すきっかけになったのが、このシステムでした。

### 投票プログラム（統計プログラム）

https://hts-portfolio-app.onrender.com/toukei/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/b97d46a3-5ec3-4833-a805-ca23b9b431f4.png" width="600">

これは、PHPを学び始めたばかりの頃に作ったものですね。

当時は設計の仕方なんてまったく分からず、知識もゼロに近い状態。
とりあえずPHPのリファレンスをひたすら眺めながら、なんとか形にしていった…という感じでした。

デザインのセンスも皆無だったので、**見た目は完全に“お察し”レベル**です（笑）

### ビンゴゲーム

https://hts-portfolio-app.onrender.com/bingo/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/c1b088c2-0a56-4e01-bfaf-717b49c633db.png" width="600">

これは、当時学生の誰かがビンゴゲームを作っているのを見て、
「おっ、自分も作ってみようかな？」と思い立って作ったものです。

ビンゴのアルゴリズムを考えるのが意外と面白くて、
数字のシャッフル方法や、ビンゴの当たり判定をどうやって実装するか、あれこれ試行錯誤した記憶があります。

どうせ作るなら「複数人で使えるようにしたい！」と思い、
**ユーザーごとにビンゴカードをデータベースに保存** してみました。

### 学生掲示板

https://hts-portfolio-app.onrender.com/Bulletinboard/?v=2

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/f5e3522b-6e21-4c4a-8cfe-202fa5c9cff3.png" width="600">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/00310045-9ca4-4510-90e8-e3cb68ec4211.png" width="600">

当時、2chの創設者・ひろゆきさんが話題になっていて、
「2chってPHPで作られてるんだ！」という話を知って、
「**自分も掲示板作ってみよう！**」と勢いで開発を始めたのがきっかけです。

さらに、Facebookがもともと大学内向けのSNSだったという話を知って、
「学生向けの掲示板にするのもアリかも」と思い、
**いろんな学部や学科ごとに分かれた掲示板**を作ってみることにしました。

### 評価システム

https://hts-portfolio-app.onrender.com/Evaluation/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/1f90a011-30d9-4bec-91dc-ceb97ed5240b.png" width="600">

これは、**卒業制作の集計用**に作ったシステムです。

実際に使われることはなかったんですが、
当時は「とりあえず作ってみるか！」という感じで、**勉強がてらチャレンジ**してみました。

### ウェブアンケート

https://hts-portfolio-app.onrender.com/Questionnaire/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/b9f5aa09-15c1-4cf8-ba85-6b4fadfb1796.png" width="600">

これは、**Web上でアンケートを作成して、回答を集めるためのシステム** です。
卒業制作として開発したものですね。

アンケートの種類ごとに、回答の形式などを変えられるようにしていて、
複雑な条件分岐がどんどんと増えていき、実装が大変だった記憶があります。

:::note warn
匿名回答ではエラーになります。
直そうと思いましたが、ちょっと直すのがしんどそうなので放置しています。。
:::

### 数字タイピング

https://hts-portfolio-app.onrender.com/typing/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/07278db2-c390-43fb-bdca-a40b9cd252e0.gif" width="600">

これは、**何かを学ぶためというより、完全に遊び感覚で作ったもの**です。

当時、ブラインドタッチが少しずつできるようになってきた頃で、
アルファベットのタイピングはそこそこできるようになってきたけど、
**数字のタイピングが全然ダメ**だったんですよね。

それで、「**じゃあ練習用のツール作っちゃえ！**」と思って作ったものです。

### 数字当てゲーム

https://hts-portfolio-app.onrender.com/HitNumber/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/5299cf34-b3b1-404a-b647-c1e288ca9767.gif" width="600">

これは、**有名な“2進数”の仕組みを使って数字を当てるゲーム**です。
自分が思い浮かべた数字が、表示されている数字の中に「ある」か「ない」かを選択していくと、最終的に自分が思い浮かべた数字が表示される、というものです。

2進数の考え方を知ったときに「これ、おもしろいな〜！」と思って、
試しにゲームとして形にしてみたのがきっかけです。

### ブロック崩し

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/3259b833-d86a-4f66-965c-8a06fa7ac72b.gif" width="600">

まさしく**ゲームの王道**ですね。

この頃は **オブジェクト指向の考え方** について学び始めた頃で、
**Javaでゲームを作りながら勉強するスタイル**で取り組んでました。

### タイピング戦争

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/ae9eebae-ae53-41ec-a7f2-e6e193015e31.gif" width="600">

これは、当時じわじわ人気が出ていた「**にゃんこ大戦争**」に影響を受けて、
それを真似て、**タイピングゲーム** として作ってみたものです。

タイピングをするとゲージが溜まり、ゲージが一定まで溜まると味方キャラが出撃。
相手の城を落とせば勝ち！というシンプルな仕組みです。
（素材は…すみません、どこから拝借したのか忘れましたが、ありがたく使わせてもらいました🙏）

この作品は、**オブジェクト指向の考え方を学ぶため**にも作りました。
プレイヤーや敵キャラごとにクラスを作成し、「クラス（設計図）」から「インスタンス（実体）」を生成していく…という、
**オブジェクト指向の基本的な流れ**を、この開発を通して体感できました。

### シューティングゲーム

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/7a79a16b-0a73-4860-a98f-a8cfd0b26a69.gif" width="600">

これは、当時ニコニコ動画で話題になっていたアニメ「**チャージマン研**」を題材に、
遊びで作ったシューティングゲームです。

特に何か学び目的があったわけではなく、
**完全にノリと悪ふざけで作ったネタプログラム**ですね（笑）

### Fly Bird

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/ba9e4952-a7ed-4366-a2f2-28d9f2a1e24a.gif" width="200">

これは、かつて流行した「**Flappy Bird**」を真似て作ったゲームです。
キャラクターには、ヨッシーアイランドに登場する鳥のキャラクターを使っています（笑）。

とにかく一度ゲーム制作に挑戦してみようと思い、試しに作ってみたものです。

## おわりに

今あらためてコードを見返してみると、びっくりするほどカオスな書き方をしていて、
思わず「うわぁ…」ってなるんですが、
同時に**当時の自分なりのがんばりや、成長の跡**が見えてきて、なんだかほっこりします。

あの頃はまだAIなんてなくて、**すべて自分の手で、考えて試して作っていた**時代。
でもそれがすごく楽しくて、「自分ってこの頃から**ものづくりが好き**だったんだなぁ」って、しみじみ感じました。

みなさんもぜひ、**昔作ったシステムを思い出と一緒に復活させてみる**のはいかがでしょうか？