JavaScript

環境・バージョンの対応状況

• ECMAScript 5 compatibility table
• ECMAScript 6 compatibility table
• ECMAScript 2016+ compatibility table

実装

制御構文

if else

if (val > 0) {
    console.log('plus');
}
else if (val < 0) {
    console.log('minus');
}
else {
    console.log('else');
}

for

indexを使った普通のfor文

let items = [1, 2, 3, 4, 5];
for (let i = 0; i < items.length; i++) {
    console.log(items[i]);
}

配列処理のforeachタイプはofを使う。

for (const item of items) {
    console.log(item);
}

break

ループを抜ける

continue

次のループへ

数値

四捨五入

Math.round(double_value);

文字列

数値から文字への変換

String(number_value);

文字列から数値への変換

Number(string_value);

Dateへの変換

コード上単純な変換は、決められた書式になっていればそのままDateインスタンスを作成できる。

date_str = "2024.12.26 23:39:22.12345";
date = new Date(date_str);
console.log(date);
// 2024-12-26T14:39:22.123Z

区切り文字がない場合や、24時などはInvalid Dateとなる。

文字列長

文字数はlengthメソッド。

const sample_str = '完全にときめいちゃった';
console.log(sample_str.length);

出力は11

文字列の繰り返し

str = 'abc';
console.log(str.repeat(3));
// 結果は "abcabcabc"

部分文字列

substring

substring(開始位置, 終了位置)を使う。(終了位置は「ここ以降は除外」)

str = 'hello world';
console.log(str.substring(3, 8));

出力はlo wo

引数が一つの場合は、その位置から最後まで。

console.log(str.substring(3));
// 出力は "lo world"

第2引数の負数を指定した場合の動作は以下

• substring()は負数あるいはNaNが指定されたら0として処理
• 第1引数より第2引数が小さい場合は、2つの引数を交換して処理

str = 'hello world';
console.log(str.substring(3, -2));
// "hel"

よって、substring(3, -2)の処理は、substring(0, 3)として処理される。

slice

str = 'hello world';
console.log(str.slice(3, 8));
// "lo wo"

基本的にはsubstring()と同じ

str = 'hello world';
console.log(str.slice(3));
// "lo world"

第2引数に負数を指定すると末尾から数える。

str = 'hello world';
console.log(str.slice(3, -2));
// "lo wor"

先頭が指定の文字列で始まっているか

val = 'http://www.example.org';

if (val.startsWith('http')) {
    console.log('valid');
}
else {
    console.log('invalid');
}

split

const string = 'abc,def,ghi';
const items = string.split(",");

結果は [ 'abc', 'def', 'ghi' ] になる。

String.prototype.split() - JavaScript | MDN

正規表現を使う場合はそのまま。

strings.split(/,\s*/);

文字列長のバイト換算

string.lengthは文字数を返す。
バイト数を得るには以下。

const sample_str = '完全にときめいちゃった';
const size = new Blob([sample_str]).size;
console.log(size);

結果は33

URL文字列のparse

URLを使うと簡単

const url = 'https://www.swarmapp.com/zaki_hmkc/checkin/66ca6619c1e2dd41311a7dcb?s=UrwNh_CXxd93txmhWtdxCdPOTLQ';
const url_obj = new URL(url);

url_objの中身は以下の通り

URL {
  href: 'https://www.swarmapp.com/zaki_hmkc/checkin/66ca6619c1e2dd41311a7dcb?s=UrwNh_CXxd93txmhWtdxCdPOTLQ',
  origin: 'https://www.swarmapp.com',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'www.swarmapp.com',
  hostname: 'www.swarmapp.com',
  port: '',
  pathname: '/zaki_hmkc/checkin/66ca6619c1e2dd41311a7dcb',
  search: '?s=UrwNh_CXxd93txmhWtdxCdPOTLQ',
  searchParams: URLSearchParams { 's' => 'UrwNh_CXxd93txmhWtdxCdPOTLQ' },
  hash: ''
}

URLエンコード

encodeURIComponent(string);

正規表現

正規表現 - JavaScript | MDN

単純なマッチング(test)

true/falseの判定だけなら(StringでなくRegExpのメソッドの)testが使える。

sample = 'hello world';
if (/world/.test(sample)) {
    console.log("match");
}

マッチした結果を配列で参照する(match)

date_str = "20241226";

if (r = date_str.match(/^(\d{4})(\d{2})(\d{2})$/)) {
    console.log(r);
}

結果は以下の通り

[
  '20241226',
  '2024',
  '12',
  '26',
  index: 0,
  input: '20241226 ',
  groups: undefined
]

置換(replace)

const sample_string = '......';
const new_string = sample_string.replace(/regexp/gi, 'replace-string');

switch文で使う

const str = 'テストしたい文字列';

switch (true) {
    case /^regexp1/.test(str):
        // ...
        break;
    case /^regexp2/.test(str):
        // ...
        break;
    default:
        break;
}

配列

定義

sample_array = [1, 2, 3];

要素の追加

pushで末尾に追加。

const result = [];
for (...) {
    const item = { ... };
    result.push(item);
}

要素のクリア

const list = [1,2,3,4,5];
list.splice(0);
console.log(list);
console.log(list.length);

出力は[]と0

最後の要素

sample_array = [1, 2, 3];
console.log(sample_array.at(-1));

結果は 3

要素の有無

status = get_http_status();
if ([200, 201, 202, 203].includes(status)) {
    ...
}

join

sample_array = [1, 2, 3];
console.log(sample_array.join());

