なぜJavaScriptはHTMLに比べて難しいのか、おもちゃの自動車で解説してみた!【初学者・初心者向け】

ウサギ
ウサギ

HTMLとCSSまではスムーズだったのに!

JavaScript難しいんだけど!

どうしたらよいのですか!

イヌ
イヌ

なるほど!

では、

  • なぜJavaScriptはHTMLを比べて難しいのか
  • JavaScriptを学ぶコツ

を解説していくね!

ウサギ
ウサギ

お願いしますー!

本記事の内容

・なぜJavaScriptはHTMLに比べて難しいのか
・JavaScriptの学び方のコツ

本記事の信頼性

イヌ
イヌ

・小規模の開発会社、上場企業2社でエンジニアを経験

・正社員、フリーランス合わせて10年以上エンジニアとして活動

・現在、フリーランスエンジニアとして時給5桁で活動中

この記事を書いているイヌは10年前、独学でプログラミングを始めました。
普段はJavaScriptでシステム開発をしているフリーランスエンジニアです。

プログラミングをはじめよう!と心に決めて、HTMLやCSSの学習を始めた、そこのあなた!

すばらしいです!

10000人が「プログラミングはじめたいなー」と思っているとして、

実際にプログラミングを始める人は100人。

スタートしているだけで、まわりより進んでいますよ!

JavaScriptでつまずいている点の解消に役立てばうれしいです!

では早速、いってみましょ〜🚀

JavaScriptが難しいのは「プログラミング言語」だからです

JavaScriptは、プログラミング学習の最初の段階でで、HTMLCSSと合わせて、登場してくることが多いですね。

HTML・CSSまでは順調に学べていたのに、JavaScriptからいきなり難易度が上がった感じがしませんか。

なぜならJavaScriptは「プログラミング言語」だからです。

HTMLとCSSはプログラミングじゃないの?と思いますよね。

厳密に言うと、HTMLとCSSはプログラミング言語ではありません。

HTMLは「マークアップ言語」、CSSは「スタイルシート言語」といいます。

HTMLは、ブラウザに構造を伝える役割があり、

CSSは、そのHTMLの見た目を装飾する役割があります。

HTMLは、いろいろなタグがありますよね。

h1タグとか、pタグとか、hr、span、div、main、headerなどなど。

実は画面に表示する。というだけでなら、divタグだけでOKだったりもします。

当然HTMLも正しい構造で書くべきなのですが、divタグだけで構造を作ったとしても、ブラウザが気を利かせて、いい感じに調整してくれるんですね。

余談中の余談(難しめなので飛ばしてもOK)

ちなみにHTMLという言語は、W3CとWHATWGという2つの団体が仕様を策定する時期が長らく続いていました。
2019年5月に、今後はWHATWGのLiving Standardを唯一のHTML標準仕様にするとなりました。
https://www.itmedia.co.jp/news/articles/1906/10/news038.html

そのため、もしHTMLの仕様を確認する必要があったり、興味があった場合は、HTML – Living Standard を参照しましょう〜(右上のTranslationからたどると日本語もあります)

例えば、小学校の自由研究で、おもちゃの自動車を作ることを考えてみましょう。

材料は、ティッシュの空箱2つとストロー3本で作りましょう。

画像はないので、想像してください(笑) 。

1つのティッシュ箱を切って、タイヤを4つ作ります。

もう1つのティッシュ箱に4ヶ所に穴を開けて、2本のストローをさします。

2本のストローの端に、タイヤを貼り付けます。

すると、いびつですけど、車っぽいものができてますよね。

これがHTMLです。

え?となるかもしれないですが、自動車の構造を作ってますよね。

ティッシュ箱とストローが、おもちゃの自動車の構造をつくっている。

同じように、HTMLがWebページの構造をつくっています。

では続いて、ティッシュ箱にマジックで色を塗ったり、折り紙を貼り付けてみましょう。

いいですね、クリエイティブな色使い。(見えてないですけど)

はい、そうですね。そう、想像のとおりです。

これがCSSです。

おもちゃの自動車に色を付けること。見た目を装飾してますね。

同じように、CSSがHTMLで作ったWebページを装飾します。

