Summary  
This chapter introduces fundamental JavaScript concepts for dynamic page behavior, including defining variables, creating functions, manipulating the DOM, using conditional statements, and handling events.

General domain of usage  
Front-end web development

JavaScriptは、ブラウザ上で動作する強力なスクリプト言語であり、ウェブページの内容や動作を操作可能にします。家に例えると、JavaScriptは家の機能性を担い、電気システム、配管、ホームオートメーション、セントラルヒーティングなど、あらゆる機能を提供する要素に相当します。

以下は、HTMLドキュメントにJavaScriptを追加する方法です。

## インラインJavaScript
`<script>`タグを使用して、HTMLドキュメント内に直接JavaScriptを記述できます。この方法は、簡単なスクリプトを素早く追加したい場合に便利です。

#### 例：
下の <span style="background-image: linear-gradient(#42a1ec, #0070c9); border: 1px solid #0077cc; border-radius: 4px; color: #ffffff; font-size: 17px; font-weight: bold; padding: 4px 15px;">Click Me</span> ボタンをクリックしてください。

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkphdmFTY3JpcHQgRXhhbXBsZTwvdGl0bGU+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cD5Tb21lIHRleHQgY29udGVudDwvcD4KICAgIDxidXR0b24gb25jbGljaz0iaGFuZGxlQnRuQ2xpY2soKSI+Q2xpY2sgTWU8L2J1dHRvbj4KICA8L2JvZHk+CiAgPHNjcmlwdD4KICAgIGZ1bmN0aW9uIGhhbmRsZUJ0bkNsaWNrKCkgewogICAgICBhbGVydCgiSGkgSmF2YVNjcmlwdCEiKTsKICAgIH0KICA8L3NjcmlwdD4KPC9odG1sPg==

YnV0dG9uIHsKICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoIzQyYTFlYywgIzAwNzBjOSk7CiAgYm9yZGVyOiAxcHggc29saWQgIzAwNzdjYzsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgY29sb3I6ICNmZmZmZmY7CiAgY3Vyc29yOiBwb2ludGVyOwogIGZvbnQtc2l6ZTogMTdweDsKICBmb250LXdlaWdodDogYm9sZDsKICBwYWRkaW5nOiA0cHggMTVweDsKfQ==

## 外部JavaScript
大規模または再利用可能なスクリプトの場合、JavaScriptを別ファイルに分けてHTMLページにリンクする方法が推奨されます。

#### 例
提供された例の3つのファイルすべてを確認してください。

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkphdmFTY3JpcHQgRXhhbXBsZTwvdGl0bGU+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cD5Tb21lIHRleHQgY29udGVudDwvcD4KICAgIDxidXR0b24+Q2xpY2sgTWU8L2J1dHRvbj4KICA8L2JvZHk+CiAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KPC9odG1sPg==

Y29uc3QgYnRuRWwgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCJidXR0b24iKTsKCmJ0bkVsLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgaGFuZGxlQnRuQ2xpY2spOwoKZnVuY3Rpb24gaGFuZGxlQnRuQ2xpY2soKSB7CiAgYWxlcnQoIkhpIEphdmFTY3JpcHQhIik7Cn0=

# JavaScriptの基本
JavaScriptはウェブページにインタラクティブ性や動的な動作を追加することができます。以下は基本的な概念です。

## 変数
データの保存に使用。
```js
let age = 30;
const name = "Peter";
```

## 関数
再利用可能なコードブロック。
```js
function greet() {
  alert('Hello, World!');
}
```

## DOM操作
JavaScriptでページ上の表示内容を変更可能。
```js
document.getElementById('myElement').innerHTML = 'New Content';
```

## 条件文
条件に基づいて異なるコードを実行。
```js
if (age >= 21) {
  alert('You are an adult.');
} else {
  alert('You are a minor.');
}
```


いくつかの概念が今は分かりにくく感じても、それはまったく普通のことです。実際にプロジェクトを作り始めると、より理解しやすくなりますし、ChatGPTが一歩ずつガイドします。

ノート

なぜ開発者はHTMLドキュメント内に直接JavaScriptを書くのではなく、外部JavaScriptファイルを使用するのでしょうか？

ChatGPTなどのAIツールを活用しながら、ウェブ開発の基礎を学びます。HTML、CSS、JavaScriptがウェブサイト構築において果たす役割と、AIがコーディングの速度や創造性をどのように高めるかを理解します。効果的なプロンプトの作成や、ChatGPTを用いたコード生成を実践します。AI支援開発を活用して、ゼロから完全なブログウェブサイトを構築し、ウェブプロジェクトに役立つ実践的なスキルを身につけます。

ウェブ開発の主要な概念と技術、そして現代のコーディングにおけるAIの役割について紹介します。このセクションでは、ウェブ開発の基礎と、AIがコーディングにおける生産性、創造性、効率性をどのように向上させるかを取り上げ、学習の基盤を築きます。

ウェブ開発の基本的な技術を学びます。HTML、CSS、JavaScriptの基礎を掘り下げ、それぞれの機能とデジタル環境を形成する上での役割を解明します。

ChatGPTの強力な機能を探求し、その活用方法を学びます。プロンプトの作成やChatGPTを使ったコーディング作業についての知見を得られます。さまざまなアプリケーションでChatGPTを活用するための実践的なヒントも紹介します。

ブログウェブサイトを構築します。ChatGPTを活用したさまざまなウェブ開発技術を取り入れ、ゼロから完全かつ機能的なブログウェブサイトを作成します。

インタラクティブ性のためのJavaScript入門

インラインJavaScript

例：

外部JavaScript

例

JavaScriptの基本

変数

関数

DOM操作

条件文

ビデオチュートリアル