カテゴリ：JavaScript：記事一覧

JavaScritpでオブジェクトをコピーするとき、理解しておく必要があるのがディープコピーとシャローコピーです。 この二つの違いを把握しておかないと、不具合を引き起こす可能性があります。 そこで今回は、ディープコピーと […]

JavaScriptでオブジェクトをディープコピーをするとき、structuredClone()を使用すると簡単にコピーできます。 こんなに便利なのがあったなんて！と驚いたので紹介します。

JavaScriptでブラウザの新規タブを開いてWebページを読み込む方法と、読み込み完了を待って、開いたWebページからのDOMなどの情報取得する方法を紹介します。

JavaScriptでアニメーションをおこなうとき、方法の一つとしてsetTimeout()またはsetInterval()で一定時間ごとのタイマー処理が考えられます。 しかしこれらの関数はブラウザでは効率が悪いので、Window.requestAnimationFrame()が推奨されます。そこで今回は、このメソッドについてお伝えします。

DOM要素のサイズ変更を捕捉したくてaddEventListener()でresizeイベントを登録したけれど反応してくれませんでした。 調べてみるとresizeイベントは、windowのリサイズ専用のようです。どうやらDOM要素のサイズ変更は、Resize Observer APIを使用するようです。 そこで今回は、Resize Observer APIの使用方法をお伝えします。

Webページのtextarea要素に文章が入力されているとき、JavaScriptを使って行番号でカーソルを移動させる方法をお伝えします。

JavaScriptには文字列からhtmlのタグを削除する関数が用意されていません。 そのため自作する必要があります。そこで今回は、文字列からhtmlタグを取り除く関数を作成してみました。

JavaScriptでユーザー入力やWebAPI等から取得した文字をそのままブラウザで表示すると、リンクやスクリプト等のタグが紛れ込んで意図しない結果を招く可能性があります。 そのためタグを無害化するエスケープ処理を行うのですが、場合によってはそのまま表示できます。 少し混乱ぎみなので、整理してみます。

JavaScriptで処理時間を計測する場合Date.now()でタイムスタンプを取得して差分を求める方法があります。 この方法で得られる精度はミリ秒ですが、もっと高精度な計測が求められるケースもあります。そこで今回は、JavaScriptで高精度なパフォーマンス計測する方法をお伝えします。

先日、JavaScriptでh2タグの前に目次に移動するリンクを挿入するスクリプトを作成して、今見てもらっているWebページに適用しました。 JavaScriptコードの参考になるかと思い、コードを公開します。 目次ではなくて、トップに移動などでも応用できると思います。

JavaScriptのプロトタイプチェーンを継承と呼ぶこともあります。 これらのチェーン上のプロパティを含めてプロパティ名を列挙します。

JavaScriptのObject.getOwnPropertyNames()とObject.keys()は、オブジェクトが自分自身で直接所持するプロパティの名前を配列で返すメソッドです。結果が同じに見える二つのメソッドは、何が異なるのかを調べてみました。

JavaScriptで二つの配列を、要素を重複させずに結合（マージ）する方法を紹介します。reduce()とindexOf()を使用して総当たりで確認していく方法とSetオブジェクトを使用する方法です。

JavaScriptで新規ページを開くときはwindows.open()を使用します。 開いた後に条件が合えば、そのページの情報を取得したり、DOMを操作したりできます。今回は、その方法をお伝えします。

JavaScriptのreduce()メソッドは配列の要素を集計するとき、欠かせないメソッドです。 様々な場面で使用できるので、使い慣れるとプログラムコードの効率が上がります。

Webサイト上のリンクを見て、一目で外部リンクとわかるサイトって最近多いですよね。 僕もやろうと思いましたが、既存の記事を修正するのに時間がかかるためJavaScriptで動的に処理させることにしました。やることは、リンクが外部リンクかどうかを確認してクラス名を追加するだけです。 最終的に、次のような見た目になりました。