backbone.jsのサンプルコードを読んでいると、bindという名前のメソッドがよく使われてます。 そして、bindという名前のメソッドはbackbone.jsにも、underscore.jsにも、jQueryにも定義されています。 慣れている人は問題ないのでしょうが、私は読んでいて混乱したので、それぞれの定義と、サンプルで使い方をまとめておきたいと思います。 backbone.jsのbindメソッド object.bind(event, callback, [context]) レシーバオブジェクトの'change'や'destroy'などのイベントに、コールバックを紐付けます。 第３引数にcontextを渡すことによって、callback実行時の「this」を設定できます。 jQueryのbindメソッド .bind( eventType [, eventData] , handl

$(document).ready(function(){ $("div.box").each(function(i, box){ var button = box.children("button.push"); var paragraph = box.children("p.text"); button.click(setButtonClickCallback(button,paragraph)); }); }); function setButtonClickCallback(button, paragraph){ return function(){ if (button.text() == "Show text") { button.text("Hide text"); } else { button.text("Show text"); } paragraph.toggle()

Originally published on techtrails.io Server-side rendering of React components to improve SEO and minimize your web app initial loading time. Update 16 Jan. 2016 It’s been more than a year since this tutorial has been published, so I have updated to reflect the latest evolutions of the different libraries that are used here. The complete code for this tutorial is available here. Background & goal

Originally published on techtrails.io Using Node.js, I’ve grown accustomed to using CommonJS modules and I like them as a solution to dependency management and scope isolation in Javascript. Using Rails, what you natively get is Sprockets, which I feel doesn’t provide the same robustness and flexibility CommonJS does. So how could I continue using modules within Rails? Browserify is a tool that le

Result jQuery $("ul li:empty").remove(); css ul{margin:25px;} li{/*通常なら要素が空でも背景だけ表示されるスタイル*/ display:block; margin-bottom:10px; padding:10px; background:#eee; width:300px; height: 35px; } html <ul> <li><a>one</a></li> <li><a>two</a></li> <li></li> <li><a>three</a></li> <li><a>four</a></li> <li></li> <li><a>five</a></li> </ul> Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/t

jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素（jQueryオブジェクト）が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括ってますが、必要に応じて「$(function(){ ... });」などで括ってください。間違った情報・表現等がありましたら適宜修正しますのでご指摘ください。 １．$(selector)[0] 「$(selector)」で生成されるjQueryオブジェクトは配列のように扱える（配列の基本メソッドが使える訳ではない）ので、0番目の要素をチェックすることで存在チェックを行えます。 <script> i

If you have worked with JavaScript, you are surely familiar with a long litany of complaints about the language. Some developers are frustrated by its very loose, dynamic nature, while others point to odd behaviors such as hoisting and conversion-on-equality as big problems. (More here.) I don't want to belabor the problem itself; plenty has been written about that already. Instead, let's consider

jQueryにおける:first-childと:firstの違い jQueryには「:first-child」というセレクタと「:first」というセレクタが存在しており、混同されがちですが異なる意味を持っております。 例えば、次のようなHTMLがあるとします。 <ul> <li>list1-1</li> <li>list1-2</li> <li>list1-3</li> <li>list1-4</li> </ul> <ul> <li>list2-1</li> <li>list2-2</li> <li>list2-3</li> <li>list2-4</li> </ul> :first-childで指定できるのは「<li>list1-1</li>」と「<li>list2-1</li>」です。 $("li:first-child").css("color","red"); サンプル 一方:f

I recently wrote about real-world results with React JS. Here is a concrete example of adding React to a Rails app, start to finish. React JS is a library from Facebook that powers user interfaces. It is simpler, faster, and less opinionated than many JavaScript MVC frameworks, making it easier to bring into an existing app. Start by reviewing our recommended React resources, then check out an exa

ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して

最近、JS界隈ではReactが大いに盛り上がっていますが、私のような一介の風俗解説本の著者からみると、何の話だろうといった感じです。 そこで、一度自分の中のJavaScriptライブラリの流れを整理してみようかなと思ってメモしたので公開してみます。 Ajax登場 2004年くらいまでは、 JSは危険だからブラウザでオフにしよう JSなしでも見られるページ作りをしよう という考え方が、Webに詳しい人達のわりと一般的なコンセンサスだったが、Ajax（主にGmailとGoogle Maps）の登場により世界は一変。Webの世界は、はっきり言ってJSなしでは生きられなくなった。 ちなみに、それまでのJSといえば、右クリックを禁止したり、ポップアップウィンドウを開いたりする、ただただウザい存在でしかなかったので、上記の考え方は別に尖っているわけではなかった。 素のJS書くのつらい → 最初の有名ラ

Crush & Lovely consults business leaders on how technology can reduce their overhead, increase their revenue, and improve their relationship with their customers. We use our 16 years of experience designing and building technology solutions to create the products that move the needle for companies. We focus on business challenges, not feature setsOur process leads to top-class software because we

対象読者 JavaScriptフレームワーク・ライブラリの選定に悩んでいる方 本格的にJavaScriptを触るのが初めてという方 jQueryでの大規模なフロントエンド開発に限界を感じている方 必要な環境 Node.jsがインストールされていることが推奨です。 React.jsとは何か React.jsは最近注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 前提として、JavaScriptの世界でMVCのVといえば、紛れもなくDOM（Document Object Model）のことを指します。特に何も意識しないで作った場合、都合の良いDOMからデータを引っ張り出しては別のDOMを書き換えるといった、行き当たりばったりな作りになりがちです。そこで、MVCの考え方を導入することにより、データを画面とは独立した構造体として切り出し