Node.jsで、Promise.denodeifyを使ってサクサクプログラミング - Qiita
fs.readFile(fileName, function(err, data) { if (err) { // onError }else{ // onSuccess } }) のような形式なので、逐次的に処理を行うとその分だけネストの階層が増えてしまいます。これを解消するために使われるのがPromiseです。上記に対応するコードは以下のようになります。 new Promise(function(onFulfilled, onRejected){ fs.readFile(fileName, function(err, data) { if (err) { onRejected(err); }else{ onFulfilled(data); } }) }) .then(function(data){ // onSuccess }, function(err){ // onError })
TypeScript で実現する MVP アーキテクチャパターン - Hatena Developer Blog
こんにちは、アプリケーションエンジニアの id:nanto_vi です。先日行われた Hatena Engineer Seminar #4 で、「TypeScript で実現する MVP アーキテクチャパターン」と題する発表を行いました。当日は皆様ご清聴いただき、また懇親会でも活発な質疑をいただきありがとうございました。 内容としては、TypeScript を用いたクライアントサイド Web プログラミングの話、及び既存の JavaScript フレームワークを採用せず、MVP (Model-View-Presenter) アーキテクチャパターンにのっとり開発を進めた事例の紹介となります。以下に発表資料を加筆修正して公開するのでご参照ください。 自己紹介 id:nanto_vi (外山真) アプリケーションエンジニア JavaScript、Perl アジェンダ 少年ジャンプルーキーでの T
小さく始める JavaScript のテスト - Qiita
書かないと怒られるし、書きたいとは思っているが、書くまでの敷居がやたらと高くなってしまった気がしている人へ。 最小のテスト 本質的にテストを書くのにフレームワークはいらない。 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(); あとは普通にこのスクリプトを node/io
JSファイル全体を括るfunctionについての話。（JavaScriptおれおれAdvent Calendar 2014 – 01日目） | Ginpen.com
これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります
初めてのJavaScript、初めてのAWS Lambda | DevelopersIO
はじめに 佐々木です。開発経験も無くJavaScriptを触ったこともない僕ですが、どうしてもAWS lambdaを触ってみたかったので、四苦八苦しながらやってみました。 すでにバリバリ活用しているブログ記事がたくさん出ていますが、本記事は本当に何もわからない僕がよちよち歩きしている内容ですので、深いところは期待しないでください。そして識者のツッコミをお待ちしております。 AWS lambdaの基本的な使い方は以下の記事をご参照ください。 AWS Lambdaを始めてみる(1).ユーザーアプリケーションからのイベントを扱う AWS Lambdaを始めてみる(2).Amazon S3イベントを扱う やってみる MBAにnode.jsをインストールする とりあえず簡単な構文チェックだけでも手元でやりたいので、MBAにbrewを使ってnode.jsをインストールします。 $ brew insta
【javascript】やさしいクラスの作り方 - Qiita
勉強がてら。「TypeScript使えばいいじゃん」「ES6」とか言わないで。 hogeクラスをつくるとき 1. 一般的なつくりかた // constructor var hoge = function(arg) { this.x = 5; this.y = 10; this.z = arg; }; // メソッド hoge.prototype = { f1: function() { return true; }, f2: function() { return false; } }; var instance = new hoge(1); // hoge {x: 5, y: 10, z: 1, f1: function, f2: function} var hoge = (function() { var FOOFOO = 777; // クラス内定数 // constructor v
AngularJS についての所感
AgularJS に対する気持ち 所感といいつつ、主に自分がつらさとして感じていることを書く。所感シリーズとしては jQueryについての所感 も併せて読みたい。 この学習曲線の中でいうと、たぶん今の自分は Very Cool! の頂点から降りている最中くらいだと思う。そして、マサカリをふりかぶった諸兄にひとつだけ言いたいのは、共感脳を養った方がモテるということだ。 チキンハート的弁解: 以下はAngularJSに関するつらさを述べることに専念するために、美点を挙げていないだけであってAngularJSを全方位的に貶めたり、何かと比べて明確にクソだというような意図はない。 画像は AngularJS: The Best Parts · Anand Mani Sankar からの引用。X軸にある www.bennadel.com は AngularJS 大好きさん。 辛1. $scope が
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１<…
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１</a> <a href="#" onClick="jump(2);">ページ２</a> function jump(page) { location.href = 'http://hoge' + page; } としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました $(function(){ $("#one").click(function(){ location.href = 'http://hoge' + 1; }); $("#two").click(function(){ location.href = 'http://hoge' +
JavaScriptはいかにしてprototypeを捨てクラスベース継承を得るのか - なんたらノート第三期ベータ
きっかけは、prototype と constructor と __proto__ の関係を再確認していたときでした。JavaScriptはこうだけど、これって、AltJSな言語の継承はどうなってるんだろうと思って試したくなりました。 ちょっと気持ち的に、なんだか宗教に入ったみたいに俺は JavaScript がわかったって声高に言う人、だいたいみんな、プロトタイプチェーンによる移譲がクラスベースの継承に束縛されていた思考のブレイクスルーなんだぜ、みたいに言うんだけど、いったいそれがどれほど素晴らしいものなんだろうと考えてしまい... もしプロトタイプチェーンがそんなに素晴らしいんなら、npm にあるほとんどのライブラリがチェーンを活かして作られてない理由が説明できない。もしかしたら、仕組みがいくら面白くても、実際のメンタルモデルにフィットせず、実は使い物にならないんじゃないか ----
setTimeout, setIntervalを乗っ取って爆速にする - 素人がプログラミングを勉強していたブログ
setTimeout() vs ハッカー、仁義なき戦いによると function isNativeFunction(func, name) { for (var o in func) { if (o === "toString") return false; } var match = func.toString().match(/^function (\S+)\(\)\s*{\s*\[native code\]\s*}$/); return (match && match[1] === name); } setInterval = function(){}; isNativeFunction(setInterval, 'setInterval'); // false でsetIntervalが偽装されているか調べられると書いてあるが、そんなことはない。 自分が普段使っているブラウザはSa
アロー関数が実装された - JS.next
概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける [3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )
for文でのlet変数が毎ループ新スコープを持つようになった - JS.next
概要 かつてはfor文初期化句で宣言された変数は、for文の直前で宣言されたように振舞っていたが、各ループでスコープを引きづらないように仕様が変更され、V8も追従した。 例 for (let i = 0; i < 5; i++) { ～～～ } これは今までは次のコードと等価だった。 { let i = 0 for (; i < 5; i++) { ～～～ } } つまりfor文中で関数を定義するとこうなっていた。 let funs = [] for (let i = 0; i < 5; i++) { funs.push(function () { return i }) } funs.map(function (fun) { return fun() }) // [5,5,5,5,5] この結果が[0,1,2,3,4]になるのが今回の変更である。 つまり一番最初のコードはこれと等価になる
TypeScript + AngularJSでTodoのサンプルを書いてみた - かずきのBlog@hatena
2014/05/25追記 こういう書き方も出来ると紹介してもらいました。 @okazuki $scopeのメソッドの型をFunctionにしたくない場合 URL こーゆー感じで書くとコピペで済む+型チェックの恩恵が受けられるのでよいと思います。 2014-05-25 02:06:40 via twicli to @okazuki ためしたところばっちり動いたので、次からはこう書こうと思いました。 はじめに JavaScriptでSPA作るのにはAngularJSがいいらしいということで、とりあえずシンプルな例として、勉強がてら以下のページのしょっぱなにあるTodoアプリをTypeScriptで書いてみました。 AngularJS 1.2 日本語リファレンス | js STUDIO プロジェクトの作成 TypeScriptHTMLApp1という名前（名前つけるのさぼった）でプロジェクトを作成
忙しい現代社会人のために習うより慣れる AngularJS のリンク集 - Qiita
忙しくない人は、公式のチュートリアルを頭から全部やると良いです。めんどくさくてそっちはやってないので分かりません。 とりあえずここを開いてジャッヴァスクリプトを眺める モジュールについて 基本中の基本。特に推奨セットアップのところを見ておけば良い。 DI(依存性注入)について こっちを読んだ方が幸せになれるかも。 どんなサンプルを読むにあたっても、DI の仕組みを知ってないと辛くなる。仕組み自体はよくできているが取っつきづらい。 特に 引数名で渡される実体が変わる 部分は慣れるまで気持ち悪い気がするし、ぼくは気持ち悪い。もっと言うと、minify した場合などで変数名が変わると動作しなくなるため基本的には変数名を指定して、実体を捕捉する必要がある。 var sampleApp = angular.module('sampleApp', []); /** たとえば、Controller で
JavaScriptの関数定義 - Nao Minami's Blog
こんばんは、south37です。 最近はEffective JavaScriptを読んでるのですが、知らなかった事がポロポロ出てくるので、とても勉強になっています。これからはちょいちょい、そーやって勉強した事をまとめていけたらいいなと思います。 って事で、今日は関数定義の話をしたいと思います。 関数宣言と関数式 JavaScriptにおける関数定義には、大きく分けて3つの方法があります。 function文を使う方法(関数宣言) function演算子を使う方法(関数式) Functionコンストラクタを使う方法 1と2が一般的によく使われる方法ですね。 // 方法1 function multi(x, y) { return x * y; } // 方法2 var multi = function(x, y) { return x * y; }; // これも方法2 var multi
JavaScriptでbind()を使って部分適用する - HackerNews翻訳してみた
「HackerNews翻訳してみた」が POSTD (ポスト・ディー) としてリニューアルしました！ この記事はここでも公開されています。 Original article: Partial Application in JavaScript using bind() by Pascal Hartig JavaScriptの中にはコードをもっとシンプルで見やすくできるパターンがあるのに、あまり使われていないものがあります。皆さんもFunction.prototype.bindはご存じでしょう。頻繁に使われていたvar that = thisやvar self = thisの代わりになる関数です。よくあるのが以下のような例です。 this.setup = function () { this.on('event', this.handleEvent.bind(this)); }; 第1引数が
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/falsandtru/items/13c2c2eb3852ffc7e859
GitHub - adobe-research/theseus: A pretty darn cool JavaScript debugger for Brackets
JavaScriptの落とし穴