ところで、ストローが1本あまってますよね。

ティッシュ箱が2つ、ストローが2本、利用されてました。

では、この1つのストローを使って、以下の機能を追加してください。

  • 前のタイヤを回して、後ろのタイヤも回るようにしてください

または

  • 後ろのタイヤを回して、前のタイヤも回るようにしてください

4輪駆動のことですね。あれ、なんかちょっと難しくなりましたよね。

イヌは、タイヤがささっているストローと、余っているストローが噛み合うようにギザギザにして、ギアのようにすれば良いかなーと思いました。

うまくいくは、ちょっとわからないですけど。やりかたは人それぞれですね。

もう少しかみくだくと、機能を追加するためには、いろいろなことを考えなければいけません。

前のタイヤはどれか?
後ろのタイヤはどれか?
余っているストローをギザギザにすることはできるか?
タイヤのささっているストローにギザギザを追加することはできるか?
余っているストローとタイヤの追加ストローはきちんと噛み合うだろうか?
前のタイヤを回したら、後ろのタイヤが回るだろうか?
後ろのタイヤが回ったら、前のタイヤが回るだろうか?

これがJavaScriptです。

JavaScriptは、HTMLで構造をつくって、CSSで装飾した、Webページに、動きのある機能を追加します。

HTMLはHTML自身で構造を変えることはできません。1度決まったらそのままです。

CSSもCSS自身で装飾を変えることはできません。1度決まったらそのままです。

(※ CSSは最新のものはプログラミング的に扱える部分があるので、基礎部分のCSSの話です)

HTMLとCSSは変更が少ない分、簡単なわけです。

JavaScriptは、さっきのおもちゃの自動車の機能のように、

  • ボタンをクリックしたら、アラートを表示してください
  • このページを表示したら、このデータを取得してください

など、いろいろと動きが発生してきます。

これをWebページで再現しようとすると、プログラミング言語の考え方が必要になります。

プログラミングは、「コンピュータにしてほしいことをお願いする手順を、コンピュータの理解できる言葉で書かれているもの」です。

プログラミング言語は、上の例で言う「コンピュータのわかる言葉」のことです。

JavaScriptは、「ブラウザというコンピュータが理解できる言葉」つまり、ブラウザ用のプログラミング言語ということになります。

(※ 厳密には、いまはブラウザだけではないのですが、その話は以下のリンクをごらんください)

コンピュータはその都度その都度、命令どおりにしか動きません。

そのため、変数とか関数とか、ブラウザがわかるようにJavaScriptというプログラミング言語の新しい概念を理解する必要があるわけです。

知らない外国語って難しいと思うんですが、プログラミング言語も同じですね。

JavaScriptの学び方のコツ

Progateやドットインストール、書籍など、さまざまなもので学んでいると思います。

プログラミングを学ぶコツとしては、

わからないところは飛ばす
必ず手を動かす
実際に小さなアプリを作ってみる

です。

これに加えてJavaScriptは、Chrome DevTools を使いこなせると、確認作業がしやすくなります。

Chrome DevTools  |  Google Developers

上のリンクの「Console」の部分ですね。

例えば、JavaScriptのforがわかりにくい場合は以下の動画のように確かめてみましょう!

右上の︙をクリックして、「その他ツール→デベロッパーツール」を開きます。

「Console」タブを開くと、以下の動画のように > の部分でJavaScriptを実行することができます。

なぜなら、JavaScriptは「ブラウザが理解できるプログラミング言語」だからですね。

JavaScriptのコードの中に、debugger というキーワードを埋め込んで上げると、JavaScriptがそのdebuggerを呼び出したときに、一時停止してくれます。

その前の時点で、console.logなどのデバッグ用のデータ表示を利用すると、forのループするたびに表示されるデータが確認できます。

次に進める場合は、再生ボタン▶️を押すと、次のステップにすすみます。

適宜、いろいろなタイミングでdebuggerを仕込んで、確認に役立ててみてください!

イヌ
イヌ

なにか質問があれば、気軽にTwitterで声をかけてくださいね〜
@LifeOfDogRabbit

ウサギ
ウサギ

なんとなくわかった気がするかもしれない。

またね〜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です