JavaScriptをスムーズに進められない人に共通すること
ReactやNext.jsを教えていると、ある共通のパターンに気がつきます。
「HTMLとCSSは問題なかったのに、JavaScriptになった途端、先に進めなくなった....」。
HTMLとCSSを順調に学んだ人ほど、このギャップを大きく感じる傾向があるようです。
実はかつての私も、まさにその一人でした。
HTML・CSSが学びやすいのは、コードと結果が直結しているから
具体的なコードで確認してみましょう。
// index.html
<h1>こんにちは</h1>
これをブラウザで表示すると、次のようになります。
<h1>の中を「おはよう」に変えれば、ブラウザの表示も変わります。
次はここに、CSSのスタイルを適用してみましょう。
まず文字の色を変えてみます。
// index.html
<h1 style="color: red;">こんにちは</h1>
ブラウザの表示は次のようになります。
次は、文字間を調整するCSSを追加してみましょう。
// index.html
<h1 style="color: red; letter-spacing: 20px;">こんにちは</h1>
ブラウザを見ると、文字の間が広がっているのがわかります。
ここまで見てきてわかること。
【 コードを1行変えれば、ブラウザの表示もその通りに変わる 】
つまり、「書いたこと」と「起きること」が常に対応しているのです。
この予測しやすさが、HTML・CSS学習をスムーズに感じさせる大きな理由です。
逆に言えば、「何が起きるかわからない」と感じた瞬間に難しさを覚えます。
そしてこれこそ、JavaScriptで多くの人がつまずくポイントと深く関係しているのです。
JavaScriptでつまずくのは、コードの動き方が直感的でないから
では、JavaScriptのコードはどうなのでしょうか。
下記のコードを見てください。
何をするコードであるかは分からなくて大丈夫です。
<script>
document.getElementById("hero").innerHTML = "今日は天気がいいですね。";
</script>
これはビギナー向け教材の序盤によく登場するコードで、こんな説明がつきます。
「getElementById()でHTMLのidを指定し、そこにinnerHTMLで文字を埋め込む・・・」
ここで多くのビギナーは戸惑います。
getElementById()やinnerHTMLが「なぜそんな働きをするのか」が、ぱっと見ではわからないのです。
HTML・CSSの「1対1」のシンプルな世界に慣れていると、このような多機能なコードは急にハードルが上がったように感じてしまうのです。
「これ、HTMLで直接書けばよくないか？」という疑問を持つ人も少なくありません。
私もそうでした。
しかし、JavaScriptはHTML・CSSとはそもそも設計の目的も用途も違うのです。
JavaScriptには「JavaScriptの考え方」というものがあり、それに沿ったアプローチが必要なのです。
マインドセットを切り替えることが第一歩
HTML・CSS学習をスムーズに進めた人ほどJavaScriptで挫折しやすい根本的な原因。
それは、「これまでと同じような感覚で進めるはず」という無意識の思い込みにあります。
JavaScriptはHTML・CSSとは異なる言語で、本格的なプログラミングの仕組みがベースにあります。
「コードと結果が1対1で対応するもの」という感覚を一度手放すことが、JavaScriptへの入り口になります。
下記記事には私がJavaScriptで挫折した話、乗り越えた方法などを書いているので参考にしてください。