社内向け資料。自分が書いたコードを説明するために資料作る羽目になった。 昔のことはうろ覚えで雰囲気で書いてる部分もあるので、そこらへん勘弁。 古の時代(~2010) 前提としてJavaScriptは名前空間がwindowの一つしかない。 昔Prototype.jsがあった。もうみんな忘れたけどあの時期はプリミティブなオブジェクトのprototypeを生やしまくって、それが衝突しまくってprototype良くない的な雰囲気が生まれたり生まれなかったりした。 その反省があってか(歴史的に若干微妙な気がするが) jQueryは名前空間を一つに集約した。いわゆる jQueryPlugin は、jQueryのプロトタイプにヘルパを生やしまくっていた。グローバルを汚すのは駄目だけどjQueryの名前空間を汚すのはいいよね、ぐらいの考え。 jQuery非依存なライブラリは、「GoodParts」として、
I’ve recently been working on a lot of Node.js projects, for myself, with my students, and for national organizations. Because I’m a University instructor I’ve been getting a lot of questions about what the best practices for Node.js are from every project I’m involved with. I’ve worked with Node.js for years and know all the best practices myself, but I had never seen a list that explained the be
（150522追記）本稿の続編としてAngularJSモダンプラクティスを掲載しました。本稿は2014年9月に執筆し、情報がかなり古くなっています。続編では、AngularJS 1.4やAngular 2に関する情報をまとめ、入門者への新鮮なチュートリアル、熟練者の移行手引として作成しました。どうぞご覧ください。 この記事は記録のため残します。 AngularJS歴1年の筆者による個人的なAngularJSアンチパターン集です。自分のための戒めとメモを兼ねています。個人差があると思いますので、参考程度に。 また、筆者はTypeScriptで書いています。 Components ComponentsのDI数が6以上になる 危険度★★★ angular.module('myApp') .service('FooService', [ '$q', '$resource', '$rootScope
進化の早いJavaScript界隈に新しいアプローチのフレームワークが登場しました。Jan Lehnardt氏が中心になって開発されているHoodieはフロントエンドとバックエンドを完全に分離する事でそれぞれの開発効率を最大限にするnoBackendの実装の一つです。Hoodieはサーバーサイド用のモジュールとクライアント用のライブラリの2つから成っており、サーバーサイドが起動している状態であればクライアント側からは例えば下記のコードだけでユーザの登録ができます。 hoodie = new Hoodie('http://localhost:6007/_api'); hoodie.account.signUp('joe@example.com', 'secret'); すでに登録されたデータを取得する場合は下記のようになります。 var type = 'task'; hoodie.store
果敢にもMVCフレームワークの図解を試みたので、どうぞ！ MVCの動機 MVCという言葉が初めて登場してから30年以上たった今、最早なんだったのか分からないほどMVCの定義は混迷をきたしているわけだが、どれがMVCでMVVMでMVPであるという定義についてあれこれ考察するのは個人的には好きでなくて、「結局何がしたいのか」という動機がぶれていなければ何でも良いと思っている。 じゃあそれは一体何なのかということを自分なりに考えてみたところ、次の一言に落ち着いた。 「ModelはViewに依存したくない」 世間的には（？）ModelとViewを単に「分ける」と説明されることが多いが、私はそれだけでは納得していなくて、依存の方向こそが重要だと思っている。たとえ分かれているように見えてもModelがViewを参照していたら、情報の取得先や表現方法は固定化されてしまう。 ModelはViewの事情から
PCのみならDevToolsだけでもいいけど、スマホのWebView内解析とか考えるとLocal Proxyは必須
JavascriptでAOP JavaではDIと同時に当たり前になったAOP(アスペクト指向プログラミング)ですが、Javascriptでも行うことができます。 今回紹介するAopJSは、JavascriptでAOPを行うためのライブラリです。 ドキュメントを参考にいろいろとためしてみましょう。 ※ちなみに、AopJSは通常のライブラリとしてだけでなく、JQueryのプラグインとしても提供されています。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 Node.js : v0.10.8 npm : 1.2.23 gitリポジトリからAopJSを取得します。 % mkdir aopjs % cd aopjs % git clone https://github.com/victorcastroamigo/aopjs.git
JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（前編）。QCon Tokyo 2013 4月23日に都内で開催されたエンジニア向けのイベント「QCon Tokyo 2013」。基調講演に登壇したのは、JavaScriptの重鎮であるDouglas Crockford氏。「プログラミング・スタイルと私たちの脳」という大胆なタイトルで、JavaScriptプログラミングにおいてバグをどう減らしていくのかについて解説しています。 基調講演の内容をダイジェストで紹介しましょう。 プログラミング・スタイルと私たちの脳 PayPalのDouglas Crockford氏。 プログラミングスタイルはプログラムの一部ですが、コンパイラからは無視されます。だからある人はプログラミングスタイルが重要ではないと考えていますが、しか
先日書いた自分用アプリケーションのひな形 http://d.hatena.ne.jp/naoya/20130503/1367581629 http://d.hatena.ne.jp/naoya/20130504/1367640512 これに、JavaScript のテスト環境も追加したい。 結論からいくと、フレームワークには mocha + expect、ランナーは testem を使うことにした。ついでにテストダブルライブラリとして Sinon.js も有効にした。 ちなみに今回の文脈は End to End のテストではなくてユニットテスト周りのおはなしです。 mocha + expect JavaScript のこの辺のテスト周りは今もいろいろなツールの整備が進んでいて、今回採用した以外にも Jasmin や QUnit そのほか色んな物がある。昨今の状況に関しては 先日の HTML
Google Chrome Canary（正確にはV8）に、ついにGenerators（yield）が入った。これを上手に使うと、エラー処理を含む非同期コードを同期的に書くことができるようになり、見通しが極めて良くなるので、ここで紹介する。 ここで紹介するものはいずれNode.jsでも使用できるようになるので、Webとの互換性を気にする必要のないNode.jsでは近いうちに活用できるようになると思う。 下のコードを動かすためには、最新のGoogle Chrome Canaryで、chrome://flagsからexperimental javascriptを有効にしておく必要がある。 ES6 HarmonyのGenerator構文について functionではなくfunction*というキーワードを使うと、yieldキーワードが使えるようになる。 function* range(begin
Chardin.js - Simple and beautiful overlay instructions for your apps.
Install PhantomJSvar page = require('webpage').create();<br /><br /> page.open('http://www.google.com', function() {<br /><br /> setTimeout(function() {<br /><br /> page.render('google.png');<br /><br /> phantom.exit();<br /><br /> }, 200);<br /><br /> });</textarea></p><br />
2013/03/05 Zepto.js v1.0がリリースされました v1.0rcが11ヶ月間も続いていたのですが、 ようやくRelease Candidateではなくなり正式リリースとなったようです。 今回はZeptoについて振り返ってみました。 http://zeptojs.com/ https://github.com/madrobby/zepto おさらい 今更かとは思いますが、初めての方におさらいしますと、 Zepto.jsとはjQueryとAPIほぼ互換性があるモダンブラウザ向け軽量ライブラリです。 jQueryはIE対応とか$.AnimationとかDeferredとかあるけど その辺りを除いて実装してあるようなイメージ。現状、iOSやSafariにはIE対応とか必要ない訳で、 これ使うとファイルサイズ落とせますねっていうライブラリです。 ビルドについて ra
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
