ホーム自己紹介ブログ
NO.168
DATE2025. 11. 16

9年前の学生の自分が作ったWebアプリを懐かしむ

久々に Google Drive のフォルダを整理していたところ、学生時代に作った Web アプリの資料が見つかりました。
開発したのは 2016年、今から9年前 。
当時の自分の技術スタックや開発の進め方を思い出しながら、ちょっと懐かしく振り返ってみます。

当時作っていた Web アプリ

私が作っていたのは、 動画をアップロードしてコマ画像を抽出し、好きなコマを選んで並び替え Gif 画像に変換するアプリ です。
生成した Gif は掲示板に投稿でき、コメントもつけられるという、シンプルながら機能が詰まったサービスでした。

トップページ
Gif画像掲示板

Gif 作成まわりのフローはこんな感じでした。

Gif作成 - 動画アップロード中
Gif作成 - 動画から画像を抽出
Gif作成 - 画像を並び替えてGifに変換

当時はもちろん Figma も触っておらず、Web デザインはすべて手書きの HTML と CSS。
インタラクティブな部分は jQuery、ビューは EJS を使っていました。

使用していた技術

  • サーバサイド: Node.js + Express v3.5.1
  • ビュー: EJS
  • フロント: jQuery
  • データベース: MongoDB
  • ストレージ: Dropbox
  • 動画 → Gif 変換: ffmpeg
  • 一時ファイル削除: cron

S3 を使う発想はなく、Dropbox に動画や分割した画像を保存していました。 抽出した画像を ffmpeg で Gif に変換するフローは、いま思えばよく組めていたなと感じます。

学生時代の開発環境

当時の開発環境もなかなか味わい深いものでした。

  • サーバー: さくらのレンタルサーバ
  • バージョン管理: Git なし(フォルダにそのまま保存)
  • コードアップロード: WinSCP
  • SSH 接続: たぶん TeraTerm
  • デプロイ: SSH 接続 → npm install → express start
  • アクセス: IP アドレス + Express のデフォルトポートに直アクセス

いまのように AWS や Vercel が当たり前の時代ではなかったので、この運用でも特に疑問を持たず使っていました。

資料(2016年当時の画面設計・構成図など)

画面構成やシステム構成は、Microsoft Visio を使って作成していました。
UI デザインツールを持っていなかったので、Visio の図形を組み合わせてポンチ絵を作っていた記憶があります。

画面構成
システム構成

当時読んでいた本

当時の私は、大学では C 言語や Java を学んでおり、Web 系の開発経験はほぼゼロでした。
友人に「今は Node.js が流行っているらしい」と聞き、手探りで買ったのがこの本でした。
なんとなく、やってみたい!という気持ちだけで購入した記憶があります。

  • はじめてのNode.js - サーバーサイドJavaScriptでWebアプリを開発する

当時の知識は IT パスポート程度で、

  • ターミナル操作は初めて
  • Node.js や Express のバージョンが書籍と手元で違うことを理解していない
  • HTML/CSS を写経したことがある程度
  • サーバ、データベース、ストレージの概念がほぼゼロ

という状態でした。

それでも本を何度も読み返し、エラーに何度もつまずきながら、少しずつ動く形に近づけていきました。
気づけば、表紙が擦り切れるほど読み込んでいた気がします。(たぶん1年以上)

終わりに

今では、AI に任せれば、それっぽい Web アプリが簡単に作れる時代です。
Git Push するだけで、自動的にデプロイまで完了させることもできます。

それでも、学生時代に身につけた 「エラーが起きたときに原因を探る洞察力」 や
「分からない領域を少しずつ自分の理解に置き換えていく地道な作業」 は、今の自分にとって確かな財産になっています。

雑談

-

読者になる

|

シェアする

|

silverbirders

silverbirder

Webソフトウェアエンジニア

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

0

読み込み中...

次の記事へ前の記事へ

関連する記事

タグ「雑談」の記事

AIエージェント、マルチよりシングルの方が効率良いのでは

私は、AI エージェントのマルチタスクをしたことがない人です。 そのため、この記事はただの偏見です。 定量的なデータも示さないため、ふわふわとしたポエムです。 マルチタスク 複数のタスクを並列で進めるとします。 Web開発者であれば、AI

2026年03月19日

AI
雑談
仕事
プログラマと爪切り

ちょっとでも爪が伸びると、良いコードが書けない気がします。 白い爪が少し伸びると、すぐ切りたくなります。 深爪にならないように、ほどよいところまで切って伸ばしてを繰り返しています。 爪切りはなんでも 爪切りにこだわりはありません。 どこで買

2026年03月16日

雑談
ホワイトデー

今日はホワイトデーです。 バレンタインデーで妻からチョコを貰ったので、お返しにマカロンを渡しました。 バレンタインデーの日の洋菓子屋は大混雑していたのに、ホワイトデーの今日はスカスカでした。 訪れた洋菓子屋さんも、ホワイトデーの広告や宣伝が

2026年03月14日

雑談
← ブログ一覧へ