MENU

タグ:JavaScript:記事一覧

JavaScriptは、正規表現リテラルと文字列リテラルの二つの方法で正規表現をおこなうことができます。パターン文字を検索したいとき\でエスケープする必要がありますが、正規表現リテラルと文字列リテラルでは記述方法が異なります。

JavaScriptで非同期するならPromiseオブジェクトが楽。ですがネット上での解説ってわざと難しく書いているように気がします。そこで今回は、Promiseオブジェクトの使い方を僕なりに解説してみます。

僕は今までDOM要素に文字列をセットするときinnerTextを使っていましたが、最近textContentも同じことができると知りました。そこで詳しくネットで調べてみるとかなり古い情報が多く、現在の状況とマッチしていないようです。そこで今回は、innerTextとtextContentおよびinnerHTMLにおいて、今現在(2020/6)はどのような違いがあるのかをお伝えします。

JavaScriptでオブジェクトにプロパティが存在するかどうかをチェックするケースがあります。その方法は幾つかあり、その時々で最適な方法を選択する必要があります。ここでは、その方法についてお伝えします。

JavaScriptにはundefinedという値があります。この値はプロパティが存在するか確認したいときなどに使用されます。この記事ではundefinedとの比較方法や、JavaScript上級者を目指すなら知っておくべき情報をお伝えします。

JavaScriptのtypeof演算子を使用すると、値の型チェックをおこなうことができます。しかし少しクセが強い演算のため、わかりにくい面があります。そこで今回は、typeof演算子について解説してみます。

JavaScriptのArrayBufferは確保したバッファー内でバイナリデータを取り扱うことができます。しかし複数の型データを読み書きしたい場合、書き込み位置(オフセット)を的確に管理する必要があります。そこで今回は、ArrayBuffer上で複数の型データを管理するオブジェクトを作成してみます。

プログラムコードを組んでいると、任意サイズのメモリを確保して、バイナリデータバッファなどの利用目的で自由にアクセスしたいことがあります。JavaScriptでは、ArrayBufferオブジェクトとTypedArrayオブジェクトを使用することで実現できますが、初見では少し仕組みが分かりにくく感じます。そこでまずは、概要として二つのオブジェクトの関係と、それぞれの使用方法をお伝えします。

DataViewまたはTypedArrayのバイナリ保存の方法について、以前別の記事でお伝えしましたしかし2バイト以上のTypedArrayは、エンディアンについて考慮する必要があります。そこで今回は、上記の二つの記事の補足として、2バイト以上のTypedArrayをバイナリ出力するときの注意点についてお伝えします。

JavaScriptの2バイト以上のTypedArrayオブジェクトは、エンディアンを考慮したメモリアクセスがおこなわれます。しかし、この時のエンディアンが何なのでしょうか。確認してみます。

JavaScriptでは、数値配列に対してjoinメソッドを実行すると、10進数の文字列に変換されます。では16進数の文字列に変換したいときはどうすればいいのでしょうか?

ECMAScript2021よりStringオブジェクトにreplaceAllメソッドが追加されました。今回はこのreplaceAllメソッドについてと、既存のreplaceメソッドとの違いについてお伝えします。

JavaScriptには正規表現を使って文字列を検索するmatchというメソッドがあります。このメソッドについては、次の記事で解説しました。■【JavaScript】 正規表現match()とexec()の違いしかし似たようなメソッドでmatchAllというものがあります。こちらについての解説を今回はお伝えします。

元々Node.jsには固有のモジュールとしてBufferオブジェクトが存在していて、ファイルから読み込んだデータはBufferオブジェクトに格納されるように設計されています。しかしECMAScriptの2015年版で、バッファーとして動作可能なArrayBufferオブジェクトがJavaScritとして標準搭載されました。そのためブラウザ等でJavaScriptコードを作成してきた人は、BufferよりもArrayBufferの方が使いやすいです。そこで今回は、Node.jsでファイルの入出力する際にArrayBufferを経由する方法をお伝えします。

JavaScriptには言語仕様上『array-like object』というものがある。アレイライクオブジェクト、または配列風オブジェクト、または配列のようなオブジェクトなどに日本語訳されています。つまり、配列に似ているけれど配列ではないオブジェクトですね。

JavaScriptでDOM操作をおこなっているとgetElementsByClassNameメソッドで取得した要素をforEachで処理したいときがあります。しかし実際にコードを作成して実行するとエラーになってしまいます。ここではその理由と、対処方法についてお伝えします。

JavaScriptのArray.fromは、使いこなすと便利なメソッドです。しかし少しわかりにくい面があると思います。そこで今回は、Array.fromについて少し噛み砕いて解説します。

