酒を水でイニシャライズしよう.new【TECH::EXPERT】

JavaScript jQuery TECH::EXPERT プログラミング 応用カリキュラム編

【本日のメニュー】
・JavaScriptのライブラリを使ってみよう
・jQueryを使ってブラウザ情報を取得して操作しよう
・js→jQuery
・プロゲート進捗

【JavaScriptのライブラリを使ってみよう】
JavaScriptで開発を行うのを簡単にするツールで、 Rubyにおけるgemのようなもの。

★様々なクリックイベント例★

▼JavaScript

var btn = document.getElementById("title");
btn.addEventListener("click", function() {
  console.log(“焼肉”);
});

▼jQuery

$(function() {
$("#button").on("click", function() {
console.log("焼肉");
});
});

▼React

class Hoge extends React.Component{
render(){
return (<div onClick={() => console.log('焼肉') }>
</div>)
}
}

 

Facebookが開発をしたライブラリらしいっすよ。
JavascriptとHTMLを組み合わせて書くらしいです。
なんかわかりやすそう。

▼vue.jsの例

new Vue({
el: '#button',
methods: {onClick: function() {
console.log(‘焼肉’);
}}
})

 

jQueryを学習する理由は下記の3点だそうです。
① 歴史があるのでリファレンスが多くあり、学習を進めるのが容易
>検索すれば答えが見つかるってのはありがたいっすよね。
② 機能が限定的でとっつきやすい
③ まだまだ使われている現場が多い
>求人としてもこれ使えると優位っていうのも学べるっていいですね。

とにかくやってみないことには何もわからない性格なので先に進みます。

 

【jQueryを使ってブラウザ情報を取得して操作しよう】
jQueryを導入
▼jQuery
https://developers.google.com/speed/libraries/#jquery
→3.x snippet:の「<script〜</script>」をheadタグに入れる。

<!>jQueryは他のJavaScriptファイルよりも先に読み込まないとエラーが出てしまうそうなので、他の全てのJavaScriptファイルよりも上に、jQueryの読み込み記述を書く必要がある。
これうっかり忘れたらハマりそう。

▼よく使うセレクタ

//IDセレクタ
$("#yakiniku") // idがyakinikuの要素を取得
 //HTML要素のid属性で指定するセレクタ
 //HTMLにてclass=“hoge”と付いているやつ

//クラスセレクタ
$(“.karubi”) // classがkarubiの要素をすべて取得
 //HTML要素のclass属性で指定するセレクタ
 //HTMLにてclass=“hoge”と付いているやつ

・要素セレクタ
$("h1") // h1要素をすべて取得
//HTML要素で指定するセレクタ
//上記の例の場合は<h1>hoge</h1>

//属性セレクタ
$("input[ type='radio' ]");  
//<input type="radio">のHTML要素を取得する
//HTML要素の属性値で指定するセレクタ

 

属性値が正直いってあんまりわかってないので調べてみたのですが、HTML要素ごとに用意されたセット感のあるアレのことっぽいですね。

▼参考 a 要素
https://www.tagindex.com/html_tag/elements/a.html

Aタグだとtarget属性とかいうリンクの開き方指定みたいなのがありますが、
target=“blank”っていう別窓で開く指定があるのですが、
そういうのに別窓アイコンをつけるとかそういう指定に使われてるのかしら?

【js→jQuery】
短くなって感動したのでメモメモ。

// タブのDOM要素を取得し、変数で定義する
let tabs = document.getElementsByClassName("menu_item");
// ↓
let tabs = $(".menu_item");

// 全てのactiveクラスのうち、最初の要素を削除("[0]は、最初の要素の意味")document.getElementsByClassName("active")[0].classList.remove("active");
// ↓
$(".active")[0].classList.remove("active");
// ↓
$(".active").removeClass("active");
//jQueryではremoveClassというものが用意されているのでここも短縮でき、さらに配列の最初なら[0]を書かなくて良い

// コンテンツの全てのshowクラスのうち、最初の要素を削除
document.getElementsByClassName("show")[0].classList.remove("show");
// ↓
$(".show")[0].classList.remove("show");
// ↓
$(".show").removeClass("show")
//jQueryではremoveClassというものが用意されているのでここも短縮でき、さらに配列の最初なら[0]を書かなくて良い

// クリックしたcoutentクラスにshowクラスを追加する
document.getElementsByClassName("content")[index].classList.add("show");
// ↓
$(".content")[index].classList.add("show");

// クリックしたタブにactiveクラスを追加
this.classList.add("active");
// ↓
$(this).addClass("active")
//jQueryではremoveClass同様にaddClassが用意されてるのでその部分が短縮できるのと、[0]省略できる

const index = tabsAry.indexOf(this);
// ↓
const index = tabs.index(this);
//indexOfメソッドは対象の文字列の中に指定した文字列が含まれるかどうか検索し、含まれていた場合は最初の見つかった位置を返すもの。これをindex()に置き換えられる。

 

【プロゲート進捗】
アカウントのレベルとしては95レベ。ポケモンだったら引退間近ですな。
Jsのレッスンを全てクリアしたので、途中までやってたRubyに戻ってます。
Jqもあるんだけどスマホだとできないのでrubyやるか〜って感じです。

そういえばhtmlレッスンで、「h1」で3個書いてみようっていうのがあって、
SEO的には確かh1一個だけしか書いちゃいけなかったような…って悩んだりしました。
練習問題だから数こなすように作られたミッションです。(当たり前だよなぁ?)

知識がない方がすんなり受け入れられることもある。
はっきりわかんだね。

短期学習の子で460レベの人がいて、バケモノやん!って思って、
今朝見たら500レベになっててさらにバケモノになってた。

ランキング機能が付いてて友達のレベルが見れるから励みになるのでやってみてね!
プロゲートのアカウント名:Kaori Oka