ChatGPTで始めるJavaScript入門⑬～簡易プロフィールサイト作成～

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

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

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

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

　【質問】
　簡易的なプロフィールサイトの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>
```
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480337/bf9ecc8b-7c18-0ad1-c286-2686a247269d.png)


*****

簡易的ですが、プロフィールサイトのひな形ができました。
少し味気ないですが、一旦これで進めます。

このサイトにプログラミング言語を追加できるようにします。

*****

　【質問】
　JavaScriptでプログラミング言語を追加できるようにしてください。

　【回答】
　以下はJavaScriptで上記の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> 
        <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>

```

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480337/e3579866-7342-9504-8d4a-11556c6024fb.png)


*****

うん、いい感じです。
let、const、配列、アロー関数、イベント処理、条件分岐を使えています。

次は非同期処理ですが、簡易的なサイトなので、いいねボタンを作成して、それを非同期処理に見立てて実装します。

*****

　【質問】
　JavaScriptの非同期処理でいいねボタンを追加してください。

　【回答】
　いいねボタンを非同期処理で実装するには、以下の手順を実行してください。

htmlに以下のコードを記述します。

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

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

```JavaScript: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; // カウントを表示する
});
```

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480337/97a4caef-7b4e-62d5-9bdf-e897f36274bf.png)


*****

回答のコードを記述すると、いいねボタンのカウントを増やすことができました。
※簡易的なので、カウントは保持しないようにしています。

繰り返しも使用したいので、10回いいねボタンを作成してもらいます。


*****


　【質問】
　JavaScriptでいいねを10回繰り返すボタンを追加してください。

　【回答】
　いいねを10回繰り返すボタンの処理を追加するために、以下のようなコードを追加します。

htmlに以下のコードを記述します。

```html:like10.html
<button id="like10-button">いいね！ x 10</button>
```

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

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

```JavaScript: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秒間隔で表示されます。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480337/e0d344a0-ef0e-7d31-2961-8a4bfc370807.png)



*****

無事に繰り返し処理で10回分いいねされるようになりました。

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

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