引数が空の場合は出力は1,2,3となる。
引数を指定すればそれがデリミタとなる。

辞書

辞書の定義

const data = {
    host: '192.168.0.1',
    user: 'zaki',
    home: '/home/zaki'
}

空データ

const dict = {};

要素の追加

そのまま追加すればOK

data.password = 'curry_tabetai';

キー部分に記号を含んだり変数参照したい場合は'[]'を使う。

data[foo.bar.buz.get('key')] = foo.bar.buz.get('value');

空判定

特にそれ用のメソッド等は無い。
キー一覧を取り出してlengthを見るのがセオリー

if (Object.keys(dict).length) { ... }

関数定義

昔ながらの実装

function func(arg) {
    console.log(arg);
}

func('njgk');

型の確認

typeofを使う。

console.log("type: " + typeof(users))

プロパティの存在チェック

inを使う。

let data = {
    host: '192.168.0.1',
    user: 'zaki',
    home: '/home/zaki'
}

if ('password' in data) {
    console.log('defined password');
}
else {
    console.log('not defined password');
}

これはnot definedの方が動作する。

時刻処理

let d = new Date();
console.log(d.toISOString());

結果(の書式)は2024-08-17T10:28:28.466Z

UNIXタイムからDate型

// Date()の引数はミリ秒で指定する
unix_date_sec = '1723426784'
let datetime = new Date(unix_date_sec * 1000);

console.log(datetime);
console.log(datetime.toLocaleDateString());
console.log(datetime.toLocaleTimeString());

出力は以下

2024-08-12T01:39:44.000Z
2024/8/12
10:39:44

あるDateオブジェクトの翌日

const tomorrow = new Date(foobar_date);
tomorrow.setDate(tomorrow.getDate() + 1);

タイムゾーンのオフセット取得

const d = new Date();
console.log(d.getTimezoneOffset());
console.log(d.getTimezoneOffset() / 60);

OSのタイムゾーン設定で決まる。 JST(GMT+0900)設定で実行すると出力は以下の通り。

-540
-9

UTCの時刻情報を得る

getFullYear()などに対応したgetUTCFullYear()というメソッドを使う。

const utc_datestr = d.getUTCFullYear().toString().padStart(4, "0") + "/" + (d.getUTCMonth() + 1).toString().padStart(2, "0") + "/" + d.getUTCDate().toString().padStart(2, "0");

非同期処理

Promise変数

resolve()で中身を取り出す

let promise_value = async_func();
const promise = new Promise((resolve) => {
    resolve(promise_value);
}).then((val) => {
    console.log(val);  // Promiseをresolve()したので取れる
})

HTTP

GET

基本はこれ。

const resp = fetch(url);

レスポンス

text形式でレスポンスbodyを取り出すには

const body = resp.text();

RESTなどでレスポンスがJSON形式の場合は、オブジェクトとして取り出すこともできる。

const obj = resp.json();

レスポンスコード

if (res.status === 200) {
    // statusが200の場合の処理
}

リクエストヘッダ

const headers = new Headers();
headers.append('accept', 'application/json');

const res = await fetch(url, { headers: headers });

POST

辞書型データをJSON形式でpostする。

const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer ' + token);

const payload = JSON.stringify(dict_param);

const res = await fetch(url, { method: "POST", body: payload, headers: headers });

ファイル

ブラウザJavaScriptでPC上のファイルを読む

<input type="file" id="file" accept="image/*"/>
<div id="view"></div>

const file_blob = document.getElementById("file").files[0];
const reader = new FileReader();
reader.readAsDataURL(file_blob);

reader.onload = function() {
    const img = document.createElement("img");
    img.src = reader.result;

    const div = document.getElementById('view');
    div.appendChild(img);
}

例外

throwする

const res = await fetch(url, { method: "POST", body: body, headers: headers });
if (!res.ok) {
    throw new Error('fetch failed: ' + await res.text());
}

catchする

try {
    const res_img = await fetch(url);
}
catch(err) {
    throw new Error('http access failed: ' + err + "\nurl: " + url);
}

import

DOM

要素の取得

const niji = document.getElementById("niji");

これでhtml内の以下の要素が取得できる。

<div id="niji">

要素の幅・高さ

let width  = document.getElementById("niji").clientWidth;
let height = document.getElementById("niji").clientHeight;

要素別

button

const btn = document.createElement("button");
btn.textContent = "start";
btn.addEventListener('click', ()=> {
    foobar();
});

img

let image_item = document.createElement("img");
image_item.src = image_url;

checkbox

const checkbox_item = document.createElement("input");
checkbox_item.type = 'checkbox';
checkbox_item.id = 'sample';
checkbox_item.name = 'sample';
checkbox_item.value = 'sample';
checkbox_item.checked = true;

チェックボックスのチェック状態を参照するには.checkedを見ればOK

label

const label_item = document.createElement("label");
label_item.htmlFor = 'sample';
label_item.textContent = '設定';

idの指定はforでなくhtmlForであることに注意。
JSでlabel要素にfor属性が追加できない

複数の子要素を全て削除する

const component = document.getElementById("component");
while(component.firstChild) {
    component.removeChild(component.firstChild);

firstChildで子要素が存在する間はその子要素を削除する、をループで回せばOK
以下のように子要素リストでループしてもうまくいかない。

for(const child of component.children) {
    component.removeChild(child);
}

イベントリスナ

ページの読み込み後

document.addEventListener("DOMContentLoaded", () => {
    // ...
});

html関連

画面遷移(動画面)

window.location.href = url;