JavaScript入門｜初心者でもわかる基本の書き方と使い方

こんにちは！
駆け出しエンジニアのまるです👓️🦍

今回は「JavaScript入門」として、初心者の方でもわかるように「基本の書き方」と「動きの仕組み」をやさしく解説します。
HTMLやCSSの次のステップとして、ページに”動き”をつける仕組みを一緒に見ていきましょう💡

JavaScriptとは？どんなことができるの？
HTML・CSS・JavaScriptの関係を見てみよう
JavaScriptの基本の書き方を見てみよう！
JavaScriptを書くときの基本形
HTMLとJavaScriptの関係を見てみよう！
もう少し発展すると．．．
JavaScriptでできること（身近な例）
さらに学びたい方へ
まとめ

JavaScriptとは？どんなことができるの？

JavaScript（ジャバスクリプト）は、Webページに「動き」をつけるためのプログラミング言語です。

たとえば、こんなことができます👇️

ボタンを押すとメッセージが出る
入力内容をその場でチェックする
画像をスライドさせる
メニューをクリックしたら開く

HTMLとCSSだけでは「見た目」までしか作れませんが、
JavaScriptを使えば”ユーザーの操作に反応するページ”が作れるようになります✨️

さらに、アニメーションや動的なフォームなど、
”動くWebサイト”を作る上で欠かせない言語です。

HTML・CSS・JavaScriptの関係を見てみよう

言語	役割	例えるなら
HTML	ページの骨組みを作る	家の「土台」
CSS	見た目を整える	家の「外装・内装」
JavaScript	動きをつける	家の「電気・スイッチ」

つまり、HTMLとCSSが”形と色”を担当し、
JavaScriptは”動き”を生み出す魔法のスイッチのような役割を持っています💡

JavaScriptの基本の書き方を見てみよう！

まずは、ボタンをクリックしたらメッセージが出る例を見てみましょう👇️

<button onclick="alert('送信してもいいですか？')">送信</button>

このボタンをクリックすると、
「送信してもいいですか？」というメッセージがポップアップで表示されます。

これがJavaScriptの基本中の基本、「イベント処理」と呼ばれる仕組みです。

ユーザーの”動き（クリックや入力）”に合わせて、
プログラムを実行するのがJavaScriptの特徴なんです💡

JavaScriptを書くときの基本形

JavaScriptは、HTMLの中に
<script> ~ </script> の形で書くのが基本です👇️

<script>
  // ここにJavaScriptのコードを書く
</script>

//から始まる行はコメント（メモ）として使えます
プログラムの説明やメモを書き残すときに便利です

HTMLとJavaScriptの関係を見てみよう！

JavaScriptでは、
「HTML（呼び出す人）」と「JavaScript（動く人）」を分けて考えます。

※つまり、「HTMLが呼ぶ　→　JavaScriptが動く」という流れで実行されます💡

①HTMLに”きっかけ”をつくる（ボタン）

<!-- ページの本文のどこか -->
<button onclick="sayHello()">あいさつする</button>

👉️onclick=”sayHello()” は「このボタンが押されたら sayHello を呼んでね」という意味です。
ここには”何をするか”はまだ書かず、次のステップで命令を定義します。

②JavaScriptに”やりたいこと”を書く

<!-- ページのどこかに script タグを置く（通常は</body>直前がわかりやすい） -->
<script>
  // これが「関数」：やりたい命令をひとかたまりで保存しておく“箱”
  function sayHello() {
    alert("こんにちは！JavaScriptの世界へようこそ🦍");
  }
</script>

👉️function（ファンクション）は「命令をまとめた箱」のようなものです。
この箱の中に実行したい動きを書いておき、HTMLのボタンから呼び出します。

③全体像（HTMLとJavaScriptの関係）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボタンであいさつ</title>
</head>
<body>
  <!-- 呼び出す人（HTML） -->
  <button onclick="sayHello()">あいさつする</button>

  <!-- 命令を書く場所（JavaScript） -->
  <script>
    function sayHello() {
      alert("こんにちは！JavaScriptの世界へようこそ🦍");
    }
  </script>
</body>
</html>

このように、
ボタンが押される　→　sayHello()が呼ばれる　→　アラートが出る！

という流れになっています。

もう少し発展すると．．．

今回のように onclick=”…” とかく方法でも動作しますが、
実はJavaScriptの書き方にはいくつかの方法があります。

たとえば、HTMLには何も書かずに、
JavaScript側で「押されたときの動き」を設定する方法（addEventListener など）もあります。

ただし、それは次のステップのお話🦍✨️

今はまず「HTMLが呼び出して、JavaScriptが動く」
という流れをしっかり理解できればOKです💡

“onclick”はボタンにメッセージを届ける方法なんだ💌
まずはこれで十分！
後で”もっとスマートな書き方”も一緒にやってみよう✨️

JavaScriptでできること（身近な例）

分類	できること	具体例
フォーム操作	入力内容を確認する	入力ミスがあると警告を出す
表示切り替え	ボタンでメニューを開閉	FAQやアコーディオン
動き・アニメーション	画像をスライドさせる	スライドショー
ページ連動	スクロール時に効果を出す	フェードイン、ズームなど