カテゴリー: JavaScript

【JS】DOMの変更を監視して表示を変えたい

こんにちは、しきゆらです。

今回は、DOMの変化により発火するイベントを知ったので、使い方をメモしておきます。

 

やりたいこと

DOMの数を数えて、数を表示したい。

というのも、最近のライブラリとかならば出来るんだろうけど素のJSでなんとかできないのか、と思って調べてみるとうっかりありました。

その名も、Mutation events!!

Mutation events – ウェブデベロッパーガイド | MDN

スポンサードリンク

しかし、どうもこれは推奨されておらず代わりに使うものを教えてくれていますね。

 

MutationObserver

今回の本題。

これをつかうと、DOMの変更を検知して特定の関数を実行する事ができます。

といっても、基本的なものはMDNさんに使い方があるのでそっちもどうぞ。

MutationObserver – Web API インターフェイス | MDN

 

使い方

基本的には、newでインスタンスを作るだけですね。

これにより、監視対象に変化があればnewした時に渡したイベントを実行してくれます。

 

変化の監視というのは、属性・文言・子要素等指定ができます。

必要なところを監視できますよ。

childList対象要素の子要素の監視
attributes対象要素の属性の変化
characterData対象要素のテキストの変化
subtree対象要素の子孫要素を監視
attributeOldValueattributesがtrueのとき、対象要素の変更前の値を取得できるようにする
characterDataOldValuecharacterDataがtrueのとき、対象要素の変更前の値を取得できるようにする
attributeFilter特定の属性のみ監視するときに使う。
filterなので、必要ないものを指定する。

 

基本的に、これらを連想配列で渡してあげればいけます。

childList、attribute、characterDataにはtrue/falseを指定するだけ。

簡単ですね。

 

これで、監視対象に変化があれば特定の関数を実行できるようになりました。

Reactさんの真似事が出来るかもしれませんね。

 

今回は、ここまで。

おわり

スポンサードリンク

【JS/Electron】Hello Worldをやってみる

こんにちは、しきゆらです。

今回は、ElectronでHello Worldを作って遊びたいと思います。

 

前回Electronのことを書いてからすでに半年以上経っていますね。

どうしても、環境構築するだけで満足してしまう部分があります・・・。

環境構築が一番楽しいと思うのですがどうでしょうか。

 

さて、では作っていきます。

Continue reading “【JS/Electron】Hello Worldをやってみる”

【JS】setIntervalの関数に引数を渡す

こんにちは、しきゆらです。

今回は、よくお世話になるであろうsetIntervalの関数に引数を渡す方法を知ったのでメモしておきます。

 

 

といっても、リファレンスをよく読めば書いてありました。

WindowOrWorkerGlobalScope.setTimeout() – MDN

https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

 

MDNさんによると、setIntervalの引数は「関数オブジェクト」、「遅延させる時間」の2つだけではないようです。

1つめのものですね。

3つ目以降の引数には、関数オブジェクトの引数として渡すものを書けばいいようです。

上記のようにすれば、delayミリ秒ごとにconsoleにはhoge, fugaの2つが表示されるはずです。

 

これは知りませんでした。

パっと見ただけでは何をやっているのかわかりませんけど、必要な時はこれで乗り切れそうですね。

 

わかりやすさで言えば、無名関数を作って上げたほうが読みやすいかもしれません。

 

 

どちらにしても、こうすればsetIntervalの関数に引数を渡せるようです。

知らないことがいっぱいありますね。

 

今回はこのへんで。

おわり。

【JS/Ruby】JSが理解できる日付を表す文字列を作る

こんにちは、しきゆらです。

今回は、やんごとなき理由により日付を表す文字列をサーバ側からもらい、JSで処理するような状況で困った私が、その時解決した方法をメモしておきます。

 

少しだけ状況を説明すると、

サーバ側ではRubyさんを使って日付を文字列にしてDBへ入れています。

(この段階でSQLのtimestampとか使えばいいのに、と思いうツッコミはなしで)

その日付文字列をJSでパースしてあれこれ処理するようなプログラムを書いていました。

例えば、前回のログイン時間との時間差とか。

 

ここで、問題が起こります。

Rubyで「Time.now」として取得できる日付を表す文字列は、

  • 2017-10-20 23:32:04 +0900

JSで「Date.parse()」で理解できる日付文字列は、

  • Fri Oct 20 2017 23:32:04 GMT+0900

 

これでは、JSは日付を理解できません!

ここからが本題です。

 

JSは日付をパースしたりするとき、IETDF標準日付構文としてパースするようです。

時刻を表す文字列を与えると、parse() は time 値を返します。これは、”Mon, 25 Dec 1995 13:30:00 GMT” のような RFC2822 / IETF 標準の日付構文 (RFC2822 Section 3.3) を受け入れます。

Date.parse() – JavaScript | MDN

JSのDate()で返ってくる文字列は「Fri Oct 06 2017 23:49:19 GMT+0900 (JST)」のような形です。

パースするときも、この文字列形式だと思ってやるようなので、

YYYY-MM-DD HH:MM:SS +0900のような文字列は受け付けてくれません。

※Chrome系のブラウザでは受け付けてくれるようです。

 

何かやんごとなき状況により、「YYYY-MM-DD HH:MM:SS +0900」のような文字列を扱わざるを得ないような場合があるかもしれません。

そこで、サーバ側でJSで理解できる形式に変換してみましょう。

もちろん、Rubyさんでやってみます。

他の言語でも、多分同じような関数があるはずなのでいけるはずです。

