HTMLとCSSを勉強したあと、何をすればいいのかわからない・・・

blog-hero-imgHTML → CSSと順調に進んできたものの、そこでつまづいてしまう人は多くいます。その理由と対処法を紹介します。

pen-icon2021.11.26rewrite-icon2023.12.27

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて配信中。登録はこちらから → 無料メルマガ登録

HTMLとCSSの後、つまづく人は多い

「ウェブデザイナーになりたい」「ウェブサイトを自分で作ってみたい」「アプリ開発をしてみたい」など、目標は違っていても、とにかく最初に勉強するのはHTMLとCSSになります。

HTMLとはいわばウェブサイトの「骨格」、CSSはそこに色やデザインをつける「装飾」です。

この2つの知識さえあれば人に見せて恥ずかしくないウェブサイトが十分作れてしまうので、HTMLとCSSを勉強した後に、自分のポートフォリオサイトや、友達のサイトづくりなどをした人は多いと思います。

ただ「勉強」はここで終わりではなく、まだまだ続きます。ある意味、無限に続くといってもいいかもしれません。

そして「HTMLとCSSの後に勉強するもの」としてよく紹介されるのがJavaScriptです(あるいはJavaScriptを簡易化したjQuery)。

しかし実は、ここでつまづいてしまう人がたくさんいます。

HTMLとCSSの勉強をスムーズに進めてこれた人は特に、JavaScriptにとっつきにくさを覚えるでしょう。

実はこれはかつての私がそうで、HTML/CSSの勉強がスイスイと進んだの対して、JavaScriptにはとっつきにくさを強く感じました。

いまから振り返ってみると、なぜ当時つまづいたのかの理由がわかったので、本記事ではそれをシェアします。

HTML/CSSが簡単な理由

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

// index.html

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

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

aicp-model.svg

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

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

CSS用のファイルstyles.css作るのは手間なので、ここではHTMLに書き込むインライン方式でスタイルを適用します。

まず文字の色を変えてみましょう。

// index.html

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

保存してブラウザで表示させると次のようになります。

aicp-model.svg

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

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

保存してブラウザで確認すると、次のように文字の間が広がっているのがわかります。

aicp-model.svg

ここまでで明らかなのは、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に登録していると無料で読めるので、興味のある方は読んでみてください。

はじめてつくるReactアプリ

【HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める】

1650円0円

Amazonのページに移動する

はじめてつくるVueアプリ

【HTMLとCSSの知識だけで始められるVue開発。2時間で最新のVueに入門】

1650円0円

Amazonのページに移動する