第67話 フロントエンド開発の世界
僕は先ほど作った水野屋商品APIの画面を見つめていた。
「これ、千尋に見せても『？』って感じですよね」
ブラウザに表示されているのは、JSON形式の商品データ。桜餅や草餅の情報が英語と記号で表示されているだけで、とても千尋に見せられるような画面ではない。
「そう。だからフロントエンドが必要なんだ」
卓也さんが頷いた。
「JSONデータを綺麗な画面に変換するのがフロントエンドの仕事。
ということで、今度はフロントエンドの画面を作ってみよう」
卓也さんは別のフォルダを開いた。
「俺が用意したNext.jsのプロジェクトがあるから、それを改変してみるか」
「Next.js……なんか難しそう」
僕は名前を聞いただけで身構えてしまった。
「大丈夫。既にあるファイルを少し変更するだけだ。Next.jsはReactのフレームワークの名前だよ」
卓也さんが安心させてくれた。
「`app/page.tsx`っていうファイルを開いてみろ」
言われた通りにファイルを開くと、見慣れないコードが表示された。
「既存のファイル内容を水野屋商品一覧に変更してみよう」
卓也さんが横で指導しながら、僕は以下のようなコードに改変していった。
'use client';
import { useState, useEffect } from 'react';
export default function Home() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch('http://localhost:3000/products')
.then(res => res.json())
.then(data => setProducts(data));
}, []);
return (
<div style={{ padding: '20px' }}>
<h1>水野屋商品一覧</h1>
{products.map((product: any) => (
<div key={product.id} style={{
border: '1px solid #ccc',
margin: '10px',
padding: '10px'
}}>
<h3>{product.name}</h3>
<p>価格: {product.price}円</p>
<p>カテゴリ: {product.category}</p>
</div>
))}
</div>
);
}
「このコード、何をしてるんですか？」
「簡単に説明すると」卓也さんが指差しながら教えてくれた。
・ `useEffect`でページが読み込まれた時にバックエンドと通信する
・ `fetch`でさっき作ったAPIからJSONデータを受け取って、`setProducts`で配列に保存
・ `return`の部分で、その配列を`map`で回して、商品一つ一つを画面に表示してる
「なるほど……データを取ってきて、それを画面に並べてるんですね」
僕にも何となく流れが分かってきた。
「よし、動かしてみるぞ」
卓也さんが`npm run dev`とターミナル（例の黒画面）に入力し、Next.jsサーバーを起動した。
「`localhost:3001`にアクセスしてみろ」
僕はブラウザで指定されたアドレスを開いた。
「うわあ！さっきのAPIのデータが綺麗な画面になってる！」
画面には「水野屋商品一覧」というタイトルの下に、桜餅、草餅、あんみつの情報が見やすく整理されて表示されていた。価格やカテゴリも日本語で読みやすい。
「これがNext.jsとNest.jsの連携だ。フルスタック開発ってやつ」
卓也さんが満足そうに言った。
「これなら千尋に見せても分かりやすい！」
僕は興奮して声を上げた。
「まだ基本の基本だけどな」
卓也さんは苦笑いしたが、僕の興奮は止まらない。
「でも、こんな風に水野屋の商品管理システムが作れるんですね」
「そうだ。フロントエンドは『見た目と操作』、バックエンドは『データと処理』」
卓也さんが役割分担を説明してくれた。
「さっき作ったNest.jsはデータを管理、Next.jsはそれを綺麗に表示」
「だから別々に作ったけど、連携できるんですね」
分離設計の利点が実感できた。別々のサーバーで動いているのに、まるで一つのシステムのように動作している。
僕は今日学んだことを整理してみた。フロントエンド、バックエンド、そしてそれらの連携。最初はバラバラだった知識が、一つの大きなシステムとして繋がっている。
「ところで、卓也さんはどこでこんなに詳しく学んだんですか？」
「筑波大学の情報学群。そこで、基礎から学んだんだ」
筑波大学。以前も話には聞いていたが、改めて技術力の高さを目の当たりにすると、その凄さが実感できる。
「筑波大学では、こういうことをもっと詳しく学べるんですか？」
「そうだな。コンピューターサイエンスの基礎から、最新技術まで体系的に学べる」
卓也さんが真剣な表情で答えた。
僕は改めて考えてみた。今日一日で、僕はバックエンドとフロントエンドを作り、それらを連携させることができた。そして卓也さんのような技術者が学んだ筑波大学に、強い憧れを感じていることに気づいた。
でも、それは単なる憧れなのだろうか。それとも、僕なりの明確な目標があるのだろうか。
そんな僕の心境を見抜いたかのように、卓也さんが少し考え込むような表情を見せてから続けた。
「ついでだから健太、大学について一つ大事なことを言っておきたい」
「はい」
「大学は高校の延長じゃない。全然違う場所なんだ」
卓也さんの言葉に、僕は背筋を正した。
「高校までは『国によって決められたことを学ぶ』場所だった。でも大学は違う。『自分がやりたいことを実現するために学びに行く』場所なんだ」
「自分がやりたいこと……」
「そう。健太は今、千尋ちゃんのために水野屋のシステムを作りたいと思ってる。そういうことが、『やりたいこと』だ。大学は、そういう目標を効率よく実現するための場所として使うべきなんだよ」
卓也さんの話は、僕が今まで持っていた大学のイメージを大きく変えた。
「高校の延長で『なんとなく』大学に行くのは、本当にもったいない。せっかく4年間という時間と、それなりのお金をかけるんだから」
「なるほど……」
「だから、行くべき大学は自分で考えて、自分で決めるべきなんだ」
卓也さんは少し照れたような表情を見せた。
「これは親父の受け売りなんだけどさ、『自分の人生に責任を持てるのは自分だけ』なんだよ。だから自分が一生やることも自分で決めるべきだって」
「一生やること……」
「そう。大学を選ぶときも、その先の人生のことを考えて決めるのがいいと思うぜ」
卓也さんの言葉が、僕の心に深く刻まれた。
「健太の場合、『千尋ちゃんや水野屋のためになるシステムを作れるようになりたい』っていう明確な目標がある。それなら、コンピューターサイエンスを学べる大学を自分で選んで、自分の意志で行くべきだ」
卓也さんは少し間を置いてから、付け加えた。
「もちろん、水野屋に尽くすのがすべてじゃない。将来、違うことをやりたくなるかもしれない。
今は俺の話を聞いて『筑波大学いいなぁ』って思ってるかもしれないが、それは自分の意志でそうなってるのか、俺に言わされているのか、よく考えてほしい」
図星をつかれた僕はドキッとする。
「水野屋さんや彼女のためにするにせよ、それ以外の何かしらのために別の目標を持つにせよ、何をするのかは、自分で決めるべきだ」
「はい……」
「筑波大学の情報学群は、もし今健太が興味を持っているようなウェブエンジニアとしての未来を実現するんだったら悪くない環境だと思う。でも、それも含めて、最終的に決めるのは健太自身だ」
より具体的な進路目標が確立されただけでなく、大学進学そのものに対する考え方が根本的に変わった瞬間だった。
僕には父さんはもういないけど、もし生きていたら卓也さんが話してくれたような、こんな深い話をしてくれたんじゃないかな。少し寂しい気持ちになりつつ、卓也さんに心のなかで感謝するのだった。
◆
家に帰った後、僕は今日のことを千尋に電話で報告した。
「今日、卓也さんから大学のことについてすごく大事な話を聞きました」
「大学のこと？どんなお話ですか？」
千尋の声に関心がこもっていた。
「大学は高校の延長で『なんとなく』行くものじゃないって。自分がやりたいことを実現するために学びに行く場所なんだそうです」
「なるほど……確かにそうですね」
「それで、僕も改めて考えてみたんです。僕が本当にやりたいことって何だろうって」
千尋は少し間を置いてから答えた。
「健太さんは、いつも水野屋のために色々と考えてくださってますよね」
「はい。水野屋さんのことや千尋さんのためにすること、というのは今の僕にとってすごく大事で、同時に楽しいことなんです。でも、これが一生の仕事につながっているのか、って言われるとよくわからないんです。今日卓也さんにそれを突きつけられてしまいました」
「なるほどです。私も、将来のことをもっと真剣に考えないといけませんね。今の今健太さんから卓也さんのお話聞くまで、大学は、なんとなく進学するものだと思っていました」
千尋の素直な言葉が、僕の心に響いた。
「一緒に考えませんか？お互いの将来のこと」
「はい、ぜひお願いします」
千尋と一緒に未来を考えられることが、僕にはとても嬉しかった。
今日、僕はフロントエンドとバックエンドの連携を実際に体験した。データを取得して、それを綺麗な画面に表示する。この基本的な仕組みが理解できれば、もっと複雑なシステムも作れるはずだ。
それに今日は卓也さんが僕に人生の大事な指針を与えてくれた。しっかり自分の未来に向き合おうと思った。
現時点では、千尋のために、水野屋のために、そして自分の将来のために。筑波大学で更に深く学び、本当に役立つシステムを作り上げたい。その先の一生の仕事にそれは果たしてつながっているのか？
自分の人生に責任を持てるのは自分だけだ。
自分で決めないと。
そんな強い想いを抱きながら、僕は今日のことを振り返っていた。
