読者です 読者をやめる 読者になる 読者になる

はてブロ@ama-ch

https://twitter.com/ama_ch

WEB+DB PRESS Vol.70にClosure Compiler/Linterの記事を書きました

連載「JavaScript活用最前線 ── 大規模開発の現場から」第3回目の記事を書きました。

今回はClosure CompilerとClosure Linterの紹介と、コンパイル時の警告をもとにコードチェックツールとして利用する方法を解説しました。
最近は割とClosure Compilerを使ってる人が増えてきたような印象がありますが、コードチェックにまで活用している例はあまり見ないので参考になれば嬉しいです。


これはあくまで僕が経験したケースですが、JavaScriptで実際に複数人で大規模なコードを書いてみると、2〜3万行くらいまでは割と頑張ればなんとかなります。でもそれ以上の規模になってくると、型のぶれが抑えられなくなってきます。型のぶれとは、数値を期待してるとこに数値文字列がきて足し算したら文字列連結になっちゃたとか、配列を期待してたら添え字付きのオブジェクト(!!)が入ってきて配列用のメソッドが動かないとか、そういうやつです。

そうすると多少型がぶれても動くコードを書くようになります。
簡単に書くとこのくらいで、

function hoge(num) {
  var number1 = parseInt(num, 10);
}
funktion fuga(arr) {
  var array1 = arr || [];
}

ちょっと複雑になるとこういうものも。

