JavaScriptを難しく感じる理由（HTML・CSSは簡単だったのに...）

HTML・CSSの後につまづく人は多い

私はReactやNext.jsといったJavaScript関係のテクノロジーを教えています。

すると、「JavaScriptを難しく感じる」という人に多く出会います。

HTMLとCSSをスイスイと進められた人は、特にそう感じるようです。

実は私もかつて同じことを感じ、JavaScriptで挫折したことがあります（その話の詳細はこちら）。

簡単な理由は「1対1」だから

次のHTMLコードがあったとします。

// index.html

<h1>こんにちは</h1>

これをブラウザで表示すると、次のようになります。

<h1>の中を「おはよう」に変えれば、ブラウザの表示も変わります。

次はここに、CSSのスタイルを適用してみましょう。

まず文字の色を変えてみます。

// index.html

<h1 style="color: red;">こんにちは</h1>

ブラウザの表示は次のようになります。

次は、文字間を調整するCSSを追加してみましょう。

// index.html

<h1 style="color: red; letter-spacing: 20px;">こんにちは</h1>

ブラウザを見ると、文字の間が広がっているのがわかります。

このように、「HTML・CSSでは、加えた変更とその結果が分かりやすい」と言えます。

「書いたコード」とその「結果」が1対1の関係だからです。

何が起こるのかを簡単に予想できます。

もし操作に対する結果が予想しづらいものだったら、「難しい」と感じてしまうでしょう。

実はこれこそが、ビギナーがJavaScriptを難しく感じる原因です。

難しい理由は「1対1」じゃないから

次のJavaScriptのコードを見てください。

何をするコードであるか、分からなくて大丈夫です。

<script>
    document.getElementById("hero").innerHTML = "今日は天気がいいですね。";
</script>

これはビギナー向けJavaScript教材の最初の方によく出てくるコードで、次のように説明されます。

「getElementById()でHTMLのidを指定し、そこにinnerHTMLで文字を埋め込む・・・」

しかしビギナーが混乱するのは、getElementById()やinnerHTMLといったものが、なぜそんな機能を持っているのかという点です。

これまで「1対1」のHTML・CSSのシンプルな世界にいたので、getElementById()などの高機能・多機能なコードについていけないのです。

そしてもう一つのよくある疑問は、「なぜこんなことをする必要があるのだろう？」です。

「わざわざJavaScriptでこんな遠回りなことをしなくても、ストレートにHTMLやCSSを使えば済む話なのでは？」と感じるビギナーも多くいます。

実は、JavaScriptには「JavaScriptの考え方」というものがあり、HTML・CSSの勉強時とはアプローチを変える必要があるのです。

解決策

かつての私を含め、HTML・CSSの勉強をスムーズに進められても、JavaScriptにとっつきにくさを感じるのは、JavaScriptも「1対1」の関係で動くものと考えてしまうからです。

JavaScriptは、HTML・CSSとは異なる本格的なプログラミング言語です。

これまでとは頭を少し切り替え、アプローチ方法を変える必要があることに注意しましょう。

（*スムーズなJavaScript入門にはこちらの教材がおすすめです）

https://monotein.com/present-for-readers