概要
ここまでで3.JavaScriptの文法と構文について、学習を行いました。
学習した内容としては、変数、配列、データ型、関数、条件分岐、ループ、オブジェクト
プロトタイプ、クラス、イベント処理、コールバック関数、非同期処理 という感じです。
今回はこれまでのおさらいも兼ねて、簡単なWebサイト作りをしてみます。
※無料版なので、誤っている情報もあると思いますが、アウトプットできれば良しとします。
簡単なWebサイト
今回はプロフィールサイトを作ってみたいと思います。
まずは基となるhtmlを作ってもらいます。
【質問】
簡易的なプロフィールサイトのhtmlを作ってください。
【回答】
以下は簡単なプロフィールサイトのHTMLの例です。あくまでもサンプルとしてご参考ください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>プロフィールサイト</title>
</head>
<body>
<header>
<h1>自己紹介</h1>
</header>
<section>
<h2>基本情報</h2>
<ul>
<li>名前：山田太郎</li>
<li>年齢：25歳</li>
<li>所属：○○株式会社</li>
<li>職業：エンジニア</li>
</ul>
</section>
<section>
<h2>スキル・言語</h2>
<ul>
<li>プログラミング言語：Python, Java, JavaScript</li>
<li>フレームワーク：Django, React</li>
<li>その他スキル：AWS, Git</li>
</ul>
</section>
</body>
</html>
簡易的ですが、プロフィールサイトのひな形ができました。
少し味気ないですが、一旦これで進めます。
このサイトにプログラミング言語を追加できるようにします。
【質問】
JavaScriptでプログラミング言語を追加できるようにしてください。
【回答】
以下はJavaScriptで上記のHTMLのプログラミング言語を追加する方法です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>プロフィールサイト</title>
</head>
<body>
<header>
<h1>自己紹介</h1>
</header>
<section>
<h2>基本情報</h2>
<ul>
<li>名前：山田太郎</li>
<li>年齢：25歳</li>
<li>所属：○○株式会社</li>
<li>職業：エンジニア</li>
</ul>
</section>
<section>
<h2>スキル・言語</h2>
<form>
<label for="prog-langs-input">プログラミング言語:</label>
<input type="text" id="prog-langs-input" name="prog-langs-input">
<button type="submit" id="submit-btn">修正</button>
</form>
<ul>
<li>プログラミング言語： <span id="prog-langs"></span> </li>
<li>フレームワーク： <span id="frameworks"></span> </li>
<li>その他スキル： <span id="other-skills"></span> </li>
</ul>
</section>
<script>
//配列定義
let progLangs = ["JavaScript"];
const frameworks = ["Django", "React"];
const otherSkills = ["AWS", "Git"];
//HTML要素を取得
const progLangsEl = document.getElementById("prog-langs");
const frameworksEl = document.getElementById("frameworks");
const otherSkillsEl = document.getElementById("other-skills");
const inputEl = document.getElementById("prog-langs-input");
const submitBtn = document.getElementById("submit-btn");
//配列の内容で置き換え(コンマとスペースで連結)
progLangsEl.textContent = progLangs.join(", ");
frameworksEl.textContent = frameworks.join(", ");
otherSkillsEl.textContent = otherSkills.join(", ");
//フォーム送信イベントのリスナーを登録
submitBtn.addEventListener("click", (event) => {
event.preventDefault(); //submitボタンのデフォルト動作を無効化
const newLang = inputEl.value.trim(); //入力内容を取得（先頭と末尾の空白を除去）
if (newLang !== "") {
progLangs.push(newLang); //新しい言語を配列に追加
progLangsEl.textContent = progLangs.join(", "); //表示を更新
inputEl.value = ""; //入力フォームをクリア
}
});
</script>
</body>
</html>
うん、いい感じです。
let、const、配列、アロー関数、イベント処理、条件分岐を使えています。
次は非同期処理ですが、簡易的なサイトなので、いいねボタンを作成して、それを非同期処理に見立てて実装します。
【質問】
JavaScriptの非同期処理でいいねボタンを追加してください。
【回答】
いいねボタンを非同期処理で実装するには、以下の手順を実行してください。
htmlに以下のコードを記述します。
<button id="like-button">いいね！</button>
<p>いいねの数: <span id="like-count">0</span></p>
jsファイルに以下のコードを記述します。
const likeButton = document.getElementById('like-button');
const likeCount = document.getElementById('like-count');
let count = 0; // カウントを保持する変数
likeButton.addEventListener('click', async () => {
count++; // カウントをインクリメントする
likeCount.innerText = count; // カウントを表示する
});
回答のコードを記述すると、いいねボタンのカウントを増やすことができました。
※簡易的なので、カウントは保持しないようにしています。
繰り返しも使用したいので、10回いいねボタンを作成してもらいます。
【質問】
JavaScriptでいいねを10回繰り返すボタンを追加してください。
【回答】
いいねを10回繰り返すボタンの処理を追加するために、以下のようなコードを追加します。
htmlに以下のコードを記述します。
<button id="like10-button">いいね！ x 10</button>
上記のコードで、新しいボタンを作成し、id属性を “like10-button” に設定しています。
次に、以下のようなコードを追加して、
新しいボタンがクリックされたときにいいねを10回繰り返す処理を実行します。
// いいねを10回繰り返すボタン
const like10Button = document.getElementById('like10-button');
like10Button.addEventListener('click', async () => {
for (let i = 0; i < 10; i++) {
count++;
likeCount.innerText = count;
await new Promise(r => setTimeout(r, 1000));
}
});
上記のコードで、新しいボタンがクリックされたときに、10回のループでカウントをインクリメントしていき、
1秒間待機しているため、10回分のいいねが1秒間隔で表示されます。
無事に繰り返し処理で10回分いいねされるようになりました。
これまで学習した全ての構文を使用することはできませんが、
よく使用するものについては取り入れることができました。
尚、今回自動で作成したコードにはまだ学習していない内容も含まれています。
それらについては、次以降で学習していきます。