ニコニコードリーディング自己紹介azu@azu_reWeb scratch, JSer.info
JavaScript Promiseの本ニコニコ生放送 PC ⚠

ニコニコ生放送• prototype.js + jQuery + Backbone(+underscore)• Why collection.js depend on prototype.js?
nicolive.collection.js• Boolean trapを持った関数がある

nicolive.collection.js

http://nl.simg.jp/public/inc/assets/zero/js/base/nicolive.collection.js

Boolean Trap
• 引数に真偽値を渡してしまう関数• メソッドから挙動が分からなくなる
Nicolive.Liveinfo.liveinfoArea.setRankingInfoEnabled(true);• See hall of api shame: boolean trap

Duplicate module• jquery.placeholder.js• nicolive.placeholder.js

UA detection is not modern• ✘ Prototype.Browser.*• UA判定はAndroidの機種固有のバグを避ける以外等に使わないほうがいい• Modernizr or polyfillを使うべきニコニコ動画ニコニコ動画• Good Catch !
• Kenta Takahashi and Takayuki Yamaguchi• evalJSON is EVIL!
• Use JSON.parsejson2.js

douglascrockford/JSON-js

json2.js

ニコニコ動画

var isIPad = window.orientation !== undefined;• これは iPad ですか? - いいえ違います

zero_index

http://uni.res.nimg.jp/js/zero_index.js

zero_index

変数名に嘘をつかせない• See リーダブルコード• 名前：誤解されない名前：ユーザの期待に合わせる Strategic Choiceニコニコ動画ページ• AMD• Require.js• Backbone.js + LoDash

ニコニコ静画

ニコニコ静画• Knockout.js• Good choice for IEx support.
• Knockoutは未だにIE6をサポートしてる
nicodic.js• eval JSON is EVIL! (2分ぶり2回目)• Use JSON.parse
nicodic.js

seiga.nicovideo.jp/book/static/js/nicodic.js

ニコニコ静画• 意図せぬグローバル変数?
出典: seiga.nicovideo.jp/book/static/js/nicodic.js
Nicodic = function(){};
nicodic = new Nicodic();• JSHint or ESLint で検出しようニコニコ立体• Backbone.js( + Marionette)• pjax ( + html fragment )• 比較的新しい感じ?

CommonTemplate Engine• 色々な場所で色々なテンプレートが使われている• Jarty. nicolib.js , _.template , String.replace• 複数のテンプレートエンジンは誰も幸せにならない• FYI : _.template breaking change! @ 1.7.0

common.js?? !
• common.jsのやってることが共通ではない• 全てのサイトで異なってる• UtilはUtilとして扱うべき• common.jsを作る前にモジュール化できないかを考えるCommon.jsとは !
• http://uni.res.nimg.jp/js/common.js• http://seiga.nicovideo.jp/js/illust/common.min.js• http://seiga.nicovideo.jp/book/static/js/common/common.js• http://seiga.nicovideo.jp/js/manga/common.js• http://ch.res.nimg.jp/js/common.js• http://nl.simg.jp/public/inc/common_cb.js

Refactoring Plan ✈モジュール化• 各サービスでコピー.jsが氾濫してる• JavaScriptモジュールのルールの統一• function($,window)• (function($){....})(jQueries["1.8.1"]);• $j• if (typeof Nico === 'undefined') Nico = {};CommonJS• モジュール: CommonJS or ES6 or AMD• npm、Browserify、webpack などを使ってモジュールの管理/ビルド• npm enterprize or Local Path
• FYI: ニコニコ動画再生ページはAMD + Require.jsモジュールメリット• モジュール化することでコードが捨てやすくなる• 重複するコードが減る• グローバル汚染を除去
デメリット• ビルドツールを使わないといけないグローバルでワールドワイド !
• http://ch.res.nimg.jp/js/channel/blog/article.js• http://nl.simg.jp/public/inc/notifybox_preload.js• http://res.nimg.jp/js/__utm.js

Remove prototype.js• prototype.js は取り除く努力をすべき• Big bottleneck!
• 広告のjsが大きな依存を持つべきではない

ads.min.js• 心理的にその依存が外しにくくなる• Insecure library...
ads.min.js

http://ads.nicovideo.jp/assets/js/ads-2.10.0.min.js

Update swfobject.js• swfobject 1.x has vulnerability• UXSSではないが、エスケープに気を使う必要がある• 安全に倒されてない実装• Update or Replace• See swfobject.js がアレな話 - ほむらちゃほむほむ

Remove unused files...
• 使ってないjsを削除するのが一番大事!
• 使ってるかどうか分かるようにするためにも、依存関係を静的に解析出来るモジュール管理を取り入れよう• ビルドツールを導入しようMore Testable• How many have test code?
• 新規に書く場合はユニットテストを• レグレッション検知としてのE2Eテスト• テスト と リファクタリングは仲良しまとめ• モジュール化• 万能ではないがコードが捨てやすくなる• 安全でない実装はできるだけ把握するべき• eval, prototype, jQuery sink
• サービスごとで担当が違うなら、共通理解を得る• prototype.js / jQuery べったりなコードからの脱却