この投稿を読んでわかること

JavaScriptとは
JavaScriptでできること
JavaScriptで初心者が覚えるべき基礎は

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

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

HTMLが「骨組み」、CSSが「見た目」だとすれば、JavaScriptは「動き・仕組み」を担当する重要な要素です。

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

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

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

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

<script>
  function changeText() {
    document.getElementById("text").textContent = "こんにちは、JavaScriptの世界へようこそ！";
  }
</script>

クリックすると・・・

文字が変更される仕組みを作れます。

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

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

<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>

このまま「送信」を押すと

このようなポップアップが出る仕組みを作ることができます。

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

例：じゃんけんゲーム

<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>

どれか一つをクリックすると　

コンピューターがランダムに選んだものとで勝負した勝敗が表示されます

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

例：天気予報APIから情報を取得（OpenWeatherMap）

<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に登録し、APIキーを取得することで、天気を取得することができます。
※登録はしていないのでイメージ画面はありませんが、こちらで気温を取得できるスクリプトになっています。

5.Node.jsでバックエンドも！

例：Node.jsでWebサーバーを立ち上げる

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

JavaScriptでできること　まとめ

JavaScriptを学ぶと、次のようなことができるようになります。

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

初心者がJavaScriptで習得したい基礎は？

これらがわかるようになれば、基礎はマスターしたと言えそうです

変数（let, const）とデータ型
条件分岐（if, switch）
ループ（for, while）
関数（通常・アロー関数）
配列・オブジェクトの操作（map, filter, forEach など）
DOM操作（getElementById, addEventListener など）
イベント処理
基本的な非同期処理（setTimeout, fetch, Promise など）

ひとこと

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