以下の入門講座本にて個人的に勉強になったJavaScriptのメソッドや記法を備忘録としてまとめてみました。
1.要素の取得
document.querySelector('セレクター');
// 例
document.querySelector('#test'); // id指定
document.querySelector('.test'); // class指定
document.querySelector('h1'); //タグ指定
documentオブジェクト内の特定セレクター(括弧内)を持つ要素を取得する。
複数存在するセレクターの場合、最初の要素を取得する。
指定したセレクターを全て指定する場合は、querySelectorAll('')を用いる。
2.要素内のテキストの取得・書き換え
document.querySelector('セレクター').textContent;
//例
// h1タグのテキストを'test'というテキストに書き換える場合
document.querySelector('h1').textContent = 'test';
特定セレクター内のテキストを取得する。
取得の他にも例題のようにテキストを上書きすることも出来る。
3.テンプレート文字列
` ` // バックフォートで囲む
// 例
// コンソールログにh1内のテキストを出力する。
console.log(`h1タグのテキストは、${document.querySelector('h1').textContent}`);
テンプレート文字列では、文字列とJavaScriptを同時に使用出来る。
「'文字列' + JavaScript」と書かずに済むため、スムーズに書くことが出来る。
テンプレート文字列内にてJavaScriptを使用する場合は、${}で囲むと使用を可能になる。
4. 定数と変数
//変数 読み・書き可能な値として保持
let 変数名 = 代入したい値;
//定数 読み取り専用(上書き不可)の値として保持
const 定数名 = 代入したい値;
// 例1 変数
let a = 'testA'; // 変数aへ'testA'という文字列を代入する
a = 12345; // 変数aへ12345という数値を代入する
console.log(b); // 最後に代入した12345という数値が出力される
// 例2 定数
const b = 'testB'; // 定数bへ'testB'という文字列を代入する
b = 12345; // 定数bへ12345という数値を代入する
console.log(b); // 「TypeError: Assignment to constant variable」という定数上書き時に発生するエラーが表示される。
定数の場合、途中で値の変わる可能性がない為、教材上では主にconstをメインとして採用されていた。
コード内で誤って値を代入するミスを未然に防げるため、constを積極的に使用していきたい。
5. イベント
要素.addEventListener('イベントのタイプ', () => {}); // 無記名関数による記法
要素.addEventListener('イベントのタイプ', 関数); // 関数を用いた記法
// 例1
// h1タグをクリックした際、コンソールへの出力するイベントが発動する
document.querySelector('h1').addEventListener('click', () => {
console.log('クリックしました');
});
// 例2
// まずは関数を設定する。
const test = () => {
console.log('クリックしました');
};
// h1タグをクリックするイベントが発動し、先ほどの関数が呼び出される。
document.querySelector('h1').addEventListener('click', test);
イベントのきっかけとなるタイプはclickの他にもinput keyup mouseup等複数のが存在する。
6.スタイルの変更
要素.style.cssのプロパティ値 = 値;
// 例
// h1タグのテキストカラーを#0bd(青)へ変更する。
document.querySelector('h1').style.color = '#0bd';
// 例2
// divタグの背景色を#0bd(青)へ変更する。
document.querySelector('div').style.backgroundColor = '#0bd';
CSSのプロパティ値にハイフンがある場合、ハイフンを取り除いたキャメルケースで指定する必要がある。
background-color → backgroundColor
7.クラスの付与
要素.classList.add('クラス名');
要素.classList.add('クラス名','クラス名'); // 複数のクラスを付与する場合
// 例
// pタグへtestクラスを付与する
p.classList.add('test');
8.クラスの削除
要素.classList.remove('クラス名');
要素.classList.remove('クラス名','クラス名'); // 複数のクラスを削除する場合
// 例
// pタグにあるtestクラスを削除する
p.classList.remove('test');
9.クラスの付け外し
要素.classList.toggle('クラス名');
// 例
// ボディタグに対してdarkクラスがなければ付与、あれば削除する
body.classList.toggle('dark');
ボタン等のクリックに合わせて使用しても良いかも。
10.文字数を数える
'文字列'.length;
//例
// h1タグの文字数を出力する。
console.log(document.querySelector('h1').textContent.length);
console.log('😀'.length); // 顔文字や一部漢字は正しい文字数としてカウントされない
console.log([...'😀'].length); // スプレッド演算子でも正確な文字数がカウントされない時もある
//正確な文字数を知るにはIntl.Segmenter()を用いる。
const spLength = str => [...new Intl.Segmenter('ja').segment(str)].length;
console.log(spLength('葛󠄀')); // 1
正確な文字数を検知する為の方法についてコメント欄にて@diywmk9さんに教えていただきました、有難うございました！
https://qiita.com/roy0201/items/47884d3cb4cb8c3c93e0#comment-222635ee303a5ff94169
11. アロー関数
// 記述例
const 関数名 = () => {
//ここに実行したい処理を書く
}
//例
//コンソールログにテキストを出力する関数を設定する
const consoleText = () => {
console.log('test');
};
//関数を呼び出し、実行する
consoleText();
//パラメータを設定する場合。引数を増やすことも可能
const nameText = (name) => {
console.log(`${name}さん、こんにちは`);
}
nameText('ユーザー'); // ユーザーさん、こんにちは
12.条件分岐
//記述例
if(条件){
//条件を満たした時の処理
}else if(条件2){
//条件1を満たしていないが、条件2を満たした時
}else{
//どの条件も満たしていない時の処理
}
//例
//数値の大きさを測る処理
const num = 50;
if (num > 70) {
console.log('numは70より大きいです。');
} else if (num >= 50) {
console.log('numは50～70の間です。');
} else {
console.log('numは50未満です。');
}
13.HTMLを挿入する
//記述例
要素.insertAdjacentHTML('挿入位置',挿入内容);
//挿入位置は以下の4つ
1. beforebegin ... 要素の直前に挿入
2. afterbegin ... 要素の内部の最初の子要素の前に挿入
3. beforeend ... 要素内部の最後の子要素の後に挿入
4. afterend ... 要素の直後に挿入
//例
//divの直後に挿入する
div.insertAdjacentHTML('afterend', 'test挿入');
14.配列
//記述例
const 定数名 = [要素1, 要素2, 要素3, 要素4, 要素5];
//格納するデータ型は何でもok
//例
//数値の配列を設定し、中身を出力する
const num = [1, 5, 8, 13, 30];
console.log(num); // 1, 5, 8, 13, 30
//インデックスを指定して、出力する
console.log(num[0]); // 1
//以下、配列を操作するメソッド
配列.pop(); //配列の最後の要素を削除する
num.pop(); //1, 5, 8, 13
配列.push(要素); //配列の最後に要素を追加する
num.push(20); // 1, 5, 8, 13, 30, 20
配列.shift(); //配列の最初の要素を削除する
num.shift(); // 5, 8, 13, 30
配列.unshift(要素); //配列の最初に要素を追加する
num.unshift(0); // 0, 1, 5, 8, 13, 30
配列.reverse(); // 配列の順序を逆にする
num.reverse(); // 30, 13, 8, 5, 1
配列.join(区切り文字); //配列の要素を結合し、文字列として返す
num.join('と'); //1と5と8と13と30
文字列.split(区切り文字) //文字列から指定した区切り文字で区切った配列を生成する
'1と5と8と13と30'.split('と'); // 1, 5, 8, 13, 30
他にも配列のメソッドはあるので必要に応じて、要確認。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
15.繰り返し処理(for、forEach)
// for文 記述例
for(初回に実行する処理; 繰り返し条件; 各繰り返し後の処理){
繰り返し実行する処理;
}
//例
for(let i = 1; i <= 10; i++){
console.log(`${i}回目のこんにちは`);
};
16.オブジェクト
//記述例
const 定数名 = {
キー1: 値1,
キー2: 値2,
キー3: 値3,
}
//例
//noteというオブジェクトを設定する
const note = {
size: 'A6',
page: 150,
price: 300,
}
//オブジェクトの情報を取得する
//ドット記法。基本はこちらの記法で問題ない
オブジェクト名.キー
//例
note.size; // A6
//ブラケット記法。キーに変数や定数を使いたい場合はこちらを使用する
オブジェクト名['キー']
//例
note['size']; // A6
//オブジェクト配列
//配列内にオブジェクトを入れる
//記述例
const 定数名 = [
{オブジェクト1},
{オブジェクト2},
{オブジェクト3},
];
//例
//noteという配列にノートのオブジェクトを設定する
const note = [
{
size: 'A6',
page: 150,
price: 300,
},
{
size: 'A5',
page: 200,
price: 250
},
{
size: 'A4',
page: 200,
price: 230
},
]
//オブジェクト配列から値を取得する
//記述例
配列[インデックス].キー
//例. 先ほどのnote配列から取得する
console.log(note[0].size); // A6
//取得する値を定数にする
//記述例
const {キー1, キー2, キー3} = オブジェクト名;
console.log(キー1);
//例. 先ほどのnote配列から取得する
for(let i = 0; i < note.length; i++){
const {size, page, price} = note[i];
console.log(`サイズ:${size}、ページ数:${page}、価格:${price}円`); // noteの情報が出力される
}
17.アニメーション
//記述例1
動かす要素.animate({
//動かす内容
キー(プロパティ名): ['開始の値', '終了の値'],
}, 動きの詳細(再生時間等));
//例 pタグを2秒かけて表示する
p.animate({
opacity: [0, 1],
},2000)
//記述例2
const 定数名 = {
//動かす内容
キー(プロパティ名1): ['開始の値', '終了の値'],
キー(プロパティ名2): ['開始の値', '終了の値'],
};
動かす要素.animate(定数名,動きの詳細(再生時間等));
//例 pタグが下からふわりと表示される
const keyframes = {
opacity: [0, 1],
translate: ['0 50px', 0],
};
p.animate(keyframes,2000);
//記述例3 一度に動く内容が多い場合使用する
const 定数名 = [
{
//動かす内容、開始の値
プロパティ1: '開始の値1',
プロパティ2: '開始の値2',
},
{
//動かす内容、終了の値
プロパティ1: '終了の値1',
プロパティ2: '終了の値2'
}
];
動かす要素.animate(定数名,動きの詳細(再生時間等));
//例 pタグが下からふわりと表示される
const keyframes = [
{
opacity: 0,
translate: '0 50px',
},
{
opacity: 1,
translate: 0
}
];
p.animate(keyframes,2000);
//記述例4 他記述例では時間のみだったが、動きの詳細を設定できる
const 定数名1 = {
//動かす内容
キー(プロパティ名1): ['開始の値', '終了の値']
};
const 定数名2 = {
//動きの詳細(再生時間等)
キー(プロパティ名1): '値'
};
動かす要素.animate(定数名1, 定数名2);
//例 pタグが下から徐々に表示される
const keyframes = {
opacity: [0, 1],
translate: ['0 50px', 0],
};
const options = {
duration: 2000, //再生時間
easing: 'ease', //速度やタイミング
};
p.animate(keyframes,options);
//動きの詳細で指定できるプロパティ
1.delay //再生の開始を遅らせる時間
2.direction //実行する方向
//指定できる値
normal //通常の方向で再生(初期値)
alternate //奇数回で通常・偶数回で反対方向に再生
reverse //逆方向に再生
alternate-reverse //alternateの逆方向に再生
3.duration //ミリ秒単位の再生時間。必須項目
4.easing //変化する速度やタイミング
//指定できる値
linear //一定の速度で変化(初期値)
ease //開始時と終了時は緩やかに変化
ease-in //最初はゆっくり、段々速く変化
ease-out //最初は速く、段々ゆっくりと変化
ease-in-out //開始時と終了時はかなり緩やかに変化
steps() //段階ごとの変化
cubic-bezier() //ベジェ曲線の座標に沿って変化
5.fill //アニメーションの再生前後の状態
//指定できる値
none //なし(初期値)
forwards //再生後、最後のキーフレームの状態を保持
backwards //再生前、最初のキーフレームの状態を適用
both //forwardsとbackwardsの両方を適用
6.iterations //アニメーションを繰り返す回数。初期値は1。
18.Intersection Observer
特定の要素が監視領域に入ったら何かを動作させる際に活用できる。
//記述例
//定数名をつけて監視を設定する
const 定数名 = new IntersectionObserver();
//監視対象を教えて実行する
定数名.observe(監視対象);
//例
//1.監視対象が範囲内に入ったら実行する動作
const showTest = () => {
console.log('showTestです');
};
//2.定数名をつけて監視を設定する
const testObserver = new IntersectionObserver(showTest);
//3.監視対象(IDやクラスなど)を教えて実行する
testObserver.observe(document.querySelector('#test'));
//監視対象の情報を取得するには、実行する動作にentriesを設定する
const showTest = (entries) => {
console.log(entries);
};
//entries内はオブジェクトになっているため、取得したい値を設定する
const showTest = (entries) => {
console.log(entries[0].target);
console.log(entries[0].time);
};
変な所があればコメントいただければと思います。