Node.jsでコンソールを使ったプログラムを作成していると、カーソルが邪魔に感じることがあります。そんなときは、サクッと消してしまいましょう。ここでは、Node.jsでカーソルの表示・非表示を切り替える方法をお伝えします

Node.jsの実行結果をコンソールに出力するとき、時間のかかる処理の進捗をプログレスバーで表現するのは常套手段と言えます。そこで今回は、Node.jsでプログレスバー表示する方法をお伝えします。

JavaScriptは元々ブラウザでの動作を想定しているので、言語仕様として終了時の処理が定義されていません。しかしNode.jsでは、プログラム終了時に後処理をおこないたいケースがあります。そこで、Node.jsでの終了処理の方法をお伝えします。

Node.jsの実行結果をコンソールに出力するとき単純に文字を表示するのではなく、色を付けるなどするとメリハリがでてそれなりに見た目がよくなります。そこで今回は、Node.jsの出力結果に色や装飾をおこなう方法をお伝えします。

ディスクの使用量が増えてくると、個々のディレクトリの使用サイズを確認して、多いところから減らしていくことがよくあります。Linuxなどはそのためのコマンドが用意されてますが、Windowsはありません。そこで、Node.jsでディレクトリの使用サイズを確認できるコードを組んでみます。

forEach内でawaitを使用して非同期処理の終了を待つコードを作成したら、想定した動作になりませんでした。どうしてなのか、その理由と解決方法を探っていきます。

Node.js使ったプログラミングについて、実際にやったことを中心に紹介します。

Node.jsはよくわからないけれど使ってみたいという人向けに、どのようにすればNode.jsが動作してくれのかを解説します。

インストールした時は最新バージョンでも時とともに古くなっていく。僕がNode.jsをインストールしたときのLTS版がv12だったのが、いつの間にかv14になっていた。そこで既存のNode.jsをバージョンアップしてみます。

JavaScriptには配列内のデータを並び変えるsortというメソッドがあります。しかし配列内のデータが順番に並び変えられていて、その配列に新しい値を挿入したい場合は、sortメソッドは非効率です。

JavaScriptを使用して処理時間や経過日数を求める方法を紹介します。プログラム中の処理にかかった時間を知りたいなど、タイマー的な経過時間を知りたいときはDate.now()で現在の時間を取得します。

ここでは生年月日から年齢を計算する方法を2つ紹介します。その前に、年齢についての定義についても把握しておきましょう。

JavaScriptで月の最終日を求める方法を紹介します。

JavaScriptで割り算の余りを求める演算子は『%』です。右辺または左辺が文字列の場合暗黙的に型変換がおこなわれます。ただし数値に変換できない場合はNaNが演算結果として返ります。

JavaScriptで偶数奇数判定をおこなおうとしたら、組み込み関数が存在していませんでした。そこで独自に偶数奇数判定をおこなう関数を作成してみます。

うるう年を判定するとき、西暦から計算で求めるのが一般的です。しかしJavaScriptは既存のオブジェクトメソッドを一工夫することでうるう年判定可能です。

JavaScriptでブラウザ上で動くストップウォッチを作成してみます。今回は開始と停止だけでなく、一時停止からの再開やラップ測定も組み込んでみます。

WordPressでJavaScriptのコードを組み込んでも、コードが実行されないケースが時々あります。実はwordpressは独自のjQueryを用意していて、その中で$()での呼び出しを無効にしています。

Googleアナリティクスでボタンがクリックされたかどうかを測定する場合、一つの方法としてonclick属性でgtag関数を呼び出す方法があります。しかし関数処理中にページが遷移すると、アナリティクスに情報が送信されないという致命的な問題があります。今回はこの問題の対処について考えてみます。なおアナリティクスには新しいタグとしてGA4というものが導入されています。このタグは以前と同じgtag関数を使用するので、この記事はそのまま活かすことができます。

DOM要素をクリックした時に処理をおこないたいとき、onclickまたはaddEventListenerで処理内容を登録することができます。しかしこの二つの方法は何が異なるのか明示されていることが少ない。そこで今回は、onclickとaddEventListenerの違いについてお伝えします。

htmlのonclick属性は要素をクリックしたときに実行したい処理を記述することができます。しかし、クリックされた要素に対して少し複雑な処理をしたいときは、thisやargumentsオブジェクトを効果的に使用します。

僕が運営している別のサイトで、ダウンロードリンクをクリックすると自動広告が表示されたままになるという記事を書きました。この記事内でお伝えしているJavaScriptコードを、こちらの記事で解説します。

ウェブサイトを作成していると、時々OGP画像をセットしたほうがいいような気がしてきます。しかしサイトの記事が多い状態から一つ一つ画像を作成していくのは、いまさら無理なお話です。そこで、画像を一枚だけ用意して、その画像に記事タイトルを描画することで妥協することにしました。ただし、画像サイズが大きいのは不利な面があるので、しっかり最適化します。

