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

JavaScriptでつまずく人は多い

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

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

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

実は私もかつて同じことを感じ、JavaScriptで挫折したことがあります。

*その話の詳細はこちら▼

HTML／CSSが簡単な理由

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

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

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

<h1>こんにちは</h1>を<h1>おはよう</h1>に変更すれば、ブラウザで表示される言葉も変わります。

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

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

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

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

文字間を調整するletter-spacingも追加してみましょう。

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

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

このようにHTML／CSSでは加えた変更がとても分かりやすいのです。

<h1>こんにちは</h1>と書けば、大きな文字で「こんにちは」と表示されます。

color: red;と書けば、文字色が赤色になります。

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

一方、JavaScriptはそうではありません。

● https://monotein.com/present

JavaScriptを難しく感じる理由

大きく次の3つの理由があります。

理由①HTML／CSSとは異なるアプローチが必要

私自身を含め、多くの人が「HTML → CSS」と順調に進んで来ても、「CSS → JavaScript」で挫折してしまう理由。

それは、JavaScriptもHTML／CSSのような「1対1」の世界だと考えてしまうからです。

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

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

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

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

しかし当時の私がよく分からなかったのは、getElementById()やinnerHTMLといったものが、なぜそんな機能を持っているのかという点でした。

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

そしてもう一つの疑問。

それは「なぜこんなことをする必要があるのだろう？」ということです。

「わざわざこんな遠回りなことをしなくても、ストレートにHTMLやCSSを使えば済む話なのでは？」と思ったことも数知れません。

あとになって分かったのは、JavaScriptには「JavaScriptの考え方」というものがあること。

HTML／CSSの勉強時とはアプローチの方法を変える必要があったのです。

理由②使う場面が想像できない

JavaScriptの教科書を開くと、様々な操作のコードが並んでいます。

例えば「文字を置き換えるreplace()」、「小数点以下を切り捨てるfloor()」etc....

山ほどあるこれらのコードの必要性が、私には理解できませんでした。

こういったものをどこでどのように使うのか、その場面がまったく想像できなかったのです。

replace()やfloor()などの使い方を私が理解できるようになったのは、実際にこれらを使わざるを得ない場面に遭遇したときです。

そうして知ったのは「実践を通して学んでいくことの重要性」です。

教科書の説明を目で追ったり、個別の機能をバラバラに学んだりしてみても、身になりにくい。

これは誰しもが経験のあることでしょう。

蛇足ですが、何かの勉強を始めるとき、私たちは往々にして網羅的でページ数の多い本を買ってしまう傾向があります。

その理由は下記記事をご覧ください▼

理由③専門用語が分からない

JavaScriptには専門用語が最初からたくさん出てきます。

• メソッド
• ファンクション
• オブジェクト
• 配列....

これらのプログラミング専門用語こそ、私がJavaScriptで挫折した最大の理由です。

本やネット記事、英語の解説などを読んでもまったく理解できず、ここで私はまったく前に進めなくなりました。

「HTML → CSS」と順調に勉強が進み、このまま成長していけると思っていた私の勢いを止めた最大の原因が、これらの専門用語でした。

振り返ってみると、「頭での理解」よりも「分からなくてもとりあえず手を動かしてコードを書いてみる」というアプローチをしていたら、停滞期をもっと早く抜け出せていたと思います。

*プログラミングの勉強をしていると必ず来る停滞期の乗り越え方は、下記記事をご覧ください▼

● https://monotein.com/present

HTML／CSSだけでReactをはじめる方法

私はJavaScriptで一度挫折しました。

かなり長い間つまずいていました。

しかしそれがあったからこそ、いま「専門用語なしでプログラミング」という方法でプログラミングを教えています。

「災い転じて福となす」とも言いますが、自分がつまずいたからこそ、かつての自分と同じような問題にぶつかっている人のことが理解できるようになりました。

HTML／CSSの知識だけでReactやNext.jsを使える教材を多数出しているので、ぜひ使ってみてください。

はじめてつくるReactアプリ

—5年以上読まれ続けている、HTMLとCSSの知識だけで始められるReact入門書決定版

Amazonのページに移動する

React・TypeScript・Next.js学習の各ステップで何を学ぶか。

これを整理した2026年版学習ロードマップがあります。

JavaScript以降の全体像を今のうちに把握しておきましょう▼

⚫︎ monotein.base.shop/p/00005