「書いたとおりに動かない…」
JavaScriptを始めたばかりの人が最初に感じるのは、このもどかしさかもしれません。
HTMLとCSSは見た目にすぐ反映されるので分かりやすいですが、JavaScriptはページの「動き」や「仕組み」を裏側で制御する縁の下の力持ち。この仕組みを理解しないままコピペで進めると、すぐに壁にぶつかってしまいます。
この記事では、JavaScriptの基礎である「DOM操作」「変数」「イベント処理」の3つのポイントを、現場のリアルな話も交えながら、誰でもわかるように解説していきます。
1. DOM操作って結局なに？
DOM（Document Object Model）を簡単に言うと、ウェブページを「レゴブロック」のように扱うための設計図です。
HTMLの要素（見出しや段落など）一つひとつがブロックとして扱われ、JavaScriptはその設計図（DOM）を通して、ブロックを動かしたり、色を変えたり、新しいブロックを追加したりできます。
JavaScriptが得意とするのは、この「DOMを使ってページ内の要素を操作する」こと。たとえば、ページ内のテキストをクリックしたら色が変わる、といった動作もすべてDOMを通じて行われます。
先輩A現場エピソード：「JavaScriptって難しそう…」と避けていた新人が、DOMの操作に触れて初めて「これが画面に反映されるのか！」と納得し、自信を持ち始めました。
DOMはJavaScript以外からも使える
意外と知られていない事実ですが、DOMはJavaScript専用ではありません。
PythonやPHP、TypeScriptなどからもDOM操作は可能です。JavaScriptが圧倒的に多く使われているのは、ブラウザがネイティブで対応しているからです。ページを開いたその瞬間からDOM操作が可能なのは、他の言語にはない大きな強みです。
2. 変数宣言 let / const / var の違い
変数とは、データを一時的に保存しておく「箱」のようなものです。
JavaScriptでは、この箱をどう扱うかで3つのキーワードを使い分けます。
- var：昔からある古風な箱。中身を自由に入れ替えたり、同じ名前の箱を何度も作れたりします。自由すぎるため、意図しないバグの原因になりやすく、今ではあまり使われません。
- let：現代的な箱。中身の入れ替えはできるけれど、同じ名前の箱は二度と作れません。これにより、意図せず前のデータを上書きしてしまうミスを防げます。
- const：絶対に中身を変えたくないときに使う鍵のかかった箱。一度データを入れたら、それ以降は変更不可。変更しない値（例：サイト名など）に最適です。
3. HTMLとJavaScriptの連携でつまずく定番ポイント
イベント処理（クリックしたら動く、ホバーしたら変化するなど）を実装しようとして、うまくいかない……という経験、ありませんか？
たとえば、次のようなHTMLがあったとします。
<a href=”#” onclick=”makeTextBigger()”>文字を大きく</a>
<p>このテキストを大きくしたい</p>
JavaScript側ではこう書きます。
function makeTextBigger() {
document.querySelector(“p”).style.fontSize = “2em”;
}
これでリンクをクリックすると段落の文字が大きくなります。
よくある間違い（すべてNG）
document.getElementByTag(“p”).style.fontSize = “2em”;
// × getElementByTag は存在しない（正しくは getElementsByTagName）
document.getElementsByTagName(“p”).style.fontSize = “2em”;
// × リストが返るので、個別に指定しないと動かない
document.querySelectors(“p”).style.fontSize = “2em”;
// × querySelectors は存在しない（正しくは querySelector）
正解はこれ：
document.querySelector(“p”).style.fontSize = “2em”;
querySelectorは、最初に見つかった1つの要素を選択してくれる非常に便利なメソッドです。
先輩A現場エピソード：「getElementsByTagNameで指定してるのに全然効かないんです」と新人が悩んでいましたが、このメソッドが複数の要素をリストで返すこと、そしてquerySelectorを使えば最初の1つを簡単に選べると気づき、問題解決。その後の実装もスムーズに進みました。
まとめ：JavaScriptは仕組みから理解すれば怖くない
JavaScriptは、ただ書くだけでは理解が進みません。
「なぜこのコードが必要なのか」「どこを操作しているのか」という構造から理解することで、グッと楽しくなります。
初心者が理解すべき3つの柱：
- DOM操作：ウェブページの中身を動的に変えるための橋渡し
- 変数宣言：letやconstを使うことで、予期せぬエラーを減らせる
- イベント処理：ユーザー操作に応じて「何をするか」を定義する
コピペでなんとなく動かすのではなく、「なぜこのコードで動くのか」を一つずつ確認していくことが、スキルアップへの近道です。
今後さらに複雑な処理を扱っていくためにも、基礎をしっかり固めていきましょう。