最近Node.jsで画像を処理する案件に遭遇しました。その際にSharpというモジュールを使用しましたが、日本語の資料があまりないのでここでまとめておきます。

JavaScriptには配列を処理するのに便利なforEach()などのメソッドがあります。しかし定型的に使っていて、あまりよく理解していないのではないでしょうか。そこで今回は、forEach/map/filter/reduceの解説に加え、裏側で何をやっているのかを考えてみます。

Firefoxの拡張機能は、JavaScriptでプログラミングできれば比較的容易に作成できます。しかし作成した拡張機能を実際にFirefox上で動作させてテストするのには、ある程度の知識が必要です。そこで今回は、自作したFirefox拡張機能をテスト目的でFirefoxにインストールする方法をお伝えします。

PlayStation5の販売が開始してから数か月が経過しました。しかし未だに店頭販売が行われずに、入手したくても出来ないという人が続出しています。 僕もその中の一人だったりします。 そこで今回は、抽選以外で入手できる楽天ブックスとAmazonで注文できるように、入荷を監視しするchromeの拡張機能プログラムを作成してみます。

Chromeの拡張機能は、JavaScriptでプログラミングできれば比較的容易に作成できます。しかし作成した拡張機能を実際にChrome上で動作させてテストするのには、ある程度の知識が必要です。そこで今回は、自作したChrome拡張機能をテスト目的でChromeにインストールする方法をお伝えします。

僕がWebツールを作成しているとき、吹き出しを動的に作成する必要がありました。しかし、これが意外と難しい。beforeやafterなどの疑似要素を使用しているのがネックになっているようなので、対処方法を考えてみました。

僕が若いころ作成して史上最弱と友達に言われたリバーシをJavaScriptで作成してみます。悲しい思い出にリベンジするべく、今回は強いものにも挑戦します。

最弱『リバーシを作る』の第二回目は、ゲーム状況を管理する機能を作成し、ある程度遊べるものに仕上げてみます。

『リバーシを作る』の第三回目は、思考ルーチンを組み込み、コンピューターと対戦できるようにしてみます。

今回はこれらのメソッドの使い方と、外観のカスタマイズについてお伝えします。

JavaScriptはオブジェクトのプロパティを参照したとき、オブジェクト内にそのプロパティが無いと、プロトタイプチェーンを参照します。その様子を観察してみようと思い、今回はネタ記事として簡単な検証コードを作成してみました。

JavaScriptにはcallとapplyというメソッドがある。あまり使わないなと思って理解することを放棄していたのだが、いい機会なので記事にしながら理解していこうと思う。

オブジェクトのプロパティを操作するObjectオブジェクトのメソッドについて、解説してみます。

JavaScriptにはbindというメソッドがあって、コールバック関数内でthisを使用するときなどよく使っています。ですが僕の場合、サンプルで見たコードで使っていたから、マネして使っていただけでした。「これではいかん!」ということで、今更ですがbindについて調べてみました。

プログラム言語の関数とは一連の処理をひとまとめにして、簡単な記述で何度でも呼び出せるようにしたもの。JavaScriptにもありますね。しかし似たような機能でメソッドというものがあり、こちらも前述のことができます。では関数とメソッドの違いは親オブジェクトをthis値として受け取るかどうかです。

JavaScriptのプロパティは、オブジェクトリテラルや. (ドット)表記などで簡単に定義することができます。しかし書き込みを制御したいときなどもっと細やかな設定が必要なときは、属性についての知識が必要になります。

JavaScriptにもクラスがあった。今更知った僕です。そこでさっそく、JavaScriptのクラスについて調べてみました。

PHPやをJavaScript使ったプログラミングについて、実際にやったことを中心に紹介します。

JavaScriptにはゲッターとセッターという機能があります。正直知らなくてもプログラムを作成できますが、他人のコードを見るとき困るので調べてみました。

JavaScriptにクラスが導入されて、やっとprivateなメソッドやプロパティを利用できると思ったら、できないらしい。今のところはクロージャの仕組みを利用するしかありません。ということで、自分なりに『クロージャの仕組みを利用したprivateメソッドおよびプロパティのテンプレート』を用意したいと思います。

【JavaScript】 JSにおけるprivate変数と定義のひな型パターンで従来のオブジェクトインスタンスでのprivate変数定義について紹介したので、ここではclass構文での定義をお伝えします。

オブジェクト指向プログラミングにはカプセル化という概念があります。JavaScriptには他の言語のようなカプセル化に必要な構文がないのでクロージャの特徴を活かした手法でカプセル化を実現します。

thisは読み込み専用のため、上書きできません。しかしプロパティ追加はできます。『上書きでないのに、追加できるってどういうこと???』と思った方は、読んでください。

