SDN Memo @sdnproject - Tumblr Blog

jQuery.each() でのオブジェクトのループは hasOwnProperty でチェックをしていない！

JavaScriptでオブジェクトをループ処理する方法としては、for...in や jQuery.each() や Object.keys()を利用した方法などがありますが、for...in でループ処理を行う場合には Object.prototype.hasOwnProperty でプロパティが存在するかチェックして行う（Object.prototype のプロパティをはじく）のが一般的な常識ですが、もうその常識は古いです。

というのも、一番使われているJavaScriptライブラリであろうjQueryの jQuery.each() も Object.prototype.hasOwnProperty でのチェックを行っていないからです。Object.prototype を拡張汚染している時に jQuery.each() でオブジェクトのループを行うと恐ろしい事になるかも……

Object.prototype.pinya = function () { return 'ぴにゃー'; }; var idol = { cute: '島村卯月', cool: '渋谷凛', passion: '本田未央', }; console.log(idol.pinya()); // "ぴにゃー" jQuery.each(idol, function (key, value) { console.log(key + ': ' + value); }); // "cute: 島村卯月" // "cool: 渋谷凛" // "passion: 本田未央" // "pinya: function () {↵ return 'ぴにゃー';↵}" // 余計なものまで入ってしまった！

上記のコードの結果ように、jQuery.each() は Object.prototype も見ていることになります。

なぜ jQuery.each() は hasOwnProperty でチェックしないのか

そもそも、デフォルトの Object.prototype のプロパティは for...in で列挙されないように定義されています。何もいじっていないのなら Object.prototype.hasOwnProperty によるチェックは必要ありません。そして、Object.prototype.hogehoge というプロパティを定義した場合、Array.prototype.hogehoge や Function.prototype.hogehoge なども同時に定義されるので、思わぬ動作を引き起こしかねないという事で使用するべきではないと散々言われてきました。

というわけで、jQueryは Object.prototype を拡張していない前提でコードを書くべきとしているようです。また、Object.prototype.hasOwnProperty によるチェックはループの処理速度を落とす原因にもなるので、処理速度向上のためにチェックはしないのです。

jQuery.each() によるオブジェクトのループ処理はほぼ素の for...in と同じ

jQuery.each() のコードを見てみます。バージョンは 3.1.1 ですが、他のバージョンも同じような感じです。

// jQuery から一部抜粋 jQuery.extend( { // 〜〜〜〜 each: function( obj, callback ) { var length, i = 0; if ( isArrayLike( obj ) ) { length = obj.length; for ( ; i < length; i++ ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } else { for ( i in obj ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } return obj; }, // 〜〜〜〜 } );

jQuery.each() はオブジェクトのループに for...in を使用していますが、Object.prototype.hasOwnProperty によるチェックを行っていません。非常にシンプルなコードです。

ほとんどの場合オブジェクトのループは jQuery.each() を使わずに for...in で十分

では何故、jQuery.each() でオブジェクトもループ処理できるのかというと過去の互換性のためであったり、変数を定義しなくて済む、obj[key] のように書かなくて済む、といった感じです。 jQuery.each() は一度関数を実行して返り値が false ならループ処理を止めるという事をしているので、処理速度的には遅いです。for...in なら break も continue も使えます。 for...in の方が当然処理が早いので、特別な理由がなければオブジェクトのループ処理は jQuery.each() を使わなくてもいいでしょう。

余計な関数処理をしない分、for...in が有利です。

どうしても Object.prototype を拡張したい場合

Object.prototype を拡張したいという人もいるのかもしれません。そんな時は Object.defineProperty() や Object.defineProperties() を使用して列挙されないように定義してやる必要があります。

