JavaScript

【JS】DOT言語表示ツール ~ d3-graphviz ~

■ はじめに https://dk521123.hatenablog.com/entry/2023/06/15/004815 https://dk521123.hatenablog.com/entry/2023/06/16/000531 で、度々登場したDOT言語のPlayground (graphviz-visual-editor) を使ってm各DOTの移り変わりをアニメーション化して 表…

【JS】JavaScript での ファイルの読み書き

■ はじめに * JavaScript での ファイルの読み書きをメモ。 目次 【1】JS での ファイルの読み込み 例1:FileReader() を利用する 例2:blob.text() を利用する 【2】JS での ファイルの書き込み 【1】JS での ファイルの読み込み 例1:blob.text() を…

【JS】JS で ファイル出力するCSVデータ生成ツールを作ってみる

■ はじめに https://dk521123.hatenablog.com/entry/2022/11/23/000000 の続き。 最近、プログラムをほとんど書いていないので 上記の関連記事の「【2】課題」の部分を修正して もう少し発展したツールを作ってみた。 ついでに、ファイル出力もやってみたの…

【JS】動的に生成したinputタグを考える

■ はじめに CSV/TSVテストデータを自動的に作るツールを作ることを考えている(※)。 個人的に、ツールを作る際に、一番汎用性があるのは、 JavaScriptではないかと。 そこで、AWSマネージメントコンソールのような 値が入ってたら、動的に Textboxが生成する…

【JS】JS で テスト用の超簡易なCSVデータ生成ツールを作ってみる

■ はじめに https://dk521123.hatenablog.com/entry/2022/11/24/230044 で、 「CSV/TSVテストデータを自動的に作るツールを作ることを考えている。」 って言ったので、とりあえず、プロトタイプを作ってみた。 「超簡単」とは書いたが、それでもそれなりのコ…

【JS】DOM ~ 基本編 / オブジェクト取得 ~

■ はじめに の続き。 「1)オブジェクト取得系」を掘り下げる 目次 【1】getElementById() 【2】getElementsByTagName() 【3】querySelectorAll() 【4】querySelector() 【1】getElementById() * 指定したIDの要素のオブジェクト取得 => 詳細は以下の…

【JS】イベント ~ 入門編 ~

■ はじめに JavaScript の イベントについて扱う 目次 【1】イベントの種類 1)基本的なイベント 2)入力イベント 【2】イベントの追加方法 【1】イベントの種類 1)基本的なイベント [1] click * Click イベント https://developer.mozilla.org/ja/do…

【JS】DOM ~ 基本編 / オブジェクト作成 ~

■ はじめに https://dk521123.hatenablog.com/entry/2011/01/07/012520 の続き。 「2)オブジェクト作成系」を掘り下げる 目次 【1】createElement() 【2】createTextNode() 【1】createElement() * 指定タグでの要素のオブジェクト作成 1)サンプル 例…

【JS】【TS】ループ操作 ~ map ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/03/000000 を分冊。 pulumi で TypeScript を使っているのだが、 少しでも簡潔に書きたいと思い、調べていたら 結局 map を使うことにしたので、メモしておく。 目次 【0】ブラウザ上での実行環…

【JS】【TS】記号の演算子 ~ ? / ?? / ! ~

■ はじめに ! とか ? とかの動きがややっこしかったのでメモ。 目次 【0】実行環境 【1】? 1)オプション引数 (optional parameter) 2)オプショナルチェイニング (Optional chaining) '?.' 3)三項演算子 4)Null 合体演算子 (nullish Coalescing) '…

【JS】【TS】条件分岐

■ はじめに 三項演算子 を使ったので軽くメモ。 ついでに、if文、switch文ものっけとく。 基本、C や Java と変わらん。 目次 【0】実行環境 【1】if文 【2】switch文 【3】三項演算子 補足:Null 合体演算子 (nullish Coalescing) '??' 【0】実行環境 …

【JS】【TS】axios で リクエストに対してキャンセルするには

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/14/101645 の続き。 axios で 外部APIと通信する際に、重い処理の場合、 キャンセルした場合が多々あると思う。 (例えば、ユーザが待たされすぎて、キャンセルしたい 又は、別の操作を行いたい場…

【JS】【TS】JS単体試験ツール Jest ~ キャッシュ関連 ~

■ はじめに Jestの実行で、キャッシュしているとエラーにならないが、 キャッシュをクリアすると、単体試験エラーが発生する現象が発生した。 他の方でもそういったケースがある模様。 https://www.ncaq.net/2018/03/02/10/19/22/ その際に得たノウハウを纏…

【JS】【TS】配列・リスト操作 ~ スプレッド構文 / Three-dots ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/02/10/225119 https://dk521123.hatenablog.com/entry/2021/02/24/222452 の続き。 TypeScript のレビュー会で 「...」(ドット3つ)の書き方を見かけたので、メモ。 これを知ってたら、実装する時…

【CSS】【JS】【TS】 セレクタ

■ はじめに https://dk521123.hatenablog.com/entry/2021/03/06/234935 https://dk521123.hatenablog.com/entry/2021/03/05/113518 https://dk521123.hatenablog.com/entry/2015/05/15/000926 などで、CSSセレクタやJavaScriptのdocument.querySelector/quer…

【JS】【TS】Lodash ~ 基本編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/23/000000 の続き。 Lodash を使う機会がでてきて、新たに仕入れた知識がでてきたので メモしておく。 目次 【1】Lodash の個別インストール 【2】サンプル 1)lodash.uniqby - 重複排除 【3…

