JavaScript

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

今回は、やんごとなき理由により日付を表す文字列をサーバ側からもらい、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さんでやってみます。

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

time = Time.now
#=> 2017-10-06 23:53:45 +0900
time.strftime("%a %b %d %Y %T GMT%z (%Z)")
#=> "Fri Oct 06 2017 23:53:45 GMT+0900 (JST)"

重要なのは3行目のstrftime。

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

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

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

今回はここまで。

おわり。

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

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

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

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

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

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

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

参考：FormData – MDN

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

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

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

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

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

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

// NodeList
var divs = document.querySelectorAll("div");
// HTMLCollection
var ps = document.getElementsByTagName("p");

// Arrayに変換
divs = [].slice.call(divs);
ps = [].slice.call(ps);

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

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

divs = Array.from(divs); 
ps = Array.from(ps);

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

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

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

参考

• NodeList – MDN
• HTMLCollection – MDN
• Array.prototype.slice()- MDN
• Array – MDN

今回はここまで。

おわり

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

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

今回は、HTMLのお話です。

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

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

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

<form>
　　<label for="user_id">ユーザID：</label>
　　<input type="text" id="user_id" name="user_id">
　　<button type="button" onclick="login()">ログイン</button>
</form>

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

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

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

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

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

<form onsubmit="return login();">
　　　　<label for="user_id">ユーザID：</label>
　　　　<input type="text" id="user_id" name="user_id">
　　　　<button type="button" onclick="login()">ログイン</button>
</form>

function login(){
  // なんらかの処理
  return false;
}

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

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

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

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

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

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

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

今回はここまで。

おわり。

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

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

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

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

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

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

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

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

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

さて、本題

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

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

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

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

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

• addEventListener
• onXXX

がよく使われていて

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

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

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

詳しくは、続きから

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

今回は、inputやtextarea等でユーザの入力をリアルタイムに取得する方法をメモ

入力されたことを取得するイベントトリガー(?)としてchangeは知ってましたが

これは入力されたあと、フォーカスが外れた時に発火するため

入力された時点で何かしたい時には使えませんでした

その中で、リアルタイムに入力を取得するためのトリガーとしてinputというものがあることを知りました

参考：JavaScript：テキスト入力関連のイベント、onChange,onInput,onKeyUp – hacknote

これを利用すれば、例えば入力がある時だけボタンをクリックできるようにするときなど二利用できると思います

これを利用せず、頑張ってJSで自分で作るときはきっとこんな感じになるのでは・・・？

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

今回は、JSの配列の中に指定した要素があるかどうかを調べる方法をメモしておきます

RubyではArrayの中に指定した要素が含まれているかを調べるinclude?というメソッドがありますが

JavaScriptではこのようなメソッドはないようです

調べてみると、指定した要素が配列内にあるとき、その要素の添え字を返すindexOfというメソッドが代わりとして利用できそうです

Array.prototype.indexOf() – MDN

var array = [1,2,”3”];
array.indexOf(1); // => 0
array.indexOf("hoge"); // => -1

配列内に指定した要素があれば、その添え字を

ない場合は-1を返すメソッドです

これを利用すれば、indexOf(“hoge") >= 0の時とすることで

配列の中に要素がある時にtrueを返すようにできます

今回はこれだけ

おわり