JavaScript¶

Portal,TextBook,Cheat Sheet¶

Lastest Hacking News - JavaScript Cheat Sheet Free Download
http://www.cheatography.com/davechild/cheat-sheets/javascript/pdf/

はてな教科書 JavaScript 編
https://hatena.github.io/Hatena-Textbook-JavaScript/

JavaScript Programming お気楽 ECMAScript2015 超入門
http://www.geocities.jp/m_hiroi/light/js2015.html

K-TechLaboゼミ用学習ノート - JavaScriptのテキスト
http://www.k-techlabo.org/blog2/?page_id=1022

JavaScriptの入門書を jsprimer.net で公開しました
https://efcl.info/2018/10/26/jsprimer.net/ https://jsprimer.net/

JavaScript Promiseの本
http://azu.github.io/promises-book/

trekhleb/javascript-algorithms
https://github.com/trekhleb/javascript-algorithms/blob/master/README.ja-JP.md

多種多様なアルゴリズムやデータ構造に関するサンプル例がまとめられたリポジトリ

初心者に分かりやすい！JavaScript 入門チートシート
https://commte.net/javascript-basics

モダンJavaScriptについて
https://qiita.com/ayuoyk/items/b0183b36881f69b91282

Gadgets¶

jQuery の使用¶

次のコードを実行することにより、jQuery を読み込んでいないページでも jQuery を使用することができる。

if (!window.jQuery) {
    document.body.appendChild((function(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
        return s;
    })());
}

jQueryの使用(Chrome DevToolsのSnippets機能編)¶

ChromeのDev Toolsを開き(Ctrl+Shift+IかF12キーを押す)、Sourcesパネルを開いてその中のSnippetsタブをクリック。その後、左側の空白欄を右クリックしてメニューを表示し、その中の『New』をクリック。

そうすると新しいsnippetが追加され、真ん中にコード記入欄ができるのでsnippetの名前を『jqueryfy』、コード下記のように記入し保存。

(function () {
  if ( !window.jQuery ) {
    var dollarInUse = !!window.$;
    var s = document.createElement('script');
    s.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js');
    s.addEventListener('load', function(){
      console.log('jQuery loaded!');

      if(dollarInUse) {
        jQuery.noConflict();
        console.log('`$` already in use; use `jQuery`');
      }
    });

    document.body.appendChild(s);
  }else if( !window.$ ){
      window.$ = window.jQuery;
      console.log("'$' is jQuery")
  }

})();

jqueryfyの箇所を右クリックしてメニューを表示し、『Run』をクリックする。

while(isプログラマ) - Chrome DevToolsのSnippets機能がすごい便利そう
http://am-yu.net/2014/08/07/chrome-devtools-snippets/

ページ内に仕掛けられた全てのEventListenersの設定元の一覧をダンプ¶

last log - ページ内に仕掛けられた全てのEventListenersの設定元の一覧をダンプし、必要な対策を施す方法
http://uupaa.hatenablog.com/entry/2014/09/05/004431

実際にconsoleに貼り付ける時は、関数の中身だけをコピペする

function getAllNodeEventListeners() {
  var nodes = [].concat(window, [].slice.call(document.getElementsByTagName("*")));

  nodes.forEach(function(node) {
    var result = getEventListeners(node);
    for (var type in result) {
      console.log(type, result[type]);
    }
  });
}

Chrome DevTools Snippets¶

ChromeのDevTools(開発者ツール)にはSnippetsという、コンソールでデバッグの際に使うスクリプトを保持してくれる機能がある。

DevTools Snippets
http://bgrins.github.io/devtools-snippets/

Debug¶

JavaScriptが敬遠される理由の7割ぐらいは、このデバックのし難くさにかかっていると思う。
まだ実機で試してないのもあるけど。

JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips
http://postd.cc/how-to-not-hate-javascript-tips-from-the-frontline/

Qiita - JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～
http://qiita.com/shgkt/items/0054670269e1d3aa49b8

javascript-visualizer - JavaScriptの実行内容を可視化
https://tylermcginnis.com/javascript-visualizer

alert¶

最も原始的なのが、alert()を使う方法です。同様にconfirm()を使うこともできます。
C言語のprintfで変数を出力したり、Java言語のSystem.out.println()でインスタンスの中身を出力するのと同じです。

alert("Alex");

debuggerステートメント¶

デベロッパーツール側では手動でブレークポイントを配置したものと認識されます。

debugger;

console.log,console.warn,console.error,console.info¶

いずれも以下のようなC言語で使われるような出力フォーマットをサポートします。

console.log("Hello %s", "Brian");

Qiita - console.logまとめ 2016年夏
http://qiita.com/ykyk1218/items/0f5858d077d43a49cfe2

console.table()¶

結果はコンソール上にテーブルで出力され、オブジェクトの属性でソートすることができます。
オブジェクトの中身、JSON(たぶん)、配列が、視覚的に把握しやすくなります。

console.table([[1,2,3], [2,3,4]]);

コールトレースを取得する¶

失敗した時だけでなく、成功した時にもコールトレースを確認することができます。
非標準の関数ですが、主要なデスクトップブラウザではサポートされています。

console.trace();

非同期コールは、いかが役に立つかもしれません。

TraceConsole.trace();

誰がオブジェクトを変更するか？ Objects.observe + console.trace¶

