Web Platform Dive into the web platform, at your pace.

前回はReveling Module Patternについて書きました。JavaScriptでもprivateとpublicの領域を明快に分けられるという利点がありましたが、複数のインスタンスを作る際に、privateな関数もpublicな関数ももろもろが複製されるので、あまり効率が良くなさそうというのが懸念でした。 そこで、その点を補ったのがReveling Prototype Pattern（リビーリングプロトタイプパターン）ということで、紹介記事を読んで試してみました。 Revealing Prototype Pattern - Techniques, Strategies and Patterns for Structuring JavaScript Code - Dan Wahlin Revealing Prototype Patternによるオブジェクトの作り方 //最初にコン

はじめに Windows Management Instrumentation (WMI) のプロパティ値を取得してみます。 以前、JScriptでODBCのドライバ一覧を表示 で利用した、「WbemScripting.SWbemLocator」を利用します。 WMI値取得 WMIのプロパティを取得するメソッドを作成します。 結果を連想配列の配列として返します。 また、要素が配列の場合は配列で設定します。 function wmiProps(query) { // 結果 var result = []; try { // 「SWbemLocator」オブジェクト取得 var locator = new ActiveXObject("WbemScripting.SWbemLocator"); // 「SWbemServices」オブジェクト取得（ローカルコンピュータ、名前空間「root\CI

はじめに この記事では、関数型プログラミングを強力に後押しするライブラリ、 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

new Date()の使い方 指定した時刻を表す日付オブジェクトを生成する。何も指定されなかった場合は現在の（デバイスに）設定されている時刻を取得する。 日時を指定するときはYYYY/MM/DD HH:mm:ssまたはそれぞれをカンマで区切った形式で取得。 var d1 = new Date('2014/04/01 12:34:56'); console.log(d1); // => Tue Apr 01 2014 12:34:56 GMT+0900 var d2 = new Date(2014, 3, 1, 12, 34, 56); console.log(d2); // => Tue Apr 01 2014 12:34:56 GMT+0900 new Date()に年を入れる new Date("2013")でその年の1月1日GMT+9時間の日付を取得する var d2 = new D

value - 0### 数値演算のオペランドに文字列値を書くと、暗黙に数値に型変換されます。（+は文字列連結として扱われる） そのため、value - 0 ではnumが暗黙の型変換によって数値になりますが、0を引いても数値は変わらないため型変換だけが行われることになります。 +value### また、+演算子を単項演算子で使用すると、正の符号演算になります。正の符号演算で数値型への型変換が行われるので、+value とだけ記述すると、結果的に数値型への型変換のみを行います。 ---- 2015/05/14追記 ---- +valueに関して Airbnb JavaScript Style Guideによると +valueは //badとなっておりましたので、parceInt()やNumber()を使用するのが良さそうです。 しかし、全てが同じ挙動をするわけではなく、それぞれ微妙に違う動き

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

JavaScriptのお勉強 をしたいなーと思い、実行環境は簡単に揃えられないものかなあ、 とインターネッツをさまよっていたらjsbin.comというサービスを知った。 JavaScript、HTMLのテンプレートを書いていき、レンダリング結果がOutputペインに表示される。 CDNを提供しているプロダクトは、大抵"Add Library"で選択できるようになっている。 このサービスはすでに3年前から稼働しており、 今まで把握していなかった... ざっくりした使い方 jsbin.comにアクセス "Add Library"をクリックし、使いたいライブラリを選択する JavaScriptのペインについては書けば自動でロードされる レンダリング結果はOutputペインに表示される "Add Library"に好みのライブラリが無い場合は CDNが使われていないプロダクトのライブラリを利用した

これまで業務ではJavaScriptを場当たり的にコーディングしてきたので、今年は基本的なところから見直そうと思っています。JavaScriptの実装でいつもに気になっていたのがオブジェクトの生成で、どういった書き方が定石なのか、本で調べてもネットで調べてもいろいろ意見があって悩ましいところでした。 その中で、良さそうと思ったのが『JavaScriptデザインパターン』の中でも紹介されている「リビーリングモジュールパターン(Revealing Module Pattern)」です。 JavaScriptデザインパターン 作者: Addy Osmani,豊福剛,サイフォン合同会社出版社/メーカー: オライリージャパン発売日: 2013/05/25メディア: 大型本この商品を含むブログ (6件) を見る Revealing Module Patternによるオブジェクトの作り方 『JavaSc

JavaScript で人為的に例外を発生させるには、大きく分けると以下の2種類があります。 throw new しない書き方 throw "ソフトウェアでエラーが発生しました。サポート担当者に連絡し、この問題を報告してください。"; o_o は String 扱いで、o_o.stack も undefined になっています。 throw new する書き方 throw new Error("一般的なエラーだよ"); throw new TypeError("型がちがうよ"); throw new SyntaxError("文法おかしいよ"); throw new URIError("URIちがうよ"); 他にも、RangeError, ReferenceError, MediaError, FileError, EvalError などがあります。 throw new した場合は、o_

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Angular, Ember, Backbone：どのJavaScriptフレームワークを選ぶべきか？ JavaScriptフレームワークの選択は、開発者の好みよりもプロジェクトとの相性が大切だ。 JavaScriptベースのアプリケーションやウェブサイトのアイデアを思いついたとして、次にしなければならないのが正しいオープンソース・フレームワークを選ぶことだ。 この記事を読んでいるということは、あなたはまだ初心者や見習いの開発者かもしれない。あるいは自分のアイデアの開発を外部に委託しようと考えているのかもしれない。Angular、Ember、Backboneの名前ぐらいは聞いたことがあるかもしれないが、それらがどういったもので、なぜそれらがウェブ開発の助けになるかについてまでは知らないかもしれない。 開発者はJavaScriptを様々なウェブ・アプリケーションに使用している。それはJa

こんばんは、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

// 関数式でのクラス宣言 var Hoge = function(){}; Hoge.prototype = { foo: 'foo', getFoo: function(){ return this.foo; } }; // 関数文でのクラス宣言 function Piyo(){ this.bar = 'bar'; this.getBar = function(){ return this.bar; }; } console.log(Hoge.name); // "" console.log((new Hoge).constructor); // function Object(){ [native code] } console.log(Piyo.name); // "Piyo" console.log((new Piyo).constructor); // function Piy

backbone.jsなどのjsライブラリで画面生成されるアプリだと、javascript部分のパフォーマンスがアプリのさくさく感にすごい影響を与える。特に、レンダリング部分がトロいと、画面スクロールとか最初の画面生成にもたつきが発生して、いちいち引っ掛かりを感じるアプリとなってしまう。 では実際のところ、どう書いたら性能良くなるの？、ということでネットをさまよってると、「DOM操作を極力なくせ」、というのが共通の見解のようだ。 例えば、イテレーションの中で一つ一つappendするのではなくてまとめてappendしたほうが良いとか、そもそもappendじゃなくて文字列でinnerHTMLに入れたほうが良い、一度作ったDOM構成をcloneして使うと良い、cloneしたDOMを操作してからreplaceしたほうが良い、とかいろいろTIPSが出てくる。 そんなわけで、自分として気になるtips

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ポエムばかり書いてるわけにもいかんので、新しい卒論の現実逃避をする。 「CoffeeScriptの関数は明示的にreturnしてはいけない理由」を探す暇あったら他にやるべきことあるのでは？ - mizchi's blog http://mizchi.hatenablog.com/entry/2013/12/16/184306 みたいな記事を書いてしまった以上、ダグラスクロックフォード卿の「JavaScriptのwithは遅いので使うべきではない」という神話を検証してみなければと思っていた。2014年においてはどうなんだろうか。 自分自身、たまにメタプロしたくなってwithを使いたい気分になることがある。John Resigとかはwith肯定派だと噂に聞いている。 実測 というわけで適当なスクリプトをでっちあげてベンチしてみる。環境は node v0.10.22 一番最初にでっち上げたコード

Angular.jsを何度か仕事で使ってみて、Angular.jsを使う場合のアーキテクチャはMVCじゃなくてMVVMにしたほうが良いなと思った話を書く。 Angular.jsをMVCフレームワークだと勘違いしていた 少しAngular.jsについて今まで勘違いしていたことがあって、Angular.jsではコントローラを定義できるのでてっきりMVCアーキテクチャで作るものとばかり思っていた。 公式ウェブサイトのタイトルをよくよく見てみると、「Superheroic JavaScript MVW Framework」と書いてある。MVWのWってなんだよとか思ってたらWhateverの略で、要するにMVCでもMVVMでもなんでも良いということらしい。 MVCで組んで困ったこと 勘違いが解ける前は、普通にMVCフレームワークとしてAngular.jsを使っていたけどもそれで何が困ったかというと、