第65話 Web開発の全体像
受験勉強の話が一段落した後、卓也さんが改めて僕の方を向いた。
「ところで、さっき言ってたReact+TypeScriptの件だが」
「はい」
「具体的にどこで詰まってるのか、詳しく聞かせろ」
「わかりました」
僕は改めて混乱状況を整理して話し始めた。
「実は全部ゴチャゴチャになってて……React、TypeScript、Node.js、それぞれ勉強してるんですが、どれがどの役割なのか、どういう順番で覚えればいいのか、さっぱり分からなくなってしまって」
「ふーん」と唸ると、卓也さんは腕組みをして少し考え込んでから、意外な質問をした。
「健太、料理って何から始める？」
「え？ 料理ですか？」
突然の質問に戸惑った。
「材料を用意して、下準備して、調理して……」
「そうだ。料理をするときには段階があるだろう。Webアプリも同じなんだよ。いきなり全部やろうとしたら失敗する」
卓也さんはそう言いながら、自分のパソコンを起動した。
「ちょっと実際に見せてやる」
画面には、見覚えのあるコードエディタが表示された。
「千尋ちゃんが注文フォームに『桜餅 5個』って入力したとする」
卓也さんは実際にコードを書きながら説明し始めた。
「まず、フロントエンド。これは千尋ちゃんのスマホやパソコンで動く画面だ。ここに『桜餅 5個』って入力する」
画面上に注文フォームのような画面が表示された。
「次に、その情報がインターネットを通してバックエンドサーバーに送られる。バックエンドは別のコンピューター上で動いてる裏方の処理システムだ」
コードが動いて、データが別の画面に表示された。
「そして、バックエンドがさらに別のコンピューターにあるデータベースサーバーに接続して、在庫を確認したり注文を記録したりする」
さらに別の画面が表示され、データが保存される様子が見えた。
「最後に、データベースからの結果がバックエンドサーバーに戻ってきて、それがまたインターネットを通してフロントエンドに送られて、千尋ちゃんに『注文を受け付けました』って表示される」
卓也さんは画面上で3つの異なる領域を指差しながら説明した。
「つまり、フロントエンド、バックエンド、データベースは、それぞれ別々のコンピューター上で動いているんだ」
僕は思わず手を上げて質問した。
「あの、水野屋のWordPressサイトはどうなんですか？ あれは僕のパソコンで触ってますが……」
「ああ、いい質問だ」
卓也さんが満足そうに頷いた。
「実は水野屋のWordPressも同じ仕組みなんだよ。君のパソコンでWordPressを触ってる時、実際には君のパソコンから、クラウド上にある別のコンピューター（サーバー）にアクセスしてるんだ」
「え、そうなんですか？」
「そう。WordPressの管理画面は君のブラウザで表示されてるフロントエンド、WordPressのシステム自体がバックエンド、そして記事やユーザー情報を保存してるのがデータベース。全部別々のサーバーで動いてる」
卓也さんは手を使って説明した。
「君が記事を書いて『公開』ボタンを押すと、その情報がインターネットを通してWordPressサーバーに送られて、データベースに保存される。そして千尋ちゃんがサイトを見る時は、また別のリクエストでデータベースから情報を取得して表示してる」
「うわあ……知らなかった。僕のパソコンで全部やってるつもりだったのに」
「待てよ」
卓也さんが少し意地悪そうに笑った。
「もし本当に君のパソコンで全部やってるなら、千尋ちゃんが携帯から水野屋のサイトを見ることできないだろ？」
「あ……」
その通りだった。千尋は自分のスマホからいつでも水野屋のサイトを見ることができる。僕のパソコンが電源オフでも。
「だから君は既に分散システムを使ってたんだよ。ただ、WordPressが全部やってくれてたから意識しなかっただけ」
一連の流れが視覚的に分かって、僕は興奮した。
「あ！ 千尋のためのシステムが実際にこうやって動いてるのか！」
急に全体像が見えてきた。今まで別々に勉強していた技術が、全部繋がっている。
「そういうことだ。恋愛脳で技術覚えるとか、新しいタイプだなお前」
卓也さんが苦笑いした。
「お前の場合、千尋ちゃんの水野屋システムを軸に学習しろ」
「どういうことですか？」
「在庫管理システムをバックエンドで作って、注文管理をデータベースで覚えて、顧客画面をフロントエンドで作る。実際に使うシステムだから、覚えるのも早いし、千尋ちゃんも喜ぶ」
なるほど。実用性と恋愛動機を組み合わせた学習法だ。
「実は俺も最初、好きな子のためにプログラミング始めたんだよ」
卓也さんが意外なことを言った。
「本当ですか？」
「筑波大学にいた時、同じサークルの子がWebサイト作ってて。その子に振り向いてもらいたくて、必死にプログラミング覚えた」
「それで、どうなったんですか？」
「まあ、その話は今度にしよう」
卓也さんは話をそらしたが、少し照れたような表情をしていた。
「とにかく、技術って、誰かを喜ばせたい気持ちがあると覚えが早いんだ。お前のアプローチは間違ってない」
僕の「愛による学習」にお墨付きをもらえて、少し安心した。
「よし、理論はこれくらいでいいだろう。まずはバックエンドからだ」
卓也さんが立ち上がって、パソコンの前に戻った。
「えっ、今からやるんですか？」
「百聞は一見にしかず。実際に動いてるのを見せてやる」
僕は大満足で帰路についた。
今まで混乱していた技術が、千尋のためのシステムという明確な目標で整理された。そして、卓也さんも昔は恋愛でプログラミングを覚えたという話を聞いて、僕のアプローチが間違っていないことが分かった。
受験勉強7割、技術学習3割。その3割をより効率的に活用する方法が見えてきた。
電車の中で、僕は今日のことを千尋に報告しようと思った。きっと喜んでくれるだろう。
そして、今日教わった技術で、水野屋をもっと便利にしてあげたい。そんな気持ちで胸がいっぱいだった。