使用する状況があまりなさそうだけれど、ゲッターとセッターの動作を別の関数に置き換える方法がないか考えてみました。

JavaScriptにはクロージャーという概念がある。20年前のC言語プログラマな僕が、気が狂いそうになった原因である。僕は最近になって、ようやくわかってきた気がするので、忘れないうちに要点をまとめてみる。僕は最近になって、ようやくわかってきた気がするので、忘れないうちに要点をまとめてみる。

javascript:void(0)を使用するとリンクタグの画面遷移を無効にできる。javascript:void(0)はvoid(0)をスクリプトとして実行する。リンク先がブラウザに拡張機能によりjavascript:void(0)に書き換えられてしまうこともある

JavaScriptはオブジェクトにプロパティを追加する簡単な構文がありますが、それとは別にObject.defineProperty()というメソッドが用意されています。このメソッドの使用目的と特徴についてお伝えします。

自作のオブジェクトを共有ライブラリとして外部に公開するときなど、他者にオブジェクトを変更してほしくないときもあります。タイプミスが頻繁で、予定にない新規プロパティが増えていて困るという人(僕)もいます。そんなとき、Object.freeze()またはObject.seal()を使用します。

JavaScriptでforループの解説をしているテキスト等カウンターの変数名にiを使っているのはどうしてなのかとforループ内でクロージャを定義するときに気にしておくこと

JavaScriptにはWeakMapというオブジェクトが標準で用意されています。これを使用しなくても他の方法で間に合ってしまうので、知らない人が多いと思います。WeakMapはオブジェクトをキーとして、データの格納や取得をおこないます。

配列の要素を並び変えたいときsort()メソッドを使用する。しかし僕の場合sort()の使い方を毎回ネットで調べている。そろそろ調べなくても使えるようになりたいので、記事にしてみた。

JavaScriptの変数や関数は実行時に巻き上げられます。これってどんな意味なのか、お伝えします!

プリミティブはメソッドを持っていない直接的なデータですが、プログラムコード上であたかもプロパティを参照しているように記述することができます。その理由はラッパーオブジェクトに変換しているからです。

リテラルとは、プログラムコード上でデータを表現する文字列の集まりです。プリミティブとはJavaScriptエンジンの内部で割り当てられたデータのうち、数値そのもののやテキストそのものといった、最小単位のデータを指します。オブジェクトは、プリミティブやオブジェクトを指し示すプロパティを持つデータ構造です。

JavaScriptにはシンボルという機能があります。あまりメジャーな機能ではないので知らないという人が多いようです。そこで今回はシンボルについて調べてみました。

JavaScriptにはシンボルという機能があり、その機能を使ってあらかじめいくつかのシンボルが定義されています。これらのシンボルはウェルノウン(well known)シンボルと呼ばれています。ここでは、そのウェルノウンシンボルについてお伝えします。

for-await-ofはfor-ofと基本的には同じ動作をしますが、受け取ったデータがPromiseオブジェクトの場合は、履行されるのを待ち、結果をループの値として返します。

JavaScriptは反復処理を非同期におこなう非同期イテレータという機能があります。そこで通常のイテレータとの違いを含めて非同期イテレータについてお伝えします。また発展形である非同期ジェネレーターについてもお伝えします。

JavaScriptにはwith構文というものがあります。あまり聞きなれない構文ですが、使用することでコードを簡潔に記述できます。ただし非推奨です。

JavaScriptのsplit()は、文字列を分割して配列にセットするメソッドです。分割する文字列は正規表現で指定できます。ここではsplit()の基本的な使い方を正規表現を使用したパターンをお伝えします。

JavaScriptのasyncとawaitというキーワードは、非同期処理を簡潔に記述することができます。しかしプログラムの流れを変えてしまう面もあり、理解するのが難しい機能でもあります。そこで今回はコード上での流れを中心に、asyncとawaitについて解説します。

jQueryの変数に$(ドルマーク)をつける。JavaScriptの勉強を始めたころ、参考にしていたサイトにそう書いてありました。僕は、そういうものだと深く考えずに使っていましたが…今になってドルマークには何か深い意味があるのではないかと、疑問に感じました。ということで、調べてみました。

代入や関数に引数で渡すとき、値渡しか参照渡しかって意外と重要です。僕はずっと、JavaScriptは次のようになってると思っていました。● プリミティブは値渡し● オブジェクトは参照渡しところが、少し違うようです。そこで今回は、『JavaScriptの変数が値渡しか参照渡しか』ということについてお伝えします。

ECMAScript2020での変数定義を追ってみました。

JavaScriptで配列要素の合計を求めようと思ってメソッドを探したのですが、標準関数として用意されていませんでした。どうやら自作するしかないようです。そこで今回は、配列要素の合計を求める関数を自作してみます。

