カテゴリ:JavaScript:記事一覧
このカテゴリの記事は、JavaScriptを使ったプログラミングについて、実際にやったことを中心に紹介します。
ファイルから読み込むなどの方法で外部から取得した文字列データは改行コードが不確定なことが多いです。 そのため、まずは改行を削除したり統一するなどの処理が求められます。そこで今回は、JavaScriptで文字列内の改行の削除および統一する方法をお伝えします。
JavaScriptはclass構文の導入でプロトタイプチェーンの階層を構築しやすくなりました。 生成されたオブジェクトは、各階層で継承したオブジェクトの名前を保持しています。今回はこの特徴を利用して、オブジェクトの階層(継承)を視覚的に表示してみます。
JavaScriptの配列はArrayオブジェクトのインスタンスです。 関数はFunctionオブジェクトのインスタンスです。 記事中でこれらを紹介するとき配列オブジェクトや関数オブジェクトなどの名称を使うことが多いですが、Arrayオブジェクト等と混同することがあります。 では、JavaScriptの仕様ではどのような名称で定義されされているのが調べてみました。
JavaScriptの組み込みオブジェクトやAPIのインスタンスから、元となったコンストラクタの名前を取得してみます。
JavaScriptでオブジェクトのプロパティ名を列挙する方法がいくつかあります。 それぞれ特徴がありますが、使い方によっては想定した結果にならないこともあります。そこでプロパティを列挙する方法と、注意しておくべき点をお伝えします。
JavaScriptでプロトタイプチェーンを追っていく関数を作成することになりました。 そこで問題になるのが、プロトタイプチェーンが親オブジェクトを参照することで発生する無限ループです。 その対策をしっかりとおこなう必要がありますが、そもそも無限ループするような状況を作成できるのでしょうか。気になったので実験してみました。
JavaScriptでURLからクエリパラメータを取得して解析するケースはあまりないような気がしますが、たまたま直面したので処理方法をお伝えします。 現在ページのクエリパラメータを取得する方法 ブラウザで現在 […]
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で高精度なパフォーマンス計測する方法をお伝えします。