Object.defineProperty(Object.prototype, 'pinya', { value: function () { return 'ぴにゃー'; }, enumerable: false, // 列挙させない }); var idol = { cute: '島村卯月', cool: '渋谷凛', passion: '本田未央', }; console.log(idol.pinya()); // "ぴにゃー" /* for...in */ for (var type in idol) { console.log(type + ': ' + idol[type]); } // "cute: 島村卯月" // "cool: 渋谷凛" // "passion: 本田未央" /* jQuery.each() */ jQuery.each(idol, function (key, value) { console.log(key + ': ' + value); }); // "cute: 島村卯月" // "cool: 渋谷凛" // "passion: 本田未央"

列挙されませんが、確実に汚染されているのでおすすめはしません。

#JavaScript #jQuery

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality✓ Free Actions

Free to watch • No registration required • HD streaming

JavaScriptのArray関係いろいろ

プログラム関係で必ずと言って使うものと言えば配列（Array）ですね。 JavaScriptの配列はいろいろ面白い（ややこしいとも言う）動作をするので改めて自分用のメモとしてもまとめておきます。

Array.length

JavaScriptの配列の長さ（要素数）を知りたいときに使うのはみなさんおなじみ Array.length ですが、この length の挙動について意外と知らない人もいるので改めておさらいしてみます。

Array.length は正確には要素数ではない？

そうなのー！？

以下のサンプルを見てもらえるとどういう事だか理解できるかもしれません。

JavaScript

var words = ['すっごーい！', 'たーのしー！']; // 初期状態 console.log(words.length); // 2 // 代入する words[2] = 'たべないよー！'; console.log(words.length); // 3 // Array.prototype.push を使う words.push('夜行性だからねっ！'); console.log(words.length); // 4 console.log(words); // ["すっごーい！", "たーのしー！", "たべないよー！", "夜行性だからねっ！"] // 大きなインデックスに代入してみる words[100] = '大丈夫、夜行性だからっ！'; // length は 5 ではない console.log(words.length); // 101 // 配列がどうなっているのか見てみる console.dir(words); /* Array[101] 0: "すっごーい！" 1: "たーのしー！" 2: "たべないよー！" 3: "夜行性だからねっ！" 100: "大丈夫、夜行性だからっ！" length: 101 */

words[4] 〜 words[99] がないのに words.length は 101 になってます。この結果からわかるように、意図的に操作しなければ Array.length は最大のインデックスの数にプラス1した数値であり、「要素が101個ある配列」として認識されています。そして、words[4] 〜 words[99] は実質 undefined が入っているのと（ほぼ）同じという解釈ができます。（なぜ「ほぼ」なのかについては後ほど触れます）

Array.length の値の変更

ご存知のように、Array.length は読み取り専用プロパティではなく値を変更することができます。変更した時の動作はどうなっているのでしょうか。

JavaScript

var words = ['すっごーい！', 'たーのしー！', 'たべないよー！']; // 初期状態 console.log(words.length); // 3 // 現在の長さよりも小さい値に変更する words.length = 2; console.log(words); // ["すっごーい！", "たーのしー！"] // 現在の長さよりも大きい値に変更する words.length = 10; console.log(words); // ["すっごーい！", "たーのしー！"] // pushしてみる words.push('夜行性だからねっ！'); console.log(words.length); // 11 console.log(words); /* Array[101] 0: "すっごーい！" 1: "たーのしー！" 10: "たべないよー！" length: 11 */

words.length = 2; にした時は予想通りの動作になりましたが、words.length = 10; にしても見た目的には変わりません。しかし length の値は違うので、この配列は「要素が10個ある配列」という扱いになっています。なので、push した時にインデックスが 10 から始まるわけです。

動作を模倣してみる

よく考えると不思議な動作をする Array.length ですが、ほぼ同じ動作を模倣してみるとこんな感じでしょうか。（自信ない）

JavaScript

// 今はもうあまり使われない new Array() みたいに使える function fakeArray() { // new つけ忘れたら駄目 if (!(this instanceof fakeArray)) { throw new TypeError('Constructor cannot be called as a function'); } var i = 0; // 引数があるなら入れておく for (; i < arguments.length; i++) { this[i] = arguments[i]; } // length を定義する Object.defineProperty(this, 'length', (function () { // 内部で持つ length 値 var lengthTemp = i; return { // ゲッターの定義 get: function () { // 現在の length より大きい場合 if (this.hasOwnProperty(lengthTemp)) { var maxIndex = lengthTemp - 1; // 最大のインデックスを取得する for (var index in this) { if (this.hasOwnProperty(index) && maxIndex < parseInt(index, 10)) { maxIndex = parseInt(index, 10); } } lengthTemp = maxIndex + 1; } return lengthTemp; }, // セッターの定義 set: function (length) { length = parseInt(length, 10); if (isNaN(length)) { throw new RangeError('Invalid value'); } // 現在の length よりも小さい値の場合、余計な要素を削除する if (length < lengthTemp) { for (var index in this) { if (this.hasOwnProperty(index) && length - 1 < parseInt(index, 10)) { delete this[index]; } } } lengthTemp = length; }, }; })()); } fakeArray.prototype = { constructor: fakeArray, // 配列っぽく振る舞うための操作 push: Array.prototype.push, sort: Array.prototype.sort, splice: Array.prototype.splice, }; // 配列もどきの生成 var words = new fakeArray('すっごーい！', 'たーのしー！'); // 初期状態 console.log(words.length); // 2 // 代入する words[2] = 'たべないよー！'; console.log(words.length); // 3 // push を使う words.push('夜行性だからねっ！'); console.log(words.length); // 4 console.log(words); // ["すっごーい！", "たーのしー！", "たべないよー！", "夜行性だからねっ！"] // 現在の長さよりも小さい値に変更する words.length = 2; console.log(words); // ["すっごーい！", "たーのしー！"] // 現在の長さよりも大きい値に変更する words.length = 10; console.log(words); // ["すっごーい！", "たーのしー！"] // もう一度pushしてみる words.push('夜行性だからねっ！'); console.log(words.length); // 11 console.log(words); /* fakeArray[101] 0: "すっごーい！" 1: "たーのしー！" 10: "たべないよー！" length: 11 */

ゲッターとセッターを使うことでほぼ配列っぽい動きができました。 Array.length は見た目の割に複雑？ですね。なんかむずかしー！

Array.prototype.forEach と for と for...of

配列をループさせる方法といえば、普通の for を使いますが、Array.prototype.forEach もありますね。そして ECMAScript 2015 (ES6) から使えるイテラブルオブジェクトのループ構文 for...of が登場しました。

JavaScript

そもそもの違い

普通の for は、ただ単に条件が false になるまでループを行う構文です。配列とは直接関係ない構文ですが、それを配列に利用している訳ですね。 Array.prototype.forEach は、見てわかるように Array.prototype のメソッドなので、完全に配列専用のメソッドである事がわかります。 for...of は、配列だけではなく「イテラブルオブジェクト」というオブジェクトであれば使用できるループ構文です。イテラブルオブジェクトについてはここでは詳しく説明しません。

処理的な面でいくと、for と for...of はループを抜け出す break がありますが、Array.prototype.forEach にはありません。（関数実行型なので）

JavaScript

jQuery の $.each() は return false; とする事で break と同じ事ができますが、Array.prototype.forEach は処理は止まりません。

他にも、現在処理中の文を中断して次のループ処理を行う continue がありますが、これは Array.prototype.forEach では return で代用できます。

JavaScript

処理速度

さて、どれが一番処理が早いのでしょう。10000回ループさせて計測してみます。

JavaScript

// 10000個要素がある配列を作る var testArray = []; for (var i = 0; i < 10000; i++) { testArray[i] = i; } function forLoop() { var length = testArray.length, sum = 0; console.time('for'); for (var i = 0; i < length; i++) { sum += testArray[i]; } console.timeEnd('for'); } function forEachLoop() { var sum = 0; console.time('forEach'); testArray.forEach(function (value) { sum += value; }); console.timeEnd('forEach'); } function forOfLoop() { var sum = 0; console.time('for...of'); for (var value of testArray) { sum += value; } console.timeEnd('for...of'); }

forLoop() と forEachLoop() と forOfLoop() をそれぞれ5回実行してみました。（バージョンやPC等の環境にも左右されるのであくまで参考値です）

Node.js (v7.5.0) で実行

1回目 2回目 3回目 4回目 5回目平均 forLoop() 0.029ms 0.029ms 0.026ms 0.033ms 0.027ms 0.029ms forEachLoop() 0.210ms 0.235ms 0.236ms 0.235ms 0.233ms 0.230ms forOfLoop() 0.331ms 0.367ms 0.282ms 0.368ms 0.328ms 0.335ms

Google Chrome 56 のデベロッパーツールで実行

1回目 2回目 3回目 4回目 5回目平均 forLoop() 0.029ms 0.024ms 0.026ms 0.028ms 0.029ms 0.027ms forEachLoop() 0.198ms 0.224ms 0.198ms 0.198ms 0.233ms 0.210ms forOfLoop() 0.199ms 0.200ms 0.254ms 0.229ms 0.178ms 0.212ms

さすが、普通の for は早いですね。配列関係なしにループを行うのが強いのでしょうね。 Node.js では一番遅いのは for...of ですが、Chromeでは Array.prototype.forEach と for...of がほぼ同じです。

Array.prototype.forEach は、毎回関数を実行している事とネイティブコード内で様々な判定を行なっているので少し処理に時間がかかるようです。 MDNの Array.prototype.forEach() - JavaScript | MDN の互換性の項目を見ると、こういった処理が行われているのがわかります。なるほどー！

for...of は、一見普通の for 構文に似ていますが、イテラブルオブジェクトを反復するための関数実行を簡略した記述みたいなものなので、これも内部で関数実行が行われている関係で少し時間がかかるようです。

配列での undefined

結構ややこしいのが、undefined です。この扱いは結構厄介です。（配列だけじゃなくてオブジェクト全体に言えるんですけどね）

「要素が未定義」と「値が未定義」

undefined はその名の通り「未定義」という意味ですが、以下のような場合は何が違ってくるのでしょう。

JavaScript

/* インデックスを飛ばして配列に入れてみる */ var a = ['いらっしゃぁい！']; a[2] = 'ゆっぐりしていってぇ！'; console.log(a); /* Array[101] 0: "いらっしゃぁい！" 2: "ゆっぐりしていってぇ！" length: 3 */ // 要素が未定義なので undefined console.log(a[1]); // undefined // for でループしてみると、未定義関係なく処理する for (var i = 0; i < 3; i++) { console.log(a[i]); } // "いらっしゃぁい！" // undefined // "ゆっぐりしていってぇ！" // for...of でループしてみると、for と同じ結果 for (var word of a) { console.log(word); } // "いらっしゃぁい！" // undefined // "ゆっぐりしていってぇ！" // Array.prototype.forEach でループしてみると、未定義要素は無視される a.forEach(function (word) { console.log(word); }); // "いらっしゃぁい！" // "ゆっぐりしていってぇ！" /* あらかじめ undefined を配列に入れてみる */ var b = ['いらっしゃぁい！', undefined, 'ゆっぐりしていってぇ！']; console.log(b); /* Array[101] 0: "いらっしゃぁい！" 1: undefined 2: "ゆっぐりしていってぇ！" length: 3 */ // 値が undefined（未定義） console.log(b[1]); // undefined // すべて同じ結果 for (var i = 0; i < 3; i++) { console.log(b[i]); } for (var word of b) { console.log(word); } b.forEach(function (word) { console.log(word); }); // "いらっしゃぁい！" // undefined // "ゆっぐりしていってぇ！" // 二つの値は等しいのか？ console.log(a[1] === b[1]); // true // Array.prototype.indexOf で調べてみるとどうなのか console.log(a.indexOf(undefined)); // -1 console.log(b.indexOf(undefined)); // 1 // in演算子で調べてみるとどうなのか console.log(1 in a); // false console.log(1 in b); // true // hasOwnProperty() で調べてみるとどうなのか console.log(a.hasOwnProperty(1)); // false console.log(b.hasOwnProperty(1)); // true

こんな事しねーよ！というツッコミはごもっともです。

Array.prototype.forEach で動作が違います。そして、Array.prototype.indexOf や in演算子、hasOwnProperty() で結果が異なっています。しかし、a[1] === b[1] は true です。これはどういう事なのか……

JavaScriptでは、オブジェクトは存在しないプロパティ（ここでは配列なのでインデックス）を指定した場合、エラーとはせずに undefined を返すようになっています。なので、「要素自体がないので undefined」と「要素の値が undefined」が混同してしまっているのです。配列で Array.prototype.forEach や Array.prototype.indexOf を使用する時は気を付けないと痛い目に合うかもしれません。

区別する方法

Array.prototype.indexOf や in演算子、hasOwnProperty() で結果が違うので、いろいろ方法はあります。オブジェクトには必ず hasOwnProperty() が用意されています。このメソッドは、そのプロパティを持っているかの真理値（true / false）を返します。まさにこれが良さそうです。

JavaScript

var a = ['いらっしゃぁい！']; a[2] = 'ゆっぐりしていってぇ！'; var b = ['いらっしゃぁい！', undefined, 'ゆっぐりしていってぇ！']; console.log(a[1]); // undefined console.log(b[1]); // undefined console.log(a.hasOwnProperty(1)); // false console.log(b.hasOwnProperty(1)); // true

Array.prototype.push.apply と concat

配列同士を結合させる方法として Array.prototype.push.apply と Array.prototype.concat があります。同じように見えて違うこの両者、処理速度も変わってくるようです。

そもそもの違い

push は「破壊的な結合」で、concat は「非破壊的な結合」と言えます。

JavaScript

var words = ['ジャパリカフェへ〜！', 'ゆっぐりしていってぇ！']; /* Array.prototype.push.apply */ var words01 = ['いらっしゃぁい！', 'よぉこそぉ↑']; var result01 = Array.prototype.push.apply(words01, words); // words01 自体が変わる console.log(words01); // ["いらっしゃぁい！", "よぉこそぉ↑", "ジャパリカフェへ〜！", "ゆっぐりしていってぇ！"] // ちなみに push の返り値である result01 は結合後の配列の長さ console.log(result02); // 4 /* concat */ var words02 = ['いらっしゃぁい！', 'よぉこそぉ↑']; var result02 = words02.concat(words); // words02 は変化がない console.log(words02); // ["いらっしゃぁい！", "よぉこそぉ↑"] // result02 に結合後の配列が入る console.log(result02); // ["いらっしゃぁい！", "よぉこそぉ↑", "ジャパリカフェへ〜！", "ゆっぐりしていってぇ！"]

Array.prototype.push.apply は元となる配列の後ろに配列を結合し、Array.prototype.concat は二つの配列を結合した新しい配列を返す処理という違いがあります。

処理速度

concat は新しい配列を生成しているという点を考えると処理的に遅そうなイメージがあります。実際にはどうでしょう。 10000回結合する処理の速度を簡単に計測してみます。

JavaScript

pushTest() と concatTest() をそれぞれ5回実行してみました。（バージョンやPC等の環境にも左右されるのであくまで参考値です）

Node.js (v7.5.0) で実行

1回目 2回目 3回目 4回目 5回目平均 pushTest() 0.685ms 0.613ms 0.696ms 0.605ms 0.753ms 0.670ms concatTest() 397.911ms 397.856ms 400.857ms 398.586ms 407.725ms 400.587ms

Google Chrome 56 のデベロッパーツールで実行

1回目 2回目 3回目 4回目 5回目平均 pushTest() 0.484ms 0.463ms 0.572ms 0.575ms 0.501ms 0.519ms concatTest() 958.716ms 957.499ms 965.490ms 954.975ms 962.546ms 959.845ms

すごく差が出てしまいました。concat は Node.js ではまだマシレベルでしたが、Chromeではほぼ1秒かかってます。あまり現実的ではない測定方法なので、今度は一度だけ結合を行う処理を10000回実行するようにしてみます。

JavaScript

この pushTest() と concatTest() もそれぞれ5回実行してみました。（バージョンやPC等の環境にも左右されるのであくまで参考値です）

Node.js (v7.5.0) で実行

1回目 2回目 3回目 4回目 5回目平均 pushTest() 0.781ms 0.829ms 0.775ms 0.814ms 0.937ms 0.827ms concatTest() 3.290ms 2.614ms 2.882ms 2.060ms 2.627ms 2.695ms

Google Chrome 56 のデベロッパーツールで実行

1回目 2回目 3回目 4回目 5回目平均 pushTest() 1.655ms 1.858ms 1.562ms 1.386ms 1.612ms 1.615ms concatTest() 2.625ms 2.734ms 2.339ms 2.365ms 2.597ms 2.532ms

Node.js は約2msの差で、Chromeでは約1msの差ですね。それほど数が多くない配列を一度だけ結合するのであればあまり変わらないかもですが、特に concat する理由がなければ push でいいかもしれません。

#JavaScript

普通のHTML要素とSVGとCanvasでのアニメーション

HTML5のcanvasが様々なところで活躍し始めてから結構経ちました。けど、canvasってよくわからない、SVGと何が違うのかなど、簡単なアニメーションを元に見比べていきます。

※このエントリーは ECMAScript 2015 で記述されている箇所があります。なので Internet Explorer では動きません。Chrome や Firefox や Edge で見てください。

複数の円をアニメーションさせてみる

大小さまざまな円を枠の中で動かすJavaScriptを書いてみます。

普通のHTML要素

普通のHTML要素でアニメーションさせようとした場合、以下のような感じで書いていきます。あくまで参考なのでかなり適当です。

HTML

<div id="circleAnimation01"></div>

CSS

/* ベースのdiv要素 */ #circleAnimation01 { overflow: hidden; position: relative; z-index: 0; width: 500px; height: 250px; border: 1px #ccc solid; background: #fff; } /* アニメーションさせるspan要素 */ #circleAnimation01 span { display: block; position: absolute; top: 0; left: 0; z-index: 0; border-radius: 50%; opacity: 0.8; }

JavaScript

実行してみるとこんな感じです。（サンプルと同じ動きをしますが、JavaScriptやCSSの記述は異なります。）

結構いい感じに動いてくれますが、デベロッパーツールで見るとひっきりなしにspan要素のstyle属性が書き換わっています。少し処理が重くなってしまうブラウザが出てくるかもしれません。あと目障りですしね。

SVG

なんとなく、こういう図形ならSVGの方が何かと都合がいいのでは？と思うかもしれません。

HTML

<svg width="500" height="250" style="border: 1px #ccc solid; background: #fff;" id="circleAnimation02"></svg>

JavaScript

実行してみます。（サンプルと同じ動きをしますが、JavaScriptの記述は異なります。）

普通のHTML要素とあまり変わらない感じです。これもデベロッパーツールで見るとひっきりなしにcircle要素のcx属性とcy属性の値が変わっています。処理やブラウザエンジンにもよりますが、DOMを直接操作する場合、再びブラウザ側でレンダリング処理が入ります。なのでこれも処理的にはあまりよろしくないという事になります。

canvas

ここでcanvasの出番です。 canvasは今までのように要素を操作するといった事は行わず、いわゆるパラパラ漫画でアニメーションを表現します。

HTML

<canvas width="500" height="250" style="border: 1px #ccc solid; background: #fff;" id="circleAnimation03"></canvas>

JavaScript

実行してみます。（サンプルと同じ動きをしますが、JavaScriptの記述は異なります。）

あれ、他の二つとあまり変わらないですね。どこが違うのでしょうか。

先ほど書いたように、canvasはパラパラ漫画でアニメーションを表現します。デベロッパーツールで見てみると、canvas要素自体には何も変化がありません。子要素などもありません。要素を操作せずにJavaScriptで完結しているのがcanvasです。これならHTMLが汚染されることもありません。

まとめ

いかがでしたでしょうか。（一度使ってみたかったセリフ）個人的な意見としてはこんな感じです。

DOM操作はめんどくさい。

canvas意外の方法では動かしたい要素を用意しなければならない。

canvas意外の方法では直接要素を操作するので処理的に遅い（微々たるものですが）。

svgは静止画的な扱いの方がいい。（svgアニメーションもありますが、それはまた別）

canvasはHTML側では変化がなく、JavaScriptの処理のみで完結するのでHTMLが汚染されず処理も早い。

ここでのcanvasの使用例はほんの一部にしかすぎません。 Flashのようなコンテンツを作成したり、ゲームを作れたりします。

canvasは古いブラウザでなければもう使える技術なので、興味がある人は使ってみてはどうでしょうか。

(() => { const sheet = document.head.appendChild(document.createElement('style')).sheet, css = [ ['#circleAnimation01', [ 'overflow: hidden;', 'position: relative;', 'z-index: 0;', 'width: 500px;', 'height: 250px;', 'margin: 14px auto;', 'border: 1px #ccc solid;', 'background: #fff;', ]], ['#circleAnimation01 span', [ 'display: block;', 'position: absolute;', 'top: 0;', 'left: 0;', 'z-index: 0;', 'border-radius: 50%;', 'opacity: 0.8;', ]], ['#circleAnimation02, #circleAnimation03', [ 'display: block;', 'margin: 14px auto;', 'border: 1px #ccc solid;', 'background: #fff;', ]], ]; for (let [selector, rules] of css) { let set = selector + '{'; for (let rule of rules) { set += rule; } set += '}'; sheet.insertRule(set, sheet.cssRules.length); } })(); document.addEventListener('DOMContentLoaded', () => { const div = document.getElementById('circleAnimation01'), svg = document.getElementById('circleAnimation02'), canvas = document.getElementById('circleAnimation03'), ctx = canvas.getContext('2d'), fillColor = ['#c7000b', '#d8a900' , '#00873c', '#0b398c'], circleOption = [], radian = Math.PI * 2, width = 500, height = 250, opacity = 0.8; for (let color of fillColor) { let radius = Math.floor(Math.random() * 26) + 5, svgCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'), spanCircle = document.createElement('span'); svgCircle.setAttribute('fill', color); svgCircle.setAttribute('opacity', opacity); svgCircle.setAttribute('r', radius); svg.appendChild(svgCircle); spanCircle.style.background = color; spanCircle.style.width = (radius * 2) + 'px'; spanCircle.style.height = (radius * 2) + 'px'; div.appendChild(spanCircle); circleOption.push({ x: width / 2, y: height / 2, dX: Math.random() * 9, dY: Math.random() * 9, fill: color, radius: radius, svgCircle: svgCircle, spanCircle: spanCircle, }); } (function draw() { ctx.clearRect(0, 0, width, height); ctx.globalAlpha = opacity; for (let opt of circleOption) { ctx.beginPath(); ctx.arc(opt.x, opt.y, opt.radius, 0, radian, true); ctx.closePath(); ctx.fillStyle = opt.fill; ctx.fill(); opt.svgCircle.setAttribute('cx', opt.x); opt.svgCircle.setAttribute('cy', opt.y); opt.spanCircle.style.transform = `translate3d(${opt.x - opt.radius}px, ${opt.y - opt.radius}px, 0)`; opt.x += opt.dX; opt.y += opt.dY; if (opt.x <= opt.radius || opt.x >= canvas.width - opt.radius) { opt.dX *= -1; } if (opt.y <= opt.radius || opt.y >= canvas.height - opt.radius) { opt.dY *= -1; } } requestAnimationFrame(draw); })(); });

#JavaScript #HTML5

ECMAScript 2015 (ES6) を覚える

ECMAScript 2015 / 2016 に対応したブラウザが主流になりつつあるので、そろそろ、というかいい加減覚えていった方がいい記述が増えてきました。 Microsoft Edge も登場したわけですし、Internet Explorer なんかもう捨てていきましょう。（……というわけにはいかないのが悲しい現実）

かなり進化したので今までの常識がひっくり返るかもしれません。全部は説明できませんが主なものを自分のためにも書き留めておきました。

宣言、式、演算子

const（定数宣言）

待ち望んでいた人も多い、JavaScriptにもついに定数が設定できるようになりました。再代入による変更や再宣言はできません。ブロックスコープなので扱いやすいです。グローバル空間で宣言できません。

JavaScript

// 慣例的に定数はすべて大文字で宣言するけど、JavaScriptにおいてはどうなんだろう const IDOL = '島村卯月'; console.log('idole: ' + IDOL); // "idole: 島村卯月" // 再代入はエラー IDOL = '渋谷凛'; // TypeError! // 再宣言はエラー const IDOL = '本田未央'; // SyntaxError! let IDOL = '輿水幸子'; // SyntaxError! var IDOL = '神崎蘭子'; // SyntaxError! // ブロックスコープなので、こんな事もできる（紛らわしいのであまりおすすめはしない） if (true) { const IDOL = '城ヶ崎莉嘉'; console.log('idole: ' + IDOL); // "idole: 城ヶ崎莉嘉" } // 変わってない console.log('idole: ' + IDOL); // "idole: 島村卯月" // 値のない宣言はエラー const foo; // SyntaxError! // 関数や配列、オブジェクトも定数として扱える const FUNCTION = function () {}; const ARRAY = []; const OBJECT = {}; // エラーにならない ARRAY.push('わかるわ'); console.log(ARRAY); // ["わかるわ"] OBJECT.bonono = 'むーりぃー'; console.log(OBJECT.bonono); // "むーりぃー"

let（局所変数宣言）

var と似ていますが、let はブロックスコープであり、var はブロックスコープに囚われません。再代入はできますが、再宣言はできません。グローバル空間で宣言できません。

JavaScript

// var の場合 function test01() { var x = '白坂小梅'; if (true) { var x = '星輝子'; console.log(x); // "星輝子" } console.log(x); // "星輝子" } test01(); // let の場合 function test02() { let x = '白坂小梅'; if (true) { let x = '星輝子'; console.log(x); // "星輝子" } console.log(x); // "白坂小梅" } test02();

var と let の違いがはっきりと出ました。

分割代入

分割代入とは、配列やオブジェクトから値を取り出して別個の変数に代入することができる式です。

JavaScript

/* 配列の分割代入 */ let candyIsland = ['双葉杏', '三村かな子', '緒方智絵里']; let [a, b, c] = candyIsland; // この書き方もできる // let [a, b, c] = ['双葉杏', '三村かな子', '緒方智絵里']; console.log(a); // "双葉杏" console.log(b); // "三村かな子" console.log(c); // "緒方智絵里" // 不要な値がある場合、それを無視できます let [, kanako, ] = candyIsland; console.log(kanako); // "三村かな子" // 規定値を設定できます let loveLaika = ['新田美波', 'アナスタシア']; let [d, e, f = '神崎蘭子'] = loveLaika; console.log(d); // "新田美波" console.log(e); // "アナスタシア" console.log(f); // "神崎蘭子" /* オブジェクトの分割代入 */ let newGenerations = {cute: '島村卯月', cool: '渋谷凛', passion: '本田未央'}; let {cute, cool, passion} = newGenerations; // キー名と一致させる必要がある console.log(cute); // "島村卯月" console.log(cool); // "渋谷凛" console.log(passion); // "本田未央" // キー名とは別にしたい場合 let {cute: uzuki, cool: rin, passion: mio} = newGenerations; console.log(uzuki); // "島村卯月" console.log(rin); // "渋谷凛" console.log(mio); // "本田未央" // 必要なものだけ取り出す let {cool: shiburin} = newGenerations; console.log(shiburin); // "渋谷凛"

スプレッド演算子

スプレッド演算子とは「...」のことで、変数名の頭に付けて使用します。どういう働きをするかは……百聞は一見に如かず、という事でサンプルを見てください。

JavaScript

/* 分割代入で使用した例 */ let engine = ['向井拓海', '藤本里奈', '松永涼', '大和亜季', '木村夏樹']; let [head, ...member] = engine; // ...member というように、変数名の頭に付ける console.log(head); // "向井拓海" console.log(member); // ["藤本里奈", "松永涼", "大和亜季", "木村夏樹"] // memberが配列になっている /* 関数の引数での利用 */ function test(a, b, c, d, e) { console.log(a); console.log(b); console.log(c); console.log(d); console.log(e); } let summerPrincess = ['川島瑞樹', '日野茜', '堀裕子', '上田鈴帆', '難波笑美']; test(...summerPrincess); // "川島瑞樹" // "日野茜" // "堀裕子" // "上田鈴帆" // "難波笑美" // test.apply(null, summerPrincess); と同じ /* Array.prototype.push.apply の代替として */ let asterisk = ['前川みく', '多田李衣菜']; let natsunana = ['木村夏樹', '安部菜々']; asterisk.push(...natsunana); console.log(asterisk); // ["前川みく", "多田李衣菜", "木村夏樹", "安部菜々"] // Array.prototype.push.apply(asterisk, natsunana); と同じ

オブジェクトのキー名に変数を使う

今までは、オブジェクトのキー名に変数を使用する場合は一度オブジェクトを生成してから定義する必要がありましたが、そのようなこともなくなります。

JavaScript

/* 従来の方法 */ let key01 = 'miria'; let decoRations = { kirari: '諸星きらり', rika: '城ヶ崎莉嘉', }; decoRations[key01] = '赤城みりあ'; console.log(decoRations); // Object {kirari: "諸星きらり", rika: "城ヶ崎莉嘉", miria: "赤城みりあ"} /* ES2015から */ let kawaii = 'sachiko'; let kbyd = { [kawaii]: '輿水幸子', yuki: '姫川友紀', sae: '小早川紗枝', }; console.log(kbyd); // Object {sachiko: "輿水幸子", yuki: "姫川友紀", sae: "小早川紗枝"} // こんな事もできる let key02 = 'rin'; let triadPrimus = { ['shibu' + key02]: '渋谷凛', karen: '北条加蓮', nao: '神谷奈緒', }; console.log(triadPrimus); // Object {shiburin: "渋谷凛", karen: "北条加蓮", nao: "神谷奈緒"}

テンプレートリテラル

テンプレートリテラルとは、新たに追加された構文です。極端な事を言うと、JavaScriptにもヒアドキュメントが追加されたようなものです。

通常JavaScriptで文字列を扱う場合は、シングルクォート 'String' やダブルクォート "String" を使用しますが、テンプレートリテラルはバッククォート `String` を使用します。あまり馴染みのない記号かもしれません。US配列キーボードならescキーの下のキー（Shift同時押しでチルダ「~」が入力できるキー）、JISキーボードなら Shift + @ で入力できるやつです。

こんな感じに使います。

JavaScript

let yaminoma = `闇に飲まれよ！`; console.log(yaminoma); // "闇に飲まれよ！"

普通の文字列との違い

テンプレートリテラルは、ヒアドキュメントのように書けます。つまり、直接改行を入れることが可能です。以下のような記述の場合、いずれも同じ結果になります。

JavaScript

let a = 'せめて\n名刺だけでも'; console.log(a); /* "せめて名刺だけでも" */ let b = `せめて\n名刺だけでも`; console.log(b); /* "せめて名刺だけでも" */ let c = `せめて名刺だけでも`; console.log(c); /* "せめて名刺だけでも" */ console.log(a === b); // true console.log(a === c); // true

変数や式を埋め込む

テンプレートリテラルは、直接変数や式を埋め込むことができます。以下のような記述の場合、いずれも同じ結果になります。

JavaScript

/* 変数の埋め込み */ let baseball = '野球'; // 文字列結合に + を用いた場合 let a = 'カワイイボクと' + baseball + 'どすえ'; console.log(a); // "カワイイボクと野球どすえ" // テンプレートリテラルにおいて ${～} で囲むと変数が展開される let b = `カワイイボクと${baseball}どすえ`; console.log(b); // "カワイイボクと野球どすえ" console.log(a === b); // true // もし、変数展開をしてほしくない場合はエスケープする let c = `カワイイボクと\${baseball}どすえ`; console.log(c); // "カワイイボクと${baseball}どすえ" /* 式の埋め込み */ let namco = 765, mishiro = 346; // 従来（文字列と数値の混同はややこしい） let d = namco + ' + ' + mishiro + ' = ' + (namco + mishiro); console.log(d); // "765 + 346 = 1111" // テンプレートリテラル let e = `${namco} + ${mishiro} = ${namco + mishiro}`; console.log(e); // "765 + 346 = 1111"

エスケープさせない

通常バックスラッシュ（環境によっては円マーク）はエスケープのために付ける特殊な記号になっています。 String.raw() という関数とテンプレートリテラルを併用する事でこんな事もできます。以下のような記述の場合、いずれも同じ結果になります。

JavaScript

// 従来 let a = 'せめて\\n名刺だけでも'; // バックスラッシュ2つでエスケープ console.log(a); // "せめて\n名刺だけでも" // String.raw() とテンプレートリテラル let b = String.raw`せめて\n名刺だけでも`; // バックスラッシュ1つでエスケープなし console.log(b); // "せめて\n名刺だけでも"

「ん？」と思った人もいるかもしれません。String.raw(`～`); ではなく String.raw`～`; になっています。この括弧がない構文はタグ付きテンプレートリテラルといい、このような構造になっています。そして実はこの関数、String.raw(`～`); のような記述は使えません。

JavaScript

結果が違います。そして、タグ付きテンプレートリテラルの方はちょっと複雑な構造をしています。要するに、タグ付きテンプレートリテラルはこのような引数を渡しているのとほぼ同じです。

JavaScript

let sun = '太陽'; // タグ付きテンプレートリテラル String.raw`煩わしい${sun}ね\\`; // "煩わしい太陽ね\\" // タグ付きテンプレートリテラルの模倣 String.raw({ 0: '煩わしい', 1: 'ね\\', raw: ['煩わしい', 'ね\\\\'], }, sun); // "煩わしい太陽ね\\"

こういうものだと思った方がいいですね。

for...of

for...of文は、iterableオブジェクト（配列のようなオブジェクト）に対して反復的な処理をするループ行います。他言語の foreach に似たものだと思うと分かりやすいかもしれません。

JavaScript

/* 通常の配列 */ let lipps = ['速水奏', '城ヶ崎美嘉', '塩見周子', '宮本フレデリカ', '一ノ瀬志希']; // 通常 for (let name of lipps) { console.log(name); } // constを使う for (const name of lipps) { console.log(name); } // "速水奏" // "城ヶ崎美嘉" // "塩見周子" // "宮本フレデリカ" // "一ノ瀬志希" /* 文字列 */ let yaminoma = '闇に飲まれよ！'; for (let value of yaminoma) { console.log(value); } // "闇" // "に" // "飲" // "ま" // "れ" // "よ" // "！" /* DOMコレクション */ let sectionParagraph = document.querySelectorAll('section p'); for (let paragraph of sectionParagraph) { paragraph.style.color = '#f00'; }

for...in文に似ているかもしれませんが、for...in文は列挙可能なプロパティの反復です。

関数定義

ES2015から様々な関数定義が可能です。

引数の初期値

関数の引数に初期値を設定できます。関数を呼び出す際に引数が指定されていない場合に有効です。

JavaScript

function calc(x, y = 2, z = 3) { return x + y + z; } console.log(calc(10)); // 15 console.log(calc(10, 7)); // 20 console.log(calc(10, 5, 8)); // 23 // 初期値が設定されている引数の右側に初期値がない引数は非推奨 function calc2(x, y = 2, z) { return x + y + z; }

ちなみに、この初期値が有効になる条件は引数が undefined の時のみです。空文字や 0 や null は値として評価されます。

Rest Parameters

Rest Parametersとは、直訳すると「残りのパラメーター」で何のこっちゃとなりますが、実はすごい便利です。引数の数が可変な関数も簡単に作れます。

JavaScript

// arguments の代わりになる function average(...args) { let sum = 0, length = args.length; // 変数 args は配列 for (let value of args) { sum = sum + value; } return sum / length; } average(1, 2, 3, 4); // 2.5 average(1, 2, 3, 4, 5); // 3 average(1, 2, 3, 4, 5, 6); // 3.5 // n番目の引数から可変という事もできる function calc(base, ...args) { let product = base; for (let value of args) { product = product * value; } return product; } calc(5, 10); // 50 calc(5, 2, 3); // 30 calc(5, 2, 3, 4); // 120

スプレッド演算子ではないのですが、同じように「...」を付けることで引数を配列化することができます。 argumentsよりも使い勝手がいいです。

アロー関数

おそらく一番使うことになるであろうアロー関数とは、関数式をとても簡単に記述できる方法です。通常の関数式との違いは後述します。

JavaScript

/* 通常の関数式 */ const increment01 = function (x) { return x + 1; } /* アロー関数（4通りの書き方） */ // 基本 const increment02 = (x) => { return x + 1; } // 引数が1つの場合括弧を省略できる const increment03 = x => { return x + 1; } // return も省略できる const increment04 = (x) => x + 1; const increment05 = x => x + 1; // すべて同じ結果 console.log(increment01(10)); // 11 console.log(increment02(10)); // 11 console.log(increment03(10)); // 11 console.log(increment04(10)); // 11 console.log(increment05(10)); // 11

びっくりするぐらい簡単な記述になります。しかし、アロー関数は使い方に注意しないといけません。アロー関数は this や arguments を束縛しないのです。また、アロー関数はprototypeを持ちません。

JavaScript

/* 通常の関数式 */ // this の扱い const func01 = function (x, y) { console.log(this + x + y); } func01.call(10, 1, 2); // 13 // arguments の扱い const func02 = function (x, y) { console.log(arguments); } func02.call(10, 1, 2); // [1, 2] /* アロー関数 */ // this の扱い const func03 = (x, y) => { console.log(this + x + y); } func03.call(10, 1, 2); // "[object Window]12" // arguments の扱い const func04 = (x, y) => { console.log(arguments); } func04.call(10, 1, 2); // ReferenceError: arguments is not defined // Rest Parameters を利用すれば arguments の代わりになる const func05 = (...args) => { console.log(args); } func05.call(10, 1, 2); // [1, 2]

オブジェクトでのメソッド定義

prototype拡張などでオブジェクトリテラルを使うこともあると思います。実はこれも省略型が存在します。

JavaScript

/* 通常の関数式 */ const Foo01 = function (str) { this.foo = str; }; Foo01.prototype = { bar: function () { console.log(this.foo); }, baz: function (str) { console.log(str); }, }; let foo01 = new Foo01('闇に飲まれよ！'); foo01.bar(); // "闇に飲まれよ！" foo01.baz('test!'); // "test!" /* 省略型 */ const Foo02 = function (str) { this.foo = str; }; Foo02.prototype = { bar() { console.log(this.foo); }, baz(str) { console.log(str); }, }; let foo02 = new Foo01('闇に飲まれよ！'); foo02.bar(); // "闇に飲まれよ！" foo02.baz('test!'); // "test!"

ちょっと簡単になりました。ちなみにアロー関数も使えますが、this が使用できない、というのはさっき言った通りです。

class構文

JavaScriptについにclass構文が実装です。これでprototypeをあれこれいじらずに済みます。といっても現状のclassの機能としては、prototypeの扱いを簡単にするための方法でしかないのでいろいろ他の言語と比べると制約があります。

あと、ここでは詳しく掘り下げません。

prototype と class

先ほどの「オブジェクトリテラルでの関数」でのサンプルをclassに書き換えてみます。

JavaScript

/* クラスの定義 */ class Foo01 { constructor(str) { this.foo = str; } bar() { console.log(this.foo); } baz(str) { console.log(str); } } let foo01 = new Foo01('闇に飲まれよ！'); foo01.bar(); // "闇に飲まれよ！" foo01.baz('test!'); // "test!" /* クラス式の定義 */ const Foo02 = class { constructor(str) { this.foo = str; } bar() { console.log(this.foo); } baz(str) { console.log(str); } }; let foo02 = new Foo02('闇に飲まれよ！'); foo02.bar(); // "闇に飲まれよ！" foo02.baz('test!'); // "test!"

他の言語のclassと同じように書けます。素晴らしい。クラス式なんて形にもできます。 constructor() とは、クラスが呼び出されたときに必ず実行される関数です。

しかし、JavaScriptのclassは必ずメソッド定義として記述しないとエラーが出ます。つまり、データのプロパティをクラス直下で定義できません。また、public や private などのアクセス修飾子も使えないので、完全に他の言語のclassとは違うのがわかります。以下はエラーになります。

JavaScript

class Foo01 { foo = '闇に飲まれよ！'; // SyntaxError! } class Foo02 { private foo(str) { // SyntaxError! this.foo = str; } }

まだまだprototypeでいろいろやった方がいいかもしれませんね……

静的メソッド

JavaScriptのclassにも静的メソッドが用意されています。

JavaScript

class Foo { constructor(str) { this.foo = str; } bar() { console.log(this.foo); } baz(str) { console.log(str); } // 静的メソッド static goodMorning() { console.log('煩わしい太陽ね'); } } let foo = new Foo('闇に飲まれよ！'); foo.bar(); // "闇に飲まれよ！" foo.baz('test!'); // "test!" Foo.goodMorning(); // "煩わしい太陽ね"

クラスの継承

classといえば、クラスの継承。もちろんあります。

JavaScript

class Foo { constructor(str) { this.foo = str; } bar() { console.log(this.foo); } baz(str) { console.log(str); } } // Fooクラスを継承したFooBarクラス class FooBar extends Foo { constructor(str, n) { super(str); // Fooクラスのconstructorを呼び出す this.num = n; } foobaz() { console.log(this.num); } } let foobar = new FooBar('煩わしい太陽ね', 256); foobar.bar(); // "煩わしい太陽ね" foobar.baz('test!'); // "test!" foobar.foobaz(); // 256

Promise

Promise は、処理の延期と非同期処理を行えるオブジェクトです。

JavaScript

/* 画像を読み込む処理 */ let imagePath = './foo/bar.jpg'; // Promiseオブジェクトの生成。関数はすぐに実行される。 let promise = new Promise((resolve, reject) => { let image = new Image(); image.src = imagePath; // 読み込み成功 image.addEventListener('load', () => { resolve('success!'); }); // 読み込み失敗 image.addEventListener('error', () => { reject('failed...'); }); }); promise.then(value => { // 成功した時に実行される console.log(value); // "success!" }).catch(value => { // 失敗した時に実行される console.log(value); // "failed..." });

ここではあまり詳しく説明しません。

Symbol

Symbol は、ユニークで不変なデータ型です。単体ではあまり役に立ちませんが、オブジェクトのプロパティ識別子として使ったりします。

JavaScript

let symbol01 = Symbol(); let symbol02 = Symbol(); console.log(symbol01 === symbol02); // false // 名前も付けられる let symbol03 = Symbol('やみのま！'); let symbol04 = Symbol('やみのま！'); console.log(symbol03 === symbol04); // false

ここではあまり詳しく説明しません。

#JavaScript

コナミコマンドで動くJavaScriptコードを書いてみる

Webサイトにイースター・エッグ（隠し要素）を仕込んだりするのもたまには面白いなぁという事で、「コナミコマンドをキーボードで打つと何かが起こるスクリプト」を書いてみる事にしました。コナミコマンドって何だ、という人は Wikipedia を見てください。

このページにもコナミコマンドを仕込んであるので試してみてください。

まずどう組むか考える

お遊びでも作るからには簡単な仕様を決めておかねばなりません。

キーボード入力によるJavaScriptの操作

JavaScriptには keydown / keypress / keyup などのキーボードのキーの操作によって発火するイベントが用意されています。 keydown はキーが押された瞬間に発火、keypress はキーが押されて『文字が入力された瞬間』に発火（なので矢印キーなどには無反応）、keyup はキーが上がった（キーを放した）瞬間に発火します。コマンドは基本的に押された瞬間なので keydown を使いましょう。

JavaScript

(function () { 'use strict'; document.addEventListener('keydown', function () { // 何かやらせる }); })();

コマンドのキーコードを取得させる

キーボードには、特殊なキーをのぞきほとんどのキーに「キーコード」という数字が割り当てられています。確認する方法はちょっとめんどくさいので、キーコード一覧【JavaScript 動的サンプル】などを参考に見てみます。

コナミコマンドは ↑↑↓↓←→←→BA なので、そのキーコードを見てみると 38 38 40 40 37 39 37 39 66 65 である事がわかります。これを配列にして、n番目のコマンドが合っていたらn+1番目のコマンドを確認するといった感じにしていきます。

JavaScript

これでもいけなくないですが、コマンド入力としてはまだ物足りないかも。

コマンドの入力受付猶予時間を与える

n秒以内に次のコマンド入力がない場合はコマンド入力をリセットした方がよりそれっぽくなるかと思います。

JavaScript

やりました。これで完成です。あとは好きな処理を書いてページに設置するだけです。

試しにこのページでコナミコマンドをやってみてください。単純な仕掛けですが、遊び心もたまにはいいですよね。

#JavaScript

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality✓ Free Actions

Free to watch • No registration required • HD streaming

Twitterの画像がどれだけJPEG劣化するのか見てみる

Twitterに画像付きツイートをしたら、画像が勝手にJPEG圧縮されて画質が汚い！困る！なんて事あるかと思います。ないのかも。 JPEG圧縮するにしても赤・青系の色が滲んでしまったりブロックノイズが発生するレベルの汚さ。もうちょっと何とかならなかったのか！

JPEG圧縮回避できるツール

検証なんてどうでもいいから、とにかく劣化しないようにしたい人のためのショートカット → Twitter向け画像最適化ツール

#Twitter

そのベンダープレフィックス、いつまでつけるの？

CSS3が普及してきて使用する機会がどんどん増えていっているかと思います。しかし、ブラウザのバージョンによってはベンダープレフィックスを付けないと効かないものもまだまだあります。厄介です。

ベンダープレフィックスといえば、-webkit- 、-moz- 、-ms- 、-o- などが思い浮かぶかと思いますが、ぶっちゃけるとほとんどのCSS3のプロパティはベンダープレフィックスなしでも動くんです。（もちろんIEは除く）特にIE以外のブラウザというのは常に最新バージョンにアップデートされていくので、ベンダープレフィックスなしでどんどん対応していっています。

CSSやJavaScriptの対応状況は Can I use... 等を利用して確認しましょう。ベンダープレフィックスも付けるべきかそうでないかがわかります。

このエントリーは、Internet Explorer 10以降を基準に書いています。滅ぼしたいほど憎いIE9以下のバージョンは全く考慮してません。

#CSS

シンガポール旅行に行きました。ガーデンズ・バイ・ザ・ベイはまるで異世界のようでした。

#Photo

莉嘉ちゃん誕生日おめでとう！

#ドット絵 #シンデレラガールズ #pixel art

jQueryライクなJavaScriptライブラリ queries.js

元々はJavaScriptでのprototype関連やDOM操作関係の理解を深めようという目的で、jQueryのような自作のJavaScriptライブラリをこつこつ書いていました。けど、気付けばとんでもない量のコードになってしまってある程度jQueryに近い処理が可能になったので、公開してみようという形になりました。

最新バージョンでの対応ブラウザ: Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge, Internet Explorer 10+

Download queries.min.js v2.15.6

このライブラリは MITライセンスです。インデント付きコードはこちらです → queries.js

// CSSの timing-function の ease および、cubic-bezier(0.25, 0.1, 0.25, 1) と同じ var cubicBezier = new $.CubicBezier(0.25, 0.1, 0.25, 1); // 配列でもOK // cubicBezier = new $.CubicBezier([0.25, 0.1, 0.25, 1]); // （数学的な意味の）変数を求める // cubicBezier.calc() の引数は 0 ～ 1 の範囲で指定する // この値と任意の係数の積が様々なものに使える console.log(cubicBezier.calc(0)); // 0 console.log(cubicBezier.calc(0.25)); // 0.40851059301560033 console.log(cubicBezier.calc(0.5)); // 0.8024033876954126 console.log(cubicBezier.calc(0.75)); // 0.9604590729525889 console.log(cubicBezier.calc(1)); // 1 // これを利用することで、jQueryの .animate() のようなアニメーションができる // この例では要素を下に 500px 動かすアニメーションの処理 (function () { 'use strict'; // ターゲット $target = $('#moveBox'); // ease-in-out を設定（cubic-bezier(0.42, 0, 0.58, 1) と同じ） var cb = new $.CubicBezier(0.42, 0, 0.58, 1); // アニメーションさせる時間（ミリ秒） var duration = 1000; // 最終的な高さ（係数） var to = 500; // 開始時間 var start = Date.now(); // アニメーション開始 requestAnimationFrame(function doAnimation() { // 経過時間 var elapsedTime = Date.now() - start; // 経過時間と duration を比べる if (elapsedTime < duration) { // 時間の割合を元に変数を求める var t = cb.calc(elapsedTime / duration); // 係数と変数の積を求める $target.css('translate', [0, to * t]); // この処理は以下と同じ // $target.css('transform', 'transition(0, ' + (to * t) + 'px)'); // 繰り返し requestAnimationFrame(doAnimation); } else { // アニメーション終了。念のためにスタイルをあてる $target.css('translate', [0, to]); console.log('complete!'); } }); })();

#JavaScript

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality✓ Free Actions

Free to watch • No registration required • HD streaming

おんとろじー

#ドット絵 #シンデレラガールズ #pixel art

keyframesアニメーションを動的に設定できるJSライブラリkeyframes.js

jQueryを使用せずに jquery.keyframes.js と同じ動作を実現するJavaScriptライブラリです。 CSSに事前に記述する必要がなくJavaScriptで全て完結させるため、簡単に要素にアニメーションを付与することが可能です。

jQueryは必要がなく、このスクリプトのみで動作します。

最新バージョンのブラウザであれば、すべて対応しています。 Internet Explorerに関しては10以上が対応していますが、一部の処理は正常に動作しません。

Download keyframes.min.js v1.0.2

このライブラリは MITライセンスです。インデント付きコードはこちらです → keyframes.js

$('#linkKeyframesMiniJS').attr({ href: 'http://sdn-project.net/jslib/keyframes.min.js', download: true }); $('#linkKeyframesJS').attr({ href: 'http://sdn-project.net/jslib/keyframes.js', download: true });

Trending Blogs

Last Seen Blogs

SDN Memo