javascriptをまじめに考えました+

みんな（多分）大好きJavaScriptをちょっとまじめに考えてみたり

そんな使い方ないワーなことを話します

112年10月27日土曜日

おおくぼひろあき

Interactive DesignerMultimediaといっしょに20年


JavaScriptを使ってWebサイトを作っていますか？


そのJavaScriptがUXをだいなしにしてる....

かもですよ

奥さん


inazumatv.comの場合


inazumatv.comの場合

<script type='text/javascript' src='http://www.inazumatv.com/contents/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script><script type='text/javascript' src='http://cdn.wpbooster.net/e3fd63a20401eb34dc2cb64dd7cfdb0f/wp-content/themes/yoko/js/smoothscroll.js?ver=1.0'></script><script type='text/javascript' src='http://cdn.wpbooster.net/e3fd63a20401eb34dc2cb64dd7cfdb0f/wp-content/plugins/swfobj/swfobject.js?ver=2.2'></script><script type="text/javascript" src="http://www.inazumatv.com/contents/wp-content/plugins/cforms/js/cforms.js"></script>

<head>

たくさん！でも少ない方かも...


http://www.inazumatv.com/contents/wp-includes/js/jquery/jquery.js?ver=1.7.2'

http://www.inazumatv.com/contents/wp-includes/js/jquery/jquery.js?ver=1.7.2'

http://cdn.wpbooster.net/e3fd63a20401eb34dc2cb64dd7cfdb0f/wp-content/themes/yoko/js/smoothscroll.js?ver=1.0'




http://cdn.wpbooster.net/e3fd63a20401eb34dc2cb64dd7cfdb0f/wp-content/plugins/swfobj/swfobject.js?ver=2.2'




http://www.inazumatv.com/contents/wp-content/plugins/cforms/js/cforms.js

http://www.inazumatv.com/contents/wp-content/plugins/cforms/js/cforms.js

JavaScriptリンクは他ファイルのロードをブロックする


1.JavaScriptリンクは他ファイルのロードをブロックする

【対策】</body>タグ直前に<script>タグを書く。

document.createElement を使用して<script>タグをHTML <head> へ挿入する。

JavaScriptライブラリがあります。LasyLoadhttps://github.com/rgrove/lazyloadLABjsLABjs : Loading And Blocking JavaScripthttps://github.com/getify/LABjs

...etc


https://github.com/rgrove/lazyload

https://github.com/rgrove/lazyload

http://labjs.com/

http://labjs.com/

https://github.com/getify/LABjs

https://github.com/getify/LABjs

HTML, CSS, 画像の最適化に心配りしたWeb制作を

しているならJavaScriptもね


JavaScriptを無効にしてもWebサイトは

問題無く見たり使用できますか？


まさかJavaScriptをデザインに使ったりなんて

よい子のみんなはしないよね


DOMの高さをそろえたり

1行おきに背景に色をつけたり

アコーディオン形式のリストのデフォルトが非表示だったりそれから、あれや、これや、こんなことや、あんなことや、...etc


<a href="javascript:void%200" onclick="location.href='example.html';return false;">

ダメ！絶対！！JavaScriptが有効でないと遷移できません


JavaScript

ブラウザで実行されるブラウザ環境に依存するインタプリタprototypeベースのオブジェクト指向言語

ブラウザ互換問題が発生しやすい。・処理スピード・処理落ち

それから、あれや、これや、こんなことや、あんなことや、...etc


JavaScriptの便利なライブラリ

ライブラリは便利です。便利なものは使っちゃいましょ。




【例】IE 6で32bit PNGを使う時どうしてます？DD_belatedPNG.js があれば解決！




【例】IE 6で32bit PNGを使う時どうしてます？DD_belatedPNG.js があれば解決！

でも

使い方を間違えると...1912年10月27日土曜日