オブジェクトのプロパティの一部が変更されることがありますが、誰が犯人か判らないことがよくあります。
このような場合Object.observeが役に立ちます。personオブジェクトに対する全ての変更を確認する場合を見てみましょう。
console.traceと併用すると、コールトレースも確認できるので、誰が犯人かまで判ります。
ただ、現在(2015.05:未確認)は、Chromeのみがこの機能をサポートしているようです。

var person = {
  firstName: "John"
}

Object.observe(person, function(changes) {
  // This callback runs asynchronousty and aggregates the changes that happened
  // in the previous execution turn into `changes` param.
  changes.forEach(function(change) {
    consote.log(change.type, change.name, change.oldVatue);
    consote.trace();
  });
});
Object {firstName."John"}

誰がDOMやHTML要素を変更するのか¶

MutationObserverと呼ばれるオブジェクトがあり、これによってDOM要素の監視が可能になります。
ドキュメント全体で発生した全ての変更をリストアップしたい場合を考えてみましょう。
この場合、ドキュメントは選択されたどのDOM要素にも当てはまります。

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.Length; i++)
      console.log(mutation.addedNodes[i]);
  })
});
observer.observe(document, { childList: true });

Chromeでは、プログラミング以外の解決策も使えます。DOM Breakpointsと呼ばれるもので、バックグラウンドではMutation Eventを使っています。

サーバ側でクライアントのエラーログを取る¶

実に簡単なのですが、Windowオブジェクトにonerrorイベントハンドラを追加するだけでクライアント側の処理は完了です。
ハンドラは、サーバ上にエラー情報を蓄積するRESTのエンドポイントに対してAjaxリクエストを行うことができます。

window.onerror = function(msg, url, line){
  if(encodeURIComponent) {
    var req = new AjaxRequest();
    var params = encodeURIComponent(url) + encodeURIComponent(msg);
    req.setMethod("POST");
    return req.loadXMLDoc("/my/servtet", params);
  }
  return false;
};

jQuery¶

【脱JQuery】モダンなJSの書き方
https://qiita.com/tatsumi_t2/items/ec41fdc4cf269bfa86bc

Cheatsheet¶

jQuery Cheatsheet
http://lab.abhinayrathore.com/jquery-cheatsheet/

Plugin Sample¶

jQueryを利用した演出がかっこいいWEBサイト50個
http://designaholic.cc/2011/01/jqueryweb50.html

12個のかっこいいjQueryスライドショープラグインまとめ
http://webdesignfactory.schoolbus.jp/jquery_slide/

流行のjQueryでスクロールするサイトを集めてみました
http://webrocketsmagazine.com/entry/20111102/scrollable-website-with-jquery.html

クライアントワークでよくお世話になっているjQueryプラグインいろいろ
http://webdesignrecipes.com/jquery-plugins-in-cliant-works/

使いたいけど難あり¶

http://grow.weblike.jp/immature_design/jquerys/865.html

http://galleria.io/

JavaScript Emulator¶

JSBin
http://jsbin.com/

JSFiddle
https://jsfiddle.net/

glot.io - 様々な言語のコードスニペットが共有できるサイト
https://glot.io/

javascript-visualizer - JavaScriptの実行内容を可視化
https://tylermcginnis.com/javascript-visualizer

JavaScript Beatutify¶

Online Javascript beatutify
http://jsbeautifier.org/

Memo¶

くんすとの備忘録 - BATファイルにJScriptを埋め込む
http://kunst1080.hatenablog.com/entry/2015/12/15/222711

LintCI(Web上でJavaScriptのLint)
https://lint-ci.io/

Programming Tutorials and Source Code Examples
http://www.java2s.com/

Qiita - ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】
http://qiita.com/nekoneko-wanwan/items/02aed17773833c3ad3b2

Qiita - Reactを使うとなぜjQueryが要らなくなるのか
http://qiita.com/naruto/items/fdb61bc743395f8d8faf

Qiita - JavaScript ショートコードテクニック集（ES6含む）
http://qiita.com/ichimonji_haji/items/f602f6c437be9e7daa88

アプギガ - JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ！
http://plus.appgiga.jp/masatolan/2016/10/13/57333/

JavaScriptエンジニアなら知ってるよね？エラー処理のいい書き方、悪い書き方
https://www.webprofessional.jp/proper-error-handling-javascript/

Qiita - ゼロから始めるJavaScript生活
http://qiita.com/takahashim/items/7838334d1451fb0a9811

【翻訳】 2016年にJavaScriptを学んでどう感じたか - 【翻訳】 2016年にJavaScriptを学んでどう感じたか
http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404

Subterranean Flower blog - JavaScriptの関数で何ができるのか、もう一度考える
https://sbfl.net/blog/2016/12/26/javascript-function-revisited/

javascriptのライブラリを一覧にしてまとめてみた
https://trueman-developer.blogspot.jp/2016/05/javascript.html

GitHub - trekhleb/javascript-algorithms
https://github.com/trekhleb/javascript-algorithms

JavaScriptをもうちょっと理解する54のトピック
https://qiita.com/komlabo/items/3f14c8990a2f94fb5323

JavaScriptの"非同期処理"を理解する（Promise/async/await)
https://qiita.com/kkrtech/items/4680c624012bd265714f

A painter and a black cat

Wiki