MENU

タグ:JavaScript:記事一覧

今までブラウザからクリップボードにコピーするとき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進数で表示してみます。その際、大きなファイルを読み込んだときブラウザの動作を重くする可能性を考慮して、分割読み込みを実装してみます。

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

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

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

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

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

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

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

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オブジェクトを使った連想配列の代替案をお伝えします。

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

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

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

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

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

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

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

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使ったプログラミングについて、実際にやったことを中心に紹介します。

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

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

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

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

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

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

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

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

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

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

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

画面遷移をさせずにjavascriptで何らかの処理を行わせたいとき『なぜjavascript:void(0)を使用するのか』と『リンクをクリックしたときにjavascriptを呼び出す方法』をお伝えします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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