そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する

Webフロントエンド・パフォーマンス 思考整理系。 Webフロントエンドにおける3要素として、過去のセッションでは下記の3つを中心に紹介していました。 通信コスト - Networking 描画コスト - Rendering 計算コスト - Computing これらの問題は複雑に絡み合い、時として相反する関係をとります。例えば、通信コストを減らすために、視覚表現を画像からCSS3に置き換えたら、描画コストが高くなってしまいスクロールが重くなった、なんてケースは頻繁にあるでしょう。 理解の問題 この3つのコストは確かにパフォーマンスに影響を与える要因であります。しかし、その要因がWebフロントエンドのページライフサイクルにおいて、どこで影響を与えているかは表してくれません。 要因がどのような影響を及ぼしうるかという基礎的な理解と、パフォーマンスの問題に取り組むための切り口としての理解は、そ
はじめに 前回に引き続き、今回はD3.jsで円グラフを表示する上でポイントとなる点を取り上げ また公式サイトのサンプルソースを解析してみたいと思います。 ポイントについて D3.jsで円グラフを描くには ・データ一つ一つを表すパイ(扇)を設定する ・各パイに円弧を指定して円グラフとする という手順となります。 それらパイ(扇)、円弧を描くのが、D3.jsの以下の関数となります。 ・d3.layout.pie パイを作成します。 ・d3.svg.arc arc(円弧)を作成します。 詳細については、公式サイトのAPI Referenceを参考にしてください。 API Reference · mbostock/d3 Wiki · GitHub サンプルソース 上記のポイントを踏まえ、公式サイトに乗せられている Pie Chart を解析し、コメントを追加しました。 <!DOCTYPE html
本稿では,switch(true) イディオムの是非について論じて行きたいと思います.なお,話をややこしくしないために,本稿では JavaScript における switch(true) イディオムのみについて考察します.(当然ですが,言語によって switch のシンタックスおよびセマンティクスは大きく異なります.例えば ruby の case はいわゆる C-like な switch とは全く異なり,フォールスルーがない点や === 演算子による柔軟性がある点などにおいて同列に語れるものではありません.) 賛否両論の switch(true) switch(true) イディオムに関しては,様々な意見があります.記事の末尾に,各所から集めて来た意見をまとめておきますので参考にしてください.ここで私が述べたいことは,このイディオムに対しては とにかく賛否両論ある ということです. いっ
If you ever had to port localStorage based code to IndexedDB you have been confronted to Javascript's biggest flaw; its asynchronous system is leaky. Once you have an asynchronous method, every other method that calls it must be asynchronous as well. You cannot excape asynchronous code, once it's there it will contaminate the rest of your system slowly turning everything into callbacks. There is n
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。Ameba事業本部の杉本と申します。 業務では「天下統一クロニクル」というチームでフロントエンドのディベロッパをしています。 今回は、「node-webkit」という一風変わったアプリケーションを紹介させていただきます。 私達は普段、gruntといったnode.js製のツールを使ってJavaScriptの結合や圧縮、画像の減色といった処理を自動化していますが、node-webkitはこれらnodeのモジュールを使ってGUIアプリケーションを作れるツールです。nodeの資産をそのまま利用できるので、私のようなディベロッパには嬉しいですね。
Functional JavaScript(関数型言語としてのJavaScript) JavaScriptでは関数型言語の一部の機能が備わっています。 ここでは小難しい話は抜きにして、より可読性やメンテナンス性などをよくするために、 実践的なJavaScriptの関数型について考えていきます。 関数型の特徴 JSでの実装のみを知りたい場合は、 この項を飛ばして、気をつけるべきは三点へどうぞ。 関数型言語では関数でプログラムを組みます。 特徴としては 変数は再代入禁止である 関数は参照透過性が保たれている(副作用がない) があります。 しかし、前者の「変数の再代入禁止」は縛りとして強すぎるので、 JSでの実装においてはそこまで重視しません。 ただ再代入が少ない程、可読性はあがりやすいです。 後者の「参照透過性」とは、 「引数が同じであれば何回その関数を実行しても結果が変わらない」ことをいいま
はじめに スタイルガイド自体は各々のルールでかなりの数が存在しますが、 下記のおすすめ4選を押さえておけば問題ないと思います。 おすすめ4選 Google JavaScript Style Guide Googleによる、最も代表的なスタイルガイドです。 時間のない方は、これだけにでも目を通しておく事をおすすめします。 JavaScriptのBad Partsについても述べられています。 英語:https://google.github.io/styleguide/javascriptguide.xml 日本語:http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html Closure Linterを使用することで、チームでの統一がしやすくなります。 グーグル製JavaScript文法チェッカー jQuery JavaScript Styl
はじめに この記事では、関数型プログラミングを強力に後押しするライブラリ、 Underscore.jsとlodashを紹介します。 両ライブラリとも_で使用できます。 ほかのライブラリにも依存せず、 現在フロントでもサーバでもかなり人気なライブラリです。 個人的にもこれなしでは。。 といった必須なライブラリとなっています。 また、Backbone.jsといった人気なフレームワークが、 Underscoreに依存していたりします。 Underscore.js GitHub: https://github.com/jashkenas/underscore Document: http://underscorejs.org/ 和訳: https://github.com/enja-oss/Underscore lodash GitHub: https://github.com/lodash/lo
僕はBoo派なので関係ないけど、 UnityのなんちゃってJavaScriptのUnityScriptからNGUIを使う方法がある。 参考にしたフォーラム:Using NGUI from JavaScript (UnityScript) ・まずは、↓のような構成を見ておく Interaction、Internal、Tweening、UIってフォルダが、「NGUI/Scripts」配下にあるはず。 ・次に、「Plugins/NGUI」ってフォルダを自分で作る。 そして、Interaction、Internal、Tweening、UIっていうフォルダを全部そっちに持っていく。 Pluginsというのは特殊なフォルダなので、UnityScriptからでも読まれるよ。 今回は、「Label(Score)」っていう名前のUILabelにしている。 ↓Inspectorはこうなってるよ。 そこに値を突
fladdict.netのトップをリニューアル。JavaScriptの実験場にしてみた。久しぶりにゴリゴリJS書くと、かなり楽しい。 古き良きゼロ年代のFlash実験サイトはほぼ絶滅してしまったわけだけど、それを現代のJSとHTMLでやり直してみたらどうなるか?そんな感じのスタディ。使用ライブラリはpaper.jsとprocessing.js。時間があるときにcreate.jsも導入してみたいけど、ざっと見た感じcreate.jsは冗長すぎてスケッチには向かないと思う。スマホだと重すぎてだと動かないので、時間あるときに分岐するようにしたい。 最近はインターネットも成熟化したのか、グラフィック、インタラクション、プログラミングを三位一体でする人が減ってる気がする。分業化が進んでいるのだろう。インタラクション系がわかるエンジニアは需要があるわりに、新しい人が学ぶ機会が昔にくらべれば激減している
The Art of UNIX Programming 作者: Eric S.Raymond,長尾高弘出版社/メーカー: アスキー発売日: 2007/06/19メディア: 大型本購入: 4人 クリック: 91回この商品を含むブログ (62件) を見る TL;DR Unix Philosophyにおいては、「一つのことをうまくやり、協調する仕組みを持つ」という事が大事 Node.jsのモジュールにおいても同じで、「一つのことをうまくやる、Stream APIで協調する」と良い 「一つのことをうまくやる」にはどうするのが良いのか、ということで substack のモジュール実装例 Simple と Easyの違い ちょっと今回長くて文字が多いので、最初と最後にまとめを用意しました。時間がない方はこれを読むだけでもいいかと。 Unix Philosophy さてさて、Unix Philosoph
今回はJavaScriptで書くファサード(Façade)パターンについて調べてみました。 ファサードはフランス語で「建築物の正面のデザイン」という意味だそうです。 なぜ使うの? ファサードパターン自体はとてもシンプルで、いくつかの機能の「窓口」になるクラスやオブジェクトを作り、利用しやすくするパターンです。 jQueryで一番よく使うであろう $() 関数もファサードパターンの一つです。 例えば要素の見た目を変える機能を実装するとして、個別の要素を制御するオブジェクトと、窓口になるオブジェクトを用意すると以下のようなコードが考えられます。 // 色を制御するオブジェクト function colorObj() { return { changeColor: function() { console.log('色を変えます'); } } }; // フォントを制御するオブジェクト func
はじめに D3.jsについて調べ始めた、t-hondaです。 前回はいきなりD3.jsとRuby on Railsを組み合わせてグラフを表示してみましたが 今回はD3.jsの入門編として、特徴と、簡単なソースの書き方について サンプルを挙げて書いていきたいと思います。 D3.jsの特徴 以下の弊社のブログ(※1)でも取り上げられていますが、D3.jsは 「データ・ドリブン・ドキュメント」 の略であり 「データに基づいてドキュメントを操作するための JavaScript ライブラリ」 であると定義されています。 D3.js - 日本語ドキュメントより(太字は著者追記) この「データ・ドリブン」であり、「データに基づいてドキュメントを操作する」という特徴について 以下のサンプルで解説していきたいと思います。 ※1 弊社ブログ [HTML5] D3を利用してデータを可視化してビジネスに活かす D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く