Tag JavaScript

JavaScript: イベントバブリングによる親要素のイベント実行を停止する

親要素に設定されているクリックイベントにより、リンクやボタン等のクリックイベントが実行されない、先に親要素のイベントが発火してしまう、という問題があります。 今回は、イベントが設定されているネストされた要素の、親要素に設定されているイベントを停止する方法を説明します。 目次 イベントバブリングで親要素のイベント実行を停止する まとめ イベントバブリングで親要素のイベント実行を停止する 通常、イベント発生時には DOM ツリーのルート (Window) からイベント発生要素を探索(キャプチャ)し、発生要素を特定(ターゲット)後、再びルート (Window) まで遡り(バブリング)ます。 以下のサンプルでは、外側 div (#wrapper)、内側 div (#content) 両方にクリックイベントが設定されています。 サンプル HTML function divClick 内の e.stopPropagation() により、内側要素 (div#content) クリック時、そこでイベントバブリングが停止し、親要素 (div#wrapper) のクリックイベントは無効となります。 まとめ このように、JavaScript のイベントバブリングをコントロールすることで、ネストされた要素(外側)のイベントを停止したり、優先順位を思いどおりに設定が可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Node.js: シェルコマンドを実行する

前回は Node.js を使ってファイルを操作する一覧をご紹介しました。 ファイルの操作ができると、それだけで色々と出来ることが増えていきます。簡単に色々とやれてしまうのが Node.js のいいところです。 今回は Node.js を使ってシェルコマンドを実行する方法を説明したいと思います。 目次 Node.js でシェルコマンドを実行する まとめ Node.js でシェルコマンドを実行する サンプル shellHelper.js shellHelper.js を使用すれば複数行のシェルコマンドも簡単に実行できます。 まとめ Node.js は非同期型のイベント駆動モデルを使用したサーバサイド環境ですので、同期的にシェルコマンドを実行する場合には、ある程度の工夫が必要です。 とは言っても、ちょっとファイル操作して、その後コマンドを叩く程度であればそこまで頑張る必要もありません。 ES6 も浸透してきたので、今後は JavaScript に関しても記事を投稿していこうと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Node.js: よく使うファイル操作の一覧

Node.js はローカルでのちょっとした作業も、シンプルな記述で実行できるのでとても便利です。 ファイルの操作も簡単に実行できてしまうので、うまく利用すれば日々のルーチンワークを半自動化することも可能です。 今回は Node.js でよく使用するファイル操作をまとめて一覧にしました。 目次 ファイルを読み込む ファイルを保存する ファイルをコピーする ファイルを削除する まとめ ファイルを読み込む readFile() readFileSync() ファイルを保存する writeFile() ファイルをコピーする createReadStream().pipe() ファイルを削除する unlink() フォルダ削除 フォルダを内包するフォルダ・ファイルごとに削除するためには、パッケージ管理ツール npm から rmdir をインストールします。 rmdir インストール 使用例 まとめ Node.js を使って自分専用のユニークなツールを作っていると、いつの間にかアプリに近いものになってしまっている楽しさがあります。 今のところ、面倒なローカルでの処理をワンライナーで実行する目的で使用していますが、そのうちがっつりとアプリを作ってみたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: エスケープシーケンス一覧

本日は手短に JavaScript エスケープシーケンスの自分用メモです。 JavaScript エスケープシーケンス一覧 エスケープシーケンス意味 ¥bバックスペース ¥t水平タブ ¥v垂直タブ ¥n改行 ¥r復帰 ¥f改ページ ¥’シングルクオーテーション ¥”ダブルクオーテーション ¥¥¥文字 ¥0NULL文字 ¥xXX2桁のXX(16進数)が表すLatin-1文字 ¥uXXXX4桁のXXXX(16進数)が表すUnicode文字 ¥ は \(バックスラッシュ)でも大丈夫です。 まとめ Swift ばかり書いていると、エスケープシーケンスのような基本的なことをよく忘れてしまいます。 最近 Node.js の JavaScript を書いていたとき、つい行末にセミコロンを入れ忘れてしまい、間違いに気づくのに数分無駄にしてしまいました(笑) ・・・笑い事じゃありませんね。。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

TIPS:jQuery や JavaScript のアニメーション実行時のチラつきの対処方法(Safari,Chrome対応)

JavaScript(jQuery等)でスライドショー等の動きのある表現を行なったとき、アニメーションに連動して要素の一部分、もしくは画面全体かけて文字等がちらつく(フリッカー)現象が発生することがあります。 挙動自体に問題はなく発生範囲が限定的であっても、一度目にすると看過するわけにはいかないものです。 今回はこの問題を解決する方法をメモしておきたいと思います。 問題発生の原因によっては、今回紹介するパターンでは解決できない場合もありますが、是非一度お試しください。 jQuery や JavaScript のスライドショー実行時のチラつきの対処方法 中見出し まず、原因ですが、チラつきの現象がおこる対象はスタイルに position: relative が適用されている可能性が非常に高いです。 この場合であれば、以下の方法にてチラつきが解決できるかと思います。 いくつか解決パターンがあるので、上から順番に試していってみてください。 スライドショー等のアニメーションが実行されている要素のレイヤーを最前面にする 要素の position に relative が適用されている場合は z-index:1; (もしくは1以上の数値)を追加します。 スタイルシートに1行加える メインのスタイルシートの先頭に以下の1行を追加して下さい。{}は不必要です。 問題が発生する要素に position: relative を適用しない チラつきの対象に position: relative が意味もなく適用されている場合は、このスタイルを削除することで解決します。以下の例ではコメントアウトで対処しています。 まとめ この他にも、ネガティブマージンを指定している場合にも似たような問題が発生するときがあるみたいです。CSS の継承や擬似要素、擬似クラス等に関してもまだまだ勉強が必要ですね。 CSS に関してはまた別の機会に掘り下げてみようと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:正規表現(RegExp)の基本的な使い方の備忘録

なかなか覚えられない正規表現ですが、基本的なものだけに焦点を絞って、忘れた時にサッと調べられるメモを作成しました。コード例は JavaScript で記述し、解説は割愛しています。 この記事は随時更新する予定です。 正規表現についての備忘録 メタ文字コード例一覧 \ 意味 メタ文字エスケープ(Windows の場合は ¥ をコード) 記述例 \. \^ \$ \[ \] \* \+ \? \| \( \) コード例 結果 . 意味 改行文字以外の 1 文字にマッチする 記述例 .a .b .c コード例 結果 ^ 意味 入力の先頭にマッチする 記述例 ^abc コード例 結果 $ 意味 入力の末尾にマッチする 記述例 xyz$ コード例 結果 [ ] 意味 指定した文字のどれか 記述例 [cmt] コード例 結果 * 意味 直前の文字の 0 回以上の繰り返しにマッチする 記述例 /ap*le/ コード例 結果 + 意味 直前の文字の 1 回以上の繰り返しにマッチする 記述例 ap+le コード例 結果 ? 意味 直前の文字がない or 1 回の出現にマッチする 記述例 apple? コード例 結果 | 意味 いずれかの文字列にマッチする 記述例 /melon|grape/ コード例 結果 ( ) 意味 グループ化する 記述例 (apple)s コード例 結果 まとめ 正規表現のマッチングパターンは数多く存在するので、後日追加していきたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:基本だけど重要!変数を var で宣言した場合としない場合の違い

JavaScript で変数を使用する場合に var を使用するときとしないときがあります。var を省略しても一見問題ないように思いますが、使い方によっては両者は別の動きをすることがあります。 そんなこと言われなくても見れば分かるよ、と言われそうですが、ちゃんと理解していないと後で苦労することになるので、今回はこの違いについてメモしておきます。 変数を var で宣言した場合としない場合の違い 難しい言葉で説明すれば、var は明示的に変数を宣言する。関数内で宣言された var ステートメントは関数に対してローカルスコープになる。と言うことなのですが、サンプルコードを見ればなんてことはないことが理解できます。 var ありの場合 var を使用すると、そのスコープ内に宣言した名前を生成するため、以下のサンプルでは val はそれぞれ別の変数として扱われる。 サンプルコード 結果 var なしの場合 上記のサンプルコードからそっくり var を抜き取るだけで、出力結果が変化してしまう。 サンプルコード 結果 myFuncB のスコープ内には val が存在しないため、スコープチェーンにより、外側の val に対し 1000 を代入することになり、myFuncB() の実行後の myFuncA() の結果は、最初の myFuncA() の結果とは異なる値が出力される。 まとめ 今回の var に関連する項目としてクロージャがあります。どちらも JavaScript を理解する上では基本的なことなので、気になる方は JavaScript:これで脱初心者!レキシカルスコープとクロージャについて を合わせて読んでみてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:即使用可能!JavaScript と jQuery のフォーム値取得テンプレート

form の値を取得するための JavaScript と jQuery のソースコードを一覧にし、コーディング時にそのまま使えるテンプレートとしてまとめました。 実際の動きがイメージしやすいように、実行サンプルと結果もセットにしました。ご活用下さい。 JavaScript と jQuery のフォーム値取得テンプレート サンプルコードの「取得」ボタンをクリックすれば結果が出力されます。 ボタン <input type=”button”/> HTML JavaScript jQuery サンプル 結果 テキスト <input type=”text”/> HTML JavaScript jQuery サンプル 結果 数値(HTML5) <input type=”number”> HTML JavaScript jQuery サンプル 結果 チェックボックス <input type=”checkbox”> HTML JavaScript サンプル A  B  C  結果 ラジオボタン <input type=”radio”> HTML JavaScript サンプル A  B  C  結果 セレクトボックス(単数選択) <select name=”select”> HTML JavaScript サンプル single A single B single C 結果 セレクトボックス(複数選択) <select name=”select” multiple> HTML JavaScript サンプル multiple A multiple B multiple C 結果 ※サンプルの結果は「出力」ボタンのクリックイベントで output($output) の値を出力したものとなります。 まとめ チェックボックスやラジオボタン、セレクトボックスの要素取得は、やはり jQuery が便利ですね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:call と apply の使い方と違いについて

JavaScript には call と apply というメソッドがありますが、両者の違いを説明してくれている情報を元に、自分なりに分かりやすくまとめてみました。 いきなり結論から call と apply の違いは引数の書き方だけ。2番目以降の引数が連続した引数のリストか、引数の配列を一つだけ受け取るか。 だそうです(笑) 言葉で理解することは簡単なのですが、このままでは使用用途が明確ではないので、実際にサンプルコードをみながら次のような順で、両者の違いを詳しく見ていきたいと思います。 説明の概要 call と apply の概要とその役割 call について apply について まとめ call と apply の概要とその役割 そもそも call や apply はどういったメソッドなのでしょうか。 以下のサンプルコードでは、sample_c インスタンスからそれぞれ apply と call を使って sample_b を呼び出し実行しています。このサンプルコードの場合は call も apply も同じ動きをします。 サンプルコード 結果 このように、apply や call を使えば、コンストラクタのメンバ変数を、あらゆる場所から呼び出すことが出来るようになります。 call について call の概要 thisArg は method の this パラメータとして使われる値。thisArg を null か undefined とすると、グローバルオブジェクト(Window)となる。arg1, arg2,… は method に渡される引数。 サンプルコード 結果 this は自身のオブジェクト Men Women を指し、Men Women からそれぞれ Person を call で呼び出し、name, age を引き渡しています。 ログ出力では、this がそれぞれ自身のオブジェクトを指し、インスタンスから各プロパティにアクセスすると、それぞれの値が格納されていることが確認できます。 apply について apply の概要 thisArg は call と同様、method の this パラメータとして使われる値。thisArg を null か undefined とすると、グローバルオブジェクト(Window)となる。argsArray は method に渡される引数。 サンプルコード 結果 このサンプルコードでは2つの apply を使っています。 まず最初に、father, mother の各プロパティの値を配列 fArray, mArray とし、Gender から Person を apply で呼び出し、引数を配列 args で引き渡しています。 次に、Person 側では受け取った配列がオブジェクトなので、arguments オブジェクトから apply で Array のメソッドを呼び出し配列として扱えるようにしています。 ログ出力では call のときと同じように、各プロパティの値が出力されていることが確認できます。 まとめ call や apply を使用すれば、あらゆる場所から、オブジェクト内に定義されたメンバ関数を使用することが出来るようになってしまいます。 この辺が JavaScript が柔軟であり、混乱する理由のひとつといえるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:プロトタイプチェーン詳解!prototype と __proto__ について

prototype や __proto__ それぞれを詳しく説明しているものは存在しますが、この2つの違いを明確にまとめている情報があまりありませんでした。 そこでプロトタイプベースとはどういうことなのか、コード上に登場する prototype や __proto__ とは一体何なのかを自分なりに整理してみました。 更新履歴 [2017.06.03] コンテンツ修正しました。sititou70様、ご指摘いただき有難うございました。 [2014.07.19] コンテンツ修正しました。通りすがり様、ご指摘いただき有難うございました。 プロトタイプ JavaScript は「プロトタイプベース」のオブジェクト指向言語です。 まず最初にこの「プロトタイプベース」のオブジェクト指向とはいったい何なのか、クラスベースのオブジェクト指向と比較してみました。 クラスベース オブジェクトの雛形として必ずクラスが存在し、クラスをインスタンス化することでオブジェクトが生成される。 プロトタイプベース オブジェクトは既存のオブジェクトを元(プロトタイプ)とし、ユニークな特徴を付加することで存在する。 JavaScript はクラスを定義しなくても、新しいオブジェクトを生成したときには、すでに別のオブジェクトを元に生成されているということなのですね。 そして、この元こそがプロトタイプであると言うことがわかります。 プロトタイプ と [[Prototype]] と prototype プロトタイプ は仕様上の 概念 であって、実装時に定義したり参照できるものではありません。その概念を [[Prototype]] 内部プロパティである prototype や __proto__ により実現されています。 よって、全てのオブジェクトは内部プロパティ[[Prototype]]を持つということになります。 prototypeとは JavaScript の function 式で生成されるオブジェクトには prototype というプロパティを持っています。これがプロトタイプの正体です。 全てのオブジェクトが持つプロパティfunction式で生成されるオブジェクトが持つプロパティ(※1) prototype プロパティには何らかのオブジェクトが格納されている ※1 [2014.07.13](修正) prototypeは関数が生成されるときに自動的に作られ、{constructor:ownFunction}が入れられるプロパティで、普通のオブジェクトは持ちません。 次のサンプルコードでは Sample という関数(コンストラクタ)を定義し、Sample の prototype へ a プロパティを定義し、そこへ文字列 a を代入しています。 サンプルコード 結果 Sample のインスタンスである sample_obj 生成し、インスタンスから a プロパティにアクセスすると、prototype で定義した a の値が暗黙の参照により出力されます。 prototype(プロトタイプ)まとめ プロトタイプは概念上の言葉で、 prototype というオブジェクトのプロパティにより実現されている。 プロトタイプチェーン JavaScript がオブジェクト指向言語でありながら、クラスベースの言語と比較して、オブジェクトの型を意識しなくても何となく動いてしまう理由は、インスタンスが暗黙の参照により、オブジェクトが持つプロパティ prototype 順に辿っていくためです。(※2)このことをプロトタイプチェーンと呼びます。 ※2 [2014.07.19](加筆) チェーンが辿るのは [[Prototype]] であり、親の prototype プロパティとは直接関係ありませんが、new演算子が親の prototype プロパティを子の [[Prototype]] に設定するようになっているため、全てのオブジェクトはどんな名前のプロパティであっても [[Prototype]] に適応され得ます。 プロトタイプチェーンについては以下のサンプルコードをみれば分かりやすいと思います。 サンプルコード 結果 SampleA という関数(コンストラクタ)を定義し、SampleA の prototype に対し a というプロパティを定義し、文字列 a を代入しています。 続いて SampleB を定義、その prototype に SampleA のインスタンスを代入します。 最後に SampleB のインスタンス sample を生成し、インスタンスから SampleA で定義した a プロパティにアクセスすると 文字列 a が出力されました。 この例ではプロトタイプチェーンにより、JavaScript でもクラスベース言語のように SampleB が SampleA を継承していることが分かります。 プロトタイプは次のような経路で探索していきます。 プロトタイプチェーンの経路 現在のインスタンスのプロパティを調べる インスタンス元のオブジェクトのプロトタイプを調べる(上位のオブジェクトがある場合は継承の頂点まで繰り返す) 継承ツリーの頂点 Object.prototype を調べる Object.prototype で見つからない場合は undefined を返す(※3) サンプルコードでは以下の順にプロトタイプの探索が行われています。 sample_obj の prototype にプロパティ a があるか調べる -> なし SampleB の prototype にプロパティ a があるか調べる -> なし SampleA の prototype にプロパティ a があるか調べる -> あり(探索終了) プロトタイプチェーンまとめ prototype に定義したプロパティは、インスタンスから暗黙の参照により、継承ツリーの頂点である Object.prototype までを順に探索する。(※3) ※3 [2014.07.19](加筆) チェーンの末端は Object.prototype と決まっているわけではなく、厳密に言えば [[Prototype]] が null のときに探索が終了します。 prototype と __proto__ ここまででプロトタイプが仕様上の概念であること、prototype は関数オブジェクトのもつプロパティであることは理解出来ました。 それでは一体 __proto__ とは何でしょうか。 __proto__とは 全てのオブジェクトが持つプロパティObject.prototypeから継承されるアクセサメソッド(※4) __proto__ の値が null になるまでプロパティを探索していく Object.prototype の… 続きを読む