DD_belatedPNG.fix('img’);

JavaScriptの便利なライブラリ DD_belatedPNG

【例】

この例だとHTML中の<img>タグ全てにCSS Ruleが設定されます。

使用されている画像が全て32bit PNGで無い限り使うべきではありません。


DD_belatedPNG.fix('img’);


【例】

DD_belatedPNGは自動的にmouseleave, mouseenterなどのマウス・アクションに対してattachEventを付加します。

全ての画像にmouseleave, mouseenterアクションが必要なケースで無い限り使用するべきではありません。


DD_belatedPNG.fix('.png32’);


【対策】

CSS classなどで必要項目を特定して指定しましょう。

あるいは、32bit PNGを使用しない。

IE 6をサポート対象外にする。


jQueryはスキですか？

そしてプラグインも


JavaScriptをglobal領域に記述しない

Scriptタグ内はglobal領域になります。外部ファイル(.js)化している場合も同様です。exampleVarはglobal変数、exampleFunctionはglobal関数になります。

<script type="text/javascript">$(document).ready(function () {});

var exampleVar = ‘変数’;function exampleFunction () {! alert(exampleVar);}</script>



global領域にScriptを記述すると思いもかけない上書きなどのトラブルに簡単に巻き込まれます。

名前空間(Name Space)の汚染問題として良く知られています。

global変数、関数へのアクセスはlocalに比較すると遅いことも知られています。



即時関数内にScriptを記述します。【対策】

;(function () {! // ココにScript}());

即時関数は記述したその場で直ぐに実行される関数です。名前（関数名）はありません。名前空間を汚染しません。



即時関数内にScriptを記述します。【対策】

;(function () {! var exampleVar = ‘変数’;! function exampleFunction () {! ! alert(exampleVar);! }}());

exampleVar, exampleFunctionどちらもlocalになります。


$(document).ready(function () {});


JavaScriptで使用するwindow, documentなどはglobal変数（オブジェクト）です。local化することでアクセス・スピードが向上します。

;(function (window, $) {! var document = window.document! ;! $(document).ready(function () {});}(this, jQuery));



jQueryを互換モードで使用しています。しかもjQueryのglobal “$” の名前をそのままにlocal化し使用しています。

;(function (window, $) {! var document = window.document! ;! $(document).ready(function () {});}(this, jQuery));

global領域にScriptを記述している。jQueryを互換モードで使用していない。



jQueryは互換モードで使用する。

互換モードで使用しないと他のライブラリを使用した時にコンフリクトを起こすかもかもかも

コンフリクトの多くは使用者側の不注意から発生します。


JavaScript

ブラウザで実行されるブラウザ環境に依存するインタプリタprototypeベースのオブジェクト指向言語

ブラウザ互換問題が発生しやすい。・処理スピード・処理落ち

それから、あれや、これや、こんなことや、あんなことや、...etc

そんなに処理スピードは速くない

遅くなる要因は少なくしましょう


JavaScriptの便利なライブラリ jQuery■jQueryでのEvent処理(Click)

$('#someLink').click(function (e) {});

$('#someLink').bind('click', function (e) {});

$('#someLink').on('click', function (e) {});

どれも正しく動作しますが、$('#someLink').on('click', function (e) {});

を使用すべきです。jQuery 1.7から使用可能です。



特別な理由が無い限り（どんな理由があるのか思いつきませんが）最新版のjQueryを使うべきです。

jQueryといえどもバグや処理遅延はあるかもです。bug fixされたり最適化された最新版を使うべきです。

最新版のjQueryを使用する



長くメンテナンス（更新）されていないライブラリやプラグインを使用するべきではありません。

日進月歩のInternet界で1年は長すぎると感じます。

長くメンテナンスされていないライブラリ、プラグインを

使用しない



$('#someLink').on('click', function (e) {! e.preventDefault();! e.stopPropagation();});

Eventのバブリング（伝播）を止めたり、キャンセル処理をちゃんと行っていますか？



$('#someLink').on('click', function (e) {! e.preventDefault();! e.stopPropagation();});

Clickイベントを発生箇所以外でその後に使用することはあまりないと考えられます。

ブラウザに不要な処理をさせない様に配慮することが必要です。


JavaScriptの便利なライブラリ jQuery■jQueryでのEvent処理(Click)var bool = false,! $someLink = $('#someLink');$someLink.on('click', function (e) {! e.preventDefault();! e.stopPropagation();

! if (bool) {! ! $someLink.addClass('exampleClass');! } else {! ! $someLink.removeClass('exampleClass');! }! bool = !bool;});

1回だけ取得し使い回す方が効率的です。3912年10月27日土曜日

JavaScriptの便利なライブラリ jQuery■jQueryでのloop処理(each)

$('a').each(function (index, element) {});

each()使ってますか？

ループ処理の時に便利ですよね。しかしこのeach関数、処理が遅いことで知られています。jQueryの問題では無く、JavaScriptの関数呼出のオーバーヘッドが原因です。


JavaScriptの便利なライブラリ jQuery■jQueryでのloop処理(each)

for (var i=0, limit=$a.length; i < limit; i++) {! //$a[i];}

まだ、こちらの方がましかと思います。

ループ内で関数呼出したら同じことですけど...


JavaScriptの便利なライブラリ jQuery■jQueryのDOM Selector

jQueryのDOM Selectorは大変優秀です。

ネイティブ機能だけでは不可能なことも軽々とやってのけてしまいます。

これ無しには生きていけないかもしれません。不可能なことは無いのではと思えてしまいます。



でも4312年10月27日土曜日


jQueryのDOM Selectの

仕組みを見てみましょう



document.getElementById();document.getElementsByName();document.getElementsByTagName();document.getElementsByClassName();

document.querySelector();document.querySelectorAll();

JavaScriptには上記のようなselector関数が用意されています。jQueryと言えどもこれらの関数を使用します。


JavaScriptの便利なライブラリ jQuery■jQueryのDOM Selector$('#main .className');jQueryで上記のような指定の場合JavaScriptだと...document.querySelectorAll('#main .className');

document.　getElementById('main').　getElementsByClassName('className');

しかしquerySelectorAllはモダンなブラウザにしか用意されていません。

使えない時は...

コメントご指摘通り間違えているので削除します。IEではgetElementsByClassNameの方が実装がquerySelectorAllより早く行われています。

SafariはgetElementsByClassNameの方が早かったように思っていたのですが確証がありません。



jQueryにはsizzleというDOM Selectのためのライブラリが内蔵されており、レガシーブラウザの時でも、もっと効率的に選択が行われます。

結果は全て複数になります。配列の様な形式です。

単独のDOMを選択するより処理コストがかかります。


JavaScriptの便利なライブラリ jQuery■jQueryのDOM Selector$('#main');

DOMの選択はdocument.getElementByIdが最速です。可能な限りidで指定し取得すべきです。

HTML内に1つしか存在しないのにtag名やclass名で選択していないか確認してみることをお勧めします。


JavaScriptの便利なライブラリ jQuery■jQueryでのEvent処理(Click)<ul id="tCon">! <li><a href="img/s/earth.jpg"><img src="img/t/earth.jpg" alt=""></a></li>! <li><a href="img/s/jupiter.jpg"><img src="img/t/jupiter.jpg" alt=""></a></li>! <li><a href="img/s/mars.jpg"><img src="img/t/mars.jpg" alt=""></a></li>! <li><a href="img/s/mercury.jpg"><img src="img/t/mercury.jpg" alt=""></a></li>! <li><a href="img/s/moon.jpg"><img src="img/t/moon.jpg" alt=""></a></li>! <li><a href="img/s/neptune.jpg"><img src="img/t/neptune.jpg" alt=""></a></li>! <li><a href="img/s/saturn.jpg"><img src="img/t/saturn.jpg" alt=""></a></li>! <li><a href="img/s/solarsystem.jpg"><img src="img/t/solarsystem.jpg" alt=""></a></li>! <li><a href="img/s/sun.jpg"><img src="img/t/sun.jpg" alt=""></a></li>! <li><a href="img/s/uranus.jpg"><img src="img/t/uranus.jpg" alt=""></a></li>! <li><a href="img/s/venus.jpg"><img src="img/t/venus.jpg" alt=""></a></li></ul>

【設問】上記のようなHTML内のaタグにclickイベントを設定するコードを記述せよ。


JavaScriptの便利なライブラリ jQuery■jQueryでのEvent処理(Click)<ul id="tCon">! <li><a href="img/s/earth.jpg"><img src="img/t/earth.jpg" alt=""></a></li>! <li><a href="img/s/jupiter.jpg"><img src="img/t/jupiter.jpg" alt=""></a></li>! <li><a href="img/s/mars.jpg"><img src="img/t/mars.jpg" alt=""></a></li>! <li><a href="img/s/mercury.jpg"><img src="img/t/mercury.jpg" alt=""></a></li>! <li><a href="img/s/moon.jpg"><img src="img/t/moon.jpg" alt=""></a></li>! <li><a href="img/s/neptune.jpg"><img src="img/t/neptune.jpg" alt=""></a></li>! <li><a href="img/s/saturn.jpg"><img src="img/t/saturn.jpg" alt=""></a></li>! <li><a href="img/s/solarsystem.jpg"><img src="img/t/solarsystem.jpg" alt=""></a></li>! <li><a href="img/s/sun.jpg"><img src="img/t/sun.jpg" alt=""></a></li>! <li><a href="img/s/uranus.jpg"><img src="img/t/uranus.jpg" alt=""></a></li>! <li><a href="img/s/venus.jpg"><img src="img/t/venus.jpg" alt=""></a></li></ul>

$('#tCon a').on('click', function (e) {! e.preventDefault();! e.stopPropagation();});

動きますが、もう少し効率的な処理があります。


JavaScriptの便利なライブラリ jQuery■jQueryでのEvent処理(Click)$('#tCon').on('click', function (e) {! e.stopPropagation();! e.preventDefault();! var target = e.target,! ! nodeName = target.nodeName.toLowerCase()! ;! if (nodeName !== 'img' && nodeName !== 'a') {! ! return false;! }});

Event伝播の仕組みを利用し上位のコンテナでClickアクションを取得し利用しています。＊nodeNameを調べる必要があります。


jQueryは最速？


jQueryは最速?

jQueryに限った話ではありません。他のライブラリ(Framework)も同じです。

そもそも、このようなライブラリたちが登場したのはクロスブラウザ対策が困難を極めたからです。

多くのライブラリはレガシーブラウザを含め正常に機能するように設計されています。


jQueryは最速?var $tCon = document.getElementById('tCon');!function onClick (e) {! var target, nodeName, a;! if (typeof e === 'undefined') {! ! e = window.event;! ! target = e.srcElement;! } else {! ! e.preventDefault();! ! e.stopPropagation();! ! target = e.target;! };! nodeName = target.nodeName.toLowerCase();! if (nodeName === 'img') {! ! a = target.parentNode;! } else if (nodeName === 'a') {! ! a = target;! } else {! ! return false;! };! // ココにScript! return false;};if (typeof $tCon.addEventListener !== 'undefined') {! $tCon.addEventListener('click', onClick, true);} else {! $tCon.attachEvent('onclick', onClick);};

先ほどのClick問題をライブラリを使わずに書き直しました。


jQueryは最速?EventをリスナーするEventはaddEventListenerかIEのattachEventを使いイベント・ハンドラを設定します。

EventハンドラaddEventListeneraddEventListenerを使ったときはハンドラ引数へEventインスタンスが送られてきます。EventインスタンスのtargetプロパティのnodeNameを調べるとEvent発生場所が分かります。Eventの伝播を止めるためにpreventDefault, stopPropagationします。

attachEventattachEventを使った時は引数へEventインスタンスが送られてきません。そのかわりwindow.eventが使えます。window.eventにはtargetプロパティがありません、そのかわりsrcElementプロパティが使えます。srcElementのnodeNameを調べるとEvent発生場所が分かります。preventDefault, stopPropagationが使えないのでEventの伝播を止めるためにreturn falseで代用します。


jQueryは最速?

ふ～5612年10月27日土曜日

jQueryは最速?

なかなか大変ですが$(document).ready()

はもっと大変です


jQueryは最速?;(function (window, functions) { var document = window.document, functions = functions && functions.splice ? functions : [], ie = document.addEventListener ? false : true, complete = false, dispose = function () { if (complete) { return; }; complete = true; if (!ie) { document.removeEventListener('DOMContentLoaded', onDOMContentLoaded); document.removeEventListener('readystatechange', onReadyStateChange); window.removeEventListener('load', onWindowLoad); } else { document.detachEvent('onreadystatechange', onReadyStateChange); window.detachEvent('onload', onWindowLoad); }; for (var i = 0, limit = functions.length; i < limit; i++) { setTimeout(functions[i], 25 * i); }; }, onDOMContentLoaded = function (e) { dispose(); }, onReadyStateChange = function (e) { if (document.readyState == 'complete') { dispose(); }; }, onWindowLoad = function (e) { dispose(); } ;// end of variables if (!ie) { document.addEventListener('DOMContentLoaded', onDOMContentLoaded, false); document.addEventListener('readystatechange', onReadyStateChange, false); window.addEventListener('load', onWindowLoad, false); } else if (document.attachEvent) { document.attachEvent('onreadystatechange', onReadyStateChange); window.attachEvent('onload', onWindowLoad); };}(window, [ function () {console.log('function 1')}, function () {console.log('function 2')}, function () {console.log('function 3')} ]));

見えないですよね、解説はblogへ

http://www.inazumatv.com/contents/archives/72455812年10月27日土曜日

http://www.inazumatv.com/contents/archives/7245


jQueryは最速?

ふ～5912年10月27日土曜日

jQueryは最速?

ライブラリ内はもっと効率良くScriptが書かれています。

クロスブラウザ対策に多くのコードが使われているのが分かって頂けたと思います。

IEでは使えないpreventDefault, stopPropagationも使えるようになっていたり...


jQueryは最速?

もしもモダンブラウザ

だけがターゲットだったら


jQueryは最速?

いらない機能ですよね～

ほら、スマホとか...


jQueryは最速?

jQuery 2.0 は IE 8以下をサポートしない

jQuery 2.0 (early 2013, not long after 1.9): This version will support the same APIs as jQuery 1.9 does, but removes support for IE 6/7/8 oddities such as borked event model, IE7 “attroperties”, HTML5 shims, etc.

http://blog.jquery.com/2012/06/28/jquery-core-version-1-9-and-beyond/




JavaScriptを使ってWebサイトを作っていますか？


そのJavaScriptがUXをだいなしにしてる....

かもですよ

奥さん


HTML, CSS, 画像の最適化に心配りしたWeb制作を

しているならJavaScriptもね


JavaScriptを無効にしてもWebサイトは

問題無く見たり使用できますか？


JavaScriptは上手に使うとHTML, CSSだけでは実現できないUIを提供できます。

HTML5のAPIには魅力的なものが沢山あります。Canvas, WebGL, Geo-Location, WebWorkers...

弱点を良く知りステキなコンテンツを届けるために使ってあげて下さい。


@taikiken


まだまだ発展途上です。間違いなどありましたらご指摘下さい。




修正 2012-10-26インタプリンタ -> インタプリタp.16, p.32

Page削除 p.46スライド上には残っています
