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

こんにちは、@codeship_techです。

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

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

前回の問題はこちら↓

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

要件
  • result-pクラスのDOMを取得する
  • それにマウスオーバーしたら、`red`クラスを付加する

参考: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

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

授業日記についてのご意見

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。パネル