わかった気になるJS開発手法

わかった

わかった気になる

わかった気になる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を使えばよいのでは

QUnithttp://docs.jquery.com/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<rosylilly@aduca.org>わかった気になるJS開発手法