Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
Javascript Puzzlers or: do you really know JavaScript?
(or: how insane do you think JavaScript actually is?) Hi Internet! This page wasn't ready yet, but a bunch of people are coming in, so sorry you caught us in underwear. You can follow @JSPuzzlers to know when this is ready, write me or tip some DogeCoins ^_^. This is a JavaScript quiz based on the behaviour as of ECMA 262 (5.1) in a browser environment. Behaviour may be different if you try it in
[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記
クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか？ あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか？ ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。 理解できないですよね？ 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが
![[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f7de7c0278993661a11fbc3637f96292ba773aa/height=288;version=1;width=512/http%3A%2F%2Fdqn.sakusakutto.jp%2Fimages%2Fkali.jpg)
くそが async 使え - <body>
Javascript で非同期処理を連結するときは、必ず async か、それに準ずるライブラリや関数を使え。 async とは、 callback を引数に取る関数を、順番に呼んだり、並列に呼ぶ機能をサポートする npm モジュールである。 async を使うことで、非同期処理を直感的に扱うことが出来る。 次のコードは、 async を使って、 taskA, taskB, taskC を順番に呼び出すサンプルである。 // with async var async = require("async"); var taskA = function(callback){ console.log("taskA"); callback(); }; var taskB = function(callback){ console.log("taskB"); callback(); }; var ta
JavaScriptで数値をカンマ区切りでフォーマットする方法
JavaScriptで数値をカンマ区切りする方法としては、 こちらの正規表現を使った方法がメジャーなようですが、以下のように var re = /(\d)(?=(\d\d\d)+(?!\d))/g; String(1234).replace(re, '$1,'); // 1,234 OK String(1234.56).replace(re, '$1,'); // 1,234.56 OK String(1234.5678).replace(re, '$1,'); // 1,234.5,678 NG 小数点以下が３桁を超えると破綻してしまいます。 どのような解決策があるでしょうか。
JavaScript で配列から重複なくランダムに複数の要素を取り出す方法
JavaScript の配列からランダムで要素を取り出して扱いたいということがあるのですが、安易にやろうとしたら重複した値がでてきたり、 splice でその要素を除いたりしてやっていたのですが、どうも動作安定していない感じだったので、自分の中で再度見直しとしてのメモエントリー。
JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。 お題 突然ですが、次のような処理を行う必要があるとします。 「0」を出力する 1秒待つ 「1」を出力する 1秒待つ 「2」を出力する これをプログラムで書くとどうなるでしょうか？ シェルスクリプトの場合（同期） たとえばシェルスクリプトで素直に書くと、次のようになります。
【駆逐してやる】jQuery.Defferdについて自分なりに咀嚼してみた【コールバック地獄を】 - undefined
javascriptってコールバック地獄は避けられないの？という話があったので名前だけ知っていたjQuery.Defferdについて調べてみました。 コールバック地獄？ 1秒後に"hoge"その更に2秒後に"fuga"を出力する場合CoffeeScriptではこんな風になったりします。 setTimeout ()-> console.log "hoge" setTimeout ()-> console.log "fuga" , 2000 , 1000 上のコードは簡単な例なのでいいですが、さらに非同期にデータを通信したり、何秒後にこれして、その数秒後にあれしてってなるとどんどん複雑になり、「コールバック地獄」におちいります。 その解決の1つjQuery.Defferdについて調べてみたので記載しておきます。 jQuery.Defferd？ jQuery1.5以降にに備わっている機能のひとつ
実験室: jQuery.triggerを使ってEventDispatcher(AS3)のような事をしてみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） AS3にある多くのクラスの中でもお世話になる事が多いのが、EventDispatcher。 カスタムイベントを登録して送出したり出来るので大変便利。 本稿は、JavaScriptでも似た事が出来ないかなぁと試行錯誤してみたログです。 AS3のEventDispatcher まず、AS3のEventDispatcherはどのような代物なのか。 EventDispatcher – ActionScript 3.0 コンポーネントリファレンスガイド public class Example extends EventDispatcher { public static const EVENT_CHANGE:String = "change"; private var value:String = "Hello, World!"; /*
シンプルな EventDispatcher つくりました - みかづきブログ その3
シンプルなEventDispatcherを自作してみました。 仕様としては、 イベント名を渡すとイベントがあるかどうかわかる イベント名とコールバック関数を渡すとイベントを登録できる イベント名とコールバック関数を渡すとイベントを削除できる イベント名（と引数）を渡すとイベントを実行できる の4点を実現しております。 ソースコード function EventDispatcher() { this._events = {}; } /** * イベントが登録されているか調べます * @param {string} eventName // イベント名 */ EventDispatcher.prototype.hasEventListener = function(eventName) { return !!this._events[eventName]; }; /** * イベントを登録しま
redirect to javascript-style-guide
■□■リダイレクトしています。■□■ しばらくしても移動しない場合はこちらをクリックしてください。
I am mitsuruog | Airbnb JavaScript スタイルガイドを翻訳しました
知っている人は知っている「Airbnb」の JavaScript スタイルガイドを翻訳しました。 急に上司から「Javascript のスタイルガイドないの？」って言われて困ったら思い出してください。 このエントリでお伝えしたいこと。 ネタがなくて困ってたら使ってください。 困ってなくても、イイなと思ったら使ってください。 良かったら Airbnb も使ってください。 Airbnb とは Airbnb とはアメリカのサンフランシスコにある、個性的な宿を扱うスタートアップ企業です。詳細は下の記事を読んでください。 旅行のソーシャル化は「現実世界の Facebook」、AirBnB CEO に聞いた。 Airbnb（JP） 去年の秋くらいに、サイバーエージェントさん主催の Frontrend で名前を聞いた（ような気がする・・・）辺りからチェックしていました。 このたび勉強のついでに翻訳してみ
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life
みなさんは、フルスクラッチでテトリスを作ることができますか？ プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの４５分でテトリスが完成！ それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
JavaScriptのカスタムイベント - console.lealog();
JavaScriptでよくある、 そんなユーザーインプットが行われたわけではないが、それをエミュレートしたい時 各クラス間を疎結合に保ったまま、データのやりとりに独自のイベントを使いたい時 そんな時などに使われるだろうアレです。 MDNくらいしか検索しても情報出てこないので、個人的にまとめ。 参考：Creating and triggering events - Web developer guide | MDN キホンのやつ // いつもどおりなんやかんや書いて elm.addEventListener('touchstart', function() { alert('touch!'); }, false); // イベント作って var ev = new Event('touchstart'); // 発火！ elm.dispatchEvent(ev); とまあこんな簡単にできちゃう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜 // Speaker Deck
_level0 | Kayac Interactive Designer's Blog
http://callbackhell.dec31.net/
GitHub - fnobi/EventTrigger: node.js style EventEmitter for client side.
