名言ジェネレーター

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「名言が表示されるようなアプリケーション」についてお伝えしていきます。

JavaScript を使用してランダムな名言を表示するシンプルなアプリケーションを作成します。

ユーザーがボタンをクリックするたびに新しい名言が表示されるようなアプリケーションです。

プロジェクトのセットアップ

最初に、新しいプロジェクトフォルダを作成し、その中に以下の 3 つのファイルを作成します。

index.html: アプリケーションの基本的な構造を定義します。
styles.css: アプリケーションのスタイルとデザインを設定します。
app.js: JavaScript コードを記述します。

以下は index.html ファイルの内容です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名言ジェネレーター</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>名言ジェネレーター</h1>
    <p id="quote"></p>
    <button id="generateButton">新しい名言</button>
    <script src="app.js"></script>
</body>
</html>

アプリのデザイン

アプリのデザインを設定するために、styles.css ファイルをカスタマイズします。

フォント、色、ボタンのスタイルなど、アプリの外観を調整しましょう。

アプリの機能の追加

JavaScript コードを使用して、名言をランダムに表示するアプリの機能を追加しましょう。

// app.js
const quotes = [
    "成功は1%のひらめきと99%の努力から生まれます.", // 名言リスト
    "夢を持つことは素晴らしいことです。しかし、それを実現するために行動することが大切です.", // 名言リスト
    "失敗は成功の母です.", // 名言リスト
    "人生は続ける者に報いを与えます.", // 名言リスト
    "明日死ぬかのように生きなさい。永遠に生きるかのように学びなさい." // 名言リスト
];

const quoteElement = document.getElementById("quote"); // 名言を表示する要素
const generateButton = document.getElementById("generateButton"); // 名言を生成するボタン

generateButton.addEventListener("click", function () {
    const randomIndex = Math.floor(Math.random() * quotes.length); // ランダムな名言を選ぶためのインデックス
    const randomQuote = quotes[randomIndex]; // ランダムな名言
    quoteElement.textContent = randomQuote; // 名言を表示
});