Head First JavaScriptプログラミング、第2版

第8章. すべてをまとめる：アプリを作る

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

ツールベルトを装着しよう。つまり、あなたの新しいコーディング・スキル、DOMの知識、そしてHTMLとCSSが入ったツールベルトだ。この章ですべてをまとめて、初めての本当のウェブ・アプリケーションを作成しよう。戦艦1隻と隠れ場所1列のくだらないおもちゃのゲームはもうやめよう。この章では、大きなゲームボード、複数の戦艦、Webページでのユーザ入力など、ユーザ体験全体を構築する。HTMLでゲームのページ構造を作成し、CSSで視覚的にゲームをスタイルし、JavaScriptでゲームの振る舞いをコーディングする。準備しよう：この章では、本格的なコードを書いていく。

今回は、本物の戦艦ゲームを作ろう

確かに、第2章ではちょっとしたバトルシップ・ゲームをゼロから作ったのだから、気分はいいだろう。動くし、遊べるが、友達に自慢できるようなゲームではないし、ベンチャーキャピタルの最初のラウンドを調達するのにも使えない。本当に感動させるには、視覚的なゲーム盤、洒落た戦艦のグラフィック、プレイヤーがゲーム中に自分の手を入力できる方法（一般的なブラウザのダイアログボックスではなく）が必要だ。また、前バージョンを改良し、3隻すべての船をサポートすることも必要だろう。

つまり、このようなものを作成したいのだ：

脳力

JavaScriptのことはちょっと忘れて...上のバトルシップのモックアップを見てほしい。ページの構造と視覚的表現に焦点を当てるなら、HTMLとCSSを使ってどのように作成するだろうか？

HTMLとCSSに立ち戻る

モダンでインタラクティブなWebページやアプリを作成するには、3つのテクノロジーを駆使する必要がある：HTML、CSS、JavaScriptだ。HTMLは構造、CSSはスタイル、JavaScriptは振る舞いだ。しかしこの章では、ただそれを述べるのではなく、完全に体現していこうと思う。まずはHTMLとCSSから始めよう。

最初の目標は、前のページのゲーム盤の見た目を再現することだ。しかし、ただ再現するだけでなく、ゲーム盤を実装して、JavaScriptでプレイヤーの入力を受けて、ヒット、ミス、メッセージをページに配置できるような構造にする必要がある。

それを実現するために、背景に画像を使ってレーダー上のグリッドのような見た目を作り、その上にもっと機能的なHTMLテーブルを置き、その上に（船のような）ものを配置できるようにする。また、プレイヤーの入力を得るためにHTMLフォームを使う。

では、このゲームを作ってみよう。一歩下がって、重要なHTMLとCSSに数ページを費やすつもりだが、それができたら、JavaScriptの準備だ。 ...