HTMLとCSSの勉強後、何をすればいいのかわからない・・・
HTMLとCSSのあと、つまづく人は多い
「ウェブデザイナーになりたい」
「ウェブサイトを自分で作ってみたい」
「アプリ開発をしてみたい」etc…
目標は違っていても、とにかく最初に勉強するのはHTMLとCSSになります。
HTMLとはいわばウェブサイトの「骨格」、CSSはそこに色やデザインをつける「装飾」です。
この2つの知識さえあれば人に見せて恥ずかしくないウェブサイトが作れてしまうので、HTMLとCSSを勉強した後に、自分のポートフォリオサイトや、友達のサイトづくりなどをした人は多いと思います。
ただ「勉強」はここで終わりではなく、まだまだ続きます。
そして「HTMLとCSSの後に勉強するもの」としてよく紹介されるのがJavaScript（or jQuery）です。
しかし実は、ここでつまづいてしまう人がたくさんいます。
HTMLとCSSの勉強をスムーズに進めてこれた人は特に、JavaScriptにとっつきにくさを覚えるでしょう。
実はかつての私がまさにそうで、HTML／CSSの勉強がスイスイと進んだの対して、JavaScriptは本当に難しいと感じました。
いまから振り返ってみると、なぜ当時つまづいたのかの理由がわかったので、本記事ではそれをシェアします。
この記事の著者については下記リンクをチェック
Amazon著者ページ：https://www.amazon.co.jp/stores/author/B099Z51QF2
公式サイト：https://monotein.com
Twitter：https://twitter.com/monotein_
HTML／CSSが簡単な理由
下のようなHTMLコードがあったとします。
// index.html
<h1>こんにちは</h1>これをブラウザで表示すると、次のようになります。
「<h1>こんにちは</h1>」を「<h1>おはよう</h1>」に変更すれば、ブラウザで表示される言葉も変わります。
次はここにCSSのスタイルを適用してみましょう。
CSS用のファイル「styles.css」作るのは手間なので、ここではHTMLに書き込むインライン方式でスタイルを適用します。
まず文字の色を変えてみましょう。
// index.html
<h1 style="color: red;">こんにちは</h1>保存してブラウザで表示させると次のようになります。
文字間を調整するCSS、「letter-spacing」も追加してみましょう。
// index.html
<h1 style="color: red; letter-spacing: 20px;">こんにちは</h1>保存してブラウザで確認すると、次のように文字の間が広がっているのがわかります。
ここまでで誰にでもわかるのは、HTMLとCSSは、加えた変更がとてもわかりやすいことです。
「<h1>こんにちは</h1>」と書けば「こんにちは」が、「style="color: red;"」と書けば文字色が赤色にと、「書いたコード」とその「結果」が一対一の関係なので、何が起こるのかを簡単に予想できます。
もし操作に対する結果が予想しづらいものだったら、「難しい」と感じてしまうでしょう。
「コード」とその「結果」が一対一の関係にあることは、勉強をスムーズに進められるメリットになるのです。
しかしJavaScriptはそうではありません。
JavaScriptを難しいと感じる理由
大きく次の3つの理由があります。
理由1 HTML／CSSとは異なるアプローチが必要
私自身もそうでしたが、多くの人が「HTMl → CSS」と順調に進んで来ても、「CSS → JavaScript」で挫折してしまうのは、JavaScriptもHTML／CSSのように「一対一」の関係で動くものだと考えてしまうからだと思います。
次のJavaScriptのコードを見てみましょう。
<script>
document.getElementById("hero").innerHTML = "今日は天気がいいですね。";
</script> このコードはビギナー向けJavaScript解説書の最初の方によく出てくるもので、次のように紹介されます。
『「getElementById()」でHTMLの「id」を指定し、そこに「innerHTML()」で文字を埋め込む・・・』
しかし私がよくわからなかったのは、「getElementById()」や「innerHTML()」といったものが、なぜそんな機能を持っているのかという点でした。
これまで「一対一」のHTML／CSSのシンプルな世界にいたので、「getElementById()」などの、いわば「多機能・高機能なコード」についていけなかったのです。
そしてもう一つの疑問は、「なぜこんなことをする必要があるのだろう？」というものです。
「わざわざこんな遠回りなことをしなくても、ストレートにHTMLやCSSを使えば済む話なのでは？」と思ったことも数知れません。
あとになってわかったのは、JavaScriptには「JavaScriptの考え方」というものがあり、HTML／CSSの勉強時とはアプローチの方法を変える必要があることでした。
理由2 使う場面が想像できない
JavaScriptの教科書を開くと紹介されている様々な操作、例えば「文字を置き換えるreplace()」や、「少数点以下を切り捨てるfloor()」など、山ほどあるこれらのコードの必要性が私には理解できませんでした。
こういったものをどこでどのように使うのか、その場面がまったく想像できなかったのです。
「replace()」や「floor()」などの必要性と使い方を私が理解できるようになったのは、実際にこれらを使わざるを得ない場面に自分が遭遇したときで、そこで気がついたのは、「実践を通して学んでいくことの重要性」です。
教科書を目で読みながら、あるいは個別の機能をバラバラに学んでみても身になりにくいというのは、誰しもが経験のあることだと思います。
理由3 専門用語がわからない
JavaScriptには「メソッド」「ファンクション」「オブジェクト」といった専門用語が最初からたくさん出てきます。
実はこれがJavaScriptで私がつまづいた最大の理由です。
本やネット記事、英語の解説などを読んでもまったく理解できず、ここで私はまったく前に進めなくなりました。
HTML → CSSと上がり調子で勉強が進み、このまま上昇していけると思っていた勢いが消え去った最大の原因がこれらの専門用語です。
いま振り返ってみると、「頭での理解」よりも「わからなくてもとりあえず手を動かしてコードを書いてみる」というアプローチをしていたら、停滞期をもっと早く抜け出せていたと思います。
用語の理解は、JavaScriptを実際に使っていくなかで自然とできるようになりました。
HTML／CSSだけでReactとVueをはじめる方法
私はJavaScriptで挫折した経験をもとに、HTML／CSSの知識だけでReact入門、Vue入門ができるビギナー向け教本を執筆しています。
キンドルUnlimitedに登録していると無料で読めるので、興味のある方は読んでみてください。
この記事の著者については下記リンクをチェック
◆ Amazon著者ページ：https://www.amazon.co.jp/stores/author/B099Z51QF2
公式サイト：https://monotein.com
Twitter：https://twitter.com/monotein_
◆ React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。メルマガ登録はこちらから → https://monotein.com/register-newsletter
この記事が気に入ったらサポートをしてみませんか？