一問一答コーディング問題「jQueryを置き換えてみよう」【JavaScript】

こんにちは、@codeship_techです。

今回の一問一答コーディング問題は前回と比べて難易度UPのコード変換です！

ぜひ挑戦してみてください。

前回の問題はこちら↓

以下のjQueryコードを、素のJavaScriptのみを用いて記述し直してください。
(難易度：★★★★☆)

参考：You Don’t Need jQuery \- Qiita

const resultP = $(".result-p");
resultP.on("mouseover", function(){
 $(this).addClass("red");
});

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

正解

const resultP = document.querySelector(".result-p");
resultP.addEventListener("mouseover", function(event){
 event.target.classList.add("red");   
}) 

実は上のjQueryの内部で行われていることは、下のJavaScriptの記述そのままだったりします。

jQueryでできる事は、ほぼ全てJavaScriptでできます。

昨今はReactやVue, AngularといったHTMLを手軽に動かせるフレームワークやNode.js：サーバサイドJS環境の登場により、jQueryではない“素のJavaScript”に大変な注目が集まっています。

これからWebエンジニアを目指す人はJavaScriptを重点的に学ぶことを強くお勧めします。

You Done ‘t Need jQuery

他の一問一答コーディング問題はこちら