「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ JavaScriptのライブラリとして人気のあるjQueryは現在、モダンブラウザのみサポートすることで、より小さく速く安定したjQuery 2.x系と、古いバージョンのWebブラウザを含む幅広いWebブラウザをサポートするjQuery 1.x系の2つが存在しています。 この2つのバージョン表記を、次のリリースから変更することが、jQueryのブログにポストされた記事「jQuery 3.0: The Next Generations」で発表されました。 バージョンは3.0に統一 現在のjQuery 1.9系とjQuery 2.0系は、前述のようにサポートするブラウザが異なるだけで、APIは基本的に互換性があります。 そこで、次のリリースからこの

この記事は webcomponents.org の記 事とのクロスポス トです。 Shadow DOM を利用すると、DOM 要素に、ウェブページの他の部分とは切り離された、 ノード内だけで有効なスタイルやマークアップを含んだ DOM ツリーを追加することがで きます。この記事と動画では、この Shadow DOM について解説します。 Shadow DOM とはなにか？ # こちらは HTML5 の video タグで表示された動画です。ご覧頂けるとお分かりのように、 コードは video タグのみという単純さでありながら、動画そのものだけでなく、制御用 の UI も表示することができています。 <video src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" controls></video>

もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe

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

何度も話されている話だけど。 JavaScriptはオブジェクトについて参照渡しだなんて、信じない - Qiita 個人的にこの挙動への理解を無駄に混乱させて参照の値渡しとかやたら周りくどい呼ばれ方をするのは、値渡しという考え方を元にしている為、もっと踏み込んでいえば変数=箱のイメージが邪魔をしている為と思ってる。 変数=箱では変数が主体であって、値はある変数の所有物であるという印象がある。けどJavascript等では実際には変数自身は値（オブジェクト）の利用権しか主張しない。逆に言えばオブジェクトの存在は特定の変数に縛られない。逆にオブジェクトが主体であって変数は従属するものと考えたほうが良いのかも。 ということで変数=箱的であるC/C++での代入演算とは＝の意味合いが違っている。動的確保+ポインタによる参照に確かに似ているがそういった理解の仕方は概念の抽象度を無駄に下げていると思う。

JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme

対象読者 jQueryなどを使っているJavaScript開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（36.0）、IE11、Firefox（31.0）、Safari（7.0.5）の環境で確認を行っています。 JavaScript開発の歴史 フレームワークを説明する前に、10年ほど前から現在までのJavaScriptが歩んできた流れが分かると、どうして今、JavaScriptにもフレームワークが必要になってきているのか、または開発者はフレームワークに何を求めているのかが多少は見えてくることと思います。 2005年くらいまではJavaScriptは利用者や開発者から避けられていた技術で、たとえ使われても、非常に簡単で

indexOf(val) >= 0の話 配列に要素が含まれているかのチェックに [1, 2, 3].indexOf(2) >= 0; // true のようなコードを使っている場面を極めて頻繁に（それ以外を使っているのを見ることは稀なくらい）見るが、 function contains(a, v) { return a.indexOf(v) >= 0; } は厳密にはJavaScriptでは正しく動くとは限らない。上記コードのどこが間違っているのか、下記の解説を見る前に考えてみてほしい。こんなシンプルなコードにも、バグがある。 解説 containsがどのように動くべきなど明白だというのは間違いである。実は微妙な問題がたくさんある。 まず、致命的な部分をあげると、最初のナイーブな実装だと contains([NaN], NaN) // false となってしまう。明らかに意図した動作と異な

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

以前もご紹介した GreaseMonkey にて、GM_setValue() 関数がどこに値を保存するか、纏めてみました（Firefox のみ）。 以下、[@namespace]は GreaseMonkey スクリプトのメタタグ@namespaceに設定した値、[@name]は同じく@nameに設定した値、[設定項目]はGM_setValue("XXX", "YYY")のXXXの部分、の意。 なお、これらの情報は今後の FireFox や GreaseMonkey のバージョンアップにより古くなる可能性があります。 GreaseMonkey ～1.12 試しに情報を調べようとすると、いまだに出てくるのがこれ。 現行バージョン（ver 2.2 現在）では使われていません。 ロケーションバーに about:config を入力。警告が出ても華麗にスルーして設定一覧を表示。 greasemonk

