prompt APIの使い方

Typescript HTML API

HTMLのprompt APIとは

HTMLのPrompt APIは、ブラウザ上でユーザーにプロンプトを表示するための機能です。
これを使用することで、JavaScriptを使ってユーザーから情報を収集したり、ユーザーに何らかのアクションを促したりすることができます。
通常、window.prompt()メソッドを用いて実現します。

以下は、HTMLのPrompt APIを使用する基本的な例です。

<!DOCTYPE html>
<html>
<head>
    <title>Prompt API Example</title>
</head>
<body>
    <h1>Prompt API Example</h1>
    <button onclick="showPrompt()">Show Prompt</button>

    <script>
        function showPrompt() {
            // プロンプトを表示し、ユーザーの入力を取得
            var userInput = window.prompt("Please enter your name:");

            // ユーザーが入力した内容を表示
            if (userInput !== null) {
                document.body.innerHTML += "<p>Hello, " + userInput + "!</p>";
            } else {
                document.body.innerHTML += "<p>No input received.</p>";
            }
        }
    </script>
</body>
</html>

この例では、ボタンがクリックされるとshowPrompt()関数が呼び出され、window.prompt()メソッドを使ってプロンプトが表示されます。
ユーザーが名前を入力すると、その名前がHTMLの本文に追加されます。
ユーザーがキャンセルを押した場合は、「No input received.」というメッセージが表示されます。

使い方のポイント

ユーザーの入力を促す:
Prompt APIは、ユーザーに短いメッセージを入力させるのに適しています。
簡易なインタラクション:
簡単なインタラクションや確認が必要な場面で使用できます。
セキュリティとユーザー体験:
過度に使用するとユーザー体験が悪化するため、適切な場面での使用を心がけます。

Prompt APIはシンプルで便利ですが、ユーザー体験を考慮しつつ、適切な場面での使用を検討することが重要です。

TypeScriptでprompt APIを使った処理の実装

TypeScriptでpromptを使った処理を実装するには、基本的にはJavaScriptのprompt関数と同じ方法で行います。
TypeScriptはJavaScriptのスーパーセットであるため、JavaScriptの機能をそのまま使うことができます。
ただし、TypeScriptの型システムを活用して、コードの安全性と可読性を向上させることができます。

以下に、TypeScriptでpromptを使用する例を示します。
この例では、ユーザーに名前を入力させ、その名前を表示する簡単なプログラムを作成します。

// index.html
<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Prompt Example</title>
</head>
<body>
    <h1>TypeScript Prompt Example</h1>
    <button id="promptButton">Show Prompt</button>
    <script src="dist/bundle.js"></script>
</body>
</html>

// main.ts
// TypeScriptコード
function showPrompt(): void {
    // TypeScriptではnullの場合に備えた型定義が必要
    const userInput: string | null = window.prompt("Please enter your name:");

    if (userInput !== null) {
        const message: string = Hello, ${userInput}!;
        document.body.innerHTML += <p>${message}</p>;
    } else {
        document.body.innerHTML += "<p>No input received.</p>";
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const promptButton = document.getElementById('promptButton');
    if (promptButton) {
        promptButton.addEventListener('click', showPrompt);
    }
});

この例では、promptを使用してユーザーからの入力を取得し、それに基づいてメッセージを表示する基本的な処理をTypeScriptで実装しています。
Webpackを使用してTypeScriptコードをバンドルし、ブラウザで実行できるようにしています。