始めに
こんにちは！
まんじです！！
今回はJavaScriptが難しいオーって人向けに考えられる理由と対策をについて書いていきたいと思います。
結論から書いてしまうと、ここらへんが原因かなって思います。
- 単純にプログラミング入門の場合
- DOM操作などの概念がよくわからん場合
- 書き方（作法）がよくわからん場合
- PromiseやCallbackがよくわからん場合
- fetch(Request)がよくわからん場合
基本的にプログラミングはどの言語でもフレームワークでも使っていって慣れていくのが1番なんですけど、とりあえず日本語でアーダコーダ言いたいと思います！
（まあ、、、慣れなんだけど、、、）
JavaScriptが難しい場合と対策を書いてみる
原因: 単純にプログラミング入門の場合
プログラミングに入門したての場合はJavaScriptに限らず普通に難しいと感じると思います。
単純にプログラミング入門の場合の対策
実際にJavaScriptを書いたり真似していって慣れていくことが1番の近道です。
具体的には、とりあえずドットインストールでも本でもいいので、基礎的な文法を1回書いて動かしてみてからTODOアプリでもなんでもいいので作ってみることが重要です。
実際に作ってみることで、自分の理解できていないところがより明確になりますし、足りてない知識は調べながら補完されていきます。
JavaScriptに限りませんが、「何かを作っていく」結果としてプログラミング言語を書く力が向上していきます。
ぼくはフリーランスでウェブエンジニアをしていますが、結局めちゃくちゃ勉強をした結果として多少プログラミングができるってなったわけではなくて、仕事で使っていたり個人開発で使っていて結果として書けるようになっていきました。
プログラミング言語を勉強するために勉強するんじゃなくて、何か作るために、何かの目的のために勉強すると身につきます！（宣言）
DOM操作などの概念がよくわからん場合
JavaScriptには他の言語にない以下のような文法が出現します。
window.document.getElementById("someId");
window.document.querySelector("#foo"); DOMという概念っぽいもの？ルール？を操作できる文法です。
他の言語にはないので最初は難しいように思えます。（が、これも少し慣れれば普通に使う分には難しくはないです。）
DOM操作などの概念がよくわからん場合の対策
まずはhtmlとCSSを理解しているかというか、bodyとかdivとかh1とか入れてスタイリングして簡単なページを作れるか確認すると良いと思います。
htmlの構造がなんとなくでいいので分かっていることが大事で、それがDOM操作の理解につながります。
↓実際にhtmlを見てみる。
htmlの骨格が分かっているかを確認する。
<html>
<head>
</head>
<body>
<div class="some-class">divだよ</div>
</html>JavaScriptはローカル環境でindex.html(ファイル名はなんでもいい)を用意して実際にhtml書いてCSSも書いてJavaScriptもScriptタグを入れれば練習できるので、それでDOM操作をやってみると良いと思います。
あ、あとイベントリスナーやイベントハンドリングも重要な操作なので、そこらへんも調べてDOM操作をやると良いのかなーとは思います。
<button id="id"></button>
const onHover = () => {
document.getElementById("id").innerHTML = "Hello World";
}
element.addEventListener("mouseover", onHover);DOMを直接操作するのは古臭い手法ではあるんですけど、Reactとかのイマドキなフロントエンド開発でもたまに（Reactだけでなんとかならない時に）使うので地味に重要です。
書き方（作法）がよくわからん場合
JavaScriptの書き方がよくわからん、作法がよく分からん場合は実務で書いたことがないとあると思います。
こういう問題です。
- 後ろにコンマつけるのかつけないのか
- インデントはspace2なのか4なのかtabなのか
- varなのかletなのかconstなのか
- 関数の命名
- fetchなのかaxiosなのか
- 関数Docは書くべきなのか
ぼくもJavaScript入門の頃にすごいここらへんに悩んで調べていましたけど、結局ネットで答えには辿り着けず、、、「ほんとにこれでいいんか？」と思いながら書いていました。
書き方（作法）がよくわからん場合の対策
書き方とか作法に関しては、実際に実務に入っったり開発環境ができているところでJavaScriptを書いたりコードレビューを受けるしかないと思ってます。
イマドキの環境ってLinterが入っていてコードスタイルが強制されて、結果的にLinterが入ってない状態でJavaScriptを書くことになってもそれに合わせるようになります。
あとはコードレビューを受けることで、歴何年とか10年以上のベテランと言われる人の書き方に似せられるので、なんていうかすごく良いわけです。
「いやでも！独学なので無理です！！！」って場合に関しては、実務に入るまではある程度ノリでやればいいような気もしますし、メンターなどをつけるのが良いと思います。
天才的な感じだとしても独学でやるスピードよりもちゃんとしたメンターつけてやるスピードのほうが圧倒的に早いです。
PromiseやCallbackがよくわからん場合
JavaScript入門時というかある程度実務で使っていても最初の半年ぐらいはPromiseとCallbackが難しく感じます。
Promiseは非同期的な処理でそれが終わってからthenで実行するか、async awaitを使って同期的にやるかってやつで、Callbackは関数に渡す関数の引数のことです。
むしろ最初から理解してるほうが意味不明って感じのだいぶ意味不明なやつらです。
PromiseやCallbackがよくわからん場合の対策
結論的にはいっぱい書くしかないんですけど、実はPromiseとCallbackってJavaScript単体で書いているとそこまで必要なくてそこらへんのスキルはあんまり向上しません。
Callbackに関してはイベントリスナー(addEventListenerなど)やイベントハンドラー(onClickなど)で多少は理解が深まりますが、実際にReactとかでコールバックを渡しまくる経験をしたほうがそこらへんは向上します。
Promiseに関してもfetchなどのシーンで多少は理解ができますが、実際に実務なんかでaxiosを使ってAPIリクエストしたり、サーバーサイド（node.js）でPromiseを使ってあげるとここらへんの能力もめっちゃ向上します。
fetch(Request)がよくわからん場合
最初の頃はfetchはPromiseも絡んでるし難しいポイントの1つなんですけど、これも慣れというか、、、慣れです。
fetchはそこまで最近は使わなかったりしますけど、axiosでも考え方は同じです。(axiosはfetchより使いやすいrequestするツールというかライブラリというか…)
fetchがよくわからん場合の対策
とりあえずfetchを実際になんかのAPIで使ってみるっていうのが大事だと思います。多分。
async awaitで使うとそこまで分かりにくくないのでおすすめなのと、get post put patch deleteとかそこらへんの定番のリクエスト方法なんかも調べておくと良さげです。
あとはサーバーとフロントの仕組みというかどうやってhtmlが表示されるのかっていうウェブに関する知識も勉強するのは大事です。
まとめ
「慣れ」とか言っちゃうと全て終わってしまうんですけど、慣れが大事です。
個人的にとにかく推奨したいのは、本とか定番のプログラミング学習サービスでJavaScriptをゴリゴリと勉強するのではなくて、文法を1~2週間でささっと知る程度にとどめてウェブアプリケーションを実際に作るのがおすすめです。
TODOアプリでもタイマーアプリでも天気アプリでもYoutuberをなんかごにょごにょして表示するでもなんでもいいので、とにかく作りながら必要な場所をその都度調べて勉強していくスタイルがなんだかんだで効率良いです。
「作りながら調べる」←これ。
たまにインプットのためにインプットをするのも良いと思いますが、アウトプットのためのインプットになっているかを確認するといいんじゃないかなーって思います！！！
最初は大変ですけどファイト😳（ファイト=戦う）
読みなさい！
