実践編～JavaScriptで格言ガチャを作ろう～【JavaScriptの書き方入門】

はじめてのWebデザインシリーズで作成しているエドベース社の社長さんから、追加の要望がありました。
会社概要のページに、お気に入りの格言を載せたいそうです。

おみくじみたいに、ボタンをクリックしたらどれか１つ格言が表示されるようにして欲しい。場所は会社概要の上にお願い。

とのことです。

このご要望を、JavaScriptを使って叶えてみましょう。

• 実践編の素材に関して
• ガチャ用スクリプトの仕組みを考える
• HTMLで枠組を用意する

実践編の素材に関して

HTMLの書き方入門&CSSの書き方入門を受講された方は、作成したcompany.htmlを使用して下さい。

講座で使用したデモコードもご用意しています。
下記ボタンからDLして、ご利用頂くこともできます。

ダウンロードはこちら

ガチャ用スクリプトの仕組みを考える

どうすれば格言ガチャが作れるか、まず仕組みを考えてみましょう。

HTMLファイルの方には、下記２つのバーツが必要そうです。

• 格言を表示するスペース
• 格言を表示/入れ替えするボタン

次にJavaScript。
下図がガチャ機能のイメージです。

HTMLで枠組を用意する

最初にhtmlの方から作っていきましょう。
格言ガチャを表示する枠組みを作ります。

ここ！とマークされていたのは会社概要の上でした。
company.htmlの<main>タグ下にガチャのパートを追加します。

company.html

<div class="row">
    <main>
        <h2>格言ガチャ</h2>
            <div id="gacha-display">
                社長が感銘を受けた格言集！<br>
                下記ボタンをクリック/タップで表示します。
            </div>
            <button id="gacha-button">格言を表示</button>
        <h2>会社概要</h2>

ここからは、JavaScriptと連携させていく必要があります。

ガチャ用のjsファイルを作成し、htmlから読み込めるように設定しておきましょう。
ファイル名はわかりやすく「gacha.js」にしました。

次回、gacha.jsの中身を作って行きましょう！