JavaScriptの文字列は内部でどのような形で格納されているのだろうか?少し気になったので調べてみました。

外出自粛などの影響を受けて、本職がかなり暇になりました。どうせなら一週間ぐらい時間をとってECMAScriptを一から読み、どうせなら日本語訳しておくことにしました。実務でプログラムをしている方は、暇なときに読んでおくといいかもしれません。

今までブラウザからクリップボードにコピーするときdocument.execCommand使っていました。しかし、実は既に廃止されています。まだ使用できますが、今後はブラウザ上から削除されるかもしれません。そこで、新しい方法でのクリップボードコピーについてお伝えします。

JavaScriptにはinstanceof演算子というものがある。使用する機会が非常に限られるため、あまり知られていない演算子である。また、知っていても何を行っているかわからないという人も多いだろう。そこで今回は、instanceof演算子について解説してみようと思う。

一時期、オブジェクト作成はnewが必要ないという議論がありました。確かに必要ありませんが、newの本質は単なるオブジェクト作成ではありません。そこで今回は、new演算子が何をやっているのかについて解説します。

PHPやをJavaScript使ったプログラミングについて、実際にやったことを中心に紹介します。

JavaScriptの演算子にインクリメント(Increment)とデクリメント(Decrement)というものがあります。そして、その使用する位置により後置(Postfix)と前置(Prefix)にわけることができます。今回は、インクリメントとデクリメントとは何か、後置と前置の違いについて解説します。

昔はフラグなどの0か1で済んでしまうデータはビットで管理していました。メモリの価格が安くなりコンピューターに大容量で搭載するようになった現在は、ほぼ忘れられたテクニックです。しかし最近になって、JavaScriptでビットを取り使う機会があったので、備忘録的にまとめておきます。

JavaScriptには分割代入という機能がある。はじめて僕がこの機能を知ったとき、何が便利なのか理解できなかった。だがあらためて調べてみると、意外と便利な奴であることがわかった。そこで今回は、分割代入の解説と使いどころについてお伝えしようと思う。

JavaScriptは関数からの戻り値は一つです。しかしロジックの都合上、複数の戻り値を返したいことがあります。その時の代替手段をお伝えします。

JavaScriptで文字の入力を監視したいとき、keydownやkeyup・inputなど複数のイベントを使用できます。そこで今回は、それぞれのイベントの違いと、コード例をお伝えします。

動的にDOM要素を追加したとき、その要素をユーザーの目に入る位置に表示したいことがあります。今回は、その方法をお伝えします。

JavaScriptで文字列をひらがなからカタカナに、その反対にカタカナからひらがなに変換する方法をお伝えします。

JavaScriptでDOM要素を操作する場合、addEventListener()メソッドを使用します。このメソッドの第三引数にtrueをセットしているコードをよく目にします。しかしtrueでもfalseでも同じように動作するので、どんな意味があるのかわからない人も多いのではないでしょうか。そこで今回は、addEventListener()メソッドの第三引数についてお伝えします。

ラジオボタンがクリックされて値が変更されたとき、onchange属性を使うと関数を呼び出すことができる。しかし選択しを増やすのはコピペでいいが、関数名を変えるときはとても面倒。というかon属性が嫌い。そこでJavaScriptでラジオボタンの変更を捕捉して、値を取得する方法をお伝えします。

今回はブラウザにファイルをドロップしたときの制御をJavaScriptでおこなってみます。ドロップエリア外にファイルがドラッグされたら、ドロップを無効にします。

PHPやをJavaScript使ったプログラミングについて、実際にやったことを中心に紹介します。

今回はブラウザにテキストファイルをドラッグ&ドロップして、その内容を16進数で表示してみます。その際、大きなファイルを読み込んだときブラウザの動作を重くする可能性を考慮して、分割読み込みを実装してみます。

今回はブラウザに画像ファイルをドラッグ&ドロップして、画像のリストを作成します。その後、リストから選択した画像をキャンバスに描画します。

URL.createObjectURL()を実行した後、URL.revokeObjectURL()を実行する必要があります。という説明を見たのだけれど、理由がわからなかったので調べてみました。

addEventListenerで登録したイベントリスナーの引数は、targetとcurrentTargetというプロパティを持っています。どちらもイベントに関連したDOM要素を指していますが、どのような要素を指しているのかすぐに忘れてしまうのでメモしておきます。

JavaScriptコード実行時、次のようなエラーで処理が止まることがあります。Firefox:『ReferenceError: can't access lexical declaration `・・・' before initialization』Google Chrome:『Uncaught ReferenceError: Cannot access '・・・' before initialization』これって何でしょうか?

JavaScriptでべき乗を計算する方法をお伝えします。

