読者です 読者をやめる 読者になる 読者になる

JavaScriptはクソ論者でJavaScript以前にHTML(DOM)やCSSが分かっていないみたいなやつがムカつく話

この記事の背景

ちょくちょくTLで見かける「JavaScript嫌い」「JavaScriptクソ」 ぼくも気持ちはわかるんだけど、ロクに使ってない人間が言ってるのを見るとまあ頑張って勉強している人間からすると気分悪いので、完全な偏見でおそらくの原因と解決策(というか憂さ晴らしの文字列)を書くよ。
おおむねこのqiitaの記事で言ってることとかぶります。

jQueryの話

初心者でできねぇ~っていう人間に多いのがjQueryで頑張ってる人間ですね。ぼくはjQuery嫌いなのでHTML文字列のパースとか通信にしか使いませんが。
当然ですがjQueryでできるHTML要素の操作(以下便宜上DOM操作と書く)なんていうのはWeb API標準の機能でできます。古いIEなどのモダンでないブラウザは知りません、死ね。

  • 具体例
// CSSセレクタによるDOM要素の選択
nodeList = document.querySelectorAll("$(CSS Selector)");
node = document.querySelector("$(CSS Selector)"); // === document.querySelectorAll("$(CSS Selector)")[0]

// NodeのStyleの変更
node.style.display = "none"; // === $(node).css({"display":"none"});

// 通信は書くの面倒なのでXMLHttpRequestで検索してください
// イベントハンドラとかも面倒なので書きませんが EventTarget.addEventListener で検索すればMDNの分かりやすい記事が出てきます。

一応厳密にはjQueryの場合はjQueryオブジェクトを生成してDOMインターフェースをラップしてくれてるっぽいので違うのですが(使わないのであまりわかってない)、様々な操作は大体全部DOMの標準インターフェースでできます。
また、冒頭で紹介した記事にもあるようにCSSをわかっていないことによって動かないなどの原因とかそういうのもあるのでCSSも基本的なルールくらいは覚えた方が幸せだと思います。
ほとんどの場合!importantとか使わないのでNodeに直接Style書いた方がルール的には強いのであまり影響はないと思いますが。

また、ぼくはゴリゴリ生のAPI触って動かす方が性に合ってるので相対的にjQuery嫌いなのですが、CSSのtranslate()よりもJavaScriptでアニメーションした方が若干速いらしいのでjQuery.animateは使ってもいいんじゃないでしょうか。
もちろん {{selector}}:hover{} とかのような疑似要素セレクタで済むような処理はCSSで書いた方がいいですが。

ここまでの流れなんてどうやって覚えるんだよ的な話

MDNを検索しろ。
意外にJavaScriptはぼくが思ってるJavaScriptクソみたいなこと言ってる初心者が付け焼刃で覚えたような知識が日本語ソースには蔓延していたりするイメージがあります。というか痒い所に手が届かない情報が多い。
だったらMDNを見た方がより生に近い形でやれることがわかります。なんだかんだ日本語ですしね。英語読めるならStackOverflowとか探してもいいかもしれません
ぼくはWeb Audio APIに関してはMDNのドキュメントとW3CのSpec読もうとしたけど分からなかったのでグーグルで日本語のソース探しました。ブーメランです。
あとグーグル力上げるためにも公式のドキュメントはちゃんとした用語とかわかって便利ですよ

そもそもJavaScriptの構文とか仕様とか知ってるんですかね問題

フレームワーク使う以前に構文とかは覚えてください。あとフレームワークのドキュメントもちゃんと読んでください。という話。
ちょくちょく見かけるのがjQueryオブジェクトの生成を間違ってたりセレクタ間違っていたり。
jQuery使おうと思うならちゃんとCSSセレクタについてくらい勉強してださい。これ無限にいうことになるぞ

プロトタイプベースの考え方を理解しろ

クラスがないから型がないから気持ち悪いじゃねんじゃ。TypeScriptでも使ってろ!!!!!
あと厳密には型は微妙にあるけどゆるい動的型付けなだけだからな!!!!!!!! この辺とか見ると知ったかぶりとか解決できるので良いです(いつだかjs-nextの中の人にリプライで教えてもらった)

JavaScript The Good Parts を読め

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

以上です。
ポエムなので完全に鵜呑みせず自分でもいろいろ調べるようにしてください。