※スマホ対応はしてません。

ModelとViewに分ける設計の話。ちょい難しめ。(JavaScriptおれおれAdvent Calendar 2014 – 18日目)

カテゴリー: JavaScript

JavaScriptおれおれAdvent Calendar 2014 – 18日目分

あとから更新。

JSオジサンでお話してきた内容です。というか、先月JSConf.Asiaでもお話してきた内容ですね。

be-happy
みんなで幸せになろうよ。

スライド

こちらご覧ください。

つらいアプリ実装の例

カラーピッカーの実装を考えます。

よくあるカラーピッカーUI。

(さらに…)

スクロールで何かするための処理まとめ。(JavaScriptおれおれAdvent Calendar 2014 – 21日目)

カテゴリー: JavaScript

JavaScriptおれおれAdvent Calendar 2014 – 21日目

よくある処理についてまとめました。

スクロールの監視

windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。

$(window  ).on('scroll', function(event){ console.log('window'); });
$(document).on('scroll', function(event){ console.log('document'); });  // IE 8では呼ばれない

スクロール位置の取得

document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElementはHTML要素の事。ただし、WebKitだけBODY要素から、document.body.scrollTopで得る必要があります。

一度だけ取得するならこんなコードで。

var scrollTop = document.documentElement.scrollTop || documentElement.body.scrollTop;

何度も取得するなら、要素を事前にキャッシュしておくと良いかと。

var elScrollable;
if (navigator.userAgent.indexOf('WebKit') < 0) {
    elScrollable = document.documentElement;
}
else {
    elScrollable = document.body;
}

var scrollTop = elScrollable.scrollTop;

ページ最下部へのスクロール到達判定

「スクロール位置 + 画面高さ」が「ページ高さ」と等しくなれば、最下部へ到達したものと考えます。

画面高さの取得

(さらに…)

#JSオジサン に参加してきたよ。

カテゴリー: JavaScript

お呼ばれしまして、ちょっとお話ししてきました。初参加。

内容の過不足あればPRください。

JSオジサン #4

(さらに…)

最初にドキュメントから書く話。(JavaScriptおれおれAdvent Calendar 2014 – 17日目)

カテゴリー: 開発環境

JavaScriptおれおれAdvent Calendar 2014 – 17日目

特にライブラリー的なものを作るとき、最初にドキュメントを書くようにしてます。

例えばこれ、まだドキュメントしかないです。

最初にドキュメントを書く効能

もちろん後で書く手間が省けるってのもあるけど、それより、最初にAPIのリファレンスを作る事で、成果物の最終形が明確になります。最終形が分かっていれば、ごりごり書いてそれに近づけるだけっすね。

APIが決まっていれば試験を書ける、試験が書ければリファクターができる、リファクターができれば雑なコードでも実装を進められる。とまあそんな感じ。

もしここで明確な最終形を記述できなかったとしたら、それは現時点ではまだ何を作れば良いかわかっていないという事になるでしょう。それだとコードも書けない。

モジュールでも同じように

製品内の部品を作る場合も、同じように最終形を最初に考えます。これはいちいちドキュメント作成したりはしない場面が多いけど、脳内には用意しておく。必要ならメモ書きくらいは作っても良い。

理由は前述のものと同じで、これから何を作るのかを確認するため。

書く内容

短い紹介文が欲しい。というかそれが一番大事だと思う。端的な紹介文はこれが「何であるか」だけでなく「何でないか」も表現し得るので、方向性を定めやすい。

あとはリファレンスと使用例。例は具体的な利用場面も想定できるとなお良し。

別に変更してもいい

実装コードを書いてから気付く(あるいは単純に思い出す)事もあるので、最初に作った仕様を厳守するというわけじゃないです。

あと十分に先が見えていないと最終形を定める事はできず、こういう形で作業を進めるのは無理ですね。そういうときは適当にそれっぽいものを作って、触って、捨てて作り直して、を繰り返す。新しい何かを作るときはそうなりがちだと思う。

ただ、思想については曲げずに進めたいなと。

まあ

言うほど毎回しっかりやってるわけでもないんだけど……。理想的な働き方みたいなもの。

変数の命名の話。(JavaScriptおれおれAdvent Calendar 2014 – 16日目)

カテゴリー: JavaScript

JavaScriptおれおれAdvent Calendar 2014 – 16日目

間が空いてしまったけど、ぼちぼち落ち着いてきたので再開します。

割と全体的な命名のお話。なおプロパティの命名も同様。

※例がうまく思い付かなかったので、ちょっとアレかも。思い付いたら後で変更するかもです。

基本は名詞

userとかnameとかageとか、そういう値やオブジェクトを格納するものは名詞にします。

中身がオブジェクトなのか、文字列なのか数値なのか、は空気読む感じ。

動詞と同形なら、名詞を優先

ややこしいのが、名詞であり動詞でもある場合。その場合は名詞を優先します。で、関数の方は別の動詞+その名詞で名付ける。

例えばーそうだな、”sample”とか。オブジェクトなり純粋な値なりはsample、それを抽出する関数はmakeSample()とか。

動詞は関数

実行可能なものは動きそうな名前にしておきます。

これは別記事参照。

“f_”は関数オブジェクト

上記リンク先参照。

形容詞は二値

booleanの値は形容詞にします。他に副詞、形容動詞、過去分詞も。

例えばuser.activetrueなら、そのユーザーはアクティブだという事に。user.logginInならログイン中のユーザー、user.frozenなら凍結ユーザー。

オブジェクトを指す場合も

英語だと”the”と形容詞で名詞扱いするじゃないすか。アレですアレ。

よく使うのが”prev”, “next”で、これどっちも形容詞なんだけど、よく一覧で前後の項目を格納してます。

表現しにくい場合は接頭辞”b”

booleanの”b”。要はパッと見でわかれば良いので、うまく簡単な表現を思い付けない場合、あきらめてこれで済ませます。

例えば、直近六ヶ月にログインしたユーザーはuser.loggedInInThese6Monthsじゃなくてuser.b6Monthsとか。あーなんか例えば良くなさげ……。

複数形は配列

userはユーザー情報を格納したオブジェクトで、usersならそのオブジェクトが格納されている配列。

単複同形なら接尾辞”List”

単複同形じゃなくてもこの接尾辞使う事もあるけど。

“at”は時刻

startedAtとかmodifiedAtとか。ただし、中身はDateオブジェクトよりDate.now()で得られる数値が入っている場合が多い。

Ruby on Railsの影響。

“$”はjQueryオブジェクト、”el”は要素

name, $name, elNameみたいな使い分け。

これも別記事参照。

“d”はDeferred、”p”はPromise

jQuery.Deferred()の戻り値と、d.promise()の戻り値。

一文字dをそのまま変数名として採用する場面も多いんだけど、複数のDeferredを一度に扱う場合は接頭辞として使います。

例としては、ユーザー一覧と告知一覧を取得するとき、dUsersdInformationsにする。的な。そういう。

(Promise論争はここではおいておいてね。)

そんな感じ

です。