【JS】【TS】配列・リスト操作 ~ ソート編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/02/10/225119 の続き。 ソートに関して、記事が長くなったので、分冊。 結構、落とし穴もあるので、その辺も追記。 目次 例1:クラスのソート 例2:同一の値が存在する場合の対応 ■ 使用上の注意:…

【JS】【TS】配列・リスト操作

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/03/000000 でループを取り上げたが、 今回は、配列(Array)・リストを取り上げる。 目次 【0】定義方法 【1】push ... リストへ追加 【2】concat ... リストの結合 【3】slice ... リストの…

【JS】【TS】処理時間計測 ~ performance.now() ~

■ はじめに 小ネタ。 以下の関連記事でも使った処理時間計測用の メソッド「performance.now()」について、メモ。 https://dk521123.hatenablog.com/entry/2021/01/16/202822 ■ performance.now() * ミリ秒の小数点以下まで計測できる 詳細は、以下のサイト…

【JS】【TS】タイマー処理 ~ setTimeout / setInterval etc ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/02/03/233137 で、setInterval() を使ったが、 JavaScript/TypeScript のタイマー処理について ちゃんとまとめてなかったので、まとめておく。 タイマー処理 【1】setTimeout 【2】setInterval 【…

【JS】【TS】Day.js ~ 入門編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/29/231952 https://dk521123.hatenablog.com/entry/2021/01/30/232708 の続き。 今回は、Day.js を調べてみた。 目次 【1】Day.js 【2】公式サイト 【3】環境設定 【4】サンプル 【1】Day.js…

【JS】【TS】date-fns ~ 入門編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/29/231952 の続き。 Date に関するライブラリの内に気になった date-fns について 実際に使ってみた。(若干のハマりポイントあり) 目次 【1】date-fns 【2】公式サイト 【3】使用上の注意 【…

【JS】【TS】TypeScript での 日付 / 日時 の扱い

■ はじめに TypeScript で 日付・日時について扱う機会があった。 ライブラリもあるみたいなので、調査。 なお、TypeScriptって書いてあるけど、JavaScript でも同じ。 後日談 過去に JavaScript の記事があった。。。 https://dk521123.hatenablog.com/entr…

【JS】【TS】JS単体試験ツール Jest ~ Mock編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/23/103209 https://dk521123.hatenablog.com/entry/2021/01/08/164356 の続き。 モックを使って単体試験をする必要がでてきたので、メモする。 目次 【1】主なメソッド 1)基本的なモック関数 …

【JS】【TS】Lodash ~ 入門編 ~

■ はじめに 仕事で、Lodash って出てきたので、調べてみた。 目次 【1】Lodash (ロダッシュ) とは? 1)フルセットでインストールすると、でかい 2)import の仕方で環境が変わるとエラーになる場合がある 【2】使用上の注意 【3】環境設定 【4】サン…

【JS】【TS】非同期処理 ~ async/await, Promise ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/14/101645 で、外部APIにアクセスしてデータ取得することを行った。 その際、非同期処理になる。 そこで、JavaScript/TypeScriptでの非同期処理を学ぶ。 目次 【1】関連用語 1)async 2)await…

【JS】【TS】axios ~ 外部API通信ライブラリ ~

■ はじめに TypeScript で、axios ってのを扱う可能性がでてきたので、メモ。 目次 【1】axios とは? 【2】Tips 1)キャンセルするには 【3】サンプル 例1:JavaScript での Hello world 例2:TypeScript での Hello world(async/await) 例3:Type…

【JS】【TS】JS単体試験ツール Jest ~ 基本編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/23/103209 の続き。 Jest を書いていて気になったTips的なものをメモする。 目次 【1】確認用メソッド 【2】その他メソッド 1)each 【1】確認用メソッド expectクラスの以下の一覧でどういっ…

【JS】【TS】ループ操作

■ はじめに JavaScript/TypeScript において、 for/while/do-while 以外にもループ処理を扱う方法をメモ。 目次 【0】ブラウザ上での実行環境 【1】forループ 1)for ... in 2)for ... of 3)forEach 4)ESLint「no-restricted-syntax」 【2】map 【…

【JS】【TS】JS単体試験ツール Jest ~ 入門編 ~

■ はじめに JavaScript / TypeScript の単体テストツールの話題になったので 調べてみたら、Jestがでてきたので、調べてみた。 目次 【1】主な単体テストツール 1)比較サイト 【2】Jest A)公式サイト B)できること 【3】環境設定 1)Node をインスト…