Upload
sho-kusano
View
57.270
Download
4
Embed Size (px)
DESCRIPTION
Javascript、ほんとうにちゃんと書けてますか
Citation preview
わかった
わかった気になる
わかった気になるJS開発手法
わかった気になるJS開発手法
\テッテレー/
アジェンダァ
•「アップロード」?アホか!•Makefileを書かないJSerは悪い奴だ•GCCって知ってるか•テストコードを書かないと死ぬ奴向け
1.アップロードとか最初に言ったのはどこのどいつだ
1.アップロードとか最初に言ったのはどこのどいつだ
まず諸君らはJSを書くだろう 書かない人は
対象外なのでニコニコチャンネルで
アニメをどうぞ
そしたらそれを試しに動かしたい
まずこういうソフトを起動する奴は
いますぐ腹を切って死ね
file:///.... みたいなURLを開く奴は
いますぐ首を裂いて死ね
せめて置換Proxyを使え!
http://coderepos.org/share/wiki/CocProxy
•ファイル名マッチでローカルと置換•ちょっとした設定を書いてファイル内の部分置換•Rubyで書かれているので自分で改造しよう
CocProxy
直す アップロード 開く デバッグ
直す ファイルコピー デバッグ
過去今日から
シンボリックリンク推奨
理由
クロスドメイン通信や、LocalStrageなどは、特定ドメイン下でしか動かない実際に出力される要素、APIの結果によって動かないこともあるので、ローカルのサンプルじゃデバッグにならない
あとからこんなことを言っても遅い!
大規模jsは基本的に500行以上あってクソみたいに複雑
2.
大規模jsは基本的に500行以上あってクソみたいに複雑
2.
単体のJSファイルを200行書くと人間は死ぬ
単体で200行以上あるJSは保守されない
俺だってしたくない
ファイルを
プロダクトに未来はない分割しなくては
「でも」Javascriptには
#includeもrequireもimportもない!
本当にない
include実装例function include(astrFile){ var script = document.createElement('script'); script.src = astrFile; script.type = 'text/javascript'; script.defer = true; document.getElementsByTagName('head').\ item(0).appendChild(script);}include('bbb.js');include('ccc.js');
こんなんじゃなくスマートな解決方法が
ある
困ったらコイツを参考にする
Makefile書いてファイル結合したら?
その発想はなかった
Javascriptはmakeするもの
だった
catして繋げるだけのMakefile
${JQ}: ${MODULES} ¦ ${DIST_DIR}@@echo "Building" ${JQ}
@@cat ${MODULES} ¦ \sed 's/.function..jQuery...{//' ¦ \sed 's/}...jQuery..;//' ¦ \sed 's/@DATE/'"${DATE}"'/' ¦ \${VER} > ${JQ};via https://github.com/jquery/jquery/blob/master/Makefile
ファイルを分割しておいて最終的にひとつのファイルに
結合する
結合する順序には要注意
GCCってあれだろGNU Compiler Collection
3.
GCCってあれだろGNU Compiler Collection
3.
JavaScriptだって言ってるだろうが
GCCとは
GCCとは
そんなバカな
GCC =
Google Closure Compiler自社の成果物ぐらい検索出来るようにしておけ!
http://code.google.com/intl/ja-JP/closure/compiler/
何に使うか
•コードの圧縮•最適化
やってくれることは
以上
function unusedFunction(note) { alert(note['text']);}
function displayNoteTitle(note) { alert(note['title']);}
var flowerNote = {};flowerNote['title'] = "Flowers";displayNoteTitle(flowerNote);
var a={};a.title="Flowers";alert(a.title);
空気を呼んでコードを圧縮してくれる
ただし、iPad向けなんかの特定の環境向けにガリガリにチューニングしたコードは逆に最適化をかけると遅くなることが
気をつけて使いましょう
TDDって言ってテスト駆動で開発をするんですよって
4.
TDDって言ってテスト駆動で開発をするんですよって
4.
テストなんてブラウザが変われば全部意味がなくなるんだ
諦めたらそこで試合終了ですよ
困った時の
QUnitを使えばよいのでは
Javascript用のUnitテストライブラリ
なんとなくおしゃれで格好いい
通信周りのテストはhttps://github.com/jquery/jquery/blob/master/test/unit/ajax.js
などが参考になる
実動作テスト
Selenium HQ
もはやおなじみ
ブラウザを選ばない自動テスト
しかしバグッた時の原因究明は
ッデガバ
ブラウザについてくるデバッガは賢い
IE9: sandbox for IESafari: Web InspectorChrome: Web InspectorOpera: DragonflyFirefox: Firebug
iPhone / iPadなどでは
ebifly
http://d.hatena.ne.jp/yaakaito/20110109/1294522573
Android
※よく知らない
最終的に信用出来るのは自分の眼で見た結果だけ
まとめ
5.
•いちいちアップロードとかない•makeして結合してからデプロイ•GCCで圧縮と最適化してもらおう•テストは他にもいろんなツールがあるよ
困ったらjQueryのソース読んだり開発手法パクると上手くいく!
2011. 05. 17rosylilly<[email protected]>わかった気になるJS開発手法