第55話 動くWebサイトへ
『ちゃんと動く問い合わせフォームまで作って初めて宿題完成だ』
『JavaScriptくらい使えないと話にならない』
卓也さんからさらなるお題を受け取った僕は早速JavaScriptについて調べ始めた。
HTMLやCSSとは全然違う言語のようだった。プログラミングというものに初めて触れる。
「これ、面白そうだな……」
翌日の放課後、足取り軽く情報教室へ向かった。
「先生、フォームを動かすにはどうすればいいですか？実は、注文フォームを作りたいんです。お客さんが商品名や数量を入力して送信ボタンを押すと、注文内容がスプレッドシートに自動で更新される仕組みを作りたいんです。山田のお兄さん……卓也さんからはJavaScriptを使うように言われているので」
「おお、なかなか本格的だね。その通り。JavaScriptが必要だね。いよいよプログラミング言語の領域に入るよ」
プログラミング！これができるようになったら僕はプログラマと名乗ってもいいのだろうか。
小林先生は少し考え込むような表情を見せた。
「HTMLとCSSは『マークアップ』と『スタイリング』だったけど、JavaScriptは『プログラミング』なんだ。これまでとは全然違う考え方が必要になる」
「どう違うんですか？」
「HTMLとCSSは『こう表示してください』という指示書みたいなもの。静的なんだ。一方で、JavaScriptは『この条件の時はこれをして、あの条件の時はあれをして』という動的な処理を書くんだ」
小林先生はブラウザを開いて、簡単なJavaScriptのサンプルを見せてくれた。
「まずは基本的な構文から。変数、関数、イベント処理について説明するね」
小林先生は丁寧に基礎から説明してくれる。
「まず変数だ。これは値を入れておく箱のようなもの。例えば、`let userName = '健太';` と書けば、userNameという箱に'健太'という文字を保存できる」
「なるほど、箱に名前を付けて保存するんですね。みたいな感じですかね」
「次に関数。これは決まった処理をまとめておく仕組みだ。`function checkForm() { ... }` のように書いて、フォームのチェック処理をひとまとめにできる。必要な時に `checkForm()` と呼び出すだけで処理が実行される」
「おお、一度作った処理を名前を付けて保存しておいて、必要な時に呼び出せるんですね。便利ですね！」
「そして一番重要なのがイベント処理。これはユーザーがボタンを押したり、文字を入力したりした時に、何をするかを決める仕組みだ。例えば送信ボタンがクリックされた時に、入力内容をチェックして送信する、というように」
「あー、ユーザーの動作に反応するんですね！ボタンを押したら何かが起こる、みたいな」
「変数で情報を保存し、関数で処理をまとめ、イベント処理でユーザーの操作に反応する。この3つを組み合わせることで、動的なWebサイトが作れるんだ」
「なるほど……！」僕は興奮しながら手を叩いた。
「じゃあ実際に簡単なコードを見てみよう」
小林先生は画面に実際のHTMLとJavaScriptを組み合わせたコードを表示してくれた。
```html
<!DOCTYPE html>
<html>
<head>
<title>問い合わせフォーム</title>
</head>
<body>
<form>
<label>お名前：</label>
<input type="text" id="name" placeholder="お名前を入力してください">
<label>メールアドレス：</label>
<input type="email" id="email" placeholder="example@email.com">
<button type="button" id="submitBtn">送信</button>
</form>
<script>
function checkForm() {
let userName = document.getElementById('name').value;
let userEmail = document.getElementById('email').value;
if (userName === '') {
alert('お名前を入力してください');
return false;
}
if (userEmail === '') {
alert('メールアドレスを入力してください');
return false;
}
alert('送信しました！ありがとうございます');
return true;
}
document.getElementById('submitBtn').onclick = checkForm;
</script>
</body>
</html>
```
「おお……これが実際のコードですね！HTMLやCSSとは全然違う……」
僕はコードをじっと見つめた。コードとにらめっこする。
「──このコード、ボタンがクリックされた時にcheckForm関数が呼び出されて、その関数の中で名前やメールアドレスが空の時はエラーメッセージを出して、全部入力されていたら送信完了メッセージを出すんですね！」
「その通り！よく理解できたね。このコードで一番重要なのは、『もし～だったら～する』という条件分岐の考え方だよ」
プログラミング的思考を初めて体験した。これまでの「見た目を作る」技術とは根本的に異なる。条件分岐、ループ、関数……全く新しい概念だった。
「これめっちゃ面白いですね」
「はは！佐藤くんは教えがいがあるね」
僕は家に帰って早く自分でプログラムを組んでみたくてウズウズしていた。
◆
帰宅後、CSSやBootstrap学習の時と同じように、JavaScriptに夢中になった。
夜、自宅で学習を続けた。名前とメールアドレスの入力チェックを実装する。空欄エラー、メール形式チェックの処理を一つずつ作っていく。
一通り処理がわかったところで早速フォーム部分の実装に取り組む。
何度もエラーが出て、何度も修正を繰り返す。
「あ、エラーメッセージが出た！」
少しずつ動作するフォームになっていく。
深夜まで格闘を続け、フォーム送信時の処理を作成した。送信完了メッセージの表示、「ありがとうございました」画面の実装。
気がつくと、また深夜2時を回っていた。でも楽しくて止められない。
「やった……動いてる！」
実際にフォームに入力して送信ボタンを押すと、きちんとエラーチェックが働き、送信完了メッセージが表示される。
翌日、最終テストを行った。PC、スマホでの動作確認。フォーム送信の動作も問題ない。
小林先生に教わった通り、FTPクライアントで更新したJavaScriptファイルをアップロードする。
「今度こそ完璧だ……」
翌朝、卓也さんへの最終報告をした。
『山田さん、問い合わせフォーム完成しました』
更新されたURLを送信する。
しばらく経って、卓也さんが実際にフォームをテストしたようだった。
『……まあ、やっと宿題完成だな』
『……！』
内心で叫ぶ。ついに……長かった。
HTML、CSS、Bootstrap、FTP、JavaScript。振り返ると、随分といろんな技術を学んだ。最初はGoogleサイトすら満足に使えなかった僕が、ここまで来れるなんて。
『本格的に面倒をみてやろう……といいたいところなんだが、年末に納品が会って、仕事がかなりバタバタしてるんだ。年明けにうちに来い。次のステップにいこう』
『はい！』
新たなステージへの意欲が湧いてきた。
『だが、せっかくの冬休み、手持ち無沙汰じゃもったいない。次にまとめた内容を勉強しとけ』
そのあと、メッセージに冬休みの勉強リストとして、Linux, AWS, React.jsとまとめられていた。
俺達の冒険は始まったばかりだ！！！
ということらしい。冬休みも勉強漬けになりそうだ。
