JavaScript
DOM中のコメント要素はnodeTypeがNode.COMMENT_NODEのノードとして扱われます。なので親要素のchildNodesから取得できます。 // .parent要素からコメント要素を取得する。 parentNode = document.querySelector(".parent") comments = Array.from(parentNode…
インスタンスのconstructorプロパティでクラスのオブジェクトを取得できます。このオブジェクトを操作すればクラスのオブジェクトプロパティを操作できます。 class Class1 { static X = 123; } const a = new Class1(); console.log(a.constructor.X) //-> …
JavaScriptのCanvas APIでアナログ時計を描画するコードです。カスタム要素も使用しています。 本来は類似名前空間やむき出しのオブジェクトよりもモジュールを使った方が適切ですが、ローカルでのデバッグが面倒なので通常のスクリプトとして分割しています…
JavaScriptには論理型（boolean）のオブジェクトラッパーであるBooleanクラスが存在しており、プリミティブ型のbooleanとは異なる動作をします。Booleanクラスのインスタンスは保持する値に関わらずtrulyです。 console.log(new Boolean(false) === false) /…
JavaScriptの&&と||はC/C++の&&と||と微妙に異なる動作をします。 類似点：左から右へ順次評価する。評価が左側で終われば右側は評価されない。 相違点：結果は最後に評価した値そのもの（C/C++ではtrue/false）。 類似点は次のコードで確認できます。&&では…
id="element1"な要素を参照する方法はいくつかありますが、次の２通りが素直です。 // Windowオブジェクトへの名前アクセス element1 window["element1"] // document.getElementByIdメソッド document.getElementById("element1") 前者の方が短いのに後者の…
JavaScriptでファイルのドロップを受け入れるサンプルコードです。特殊オブジェクト（デスクトップの「PC」など）が含まれると何も取得されなくなることに注意してください。 ソースコード <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample Document</title> <style> /* 外見を整えるためのスタイル定義です。 */</meta></head></html>…
配列の作成 要素のイテレーター作成 要素数の取得・設定 要素の参照 要素の選択・変換 要素の平坦化 要素を結合した文字列の作成 値による範囲上書き 条件式による要素の検索 値による要素の検索 要素の集約 要素の追加・抽出 要素の内部複写 要素の検索 要…
JavaScriptではclassキーワードでクラスを作成できますが、クラスの実体はObjectなのでプロパティが追加できてしまいます。この動作はObject.seal()静的メソッドで無効化できるため、コンストラクタで自身に適用すればプロパティを追加できないクラスを作成…
HTML5からはINPUT要素にtype="file"が用意され、JavaScriptのFile API・Blob・TypedArrayと併せてファイル内容を読み込むことができます。以下に簡単なサンプルコードを示します。 ファイルインプットからFileList、Fileを取得する。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <script> function f</meta></head></html>…
HTML要素関係の関数サンプルコードです。 /** * ラジオボックスグループのチェックをvalueとある値の一致可否で設定します。 * @example setCheckedRadioElementsByValue("radio1", "123") */ function setCheckedRadioElementsByValue(name, value) { for (…
2000年以降のYYMMDD形式の文字列を日付型（Date）に変換するサンプルコードです。 function dateFrom20YYMMDD(s) { if (typeof s != "string") return undefined; const m = s.match(/^(\d\d)(\d\d)(\d\d)$/) if (m == null) return undefined; const Y = pa…
JavaScriptで文字列の正規表現のマッチ結果をクラスで保持するサンプルコードです。正規表現のマッチ結果に限らず、文字列の処理結果を保持する方法の骨組みとして使えます。 クラスで正規表現のマッチ結果だけ保持する場合 クラスで正規表現のマッチ結果を…
オブジェクトを他のオブジェクトの一部にする オブジェクト配列から要素のキーセットを取得する globalThisのアルファベット小文字からはじまるプロパティの名前を一覧取得する globalThisのアルファベット大文字からはじまるプロパティの名前を一覧取得する…
// オブジェクトのプロパティ記述子配列を取得します。 const GetObjectOwnPropertyDescArray = object => Object.entries(Object.getOwnPropertyDescriptors(window)) // プロパティ記述子配列からデータ記述子を抜き出します。 const FilterOwnPropertyDes…
Array.from()はlengthプロパティが正の整数とみなせるオブジェクトを配列様オブジェクト（Array-like object、配列のようなオブジェクト）と判断していると考えられます。 真の配列様オブジェクトかの判断は反復可能オブジェクト以外を与えてArray.from()の…
配列様オブジェクト（Array-like object） 配列様オブジェクトのArray.from()での利用 配列様オブジェクト（Array-like object） MDNのArray.from()の説明には「Array-like object」（「配列様オブジェクト」）あるいは「配列のようなオブジェクト」という表…
以下のコードで文字列をUTF-16コードユニットの配列に変換できます。 Array.from("", s => Array.from({length: s.length}, (_, i) => s.charCodeAt(i))) // Array(3) [ [ 55356, 57166 ], [ 55356, 57162 ], [ 55357, 56833 ] ] Array.from("", s => Array.…
本文 以下のコードで文字列をUnicodeコードポイントの配列に変換できます。 Array.from("", s => s.codePointAt(0)); // Array(3) [ 127822, 127818, 128513 ] 関数にしておくと便利かもしれません。 const getCodePointsFromString = (source) => { if (typ…
Uint8Arrayは要素を0～255（0～0xff）の整数に収める。要素は整数かつ& 0xffで変換される。 Uint8ClampedArrayは要素を0～255（0～0xff）の整数に収める。要素は整数かつ0未満は0、255超過は255に変換される。 Uint8Array.of(255, 256, 257, 258, 0, -1, -2)…
TypedArray.prototype.map(...) 変換結果がUint8→予想通りの結果 変換結果が文字列等→予想外の結果（e.g. [0, 0, 0, ...]） TypedArray.prototype.mapの戻り値はTypedArrayであり、各要素はTypedArrayの要素型に変換されます。例えばUint8Array.prototype.ma…
ブックマークレット（ブックマークに登録するJavaScript）のメモです。ブックマークやお気に入りに新しい項目を作成してURLにコードを貼り付けることで、処理を実行する項目を作成できます。 CSSセレクタに一致するA要素のリンク先をすべて開く。 クラスがcl…
JavaScriptのオブジェクトの初期化（オブジェクトリテラル）で各種プロパティを設定するサンプルコードです。ここでは初期化のみ扱いますが、各プロパティは作成後も__defineGetter__、__defineSetter__などを使用して設定できます。 let i = 2; // 初期化に…
JavaScriptの反復処理はプロトコルとして実装されています。反復処理プロトコルは反復可能プロトコル（Iterable protocol）と反復子プロトコル（Iterator protocol）からなり、これらはオブジェクトが次表の条件を満たすことを求めます。 プロトコルはあくま…
2021/3/10：この記事は別のブログで投稿した記事を移動したものです。 まえがき 間違ったコードと注意点 正しいコード 備考：文字列のlengthとArray.from関数 まえがき JavaScriptの文字列はUTF-16なのでサロゲートペアを含みます（少なくとも2019年12月6日…
2021/3/10：この記事は別のブログで投稿した記事を移動したものです。 久しぶりにJavaScriptを触ったら引数の文字列判定で悩んだので、周辺情報として調べたプリミティブ値とプリミティブデータ型について記録します。 プリミティブ値とプリミティブデータ型…
JavaScript (MDN web docs, 2020/01/14時点)のArrayの反復メソッドを基準としたC# (.NET Core 3.1)のLINQとの比較です。車輪の再発明に該当すると思いますが、JavaScriptの勉強のために。 JavaScript C# 概要 entries(...) Select((item, index) => ...)（直…