function foo(obj) {
  if (isArray(obj) {
    ...
  } else if (isObject(obj)) {
    ...
  } else {
    ...
  }
}

このようなことをやっていると一応ちゃんと動くんですが、バグは必ずこういう処理が漏れてる箇所で発生するんですよね。

そうして発生したバグをしばらく潰していると、ふと「あれ、これ詰んでね?」と思うようになります。いや、思いました。どれだけ型に対して慎重にコードを書いても必ず型の考慮漏れは出てくるし、書いてるのは自分だけじゃないから書き方も統一できないし、このまま一生後手後手で型エラーと戦うのかという不安感はいやなものです。


そこで取った方法が、Closure Compilerを使ったコンパイル時チェックです。
紙面ではClosure Compilerの基本的な使い方から、コードチェックツールとしての利用方法、継続的インテグレーションに組み込んで綺麗なコードを維持する方法までを解説しています。


Closure Compilerを使ったコードチェックを導入することで、型エラーに対する不安をほぼなくすことができました。ついでにAPIが返すデータ構造の設計がよろしくないとこが見つかったり、コンパイル後のパフォーマンスが向上したり、身長が5cm伸びたりしました。


WEB+DB PRESS Vol.70は本日発売です。Webアプリ開発でJavaScriptを書く方や、きちんとしたJavaScriptを書きたい方は、ぜひ読んでみてください。

WEB+DB PRESS Vol.70

WEB+DB PRESS Vol.70

  • 作者: 成田一生,高津戸壮,Dr.Kein,近藤宇智朗,後藤秀宣,mala,中島聡,森田創,堤智代,A-Listers,はまちや2,佐藤裕介,久森達郎,大窪聡,本田謙,和田英一,天野祐介,藤吾郎(gfx),奥野幹也,WEB+DB PRESS編集部
  • 出版社/メーカー: 技術評論社
  • 発売日: 2012/08/24
  • メディア: 大型本
  • 購入: 8人 クリック: 89回
  • この商品を含むブログ (15件) を見る

サイボウズ技術説明会 for students でフロントエンドについて話します

6/14(木)にエンジニア志望の学生向けに「サイボウズ技術説明会 for students」というイベントが開催されます。サイボウズ本社のエンジニア3人が登壇し、使っている技術やトレンドを紹介します。

僕からはフロントエンドのお仕事についてお話します。
今のところこんな感じの内容で考えています。

  • フロントエンドエンジニアとは
  • なぜフロントエンドエンジニアが必要なのか
  • 必要なスキル
  • 使ってるライブラリなどの紹介
  • サービス開発時のちょっと具体的な話

フロントエンドエンジニアといっても、漠然とJavaScriptを書いてるイメージだったり、コーダーとかマークアップエンジニアとの違いがよく分からないということが多いと思うので、これを機に普段どんなことをしているか具体的にお話したいと思います。
「こんなことが聞きたい!」とかあれば、こちらかTwitterで @ama_ch までいつでもどうぞ。
僕以外にもサイボウズLiveのモバイルアプリ開発や、定年(35歳)を突破したバリバリCTOのお話がありますよ!
フロントエンドのみならず、Webサービス作りに興味がある人には楽しんでもらえると思うので、ぜひ気軽に参加してください。


イベント詳細・参加申込はこちらから
https://job.rikunabi.com/2013/company/seminar/r646010018/C011/
紹介ブログ
https://job.rikunabi.com/2013/company/blog/detail/r646010018/60/


なお、明日無事に退院できなかった場合は上記の限りではありません。

社内勉強会でクライアントサイドMVCについて話しました

こんにちは。日曜から盲腸で入院中のama-chです。
普段は不健康の代名詞みたいに扱われていますが、これでも小学校は修学旅行の日以外は皆勤だったし、入院するのも初めてなんです。
退屈な入院生活ですが、PCとモバイル通信環境があると一気に世界が開けます。電源、食事、ベッドの三拍子が揃った理想的な職場がそこにはありました。難点といえば、21時に強制消灯されてしまうことと、なかなか風呂に入らせてもらえないことくらいです。


風呂の話はさておき、今年の2月頃から社内で「フロントエンド勉強会」というものを始めています。
JavaScript, CSS, HTML5, UI/UXなど、フロントエンドに関するテーマでざっくばらんに毎週開催しています。だいぶ前になっちゃいましたが、4月にその勉強会でクライアントサイドMVCについて話したので資料を公開します。

明日のためのクライアントサイドMVC

試しにSpeaker Deckにアップしてみたけど、はてなダイアリーにうまいこと埋め込めなかった><
データにモデルという名前を与えて、モデルとしての振る舞いを定義するようになったという所がMVCフレームワークの出現前後で最も変わったところだと思います。
個人的には、モデルとコンポーネントが綺麗に分離されてるのが好きですね。

WEB+DB PRESS Vol.68からJavaScriptの連載を始めました

表題の通りですが、WEB+DB PRESS Vol.68 からJavaScriptの連載を書かせていただくことになりました。
連載タイトルは「JavaScript活用最前線 ── 大規模開発の現場から」です。

WEB+DB PRESS Vol.68

WEB+DB PRESS Vol.68

  • 作者: 名村卓,三宅陽一郎,小野修司,中島聡,森田創,小飼弾,田籠聡,天野祐介,cho45,大和田純,白土慧,勝間亮,石田忠司,牧本慎平,A-Listers,近藤宇智朗,はまちや2,mala,じゅんいち☆かとう,WEB+DB PRESS編集部
  • 出版社/メーカー: 技術評論社
  • 発売日: 2012/04/24
  • メディア: 大型本
  • 購入: 4人 クリック: 189回
  • この商品を含むブログ (10件) を見る

第一回目はBackbone.jsを使ってクライアントサイドMVCを実現するという内容です。
大規模なJavaScriptを書く際に使える内容や、最新のホットな話題など、現場の方に参考になるような記事を書いていきたいと思います。
id:teppeis と交互に執筆する予定なので、次回にもぜひご期待ください。
よろしくお願いします!

作業効率が10倍アップする Chrome Developer Tools の使い方

というタイトルで社内勉強会を開きました。
その時の資料を公開します。
「作業効率が10倍アップする」かどうかは個人差があるのでご注意ください。
最近のChrome Developer Toolsは本当に高機能ですごいですね!僕も資料を作っていて新しい発見が沢山ありました。

追記: 説明不足ですいません。スライドは←→キーで移動します。表紙にも記載しておきました。
作業効率が10倍アップする Chrome Developer Tools の使い方

あとキャプチャをとるのに使ったSkitchが便利すぎて感動しました。

MacBook Air を買ったので感想とかやったことを書くよー

Mac

Macbook Air の新しいやつ買っちゃいました!わーーーい
まだ触って数日ですが、触ってみた感想やらやった設定などを書いておきます。

後半のソフトの紹介は
MacBookAir 11インチを買って導入したソフト ~サーバエンジニア編~
こちらの内容と結構かぶっているので、設定など細かい話だけ書いておきます。


買ったもの

メモリだけ 2GB → 4GB に増設しました。

触った感想

全般
  • 起動はえー!だいたい15秒もあれば操作可能な状態になる!
  • 動作はえー!

お役御免になった瀕死のMacBookちゃんとのベンチマーク比較はこちら。
MacBook

MacBook Air

全然スコアちがうw

  • ぜんぜん熱くならないから膝上でも余裕
    • CPUが平常時50℃前後、Flashムービー再生でMAX80℃↑くらい
    • さすがに70℃超えてくると熱い
  • ぜんぜん熱くならないせいかファンも超静か
    • でもDropboxインストール後は激しく回ってた
    • ムービー再生時も結構回ってる
  • DVD ドライブはちょっと欲しいかも
  • 起動時(スリープ復帰時)のアルミボディはひんやりしてる
キーボード
  • 少しストロークが浅い気がするけど概ね良い感じ
  • US配列はホームポジションが左にずれないから右手がトラックパッドにかぶらない!
トラックパッド
  • トラックパッド自体を押し込むとカチッとクリックできる!知らなかった!
  • なのでD&Dも全然普通にできる
  • 3本指/4本指スワイプべんり!


つぎは設定やインストールしたソフトなど!

システム環境設定

Dock
  • 自動的に隠す

Dockには起動アプリしか表示しない派なので、ついでに最初からDockに登録されているアプリケーションを全部削除。

Spaces
  • 3×3 の9面で!
Spotlight
  • Ctrl+Space は Emacs で使いたいのでショートカットの設定をはずす
セキュリティ
  • スリープから復帰したらすぐにパスワードを要求

ちなみに Ctrl+Shift+Eject でディスプレイを即時スリープできます

キーボード

右下にある「修飾キー」ボタンを押して出るウインドウで、

  • Caps Lock キーを Ctrl キーに変更

US 配列だと a の左が CapsLock なので。。
元々のCtrlキーはCapsLockにしても邪魔なので、今のところ割り当てなしの状態。

キーボードショートカット
  • Ctrl+5〜9でSpacesを切り替えるようにチェック
  • ユニバーサルアクセスのVoiceOverのON/OFFのチェックをはずす

はずしておかないと、たまにキャッシュクリアのつもりで Command+F5 押したときにいきなり喋り出します。色々怖いので、はずしましょう。

トラックパッド
  • とりあえず軌跡・ダブルクリックの間隔・スクロールを早くする
  • タップでクリック
  • 2本指の設定は全部チェック
  • 3本指はスワイプで移動
  • 4本指上下スワイプでExposeを起動

トラックパッドは後述する BetterTouchTool で更に機能を割り当てます。

Finder環境設定

  • すべてのファイル名拡張子を表示

導入したソフト(無料)

開発系のツールとごっちゃになっちゃったけど、全部書いときます。

メインブラウザに。

Firebug 用。

Facebook ビューアとして起動してます。

ドットファイルDropbox に同期しています。

インストーラに同梱されているコマンドラインツール growlnotify も忘れずにね!

.emacs やら elisp は前の Mac で Dropbox に同期しておいたものを引っ張ります。

普段は Emacs だけど、こちらもあると安心します。

ただのメモ書き程度にしか使っていませんが、やっぱりクライアントツールがあった方が便利です。

Beta版を入れてみました。結構変わってますね!カッコイー

大抵の圧縮ファイルは解凍できるようになります。

アプリを綺麗に消せる!

自動でスリープさせたくないときに。

メモリやCPU温度やファンの回転数など、Macの色んな情報が見られるようになるウィジェット

カレンダーウィジェット。祝祭日に対応していて、複数月表示できるのが気に入っています。

キーバインド・キーマップ編集ソフト。
Mac はデフォルトで Emacs 風のキーバインドがある程度有効になっていますが、その他にも自分がよく使う Emacs キーバインドをこれで有効にします。
あと US 配列の人は
・Command_L to Command_L (+ When you type Command_L only, send EISUU)
・Command_R to Command_R (+ When you type Command_R only, send KANA)
この2つを有効にすると、左右の Command キーを単体で押したときに JIS 配列でいう「英数/かな」と同じ挙動になります。Command+Space だとどちらの入力モードなのかよく分からないんですよね。

Terminal.app がかっこよく出現するようになります。
インストールには SIMBL が必要。

トラックパッドに色んなアクションを割り当てられるようになります。
・Four Finger Swipe Left
・Four Finger Swipe Right
の2つに Spaces を追加しました。4本指の上下スワイプには Expose が割り当てられているので、上下で Expose, 左右で Spaces という感じですね。僕は作業スペースを分けて頻繁に切り替えるので、このようにしました。
・Three Finger Swipe Up
・Three Finger Swipe Down
には Dashboard を割り当て。

あと、BetterTouchTool が起動時にWindowsと同じようなウインドウ操作をするかどうか聞いてくるんですが、これををONにする(自分で設定する場合は Action Setting -> Window Snapping から)と、Win7 のように画面上部にウインドウをドラッグすると最大化したりできるようになります。 Mac はウインドウを最大化しようとして左上の緑色のボタンを押すと、縦だけ大きくなったり最大化したりとよく分からない動きをするので、きちんと最大化できるのはありがたいです。

BTTはログイン時に自動で立ち上がらないっぽいので、
システム環境設定 -> アカウント -> ログイン項目
に ~/Applications/BetterTouchTool.app を追加しておきます。

入れようか迷ったんですが、MacPorts のインストールに必要だと怒られたので入れました。
確か 8GB 以上容量が必要です。でかいなー。
ダウンロードには無料のデベロッパー登録が必要です。

とりあえず zsh を入れて一通り設定。 screen はまだいいかな。

起動時のジャーンを消すやつです。

導入したソフト(有料)

月額300円のやつ。やっぱことえりより ATOK だよね!
推測変換モードをONにして話し言葉で使うのが基本です。

何でもできるコマンドラインランチャ?です。
Quicksilverみたいなやつといった方が分かりやすいかも知れません。
シングルライセンスで24ユーロです。円高のうちにぜひ!
あ、これが Command+Space のキーバインドを使うので、入力モード切替の方は切りました。

おわりに

Mac はまだ2台目であまり理解していないことも多いのですが、僕なりに今の使い方をまとめてみました。
少しでも参考になれば嬉しいです。

IEでoffsetHeightがとれないときの対処方法

javascript

ご無沙汰しています。
最近はもっぱら JavaScript ばかり書いているため、偽物臭がかつてないほど強くなっているあまちゃんです。実に1年半ぶりのエントリーです!


最近 IE8 で要素の offsetHeight が取得できなくて困ったので、その対処方法を書いておきます。


まず背景や問題の詳細。
やりたかったことは、

  • height に auto が指定されている div が沢山あり、現在の offsetHeight が最も大きいものにすべて揃える

ということです。


FF や Chrome では DOM 操作をするのと同じタイミングで描画もされ、描画後の任意のタイミングで element.offsetHeight の値を参照することができました。しかし IE では DOM を操作するコードの実行時に画面が描画されないようで、(コード上では)描画済みの要素の offsetHeight を参照しても、前者のブラウザとは違う値になってしまいました。
computedStyle や runtimeStyle でも取得できず。ムムム...


そこで id:teppeis 先生に教えてもらったのが setTimeout を使う方法。

var height = 0;
window.setTimeout(function() {
    height = element.offsetHeight;
}, 0);

なんでこれで取れるかっていうのはamachangのエントリーが分かりやすいです。
JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 - IT戦記


このままだと引数が渡せないのでこんな感じに。

var height = 0;
window.setTimeout(function(self) {
    height = element.offsetHeight;
}, 0, this);


しかし IE では setTimeout の3番目以降の引数はサポートされていなかった...

Internet Explorer では、最初の構文で関数に渡す追加のパラメータは動作しないことに注意してください。

window.setTimeout - MDC


IE で引数を渡すために結局こんな感じに。

var height = 0;
(function(self) {
    window.setTimeout(function(self) {
        // ここでselfが使える
        height = element.offsetHeight;
    }, 0);
})(this);


というわけで無事に IE でも offsetHeight がとれました(^o^)/

2010/10/2 追記

IE で offsetHeight がとれないのはこういう訳だったらしい。。。


@yo_waka先生ありがとうございました。