この投稿を読んでわかること
- 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ページの動きを再現することを目標に勉強頑張ります！