コード中にコメントを書くべきでしょうか？　是が非でも避けるべきでしょうか？　それとも控えめに書けばいいでしょうか？　開発者たちはそれぞれ、ソフトウェアを開発する際にどのように、そしてどんな時にコメントを書くかについて、独自の考え方を持っています。この記事では私の意見を述べますが、これが誰にも当てはまるというわけではありません。 なお、関数型プログラミングまたはオブジェクト指向プログラミングの原則に則ってJavaScriptで書かれたソフトウェアに絞った上で、私の意見を述べることにします。 コメントと保守性 この記事では、保守性のあるコードを書く場合について考えます。つまり、以下のようなコードです。 簡単に理解できる 簡単に拡張できる 簡単にデバッグできる 簡単にテストできる 保守性のあるコードには、大量のコメントが必要でしょうか？　明確に書かれたコードであるならば、大量のコメントは不要だと

はじめに 中級以上のJavaScriptプログラマを目指す上で、避けては通れない壁の一つは クロージャ（Closure） だと思います。「関数の外側で定義された変数を持つ関数の実行時オブジェクトです」とさらっと説明されることが多いですが、シンプルなだけに理解したつもりになって実は使いどころが分からないってことになりがちです。きちんと自分のものにするには基本から丁寧に理解しないとダメですねってことで、今回はクロージャについてその背景から調べてみたいと思います。 歴史と語源 まずは歴史から振り返ってみたいと思います。Wikipediaによるクロージャの解説では、以下のような説明があります。 クロージャの概念は、1960年代にラムダ計算の機械的な実行モデルを構築するために生み出され、1970年に 静的スコープ と 第一級関数 をサポートするPALプログラミング言語で最初に実装された。1964年、

Comparison of window.onload and jQuery's $(document).ready B! 39 0 0 0 JavaScriptでページを読み込み後に何かを行いたいときは window.onload = function()を使ったり、jQueryを使っていれば $(document).ready(function())を使ったりしますが、 これらはちょっと違うものです。 特にjQuery無しで$(document).ready(function)的な事をするのが ちょっと面倒ですがその辺について。 window.onload $(document).ready jQuery無しで$(document).readyな呼び出しをする onload時に行う物を複数登録する 実行される順序 window.onload window.onloadメソッドはonlo

Javscriptの開発において、1つ大きな障害となるのはクロスブラウザです。その中でも、rangeやselection関連のクロスブラウザ対策には辟易します。 毎度検索エンジンで調べている気がしたので、今回はこれらをまとめてみようと思います。 jQueryの利用を前提としていますが、限定的な利用なので、例えば$("textarea")[0]はdocument.getElementsByTagName("textarea").item(0)などで置き換えらえます。DOM要素を指定している個所は、利用シーンに合わせて変換してご利用ください。

DOMNodeInsertedは非推奨なのでMutationObserverを使うのが正しいあり方ではあるがどうもいまいち分かりにくい。と言う訳でちょっとネタがてらまとめておこうというエントリ。情報元は例によってMozillaさん。 まずはsampleを見てみよう。 // 対象ノードを選択 var target = document.querySelector('#some-id'); // オブザーバインスタンスを作成 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); // オブザーバの設定 var config = { attributes: true, childList

結論を先にまとめると、以下の３つです。 1. グローバル変数の宣言をなるべく減らしたい場合 2. ユーザが引数を与えてカスタマイズ可能な自由度の高い「関数」を生成したい場合 3. 前回、呼び出されて実行されたときの演算結果（値）を内部で保存して、次に呼び出されたときに、前回の結果（値）に対して、さらに同じ処理（演算）を行う関数を生成したい場合 以下、「クロージャ」の定義から、頭の整理まで、分かりやすい参考ウェブサイトへのリンクを張りつつ、見ていきます。 【 定義 】クロージャ takeharuさん Qiita記事（2013/07/22）「JavaScriptでクロージャ入門」 「自分を囲むスコープにある変数を参照できる関数」 Wikipedia 「クロージャ」 引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決することを特徴とする。関数とそれを評価する環

JavaScriptには、「部分適用」や「カリー化」といった考え方が存在します。 ココらへんは定義がわかりづらかったり、筆者自身も完璧に理解できているとは言いがたい部分もありますので、ざっくりと全体像でもお伝えできればと思います。 関数の適用、部分適用、カリー化の順番でお話していきます。 関数の適用とは そもそも、関数プログラミング言語においては、関数は「呼び出されるもの」というより、「適用されるもの」と捉えるほうが正確です。JavaScriptにはFunction.prototype.apply()メソッドがあります。 つまり、関数の呼び出しはapply()メソッドの糖衣構文（シンタックスシュガー）である、ということです。実際にapply()を使ってみます。 一つ目の引数には、関数の内部でthisに束縛されるオブジェクト、 二つ目の引数には、引数の配列で、関数の内部で使用したい値の配列を

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

