概要

　ここまでで3.JavaScriptの文法と構文について、学習を行いました。
　
　学習した内容としては、変数、配列、データ型、関数、条件分岐、ループ、オブジェクト
　　プロトタイプ、クラス、イベント処理、コールバック関数、非同期処理　という感じです。

　今回はこれまでのおさらいも兼ねて、簡単なWebサイト作りをしてみます。

　※無料版なので、誤っている情報もあると思いますが、アウトプットできれば良しとします。

簡単なWebサイト

　今回はプロフィールサイトを作ってみたいと思います。
　まずは基となるhtmlを作ってもらいます。

　【質問】
　簡易的なプロフィールサイトのhtmlを作ってください。

　【回答】
　以下は簡単なプロフィールサイトのHTMLの例です。あくまでもサンプルとしてご参考ください。

profile.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のプログラミング言語を追加する方法です。

profile.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に以下のコードを記述します。

like.html

  <button id="like-button">いいね！</button>
  <p>いいねの数: <span id="like-count">0</span></p>

jsファイルに以下のコードを記述します。

like.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に以下のコードを記述します。

like10.html

<button id="like10-button">いいね！ x 10</button>

上記のコードで、新しいボタンを作成し、id属性を “like10-button” に設定しています。

次に、以下のようなコードを追加して、
新しいボタンがクリックされたときにいいねを10回繰り返す処理を実行します。

like.js

// いいねを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回分いいねされるようになりました。

これまで学習した全ての構文を使用することはできませんが、
よく使用するものについては取り入れることができました。

尚、今回自動で作成したコードにはまだ学習していない内容も含まれています。
それらについては、次以降で学習していきます。