Canvasは、表示されているサイズと描画をおこなうエリアのサイズがことなります。そのため、ブラウザ上でクリックされた座標を求めるには一工夫必要です。

PHPやをJavaScript使ったプログラミングについて、実際にやったことを中心に紹介します。

JavaScriptでスライドパズルを作成しようということで始めた企画の2回目です。今回は、パズルのピースの描画とクリックしたときの移動をアニメーションで表現します。

JavaScriptでスライドパズルを作成しようということで始めた企画の3回目です。今回は、ピースをシャッフルする機能と、ピースが揃ったときの処理を追加します。また最後に全ソースを掲載します。

htmlはdata属性がサポートされています。この属性は、タグごとに任意のデータをセットできて、とても便利です。そこでここでは、JavaScript上でhtmlのdata属性を操作する方法をお伝えします。

ネットで調べてみると、ページ読み込み時のJavaScriptの実行タイミングは次のようになっているようだ。(1) 記述した順番に実行される(2) body内のスクリプトは、ブラウザ表示をブロックする。この二つについて、検証するためにコードを作成してみます。

JavaScriptでコールバックに関数を指定すると実行されてしまう理由を整理してみる。

関数の定義には関数宣言と関数式の二つの方法があります。それぞれ目的が異なります。

文字列でXMLデータを保持しているとき、内容を確認するなら文字列を検索するよりも、一度オブジェクトに変換したほうが利用しやすいです。そこで今回は、XMLテキストをオブジェクトに変換する方法をお伝えします。

ブラウザ上でサーバーからXMLデータをダウンロードして、値を取り出す方法を3つ紹介します。今回はネイティブなJavaScriptだけでなくjQueryもとりあげます。

このサイトでは、サンプルコードを掲載している記事が多いです。時々、サンプルコードに行番号を付与した方がいいのではないかと思う時があります。そこでpreやdiv内に行番号を付与する方法をお伝えします。

JavaScriptでプログラムを作成していると、配列や連想配列を使うことって多いですね。僕の場合、入れた順番で取り出したいことがあります。しかし思ったようにいかず、悩むこともしばしば…そこで、配列や連想配列内の要素の並び方を調べてみました。また、Mapオブジェクトを使った連想配列の代替案をお伝えします。

Node.js使ったプログラミングについて、実際にやったことを中心に紹介します。

html内で次のようにスクリプトをasync属性で呼び出すと、非同期で読み込まれる。 非同期で読み込まれることで、ブラウザのファーストビューのレンダリングが高速化されるというメリットがある。 しかしasync属性で呼び出したスクリプトは、DOMContentLoadedイベントを捕捉できるときと、できないときがある。非常に対処に困る事例なので、対処法を考えてみた。

プログラムでとても重要なのがデバッグです。JavaScriptも例外ではありません。そこで今回は、JavaScriptでの基本的なデバッグ方法をお伝えします。

Node.jsでファイルを読み込む方法について、簡単に記述しておきます。

htmlなどのテキストファイルをそのままの形で読み込んできて、正規表現で検索したらハマったのでメモ。

JavaScriptで今日の日付を取得してフォーマットする方法と、サンプルです。

Node.jsはブラウザ版のJavaScriptと異なり、コマンドラインから起動できる。そうなると、起動時に引数を指定することもある。そこでコマンドラインから引数を受け取る方法をお伝えします。

ファイルまたはディレクトリの存在を確認するだけなら、fs.existsSync()メソッドを使用します。以前はfs.exists()メソッドを使用できましたが、現在は非推奨となっています。

他の人が書いたプログラムコードを読むとき、コメントがあると理解するのに役立ちます。コメントの書き方はプログラム言語によって異なります。そこでJavaScriptのコメントの書き方について、お伝えします。

予約語とは何らかの意味を持っているキーワードです。そのため変数名や関数名などの識別子として使用できません。そこで、どんなキーワードが予約後なのかどんなケースで使用できないのかどんなケースで使用できるのかという点についてお伝えします。

JavaScriptはオーバーロードという機能を持っていません。しかし先達たちは、様々な方法で疑似的なオーバーロードを実現しているようです。そこで僕も、自分なりに疑似的なオーバーロードを実装してみます。

JavaScriptのCanvasAPIを利用すると、canvas要素に描画をおこなうことができます。CanvasAPIの使い方と、利用できるメソッドについてまとめてみました。

JavaScriptでサーバー上にある画像を読み込んで、Canvas要素上に貼り付ける方法をお伝えします。

JavaScriptでCanvasに描画していたら、SecurityErrorが出ました。原因を調べてみました。

JavaScriptのCanvasAPIで描画をするとき、頻繁に使用するパスはPath2Dを使用すると何度でも使いまわすことができます。アニメーションなどを表現するなら、とても便利な機能です。そこで今回は、Path2Dについてお伝えします。

