![見出し画像](https://assets.st-note.com/production/uploads/images/125779737/rectangle_large_type_2_813de02834d51f7efce9c273450c5335.png?width=1200)
【今すぐできる】JavaScriptがむずかしくてReact/Vueに進めない時の対処法
HTMLとCSSの後、つまづく人は多い
プログラミングに興味をもったとき、99%の人が最初に手をつけるのがHTMLとCSSです。
この2つの知識さえあれば人に見せて恥ずかしくないウェブサイトが作れてしまうので、HTMLとCSSを勉強した後に、自分のポートフォリオサイトや、友達のサイトづくりなどをした人は多いと思います。
ただ「勉強」はここで終わりではなく、まだまだ続きます。ある意味、無限に続くといってもいいかもしれません。
そして「HTMLとCSSの後に勉強するもの」として紹介されるのがJavaScriptです。
しかし実はここでつまづいてしまう人がたくさんいます。
その結果、JavaScriptの次のステップであるReactやVueの勉強に進めなくなってしまうのです。
実はJavaScriptをマスターしていなくてもReact/Vueは始められるのですが、そのカラクリは本記事の後半で説明するとして、最初になぜ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>
これをブラウザで表示すると、次のようになります。
![](https://assets.st-note.com/img/1703860127130-ZjEda4mJEG.jpg)
「<h1>こんにちは</h1>」を「<h1>おはよう</h1>」に変更すれば、ブラウザで表示される言葉も変わります。
次はここにCSSのスタイルを適用してみましょう。
CSS用のファイル「styles.css」作るのは手間なので、ここではHTMLに書き込むインライン方式でスタイルを適用します。
まず文字の色を変えてみましょう。
// index.html
<h1 style="color: red;">こんにちは</h1>
保存してブラウザで表示させると次のようになります。
![](https://assets.st-note.com/img/1703860146153-4r7I3wEN6Z.jpg)
文字間を調整するCSS、「letter-spacing」も追加してみましょう。
// index.html
<h1 style="color: red; letter-spacing: 20px;">こんにちは</h1>
保存してブラウザで確認すると、次のように文字の間が広がっているのがわかります。
![](https://assets.st-note.com/img/1703860162558-EpGYO0pEBO.jpg)
ここまでで明らかなのは、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を実際に使っていくなかで自然とできるようになりました。
React、Vueの始め方
このような私の経験を下に、JavaScriptの知識がなくてもはじめられる入門書として書いたのが、次の本です。
これらの本では以下の点に配慮して書かれています。
1【専門用語なし。HTML/CSSの知識だけで進められる
この本の対象読者はHTMLとCSSの知識がある人で、JavaScriptの知識は必要ありません。
本書は原理の理解や包括的な内容を目指さず、「正しさよりもわかりやすさ」、「難しさよりも楽しさ」を優先して、ビギナーの方の背中を軽く押すことを最大の目的にしています。
2【作りながら学べる】
目で単に読むだけでは、集中力が続かず、すぐに飽きてしまいます。
本書は、実際に手を動かしてコードを書きながら進める方式です。
ページが進むごとにアプリのできあがりが目に見えるので、作り上げていく楽しさと充実感を味わえます。
3【2〜3時間で終わる】
入門書には、「ビギナーの人にたくさんのことをわかってもらいたい」という著者の親切心ゆえか、ページ数の多いものがたくさんあります。
これはプログラミングに限らず、英語や料理、スポーツなど他分野の入門書でも同じです。
しかしビギナーの方に必要なのは、「包括的な知識」ではなく「小さな成功体験」だと私は考えています。
そのためには、読み終わるのに数日かかるような本ではなく、2〜3時間ほどでサクッと終わり、そして最後には「自分にもできるかも」と小さな希望を感じられる本が理想です。
上記の本ではこのような方針のもと、ビギナーに必要な知識だけを簡潔にまとめ、そして読み終わった後には「もっとReact(Vue)を知りたい」、「もっと勉強を進めていきたい」と思えるようになっています。
「はじめてつくるReactアプリ」目次
【第1章 基礎編】
ウェブアプリの仕組み
Reactを使う理由
コンポーネント化(部品化)
ターミナルの使い方
エラーが発生した場合の対象方法
【第2章 開発編】
create-react-appのダウンロード
create-react-appの中身
srcフォルダのクリーニング
Reactを動かす
componentsフォルダの作成
Title.jsを作ろう
Form.jsを作ろう その1
Form.jsを作ろう その2
Results.jsを作ろう その1
Results.jsを作ろう その2
【第3章 デプロイ編】
Netlify
アプリのファイルを最適化する
終わりに
【第4章 ブラッシュアップ】
分割代入
ページ名を変える
エラー処理
onSubmit
returnの省略
<>の利用
フォームの入力文字を消す
データ取得中であることを表示する
APIのURLを隠す方法
本書を読んだあとの勉強の進め方
「はじめてつくるVueアプリ」目次
【第1章 基礎編】
ウェブアプリケーションの仕組み
Vueを使う理由
コンポーネント化(部品化)
ターミナルの使い方
Node.js
npm
API
VS Code
エラーが発生した場合の対象方法
【第2章 開発編】
create-vueのダウンロード
create-vueの中身
create-vueのクリーニング
Vueを動かす
Title.vueを作ろう
Form.vueを作ろう その1
Form.vueを作ろう その2
Results.vueを作ろう
【第3章 デプロイ編】
Netlify
ファイルを最適化する
【第4章 ブラッシュアップ】
フォームの入力文字を消す
ページ名を変える
データ取得中であることを表示する
エラー処理
分割代入
APIのURLを隠す方法
【第5章 補足】
Vue 3での変更点
Options APIとComposition APIとsetup
v-on / v-bind / v-modelについて
ref()とreactive()
ケバブケースとパスカルケースを使ったコンポーネント名
CSSスタイルの適用範囲を制限する(scoped)
Vueの周辺技術
この記事の著者については下記リンクをチェック
◆ 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
この記事が気に入ったらサポートをしてみませんか?