;(function(){ var $ul = document.querySelector('#list'); // ul要素 var songs = ['終わらない歌', 'キスしてほしい', '僕の右手', '情熱の薔薇', '人にやさしく']; // もっと沢山要素がある想定でお願いします〜 // 低速バージョン // 毎回DOMツリーへの更新が発生 for(var cnt=0, len=songs.length; cnt<len; cnt++){ var $li = document.createElement('li'); var song = document.createTextNode(songs[cnt]); $li.appendChild(song); $ul.appendChild($li); // 配列の要素数分、毎回追加 } /* 高速化！ fragment 訳

前回の記事の続き。前回は、正規表現が使えない時はパーサコンビネータを使ってみると良いということを書いた。 パーサコンビネータのためのライブラリは、以下のように各言語ごとにいくつかある。 JavaScript - Parsimmon Ruby - rparsec treetop Python - parsy PHP - PHPPEG 各言語でいくつかあるのだが、正規表現と違ってパーサコンビネータには統一的な書き方があるわけではないし、ライブラリによって使い方も様々である。なので、今まで正規表現だけ使ってきた開発者がちょっと使ってみようと思っても、使い方がよくわからずに面食らってしまうことがある。 パーサコンビネータはテキストをパースするための非常に強力な仕組みだが、その背後にある考え方を理解しなければこれらのパーサコンビネータのライブラリを使う際の障害になるだろう。逆に言うと、それさえ理解で

「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？　Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('

var a, b; a = 0; b = a; b = 5; console.log(b); // 5 console.log(a); // 0 (aは変わらない) var c, d; c = [0,1,2]; d = c; d[0] = 5; console.log(d) // [5,1,2] console.log(c) // [5,1,2] (cも変わる) 値渡しと参照渡しについて理解されている方ならなんの問題もないですが、これは上のコードを見て ***？？？？？？***となった方向けの記事です。 結論から言うと、Javascriptにおいて プリミティブ型は値渡し、オブジェクト型は参照渡しとなります。 ざっくり言うと、値渡しはその値そのものの情報を別の変数に渡していて、参照渡しはメモリ上のどこを参照しているかの情報を別の変数に渡しているか、という違いですね。 ちなみに、Javasc

JavaScriptのパフォーマンスに関する講演やブログ記事では、よく単相的コードの重要性が強調されています。しかしながら、モノモーフィズム（単相性）／ポリモーフィズム（多相性）とは何なのか、それがどうパフォーマンスに影響してくるのかということについては、あまり分かりやすく説明されていません。私自身の講演でも、＜＜ 1.良い型、2.悪い型 ＞＞的な二者択一のスタイルに要約してしまうことが少なくありません。パフォーマンスに関するアドバイスを求められることがありますが、そういう時に最もよくリクエストされるのは、 モノモーフィズムとは実際のところ何なのか 、ポリモーフィズムがなぜ生じ、それがなぜ悪いのか、ということを説明して欲しいというものです。 困ったことに、そもそも「ポリモーフィズム」という用語そのものが相当に多重定義されています。昔ながらのオブジェクト指向プログラミングにおいては、 ポリモ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

HTMLエスケープの注意点 昨日、このような記事がはてブに上がっていた。 innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ 要約するとreturn $('<div />').text(content).html()を使用したやり方だと「"」などをエスケープしないので.replaceで置き換えたものを使いましょうという話。 ただし、元記事のコードだと`(グレイヴアクセント)の置換処理が入っていなかったので下記のように書き換えるほうが良さそうだ。 var str = '& < > ` " ' + "'"; var escapeHtml = (function (String) { var escapeMap = { '&': '&amp;', "'": '&#x27;', '`': '&#x60;',

JavaScript のテスト 書かないと怒られるし、書きたいとは思っているが、書くまでの敷居がやたらと高くなってしまった気がしている人へ。 最小のテスト 本質的にテストを書くのにフレームワークはいらない。 assertion だけあればいい。 isomorphic にしたいなら、 node の assert モジュールすら使わず console.assert だけで書ける。 // assert function assert(actual, expected) { console.log('.'); console.assert(actual === expected, '\nact: ' + actual + '\nexp: ' + expected); } function TestSum() { assert(1+2, 3); } // exec TestSum(); あとは普通に