htmlのCanvas要素をJavaScrptで動的に追加すると、うまく表示してくれないことがあります。その原因の一つが、タグ上とcss上のサイズ指定の動作が異なるという点です。理解すれば単純なことですが、理解せずにCanvasを使用するとハマります。

JavaScriptのCanvas APIでグラデーションの塗りつぶしができますが、少しクセがあります。大いに悩む点なので、まとめてみました。

Canvas APIは画像描画時に globalCompositeOperationを使用すると、元からある画像との合成方法を指定することができます。ここでは、globalCompositeOperationに指定できる値と結果を一覧にしてお伝えします。

今回はURLで指定された画像を読み込むJavaScriptコードを作成してみます。読み込みエラー時の処理も、しっかりと作りこみます。

画像が読み込めないときにダミー画像を表示したかったので、JavaScriptでコードを作成してみました。

JavaScriptのCanvasAPI にisPointInPath()というメソッドがあります。パス内に指定した座標が含まれているかどうか確認するメソッドですが、どんなケースで使用するのか不明でした。そこで自分なりに使用目的を考えてみたところ、ブラウザ用で図形の内側がクリックされたかどうかの確認できると思いいたりました。そこでデモとして、クリックした図形を塗りつぶすJavaScriptコードを作成しました。

今回はJavaScriptを使用して、Canvasのある領域を、現在の表示エリアに拡大して表示する方法をお伝えします。

Canvas上で文字列の幅と高さを求め、枠を描画するところまでやってみます。

Canvasでアニメーションをおこなう場合、全体をクリアしてから再描画する必要があります。しかし描画内容が複雑だと処理が重くなり、滑らかな表現が難しくなります。改善策として、動かない図形とアニメーションをさせる図形のレイヤーを分けることで、処理を軽くする方法をお伝えします。

前回、Canvas上で図形を塗りつぶす記事を書いたので今回は線の色変更と、移動をやってみます。

JavaScriptの勉強をしていると、一度は作ってみようと思うのがアナログ時計ですね。僕も作ってみました。今回はデジタル時計の作り方も、あわせて紹介します。

PHPやをJavaScript使ったプログラミングについて、実際にやったことを中心に紹介します。

JSDocってコメントの書き方の一つだと思っていたのですが、コメントを元にhtmlで仕様書を作成できるんですね。そこで僕のパソコン上に必要なものをインストールして、実際に仕様書を生成してみました。ちなみに僕のパソコンはWindows10です。

nullishな値とは、nullまたはundefinedを指します。ES2020では、nullishな値に関するNullish Coalescing OperatorとOptional Chainingという二つの機能が追加されました。ここではこの二つについて解説していきます。

PHPやをJavaScript使ったプログラミングについて、実際にやったことを中心に紹介します。

ECMAScriptの過去のバージョン等を確認したいときのために、一覧でまとめておきました。

JavaScriptにはテンプレートリテラルというものがあります。使いこなすとめちゃくちゃ便利なので、この機会に覚えておきましょう。

JavaScriptで日付を和暦で取得する必要があったので、メモとして残しておきます。

JavaScriptで作成したコードを、ブラウザだけでなくNode.jsなどのサーバーサイドでも動作させたいと思い、方法を調べてみました。

前回はNode.jsをWindowsにインストールしたので、今回はWebサーバー化してみます。静的なファイルだけでなくPHPのように動的なhtmlを作成にもチェレンジしてみます。

Node.jsで同じスクリプトを複数回requireしたときの挙動を調べてみました。

別の記事でNode.jsで同じスクリプトを複数回requireしたときの挙動について調べたので、今回はimportしたときの挙動を調べてみました。

Node.jsはサーバーサイドのJavaScriptです。自分で作成したスクリプトを、どうせならブラウザだけでなくサーバーサイドでも動かしてみようと思い、まずはNode.jsを手持ちのWindows10パソコンにインストールして、動作確認をしてみます。

今回はJavaScriptで現在日付と時刻を取得する方法を二つ紹介します。

日付などを表示するとき、桁を合わせるために先頭にゼロを付けることがあります。その他にもスペースなどで穴埋めするケースも考えられます。そこで今回は、JavaScriptで足りない桁にゼロなどの文字で埋める方法をお伝えします。

今回はできるだけ少ないhtmlタグで、開閉ボタンを設置して、指定した要素を開閉するJavaScriptコードを紹介します。※Jqueryは使用しません。アコーディオンメニューやスライドメニューも作成可能※Jqueryは使用しません。

JavaScriptで正規表現したいとき毎回検索して調べているので、自分向けにまとめてみる。

JavaScriptには、正規表現を使って文字列を検索するメソッドが二つある。match()とexec()だ。この二つは基本的には同じ結果になるが、場合によっては使い分けが必要です。

