javascriptって？初心者でもわかる、学ぶとできること5選

## この投稿を読んでわかること
+ JavaScriptとは
+ JavaScriptでできること
+ JavaScriptで初心者が覚えるべき基礎は

## はじめに：なぜJavaScriptを学ぶのか？

Webサイトで、ボタンを押すと画像が切り替わったり、メニューが開いたりするのを見たことがありませんか？  
それらの動きの多くは **JavaScript（ジャバスクリプト）** によって実現されています。

HTMLが「骨組み」、CSSが「見た目」だとすれば、JavaScriptは「動き・仕組み」を担当する重要な要素です。
![Image_fx (6).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/3994703a-5b96-4cee-9ea1-052fb75cd70a.jpeg)

それではどんなことができるのか、ChatGPTに聞いてみました。:eyes:  

## 1. Webページに動きをつけられる！

###  例：クリックでテキストを切り替える

```html
<button onclick="changeText()">クリックしてね</button>
<p id="text">こんにちは！</p>

<script>
  function changeText() {
    document.getElementById("text").textContent = "こんにちは、JavaScriptの世界へようこそ！";
  }
</script>
```
![スクリーンショット 2025-05-21 14.50.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/c2fda95a-79f1-4533-9438-11015f341256.png)
 クリックすると・・・:arrow_double_down: 

![スクリーンショット 2025-05-21 14.50.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/97317bc6-75ed-4472-910f-64ea707ce944.png)
文字が変更される仕組みを作れます。

## 2. フォーム入力のチェック（バリデーション）

### 例：メールアドレスが未入力なら警告

```html
<form onsubmit="return validateForm()">
  <input type="email" id="email" placeholder="メールアドレスを入力">
  <button type="submit">送信</button>
</form>

<script>
  function validateForm() {
    const email = document.getElementById("email").value;
    if (email === "") {
      alert("メールアドレスを入力してください！");
      return false;
    }
    return true;
  }
</script>
```
![スクリーンショット 2025-05-21 14.55.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/4dc5e957-2e7a-4685-8374-25b352698f12.png)
このまま「送信」を押すと :arrow_double_down: 
![スクリーンショット 2025-05-21 14.55.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/30b9a325-0444-402c-b7c0-6e60adbb6a68.png)
このようなポップアップが出る仕組みを作ることができます。

## 3. スマホアプリやゲームも作れる！

### 例：じゃんけんゲーム

```html
<button onclick="play('グー')">グー</button>
<button onclick="play('チョキ')">チョキ</button>
<button onclick="play('パー')">パー</button>
<p id="result"></p>

<script>
  function play(playerChoice) {
    const choices = ["グー", "チョキ", "パー"];
    const cpuChoice = choices[Math.floor(Math.random() * 3)];
    let result = "";

    if (playerChoice === cpuChoice) {
      result = "あいこ！";
    } else if (
      (playerChoice === "グー" && cpuChoice === "チョキ") ||
      (playerChoice === "チョキ" && cpuChoice === "パー") ||
      (playerChoice === "パー" && cpuChoice === "グー")
    ) {
      result = "あなたの勝ち！";
    } else {
      result = "あなたの負け！";
    }

    document.getElementById("result").textContent =
      `あなた: ${playerChoice} ／ コンピューター: ${cpuChoice} → ${result}`;
  }
</script>
```
![スクリーンショット 2025-05-21 15.01.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/f622fc25-d278-4b39-b185-7a7a27c245fb.png)
どれか一つをクリックすると　:arrow_double_down: 
![スクリーンショット 2025-05-21 15.01.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/a04e8ea9-3c1a-4e4e-90af-f17179b5a94e.png)
コンピューターがランダムに選んだものとで勝負した勝敗が表示されます

## 4. APIを使ったデータの取得

### 例：天気予報APIから情報を取得（OpenWeatherMap）
```html
<button onclick="getWeather()">天気をチェック</button>
<p id="weather"></p>

<script>
  async function getWeather() {
    const response = await fetch("https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=YOUR_API_KEY&units=metric");
    const data = await response.json();
    document.getElementById("weather").textContent = `東京の現在の気温：${data.main.temp}℃`;
  }
</script>
```
[OpenWeatherMap](https://openweathermap.org/city/2643743)に登録し、APIキーを取得することで、天気を取得することができます。
※登録はしていないのでイメージ画面はありませんが、こちらで気温を取得できるスクリプトになっています。

## 5.Node.jsでバックエンドも！
### 例：Node.jsでWebサーバーを立ち上げる
JavaScriptはフロントエンドだけでなく、バックエンドでも使われています。
「Node.js」という技術を使えば、JavaScriptでサーバー側の処理も行えるようになります。つまり、Webアプリ全体をJavaScriptだけで作ることも可能です！
## JavaScriptでできること　まとめ
JavaScriptを学ぶと、次のようなことができるようになります。

| 分野      | できることの例             |
| ------- | ------------------- |
| Webの動き  | ボタン・アニメーション・タブ切替など  |
| フォーム処理  | 入力チェック・エラー表示        |
| ゲーム・アプリ | クイズ・じゃんけん・スマホアプリ    |
| データ取得   | 天気・ニュース・SNS連携       |
| サーバー処理  | Webサーバー・チャット・ログ管理など |

## 初心者がJavaScriptで習得したい基礎は？
これらがわかるようになれば、**基礎はマスターした**と言えそうです :bulb: 

+ 変数（```let```, ```const```）とデータ型
+ 条件分岐（```if```, ```switch```）

+ ループ（```for```, ```while```）

+ 関数（```通常```・```アロー関数```）

+ 配列・オブジェクトの操作（```map```, ```filter```, ```forEach``` など）

+ DOM操作（```getElementById```, ```addEventListener``` など）

+ イベント処理

+ 基本的な非同期処理（```setTimeout```, ```fetch```, ```Promise``` など）

## ひとこと
今JavaScriptを学んでいる途中ですが、そもそもどんなことができるのか知らなかったなと思い、記事を作成してみました。
まずはフロントのWEBページの動きを再現することを目標に勉強頑張ります！