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);

文字列長

文字数はlengthメソッド。

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

出力は11

文字列の繰り返し

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

split

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

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

String.prototype.split() - JavaScript | MDN

文字列長のバイト換算

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

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

結果は33

正規表現置換

const str = 'foobarbaz';
console.log(str.replace(/ba/g, 'BA'));

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);

配列

定義

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)) {
    ...
}

辞書

辞書の定義

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);

非同期処理

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;