■目次
・
JavaScript
・
基本文法
・
正規表現を扱う
・
一定時間後に処理する
・
定期的に処理する
・
jQueryなしでHTMLを操作する
・
Promise
・
ライブラリを作成する
■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);
■jQueryなしでHTMLを操作する
【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