HTMLとCSSの勉強後、何をすればいいのかわからない・・・
2021.11.26
2022.08.08
目次
この記事の筆者：三好アキ（ウェブエンジニア）
「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。
ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。
HTMLとCSSの後でつまづく人は多い
「ウェブデザイナーになりたい」、「ウェブサイトを自分で作ってみたい」、「アプリ開発をしてみたい」など、それぞれ目標は違えど、最初に勉強するのはHTMLとCSSになります。
HTMLとはいわばウェブサイトの「骨格」、CSSはそこに色やデザインをつける「装飾」です。
この2つの知識さえあれば人に見せて恥ずかしくないウェブサイトが十分作れてしまうので、HTMLとCSSの勉強後に、自分のポートフォリオサイトや、友達のサイトづくりなどをする人は多いと思います。
ただ「勉強」はここで終わりではなく、まだまだ続きます。ある意味、無限に続くといってもいいかもしれません。
そして「HTMLとCSSの後に勉強するもの」としてよく紹介されるのがJavaScriptです。もしくはこのJavaScriptを簡易化したjQueryと呼ばれるものです。
しかし実は、ここでつまづいてしまう人がたくさんいます。
特にHTMLとCSSの勉強をスムーズに進めてこれた人は、より一層JavaScriptにとっつきにくさを覚えるでしょう。
自分のことを振り返ってみると、私はHTMLとCSSの後にはWordPress、そしてより高度なウェブアプリケーションの開発をしたいと思っており、そこではJavaScriptが必須だったので、なんとかJavaScriptを進める必要がありました。
ここでまず、HTMLとCSSはなぜ比較的簡単に感じられるのかを説明します。
HTML/CSSが簡単な理由
下のようなHTMLコードがあったとします。
// index.html
<h1>こんにちは</h1>
これをブラウザで表示すると、次のようになります。
もし<h1>こんにちは</h1>を<h1>おはよう</h1>と変更すれば、ブラウザで表示される言葉も変わります。
次にここに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()で文字を埋め込むetc..」と書かれています。
しかし私がよくわからなかったのは、getElementById()やinnerHTML()といったものが、なぜそんな機能を持っているのかという点でした。
繰り返すように、これまで「一対一」のHTML/CSSのシンプルな世界からやってきたので、getElementById()などの、いわば「高機能なコード」についていけなかったのです。
そしてもう一つの疑問は、「なぜこんなことをする必要があるのだろう？」ということです。
「わざわざこんな遠回りなことをしなくても、普通にHTMLやCSSを使えば済む話なのでは？」と思ったことも数知れません。
後々わかったのは、JavaScriptには「JavaScriptの考え方」というものへの理解が必要で、HTML/CSS勉強時とはアプローチ方法を変える必要があることでした。
理由2 使う時や場面が想像できない
1つ目の理由と関連して、JavaScriptの教科書などを開いた時に出てくる様々な操作、例えば「文字を置き換えるreplace()」や、「少数点以下を切り捨てるfloor()」など、山ほど出てくるこれらのコードの必要性も理解できませんでした。
こういったものをどこで、どのように使うのか、その場面がまったく想像できなかったのです。
私がようやくreplace()やfloor()などの必要性と使い方を理解できるようになったのは、HTMLとCSSを使った「ウェブサイト」の制作をしている時ではなく、後で触れる「ウェブアプリケーション」の開発をしている時でした。
蛇足ですが、何かをの勉強を始める時、私たちは往々にして分厚い、網羅的な教科書を買う傾向があります。
それは一つに「すべて必要な知識がこの一冊にまとまっている」という安心感が欲しいことや、「内容の薄いものを今後2冊目、3冊目と買っていくのではなく、分厚くても内容の濃いものが欲しい」といった心理が働くためでしょう。
理由3 専門用語がわからない
そして3つ目は私がJavaScriptでつまづいた最大の理由ですが、「メソッド」や「ファンクション」、「オブジェクト」といったJavaScriptで使われる専門用語です。
いくつかの本やネット記事などで解説を読んでもまったく頭に入らず、ここで私はまったく前に進まなくなりました。
こういった用語の理解は、自分でJavaScriptを使っていくなかで自然とできるようになりましたが、いま振り返ると、頭での理解よりも手を使った実践を先にしていたら、停滞期をもっと早く抜け出ていたと思います。
「はじめてつくるReactアプリ」について
このような私の経験を下に、HTMLとCSSを学んだ人向けに書いたのが「はじめてつくるReactアプリ」です。
この本であつかうReactとは、「JavaScriptフレームワーク」と呼ばれる最近のウェブアプリ開発で広く使われているテクノロジーの一つです。
JavaScriptフレームワークの勉強を進める場合、「JavaScriptの基本知識が必須」と普通は言われます。
それはJavaScriptフレームワークがその名の通りJavaScriptをベースに作られた、いわばJavaScriptの発展形であるためですが、前述のようにJavaScriptでつまづいてしまい、その先に進めない人も多いのも現実としてあります。
そこで本書では以下のような点に配慮して書かれています。
特徴1 HTMLとCSSの知識だけで進められる
本の表紙にも書かれている通り、この本の対象読者はHTMLとCSSの知識がある人で、JavaScriptの知識は必要としていません。
多くの書籍やネット情報などでは、「Reactのコードはなぜこう書かれているのか」という原理の説明から入り、そしてその原理の理解にはJavaScriptの知識が必要です。
本書ではそのような原理の理解に時間をかけるよりも、「ReactのコードのHTMLに似た部分」に注目をしているので、HTMLの知識があれば読み進められるようになっています。
また私自身がJavaScriptでつまづいた原因の「配列」や「メソッド」などの専門用語も、読者に余計な負担がかからないよう、本書では使わないようにしてあります。
特徴2 手を動かしながら進められる
本書の目的は、理論的な知識を増やすことではなく、「実際に手を動かしてReactに慣れること」です。
そのため、細々とした例外事項や細かな周辺知識は削り、世界の天気を表示する簡単なアプリケーションを自分の手で作り上げることを重視して書かれています。
ページが進むごとに、新しい機能を自分の手で作りあげる充実感を感じられます。
特徴3 必要なことだけを2部構成で学べる
本書の冒頭でも書いてありますが、この本はReactの網羅的な解説を目指した教科書ではありません。
中身は見本アプリの開発に必要なものにしぼってあります。
それでもそこには、「いま必ず知っておかなければならないこと」と「後で知るのでもいいこと」の2つがあるので、本書は2部構成をとっています。
以下が本書の目次ですが、「いま必ず知っておかなければならないこと」とは【第2章 開発編】の内容、そして「後で知るのでもいいこと」が【第4章 ブラッシュアップ】に当たります。
このような2部構成を取ることで、読者はスムーズに前に進んでいるという感覚を味わいながら、知識を増やしていくことができます。
「はじめてつくるReactアプリ」目次
【第1章 基礎編】
ウェブアプリの仕組み
なぜReactを使うのか？
コンポーネント化（部品化）
ターミナルの使い方
【第2章 開発編】
create-react-appのダウンロード
create-react-appの中身
srcフォルダのクリーニング
Reactを動かす
componentsフォルダの作成
Title.jsを作ろう
Form.jsを作ろう その１
Form.jsを作ろう その２
Results.jsを作ろう その１
Results.jsを作ろう その２
【第3章 デプロイ編】
Netlify
アプリのファイルを最適化する
終わりに
【第4章 ブラッシュアップ】
分割代入
ページ名を変える
エラー処理
onSubmit
returnの省略
<>の利用
フォームの入力文字を消す
データ取得中であることを表示する
【第5章 補足】
ClsssコンポーネントとFunctionalコンポーネント
「import react from “react”」の省略
CSSの適用方法
Reactの周辺技術
*「はじめてつくるReactアプリ」には姉妹書として、同じアプリをVueでつくる「はじめてつくるVueアプリ」もあります。
Reactの勉強の進め方
以下、「はじめてつくるReactアプリ」の後に読まれることを想定して書いた本の紹介です。
まず最初に読んでもらいのは 「はじめてつくるReactアプリ」の続編、「はじめてさわるReact & JavaScript」です。
この本は「はじめてつくるReactアプリ」の内容を復習しながら、やや発展した内容を扱っているので、Reactの知識をより深めたい人に最適です。
また、JavaScriptの解説を増やしてあるので、JavaScriptへの理解を深めることもできます。
「はじめてさわるReact & JavaScript」の後には次の本に進みましょう。
名前の通り、「はじめてつくるReactアプリ」にTypeScriptというものの解説を加えた本になります。
TypeScriptとはJavaScriptを一段発展させたもので、最近の開発現場ではデフォルトといっていいほど広く導入されています。
本書では「はじめてつくるReactアプリ」で使っていたJavaScriptの代わりに、TypeScriptを使って開発を進めていきます。
「はじめてさわるReact & JavaScript」にもTypeScript版があります。
この本と「はじめてつくるReactアプリ with TypeScript」の違いは以下の点にあります。
• 「はじめてつくるReactアプリ with TypeScript」
→ 最初からTypeScriptを使って開発を進める
• 「はじめてさわるReact & JavaScript with TypeScript」
→ JavaScriptで書いたコードをTypeScriptへと書き直していく
このように違うアプローチをとっているので、両書を読むことでTypeScriptへの理解を一層深めることができます。
次に読みたいのが、バックエンド開発の基礎を解説する「はじめてつくるバックエンドサーバー前編（Node.js & Express）」です。
実際の開発現場では、バックエンドとの連携をする場面が多く出てきます。
そのためバックエンドがどのように動いているのか、簡単にでも知っておくことが大切です。
本書ではNode.jsとExpressを使って開発を進める、バックエンド開発全般の入門書となっています。
続編では、さらにくわしくバックエンドを紹介しています。
ここまでフロントエンド（React）とバックエンド（Node.js）の基礎がわかったら、本格的なフルスタック・アプリの開発にトライしてみましょう。
（*フルスタック・アプリとは、フロントエンドとバックエンドを両方備えたアプリのことを指します。）
そして次に紹介する2冊は「Reactフレームワーク」と呼ばれるものについて書いた本で、Reactをベースにしたウェブアプリやウェブサイト開発のひな型テクノロジーを紹介しています。
「Reactフレームワーク」としてよく使われるNext.jsとGatsbyを使って、開発を進めていきます。
最後に、近年のフロントエンド開発でよく採用されるJamstack、そしてヘッドレスCMSを使ってウェブサイトを作る入門書が下記の本になります。
この本を読めばWordPressに頼らずにクライアントワークを行うことができます。
Next.jsをフロントエンドとバックエンド両方に使ったフルスタックアプリの作り方は、こちらを参考にしてください。
ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein。
monoteinについての案内資料の無料ダウンロードはこちら。
「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。
無料相談
