JavaScript

【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)・リストを取り上げる。 目次 【1】push ... リストへ追加 【2】concat ... リストの結合 【3】slice ... リストの部分抽出 【4】s…

【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】ループ操作 ~ map etc ~

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

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

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

【JS】ユーザ情報取得

■ はじめに https://blogs.yahoo.co.jp/dk521123/23844430.html で、C#によるユーザ情報取得を行った。 今回、JavaScriptで調べてみた。 ■ サンプル <script> document.write("location.host : " + location.host + "</br>"); document.write("location.hostname : " + lo…

【JS】 JavaScript のダブルクリックイベントについて考える

■ はじめに JavaScript のダブルクリックについて、色々と調べてみたら 意外とややっこしかったので、メモ。 目次 【案1】 dblclickイベントで実装する 【案2】 clickイベントとsetTimeoutで実装する 【案3】 mousedownイベントとsetTimeoutで実装する 【…

【JS】Web Workers ~ JavaScript の マルチスレッド化 ~

■ 用語 Shared Worker * タブやiframeなど別のスクリプトからアクセスできるスレッド形式 ■ サポート https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API ■ サンプル DemoForWorker.html <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> …</meta></meta></head></html>

【JS】【jQuery】画像比較スライダー

■ はじめに * 2つの画像の違いを見比べる際に使用する画像比較スライダーについて扱う * 以下のサイトが参考になった。感謝。 https://ferret-plus.com/8760 https://blog.htmlhifive.com/2017/10/24/javascript-image-comparison-library/ ■ cocoen * jQuer…

【JS】差分画像を生成するには...

■ はじめに https://blogs.yahoo.co.jp/dk521123/37801875.html を調べてる時に、差分画像を生成するライブラリを見つけたのでメモ。 https://blog.htmlhifive.com/2017/10/24/javascript-image-comparison-library/ ■ 差分画像を生成する * js-imagediff を…

【JS】JavaScript での 日付 / 日時 の扱い

■ はじめに ライブラリとかに関しては、以下の関連記事に記載。 TypeScript での 日付 / 日時 の扱い https://dk521123.hatenablog.com/entry/2021/01/29/231952 ■ 使用上の注意 1) ゼロ埋めしないと、表示されない * 例えば、「2018-1-1」ではなく、ゼロ…

【JS】 途中入力離脱防止 ~ beforeunloadイベント ~

■ 途中入力離脱を防止するには * 「beforeunload」イベントを使う ■ サンプル <html lang="ja"> <head> <title>Hello World</title> </head> <body> <div> <a href="index.html">link</a> </div> <form action="index.html" method="post"> <div> <input type="submit" id="button" value="ClickMe"> </div> </form> </body></html>

【JS】【CSS】wow.js と Animate.css でアニメーションを実装する

■ はじめに * 以下の関連記事で扱った Material Design for Bootstrap 4 (MDB) のサンプルで wow.js と Animate.css でアニメーションを実装していたので、 かなり簡単にアニメーションを実装できたので、メモする https://blogs.yahoo.co.jp/dk521123/37632…

【JS】 タイプライターのように表示するには... ~ setTimeout()を使用する ~

■ はじめに * ふっと、タイプライターのように表示するのって どうするんだろうと思ったので調べてみた * 以下のサイトを参考にさせてもらった http://javascript123.seesaa.net/article/111409276.html * 汎用的に使いたいので、クラス名「typeWriter」を指…

【JS】JavaScriptにおける数値の誤差

誤差パターン1:64ビット倍精度の数字範囲を超える場合 * JavaScriptの数値は「IEEE754」という規格に従って「64ビット倍精度」で行っている => 「64ビット倍精度」の数値範囲は、「-1.79769×10の308乗~1.79769×10の308乗」 例 var result1 = Math.pow(2, 5…

【JS】 可変長引数

可変長引数 * arguments で行う 補足:argumentsについて * arguments は、配列ではなく、オブジェクト * Java/C#などの可変長引数とは異なり、arguments には、すべての引数の値が含まれている。 (以下のサンプルで「if (index == 0) { continue; }」してい…