プライベートURLを表示
# 変数と定数
**const** 再代入できない「定数」。
const abc = ‘あいうえお’
abc = ‘かきくけこ’ → エラー
**let** 再宣言できない「変数」。
let abc = ‘あいうえお’
abc = ‘かきくけこ’
let abc = ‘さしすせそ’ → エラー
**const** と **let** はスコープが限定的
if (true) {
var a = 1
let b = 2
const c = 3
}
console.log(a) → 1
console.log(b) → undefined
console.log(c) → undefined
# 関数（アロー関数）
これまで
var sample = function(a,b){
return;
}
これから
const sample = (a, b) =＞ {
return;
}
# テンプレート文字列（テンプレートリテラル）
これまで
var name = '太郎';
var age = 20;
var output = ‘わたしの名前は’ + name + ‘です’;
output += ‘わたしの歳は’ + age + ‘です。’;
これから
const name = '太郎'
const age = 20
const output = `わたしの名前は ${name} です。
わたしの歳は ${age} です。`
# jQuery → 生JavaScript
### 1つのDOMを取得
var $dom = $('.item');
↓
const dom = document.querySelector('.item')
### DOMの配列を取得
var $doms = $('li');
↓
const _doms = document.querySelectorAll("li")
### DOMの配列を繰り返し処理する
_doms.forEach(function(dom){
console.log(dom)
});
### TEXTを取得する
var text = $('.item p').text();
↓
const text = document.querySelector('.item p').textContent;
### TEXTを代入する
document.querySelector('.item p').textContent = 'テキスト';
### HTMLを取得する
var html = $('div.item').html();
↓
const html = document.querySelector('div.item').innerHTML;
### HTMLを代入する
document.querySelector('div.item').innerHTML = '
テキスト
'; ### 属性(attribute)を取得 var src = $('img').attr('src'); ↓ const src = document.querySelector('img').getAttribute('src'); ### 属性に代入する document.querySelector('img').getAttribute('src') = './img/test.jpg';2022-06-26 23:51:50
ソースコードは自由にお使いください。また、何らかの不利益が生じたとしても一切責任を負いません。