このブログでのデザインパターン連載も５回目になってやっと連載らしくなってきました。 引き続き今回はシングルトンパターンを紹介します。 シングルトンパターン オブジェクトのインスタンスの生成を1つに制限する、というのがシングルトンパターンです。 手軽に実装するには以下のようにオブジェクトリテラルを使用することで実装できます。 var Singleton = { prop: 1, another_prop: 'value', method: function() {…}, another_method: function() {…} }; しかし、これではプライベート・パブリックの区別ができません。全てのプロパティ、メソッドにアクセスできてしまいます。 シングルトンパターンの常套手段としては、インスタンスが作成されていなかったら作成し、すでに作成されている場合はそのインスタンスを返します。 サ

はじめに WEBアプリケーション開発において ブラウザ側 で何かをしたい場合、ブラウザで唯一動作する言語といっていい JavaScript を触らざるを得ません。ただ JavaScript は理解してしまえば難しくないものの、 サーバサイド側の言語と違う特徴 (特に関数まわり) があるため、慣れないうちは混乱することが多いのかなと思います。 私もまだ JavaScript を学び始めて日が浅く（本職はサーバサイド側のエンジニア）、また JavaScript での業務経験もそれほど豊富ではないのですが、 サーバサイドエンジニア側の視点 で、とっかかりとして これだけ知っていれば 理解が捗るだろうというものを挙げてみました。 ですので必ずしも網羅性はなく、ブラウザに関する機能（クライアントサイドAPI）についても触れていません（対象はコアJavaScript言語《ECMAScript5相当》）

今回はリビーリングモジュールパターンを紹介します。 リビーリングモジュールパターン このパターンはクリスチャン・ヘイルマンという人による、モジュールパターンを改良したパターンです。 全ての関数と変数をプライベートスコープ内で定義し、パブリックメンバとして公開したいプライベートメンバへのポインタを持つ無名オブジェクトを返します。 var myRevealingModule = function() { var privateVar = 'Hoge', publicVar = 'Foo'; function privateFunction() { console.log('Name:' + privateVar); } function publicSetName(strName) { privateName = strName; } function publicGetName() { pr

前回はコンストラクタパターンについて紹介しました。 今回はモジュールパターンについて紹介します。 モジュールパターン 従来のJavascript以外でのモジュールパターンというのは、クラスにパブリックとプライベートの両方のカプセル化をもたらす方法でした。 しかし、前回Javascriptにはクラスの概念が無いということを書きました。 Javascriptではクラスのような実装をモジュールパターンで再現することができます。 モジュールパターンを使用することで、1つのオブジェクトにパブリック・プライベートなメソッドや変数を取り込み、グローバルから特定の部分を隠蔽できます。 グローバル空間での変数名や関数名の衝突がしづらくなるわけです。 モジュールパターンでは、クロージャを使い変数やメソッドの隠蔽を実現します。 var testModule = (function() { // カウンタ変数 v

前回は第1回目ということで、そもそもデザインパターンとはなんぞや？という話に触れました。 今回から具体的なデザインパターンについて紹介していきます。 コンストラクタパターン コンストラクタ（Constructor）とはオブジェクトを作成し、初期化する関数のことです。 コンストラクタはJavascript以外の言語では「クラス」と呼ばれています。 プロトタイプベースの言語であるJavascriptでは、クラスの概念がありませんが、コンストラクタを作成することでクラスに似たオブジェクトを作成することができます。 コンストラクタは、オブジェクトを使用するための準備を行い、引数を受け取りオブジェクトの初回作成時にメンバのプロパティやメソッドに値を設定するのに利用します。 // コンストラクタを定義する function Person(name, age) { this.name = name; t