JavaScriptで文字列の置換をおこなう場合、ほとんどのケースでreplace()を使用できます。単純な置換から正規表現を使用しての置換、さらにはコールバック関数を使用して置換する内容を細かく制御できるのだから万能といっていい。だが初めて使う人は、少し戸惑うと思う。そこで今回は、JavaScriptのreplace()メソッドについて自分なりにまとめてみる。

PHPなどでオブジェクトを列挙するためにforeach文を使用する。だからJavaScriptにもforEachがあったら使っちゃうよね。でも使えないのよ。どうして?どうすればいいの?

forEach( )は値の列挙を中断することができません。ではどうすればいいのでしょうか。素直にforループを使用したくない人はsome()やevery()を使用しましょう。

ある決まった条件のとき、3項演算子はif-elseよりも簡潔にコードを書くことができます。JavaScriptで初めて3項演算子を知った僕は、猿のように3項演算子を使いまくりました。でもたまーにハマるのです。そこで今回は、JavaScriptの3項演算子の使い方と、注意したい点をお伝えします。

JavaScriptで機能ごとにファイル分割するとき問題となるのが、依存性。ファイルをモジュール化して、export/importという機能を使えば依存性の問題をクリアできそうです。

モジュール化したソースはimportで読み込むのですが、普通にインポートすると正常に読み込めたのか判断できません。そこで動的にインポートして、モジュールが読み込めないときにエラーチェックができるようにしてみます。

JavaScriptにはエキゾチックなオブジェクト(exotic object)というものが存在します。何それ?ということで調べてみました。

JavaScriptには変数の宣言方法がvarとlet、それにconstの3種類あります。今まで僕は、ほぼletのみを使用していました。ですがどうやら、それは正しくはなかったようです。そこで今回は、JavaScriptの変数宣言について調べました。

JavaScriptはプロトタイプベースな言語だそうです。そこで今回は、プロトタイプについて解説してみます。

JavaScriptでプログラムを組むとき、thisはとても重要なキーワードです。ですがサンプルコードなどを参考にして、ただなんとなくで使っている人も多いのではないでしょうか。そこで今回はJavaScriptのthisについて、独断と偏見で解説していきます。

JavaScriptに限らず、定義した変数の有効範囲(スコープ)を把握しておくことは重要です。ただしJavaScriptのスコープは、他のプログラム言語と比較して少し特殊です。そこで今回は、スコープについて解説してみます。

JavaScriptには即時関数という関数がある。普段何気なく使っていたので、今回は少し即時関数の挙動について調べてみました。

関数に値を渡すときは引数を使う。当たり前すぎて僕は何も気にせず、調べもせず使っていました。しかしJavaScriptの引数は少し奥が深いようです。そこで今回は、JavaScriptの引数について少し詳しく調べてみました。

今回はJavaScriptのまじめな「...」を使った構文についてお伝えします。「...」は、オブジェクトを展開、または変数やリテラルを羅列したものを一つにまとめてくれる演算子です。使用する目的によってスプレッドとレストの二つの構文に分かれます。

JavaScriptにはイテレーターという機能があって、反復処理に使うと便利らしい。別に知らなくても問題ないが…今回は勉強がてら、イテレーターについて解説してみようと思う。

JavaScriptの機能にGenerator(ジェネレーター)とyieldというものがあります。途中で処理を止めて、止めたところから再実行できる不思議ちゃんな関数です。今回はジェネレーター関数の作り方と、使いどころについてお伝えします。

JavaScriptにはコンストラクター関数というものがある。でも関数宣言をコンストラクターと言われてもよくわからない。関数は関数である。そこで今回は、コンストラクター関数についてわかるまで調べてみた。

JavaScriptでオブジェクトをnewしたら、「TypeError: xxx is not a constructor」とエラーがでた。コンストラクタではないからのようだが、意味がわからない。どうすればいいのか、調べてみた。

JavaScriptで関数を呼び出すと、関数内部でargumentsというオブジェクトが作成されます。これって何なのか?調べてみました。

JavaScriptファイルを動的に順番に読み込み、読み込めないときはエラーを出力してみる。ブラウザの挙動に頼らないで自分で読み込む。

ファイルサイズやデータ容量のバイト数をMBなどの適切な単位に変換、その逆に単位がついたサイズをバイト数に変換するプログラムをPHPとJavaScriptで作成します。

ブラウザからサーバーへファイルをPOSTでアップロードする際、ファイルを小さい単位(チャンク)に分割してアップロードをする方法をお伝えし、その方法を元にWordPressのAjax通信機能を利用したプラグインにアレンジする方法についてもお伝えします。なお今回は、Flow.jsというライブラリを使用します。