■JavaScript
モダン JavaScript チートシート | Modern JS Cheatsheet
https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html
【JavaScript】分からない部分まとめてみたら最強だった件 - Qiita
https://qiita.com/TeppeiMimachi/items/b3528b4f37b06383b3cc
2021年に知っておきたいJavaScript最適化技術34選 - Qiita
https://qiita.com/baby-degu/items/396edbaefea64140a5d0
JavaScript で parseInt / parseFloat を使わない方が良い理由
http://nmi.jp/2022-02-03-dont-use-parseInt
■基本文法
■変数
var test1 = "テスト1";
document.write(test1);
■ブロックスコープを持つ変数
変数の有効範囲を限定できるので、安全なプログラムになる
let test2 = "テスト2";
document.write(test2);
■定数
定数は内容を変更できない
const TEST3 = "テスト3";
document.write(TEST3);
■関数1
function hello1(name) {
document.write("こんにちは" + name + "さん");
}
hello1("テスト4");
■関数2
書き方が変わっても意味はまった同じ
let hello2 = function(name) {
document.write("こんにちは" + name + "さん");
}
hello2("テスト5");
■アロー関数
関数を引数で渡すときに使うとコード量を減らせる
function hello3(getname) {
document.write("こんにちは" + getname() + "さん");
}
//hello3(function() { return "テスト6"; });
//hello3(() => { return "テスト6"; });
hello3(() => "テスト6" );
■オブジェクトのプロパティ（値）
let object1 = {
red: 255,
green: 125,
blue: 0
};
document.write(object1.red + ", " + object1.green + ", " + object1.blue);
■オブジェクトのメソッド（関数）
let object2 = {
red: 125,
green: 255,
blue: 0,
//code: function() {
code() {
return this.red + ", " + this.green + ", " + this.blue;
}
};
document.write(object2.code());
■コンストラクタ関数
function Object3(r, g, b) {
this.red = r;
this.green = g;
this.blue = b;
this.code = function() {
return this.red + ", " + this.green + ", " + this.blue;
}
};
let object3 = new Object3(125, 0, 255);
document.write(object3.code());
■クラス
constructor、getter、setter にも対応している
class Object4 {
constructor(r, g, b) {
this.red = r;
this.green = g;
this.blue = b;
}
/*
setCodeRed(r) {
this.red = r;
}
getCodeRed() {
return this.red;
}
*/
set red(r) {
this._red = r;
}
get red() {
return this._red;
}
code() {
return this.red + ", " + this.green + ", " + this.blue;
}
};
let object4 = new Object4(0, 125, 255);
/*
object4.setCodeRed(100);
document.write(object4.getCodeRed());
*/
object4.red = 100;
document.write(object4.red);
document.write(object4.code());
■クラスの継承とオーバーライド
class Object5 extends Object4 {
code() {
return "[" + this.red + ", " + this.green + ", " + this.blue + "]";
}
};
let object5 = new Object5(0, 0, 0);
object5.red = 200;
document.write(object5.red);
document.write(object5.code());
■スクリプトファイルの読み込み
動的に外部ファイルを読み込める
http(s)経由でなければエラーになるので注意
Object6.js
//export default function() {
export default {
return {
red: 200,
green: 200,
blue: 200,
code() {
return this.red + ", " + this.green + ", " + this.blue;
}
};
}
<script type="module">
import Object6 from './Object6.js';
let object6 = new Object6();
document.getElementById('object6').textContent = object6.code();
</script>
<span id="object6"></span>
■正規表現を扱う
■正規表現
if (href.match(/refirio\.net/i)) {
〜処理〜
}
■正規表現で後方参照
var matches = href.match(/\?shop_id=(.*?)$/);
var data = matches[1];
■正規表現で置換
var text = text.replace(/<br>/g, '');
var text = text.replace(/\n/g, '<br>');
■一定時間後に処理する
以下のように指定すると、一定時間後に処理が実行される
時間はミリ秒で指定するので、500だと0.5秒後となる
setTimeout(function() {
〜処理〜
}, 500);
■定期的に処理する
以下のように指定すると、一定時間ごとに処理が実行される
時間はミリ秒で指定するので、500だと0.5秒ごととなる
timer は、後述する clearInterval で使用できる
var timer = setInterval(function() {
〜処理〜
}, 500);
また、setTimeout によって定期的な処理を終了させることができる
clearInterval(timer);
■サウンドを再生
【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法 - webfrontend.ninja
https://webfrontend.ninja/js-audio-autoplay-policy-and-delay/
以下のようにすると、サウンドを再生できる
<script>
$(document).ready(function() {
$('#play_sample').on('click', function() {
var audio = new Audio('sound/sample.mp3');
audio.play();
return false;
});
});
</script>
<p><a href="#" id="play_sample">再生</a></p>
以下でも一応再生できるが、iOSだと一度しか再生できない
<script>
$(document).ready(function() {
$('#play_sample').on('click', function() {
$('#audio_sample').get(0).play();
return false;
});
});
</script>
<audio src="sound/sample.mp3" id="audio_sample">
<p>ご利用の環境では再生できません。</p>
</audio>
<p><a href="#" id="play_sample">再生</a></p>
■ムービーを再生
video要素、audio要素をJavaScriptから操作する−HTML5のAPI、および、関連仕様
http://www.htmq.com/video/
<script>
$(document).ready(function() {
$('#play_sample').on('click', function() {
$('#movie_sample').get(0).play();
return false;
});
});
</script>
<video src="movie/sample.mp4" id="movie_sample" width="400" controls>
<p>ご利用の環境では再生できません。</p>
</video>
<p><a href="#" id="play_sample">再生</a></p>
■ブラウザバックでの遷移を判定
ブラウザ依存があるようだが、以下2つの両方を使えば判定できそうな
いざ使うとなれば各実機での検証は必要
ブラウザバックで画面遷移してきたことを判定し、処理を動かす - Qiita
https://qiita.com/sakusaku_tempura/items/5b6d7d3a77d7b0cb3e3a
$(document).ready(function() {
if (window.performance.navigation.type == 2) {
console.log('ブラウザの履歴をたどって移動しました。（window.performance）');
}
});
[javascript]ブラウザの戻るボタンで戻ってきた時になんらかの処理をする方法
https://www.yukiiworks.com/archives/236
window.onpageshow = function(event) {
if (event.persisted) {
console.log('ブラウザの履歴をたどって移動しました。（event.persisted）');
}
};
■jQueryなしでHTMLを操作する
【脱jQuery】jQuery <=> vanillaJS 書き換え集
https://zenn.dev/kobito/articles/5e246e85615435
【JavaScript入門】querySelector()によるHTML要素の取得方法まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
https://www.sejuku.net/blog/70581
もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識 - WPJ
https://www.webprofessional.jp/dom-manipulation-vanilla-javascript-no-jquery/
jQueryからネイティブJavaScriptへ置き換えの第一歩 - Qiita
https://qiita.com/nayuneko/items/b3ad3d6bc2687bcdb0f6
非jQuery環境ではどう書んだっけ?チートシート - Qiita
https://qiita.com/tatesuke/items/261ad51426d11b4efe26
jQueryは使わない！ネイティブJavaScriptで実装してみた10選 ← kannart WEB HACKS
https://blog.kannart.co.jp/coding/1199/
【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ | WEMO
https://wemo.tech/2101
■Promise
とほほのPromise入門 - とほほのWWW入門
http://www.tohoho-web.com/ex/promise.html
4歳娘「パパ、Promiseやasync/awaitって何？」〜Promise編〜 - Qiita
https://qiita.com/Yametaro/items/0d29df53d9ac2a779595
【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita
https://qiita.com/impl_s/items/8ffbe865b8c53a75cfe3
■ライブラリを作成する
オリジナルのJavaScriptライブラリを公開しよう
https://zenn.dev/yusuke99/books/fcd96342f5cb1b468799