重要なのは3行目のstrftime。

この書き方で、JSが理解できる日付を表す文字列にできます。

 

日本決め打ちですが、とりあえずこれでJSさんもRubyさんも、この日付をきちんと理解してくれます。
JSさんのDate型には罠が多くて面倒ですね。
早く同じ挙動になってくれ・・・と思う今日このごろ。

とりあえず、Chrome系、Firefox、Safariできちんと読み込めたので大丈夫だと思います。

 

今回はここまで。

おわり。

【JS】FormDataと戯れる

こんにちは、しきゆらです。

今日は、JavaScriptでフォームのデータを簡単に取得したり、XMLHttpRequestなどで送信しやすいFormDataオブジェクトに触れたら便利だったので、メモしておきます。

 

formタグのデータをJSで取得し、それに追加して他のデータを送りたい場合などはよくあると思います。

そんな時は、formの中にhiddenでinput要素を配置するとか、方法はいくつかあると思います。

でも、HTML的にはhiddenの要素は意味がないので、データの扱いはJSだけで完結していたいですよね。(個人的な意見です)

 

そこで使えるのがFormDataというもの。

formタグの中身をそのままkey, valueの組み合わせで表現できる魔法のようなオブジェクトです。

参考:FormData – MDN

簡単な使い方をまとめておきます。

 

Continue reading “【JS】FormDataと戯れる”

【HTML/JS】NodeListはArrayにあらず

こんにちは、しきゆらです。

今回は、NodeListなどのArrayっぽいオブジェクトの扱いについてメモしておきます。

 

DOMを扱うとよく現れるNodeListなど、Arrayっぽくあるものがちょくちょくあります。

Arrayに似ているけど、concatとかArrayの便利メソッドは使えません。

このArrayっぽいものをArrayに直す方法です。

[].sliceはどのブラウザでも動くようです。

IEを無視すれば、以下のものでも良さそうです。

 

今回のことは、ほとんどMDNに書いてあることでした。

意外と見えていないんだなぁと。

以下のあたりを見ました。

参考

 

 

今回はここまで。

おわり

[HTML]formをエンターで送信したい

こんにちは、しきゆらです。

急に暑くなってきた今日この頃、いかがお過ごしでしょうか。

 

今回は、HTMLのお話です。

 

HTMLのformタグで、エンターを押した時に送信したい、という場面になりました。

しかも、送信する部分に関してはJSでコードを書いていました。

例としては、以下のような感じ。

ユーザ名IDを入力してもらい、ボタンを押すと入力された情報をサーバへ送りログイン処理を行う、というもの。

これを、エンターを押した時も同じように処理してほしい、というのが今回の話。

 

サーバサイドのスクリプトも自分で書いていたので、HTMLのsubmitに合わせてデータを取得できるようにすればいいんですが、面倒だったのでlogin関数でなんとかできないかな、と思っていました。

結論としては、formタグに「onsubmit=”return login();”」と書き込んで、

login関数で 「return false;」とすれば解決でした。

onsubmitは、onclickのように関数名を渡せばいいんだと思っていましたが、違うようですね。

onsubmitは、関数等の処理を返す必要があるようです。

 

ただ関数がreturnすればいいのではなく、その値をさらにリターンするイメージですかね。

参考:onsubmitの戻り値をfalseにしてsubmitを実行しない(中断させる)方法 – 小粋空間

 

また、テキストボックスの数によっても挙動が異なるようです。

参考:【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 – SOFTELメモ

 

知らないことがたくさんありますね。

今回はここまで。

おわり。

【HTML/JS】要素のテンプレートを作る

こんにちは、しきゆらです

タイトル通り要素のテンプレートを作るためのタグの存在を知ったためメモしていきます

 

これまでは、特定のタグをテンプレートとして利用するときは

CSSでdisplay:noneとかをかけて見えなくしておいた要素をelement.cloneNode()で複製していくスタイルでした

 

そんな中、HTML5から追加された(?)templateタグというものを見つけました

これの使い方や、他の方法との速度の差などをまとめていきます

 

Continue reading “【HTML/JS】要素のテンプレートを作る”

【JS/Electron】MacにElectronを導入する

こんにちは、しきゆらです

今回はMac上にElectronを導入していきます

Electronとは、簡単に言えばChromeの中身であるChromiumを使ってデスクトップアプリを作ることができるフレームワークのことで
Webの技術(HTML/CSS,JavaScript)を使ってアプリを作ることができます
テキストエディタのAtomのために作られたもので、現在はみんなが使えるように公開されています
Atomもちろん、VS CodeやPC版のSlackなどもElectronを使って作られているようです
手順等は続きから

Continue reading “【JS/Electron】MacにElectronを導入する”

【JavaScript】JS高速化計画 イベント編

こんにちは、しきゆらです

大層なタイトルをつけましたが、続くかどうかはわかりませんね

あと、内容がお行儀がいいかどうかも保証できませんよっと

 

さて、本題

JSに速度を求めている今日この頃

最近は、少しでも速くなる方法があるのならば、それを使おうと思っています

 

ということで、今回はJSでよく使うであろう

DOMにイベントリスナーを追加する部分を見てみます

 

調べてみると、イベントリスナーを追加するときには

  • addEventListener
  • onXXX

がよく使われていて

両者には違いがあるということはよく書かれています

 

でも、速度の違いは・・・?

ということで簡単なコードを使って検証して見ました

詳しくは、続きから
Continue reading “【JavaScript】JS高速化計画 イベント編”