1.未完成のタイピング練習サイトを題材に選んだ理由｜Phase1｜タイピング練習サイトPHP化編（基礎固め）
本記事の位置づけ
本記事は、本シリーズにおける Phase 1 の入口である。
ここでは「完成したプロダクトを作る」ことは目的としない。設計や実装を考えるための 題材として、どのような性質を持つものを選ぶかその判断基準を明確にする。
以降のフェーズでは、この題材を使って API 設計やデータフロー整理を行うが、本記事はそれらの 前提条件を定義する章である。
このシリーズの最初の題材として、私は「未完成のタイピング練習サイト」を選んだ。新しく何かを作るのではなく、すでに GitHub で公開している、HTML/CSS/JavaScriptだけで完結したサイトをベースにしている。
理由はシンプルで、学習効率を最優先したかったからだ。ゼロから新規に作ると、どうしても「画面を作る」「動くところまで持っていく」ことに意識が引っ張られる。一方で、既に動いているものがあれば「なぜこうなっているのか」、「ここに何を足せばいいのか」という思考に集中できる。今回は0 → 1よりも、1 → 1.5を狙った。
あえて扱わないこと
本フェーズでは、以下の要素は意図的に扱わない。
- 本番運用を前提とした認証・認可の完成形
- セキュリティ事故を想定した運用設計
- 大規模ユーザーを想定したスケーラビリティ
これらは重要であるが、設計の初期段階で同時に扱うと「なぜそう設計したのか」という思考過程が見えなくなる。そのため本シリーズでは、一度 自前で設計を考えるフェーズ を通過したうえで、後続フェーズにて判断を見直す構成を採用する。
このタイピングサイトは、PHP化の作業中も フロントエンドだけで完結している状態を維持している。つまり、PHP化は「置き換え」ではなく「拡張」だ。実務で言えば、ベータ版と正式版、あるいはフリーウェアとシェアウェアの分かれ目に近い。既存の体験は壊さずに、裏側の構造だけを段階的に変えていく。
既存のHTML/JS資産は、そのまま使う。無理に書き直さない。それは手抜きではなく、「現実の開発に近づける」ための割り切りだ。実務では、きれいな状態から始まることの方が少ない。多少いびつでも、動いているものを前提に考える力が必要になる。
もちろん、未完成なものを題材にする以上、割り切りも必要だ。機能は最小限に留めるし、見た目の完成度も追わない。その代わり「なぜこの構成なのか」、「ここで詰まりそうだ」を言語化できる状態を目指す。
この章の結論はひとつだけだ。完成度よりも、考えどころが残っている題材の方が学習には向いている。次の章では、このフロントエンド完結のサイトに、なぜサーバーサイドを足す必要があるのかを整理していく。
次の記事からは Phase 1 を継続し、このタイピング練習サイトを題材に、
- フロントエンドだけでは何が足りないのか
- なぜサーバーサイドを分離するのか
- API という境界をどう設計したのか
を順に整理していく。
なお、認証やセキュリティに関する最終判断は、設計を一通り整理した後の Phase 1.5 にて改めて扱う。
Discussion