Tag JavaScript

New!

HTML: よく使う EJS のサンプルコード

必要に迫られ、今さらですが Node.js で HTML テンプレートエンジンの EJS を導入しました。 今回は EJS のよく使うサンプルコードをメモしておきます。 目次 よく使う EJS のサンプルコード まとめ よく使う EJS のサンプルコード 基本 の中で JavaScript コードを実行することができます。 コメント EJS コメントです。コンパイル時 HTML には出力されません。 インクルード 静的 HTML 出力として EJS を使う場合、主な用途はインクルードだと思います。 以下は index.ejs から _include フォルダ内の head.ejs (ejs 拡張子は省略可)をインクルードし headValue の値を渡すサンプルです。 index.ejs head.ejs 出力 文字列を出力する場合と、HTML 要素を出力する場合で2つの記法に分かれます。 (文字列を出力したい場合) (html 要素を出力したい場合) ループ おもにリスト等で利用する機会が多いかと思います。 まとめ ウェブサイトやウェブアプリの仕様等を HTML でプレゼンしたい場合、EJS のような HTML テンプレートエンジンが役に立ちます。 あらかじめ EJS で再利用性の高い要素をコンポーネント化しておけば、少ないコーディングで HTML 出力ができ、作業効率アップ、コストダウンにつながるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: Bootstrap で「印刷する」ボタンを設置する

Web ブラウザで印刷を行う場合、JavaScript で簡単に実現することができます。 今回は Bootstrap ボタンで「印刷」ボタンを設置する方法をメモしておきます。 目次 Bootstrap で「印刷する」ボタンを設置する まとめ Bootstrap で「印刷する」ボタンを設置する JavaScript の print() を実行するだけでブラウザの「印刷」プレビューを呼び出すことができます。 まとめ ペーパーレスの時代ですので、印刷ボタンがある Web サービスはあまり見かけませんが、メディアクエリの print と併用することで、業務管理系のサービス等に活用できるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

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で共有していただければ幸いです。