即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）
即時関数の構文 即時関数はスコープを汚染せずに新たなスコープを作成するための唯一の手段 即時関数が使われるケース まとめ JavaScriptには「即時関数」という構文があります。即時関数は関数を定義すると同時に実行するための構文で、この即時関数を使ってコードを書いたことのある方も多いのではないかと思います。 JavaScriptに慣れている方にとっては「何を今さら」といった書き出しかもしれませんが、私はこの即時関数を初めて知った時、その必要性がイマイチ見出せませんでした。それは、「関数を定義と同時に実行するのは分かるけど、別に普通に関数を定義して、その関数を呼び出せばいいじゃん」って思ったからです。 確かに、一度しか使われないような関数をいちいち名前付きで定義してそれを呼び出すというコードは冗長的かもしれません。そのような場合は即時関数を使った方がよりスマートなコードになるでしょう。です
複数の外部JSファイルを読み込む時の実行順序について｜もっこりJavaScript｜ANALOGIC（アナロジック）
検証概要 検証1：ネットワークからのレスポンス速度の違うJSファイルの実行タイミング 検証2：ファイルサイズの違うJSファイルの実行タイミング 検証3：外部JSファイル、インラインスクリプト、スクリプト以外のタグの混在時の実行順序 まとめ これまであまり意識してこなかったのですが、JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか？と、ふと疑問に思いました。 大きなプロジェクトであればあるほど、肥大化したJavaScriptコードを機能毎に別ファイルに切り出し、体系的にJavaScriptコードを管理した方がメンテナンスもし易くなると思いますが、そいうったケースでは複数の外部JSファイルをHTMLファイル内に読み込むことになると思います。 そのような場合、JSファイル間で依存
Jasmine使い方メモ - Qiita
describe('add 関数のテスト', function() { it('1 + 1 は 2', function() { expect(add(1, 1)).toBe(2); }); it('1 + 4 は 5', function() { expect(add(1, 4)).toBe(5); }); it('10 + 2 は 12', function() { expect(add(10, 2)).toBe(5); // わざと失敗させている }); }); <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="jasmine.js"></script> <script src="jasmine-html.js"></script> <script src="boot.js"></script> <
1年間真剣にJavaScriptに取り組んだ話 - Qiita
まえがき JavaScriptアドベントカレンダーの最終日をやらせて頂いて光栄です。 http://qiita.com/advent-calendar/2015/javascript ※元々は2の最終日を担当するつもりでしたが、本家が空いておりましたので失礼させていただいております。 2015年、自分の中で一番何に夢中だったかといいますと、モンハンかJavaScript(Node.js)だったなぁと思います。 そんなで今回は1年間どんな感じにJavaScriptとじゃれてきたのかをモクモクと書いてみようと思います。 たまにJavaScriptではなくて、PHPの話とかもするかもしれませんが、あしからず。 1年前のJavaScriptのスキル JavaScriptを使ったWEBアプリ(SPA)を一様書くことはできる。 Backbone.js/Marionette.jsを使ったサービスをすごい
window.onloadとjQueryの$(document).ready等の比較
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
BigNumber.jsの使い方メモ | プログラマのめもぶろぐ
足し算 new BigNumber(0.1).plus(0.2); // 0.1 + 0.2 = 0.3 引き算 new BigNumber(0.3).minus(0.2); // 0.3 - 0.2 = 0.1 掛け算 new BigNumber(2).times(0.2); // 2 * 0.2 = 0.4 割り算 new BigNumber(2).div(0.2); // 2 / 0.2 = 10 カッコ付の計算 new BigNumber(0.1) // 0.1 * (2 + 3) = 0.5 .times(new BigNumber(2).plus(3)); フォーマット形式で返す場合 new BigNumber(10000).toFormat(); // 10,000 小数点第1を四捨五入 new BigNumber(1.543).round(); // 2 小数点第2を四捨五
優れたWebフロントエンド開発者になるには
この記事では、二人のエンジニアが書いたWeb開発者のためのアドバイスを紹介する。一人はおすすめの有用なツールとテクニックについて、もう一人はブラウザ向けに書くときに遭遇する課題への対処についてアドバイスしている。 今年のはじめ、BazaarvoiceのソフトウェアエンジニアであるRebecca Murphey氏は「A Baseline for Front-End [JS] Developers: 2015」というブログ記事を書き、クライアントサイドWeb開発に使えるツールとアプローチをJavaScript開発者にアドバイスした。記事を要約すると、彼女はこう言っている。 ECMAScript 2015を学ぶ。 Understanding ES6、ES6 Rocks、BabelJSがおすすめだ。私たちはこのリストにAxel Rauschmayer氏の新しい本、Exploring ES6を加える
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
ES6時代のJavaScript - クックパッド開発者ブログ
こんにちは会員事業部の丸山@h13i32maruです。 最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。 現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。 そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。 今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ
RequireJSを使うのを止めた理由 | それなりブログ
RequireJS はみんな使ってるらしーし、 何かかっこいいし、意識高そうだし、使っとくか！ ・・・と、思って試しに使い始めてみたのですが、 自分が作るような小規模なものの場合、 大変な割に良い事あんまりないので使うのを止めました。 以下、忘れそうなのでその理由をメモって置きます。 基本的に、1枚のJSファイルが1モジュール、ファイル名がコードに影響する。それもあって、結合・圧縮は r.js という専用のツールが必要になる。Grunt の concat とか uglify とか使えない。 AMD の仕様では、「JSファイルのリストを順番通りに読み込み/実行する」ということができない。実際何が困ったかというと、分割した mocha テストケースを順番通りに実行できなくなったということ。結果は変わらなくても、順番通りに実行されないと結果が見辛いし、問題が起こった時に発見が難しい。ただしこれは
Canvasで描画した画像を送信してサーバに保存する - Qiita
タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。（未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
JavaScriptデバッグ用オブジェクト「console」による落とし穴
最近のブラウザはほぼすべてデバッグ用の検証機能が付いていて、インクルードされた外部ファイルや適応されたスタイルなどを見れるうえに、JavaScriptやjQueryなどで動的に変更されたHTMLまでもリアルタイムに見ながら動作確認が行えるのでサイト制作がかなり楽になって来ています。 特にJavaScriptでは、consoleオブジェクトが追加されたことで、今までalert()メソッドで処理をいちいち止めながら動作確認していたところを、デバッグ用の出力をすべて裏のブラウザコンソール側に集約させてフロントエンドの処理を止めずに検証できるようになったのはすごく便利です。 このconsoleオブジェクトですが、今までJavaScriptの開発でalert()メソッドを使って来た人には共感してもらえると思うのですが、かなり使い勝手が良いです。すべて裏側で処理されて出力が表に出ないし、プログラムの流
IE9でconsole.log()を使う時に注意すること - masafumi_hayashi's blog
consoleはIE9では基本的には使えません。 ただし、F12開発者ツールを起動した状態だと使えるようになります。 ちなみに公式サイトには次のように書いてあります。 Using the F12 Tools Console to View Errors and Status http://msdn.microsoft.com/en-us/library/ie/gg589530(v=vs.85).aspx#SendMessagesFromCode When you use the console object, make sure that the F12 tools are open. (コンソールオブジェクトを使用する場合は、F12開発者ツールが開いていることを確認して下さい。) なお、デバッグ中に発生しないエラーが閲覧時に発生する可能性があるので、回避用のコードはどうやら必須のようです
backbone.stickit を使って Backbone でデータバインディング - present
最近また AngularJS が盛り上がってる気がする。 AngularJS のデータバインディングは魅力的だけど、自分は Backbone 派。 でも Backbone でもデータバインディング使いたい。 そこで New York Times 製の Backbone プラグイン backbone.stickit を試してみた。 基本的な使い方 ビューでバインディングを宣言。 CSS セレクタとモデルの属性名をマッピングする。 var TaskView = Backbone.View.extend({ template: _.template($("#task_template").html()), // バインディングの宣言 bindings: { ".js-task-name": "name" }, render: function() { this.$el.html(this.tem
Backboneでデータバインディング(stickit) - lxyuma BLOG
最近、angularが熱くて、twitter見てると、angular周りが活発に流れて来るのだが、 angularのウリにしてるデータバインディング、Backboneでも同じ様な事がpluginで出来る。 Backbone自体は、非常にミニマルに出来ているので、(おそらく今後も本体にこういう機能入らなそう...) こういう機能は自分で追加しないといけないのだが、pluginさえ入れれば動く。 幾つか類似pluginあるようだが、ここでは、stickitの事を書く。 stickitについて https://github.com/NYTimes/backbone.stickit NYTimes社のもの。 使い方 使い方は非常にsimpleでViewの中に セレクタと属性の紐付けを書く 対象となる要素がある状態で、stickit()と書く これだけ。 公式ページのsampleを実際にやってみる。
JavaScriptの変数宣言は難しすぎる！ - Qiita
…またややこしいタイトルにしてしまった。 予め伝えておきますが、この記事は「JavaScript訳わかんねえんだよ何がvarだスクリプト言語ならもっと気軽に変数を使わせろスコープややこしいわファッキュー」みたいなものではありません。 JS（色んな意味で）を愛する人が書いています。 いやー、にしても、JavaScriptの変数の宣言って難しいですよねー。何がって？ インデントが、ですよ奥さん。 var というキーワードを先頭に置かなきゃならないという厄介な規則のせいで、綺麗なインデントにするのに四苦八苦するわけですよ。var による明示的な変数の宣言によって、JavaScriptのクロージャが真価を発揮するわけですが、それにしても邪魔くさい…。 まあ普通はコーディングスタイルをきちんと決めるべきなんですけど、個人でちゃちゃっと小さいプログラムを組むときにこの変数宣言のインデントで結構悩んだり
理想のJavaScript入門書 - L'eclat des jours(2011-12-08)
_ 理想のJavaScript入門書 アスキーの鈴木さんから、テスト駆動JavaScriptをいただいた。 これは、実に良い。おれが考える理想のJavaScript入門書に限りなく近い（というか、おれが書くより良いから上方向から近い）。 まず、これはTDDの本であり、JavaScriptの問題点は、それがRubyなどのスクリプト言語より、固いプログラミング言語（JavaとかCとか）に近い構文を持っているのが原因だと思うけど、どうしても変数とか関数名とか長く書きたくなるし（これは不思議な心理的な要求による）、言語が持つ予約語自体が長いし（functionだよ）、つまりいやでもタイプミスして死ぬ。 どうすれば良いかといえば、解決方法は2つしかない。プリプロセッサを用意して未定義変数とか利用していないかチェックするか、あるいはテストするかだ。前者よりも後者のほうがまあ有意義だ。というわけで、TD
[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita
[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定についてJavaScripttips ※本家はこちらのブログエントリーになります. 毎日 html, css, js についてのエントリーを公開しているのでよかったらRSS登録してください♪ null とか undefined とか 0 とか 空文字('') とか false とかの 判定について書いてみました. 各型, 値の評価 各型, 値が条件式でどう評価されるのかを見てみましょう. value type result
![[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f5f11981bf9fc0dbfbeed3aa05c7924c0217fea/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMG51bGwlMjAlRTMlODElQTglRTMlODElOEIlMjB1bmRlZmluZWQlMjAlRTMlODElQTglRTMlODElOEIlMjAwJTIwJUUzJTgxJUE4JUUzJTgxJThCJTIwJUU3JUE5JUJBJUU2JTk2JTg3JUU1JUFEJTk3JTI4JTI3JTI3JTI5JTIwJUUzJTgxJUE4JUUzJTgxJThCJTIwZmFsc2UlMjAlRTMlODElQTglRTMlODElOEIlRTMlODElQUUlRTUlODglQTQlRTUlQUUlOUElRTMlODElQUIlRTMlODElQTQlRTMlODElODQlRTMlODElQTYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTJhZDBkYzI0NmFkNDZjZjk2MjAzMzcyMTAwNDUwMTBk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTViZWQxYTFhYjlkZGQxZTYyY2NhZTY4N2QwNjIzZTFj%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De5701613031700fed90c8e997168d90f)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使ったら便利だったconsole.countとconsole.dir - Qiita
