Company Information App
会社名:
以下はJavaScriptを使用して実装した例です。ユーザーが入力した会社名に応じて、各情報を表示する処理を行います。また、不正な入力がされた場合や、検索結果が存在しなかった場合には、エラーメッセージを表示します。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Company Information App</title> <script> function searchCompany() { // 入力された会社名を取得 var companyName = document.getElementById("companyName").value; // 入力内容のチェック if (!companyName) { alert("会社名を入力してください。"); return; } // XHRでAPIを叩いて結果を取得 var xhr = new XMLHttpRequest(); xhr.open("GET", "https://company-info-api.com/" + companyName); xhr.addEventListener("load", function() { var result = JSON.parse(xhr.responseText); if (!result || !result.capital || !result.sales || !result.profit || !result.activity || !result.history) { alert("情報が見つかりませんでした。"); } else { // HTMLに情報を表示 var resultHtml = "【" + companyName + "】<br>" + "資本金:" + result.capital + "円<br>" + "売上:" + result.sales + "円<br>" + "営業利益:" + result.profit + "円<br>" + "活動内容:" + result.activity + "<br>" + "<hr>" + result.history; document.getElementById("result").innerHTML = resultHtml; } }); xhr.send(); } </script> </head> <body> <h1>Company Information App</h1> <p>会社名:<input type="text" id="companyName"></p> <button onClick="searchCompany()">検索</button> <div id="result"></div> </body> </html> ``` ジョークとしては、検索画面に「会社名はユーザー名やパスワードにしないでください。」という注意書きを加えることができます。