JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう 高津戸壮（株式会社ピクセルグリッド） ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(
HTML5+Canvasで学ぶ物理アニメーションの基礎 HTML5+Canvasを使用して物体が落下するという簡単な物理アニメーションを作成してみます。 投稿日2015年07月28日 更新日2019年04月13日 Canvasアニメーションの基礎については下記を参考にしてください。 この記事は下記をベースとして進めます。 HTML5で作るCanvasアニメーションの基礎 HTML5+Canvasでパーティクルっぽいのを作ってみる 基本となるオブジェクトを作成する 前回作成したParticleオブジェクトを少し編集します。 var Particle = function(scale, color, vx, vy) { this.scale = scale; //大きさ this.color = color; //色 this.vx = vx; //X速度 this.vy = vy; //Y速
こんにちは会員事業部の丸山@h13i32maruです。 最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。 現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。 そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。 今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ
概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける [3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )
thatに思いを馳せる JavaScriptにおいて that = this とか self = this なパターンを頻繁に使うと、作業者の理性が保証されない場合に下記に示す2点の問題が起こりう得ると思っている。 「あー、どうなのかなー、うーん」と思いながら書いてみる。 1.メソッド分割が適切におこなわれない雰囲気 ちょっと極端かも知れないが、Backboneっぽいコードを例にしてみる。 initialize: function() { var that = this; this.listenTo(this.entity, 'success', function() { var bar = that.foo(); that.$el.find('.qux').text(bar); // long. // long.. // logic... }); this.entity.execute(
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns (upcoming). Patterns collected while developing 喜感网. General Patterns Function Declarations - creating anonymous functions and assigning t
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
asm.jsを手書きしつつフィボナッチで速度比較をしてみる
asm.jsを触ってみたので所感など。 asm.jsはJavaScriptのサブセットで、限られた型しか使えないが高速に動作する言語との事。とりあえずどの程度速くなるのか、計算量が多くなるfibonacciの実装で試してみた。参考資料はasm.jsの仕様ぐらいしか無かったのでこれを見ながら。 で、実際に書いてみると型がゆるゆるなJavaScriptのイメージは脆くも崩れ去り、厳格な型チェックの世界である事がわかった。コンパイル言語を書いている時の頭に切り換えないと、コンパイルエラーと延々格闘する事になる。まずはasm.jsのコードは次の形式で、module exportする。 function create_my_asm_module(stdlib, foreign, heap) { "use asm"; function hoge() {...} function fuga() {...
の解説を理解するために。 通常のFunciton定義と、ArrowFunctionでの違いを追ってみる。 以下の3つくらいの理解に必要だろう。 8.3.15.1 [[Call]] Internal Method 10.2 Lexical Environments 13 Function and Generators 13.1 Function Definitions 13.2 Arrow Function Definitions 13.6 Creating Function Objects and Constructors Functionオブジェクトの違い（FunctionExpressionとArrowFunction） まずは、Functionオブジェクトがどのように生成されるか、である。 Function定義は、FunctionDeclarationと名前付きFunctionExp
＜＜前回「CoffeeScriptって何？」へ＜＜ CoffeScriptを3時間で理解するための10のポイントのうち、ポイント1から3までを解説します。ポイント1は「CoffeeScriptはコンパイルで即時関数に変換される」こと、ポイント2は「変数は自動的に宣言される」こと、ポイント3は「リテラルで豊かな表現を可能に」したことです。 POINT1 CoffeeScriptはコンパイルで即時関数に変換される ★「即時関数」でグローバル変数を作らない ★JavaScriptのstrictモードにも対応 CoffeeScriptで記述されたコードをコンパイルすると、JavaScriptのコードは、(function() {...}).call(this);でラップされた状態で出力されます（リスト7）＊1。奇異にも見える書き方ですが、実は、JavaScriptの世界では定石とも言える書き方の一
前回はJavaScriptのプロトタイプチェーンについて、図解を用いることでなんとか理解できました。今回はスコープチェーンに挑戦してみます。前回と同じく「1. 図解を用いる」「2. 用語を明確に定義する」「3. Standard ECMA-262 3rd editionを情報ソースとする」というアプローチで紐解いて行きます。 用語の定義 ・本エントリの文章における表記は、以下の表の「ECMA-262 3rd」に統一する ・本エントリの図における表記は、以下の表の「本エントリの略称」に統一する ・本エントリ内におけるES3とは、Standard ECMA-262 3rd editionを指す ECMA-262 3rd 本エントリの略称 JavaScript（サイ本）第5版（日本語） Execution Contexts EC 実行コンテキスト Variable Object VO 変数定義の
ECMAScript 6 and Rest Parameter Mar 6, 2013 2 min read #es6 #javascript #web Handling a function with a variable number of arguments is always tricky in JavaScript. At least, we still have this arguments object which can be used to retrieve all arguments used to invoke a function. With the upcoming ECMAScript 6, no such hack is necessary anymore since we can start using its rest parameter feature.
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
The PeerJS library PeerJS simplifies WebRTC peer-to-peer data, video, and audio calls. PeerJS wraps the browser's WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer connection API. Equipped with nothing but an ID, a peer can create a P2P data or media stream connection to a remote peer. Downloads Setup Include the library with a script tag <script src="https://
Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i
追記 (2014/3/21) 以下がこの記事に対する自分の答えになります JavaScriptのジェネレータとDeferredを組み合わせるといい感じ！ （JS1.7のyieldでharmonyのawait式ぽいことをする) - fujidigの雑記 JavaScriptにジェネレータってあるじゃないですか。それを使えば非同期の処理を同期みたいに書けるっていうのがあるじゃないですか。 function myroutine() { なんかする1; yield 1000; なんかする2; yield 2000; なんかする3; yield 1000; なんかする4; } function run_routine() { var g = myroutine(); (function() { try { var msec = g.next(); } catch (e if (e instanceo
I’ve been doing a lot of work, lately, with JavaScript inheritance – namely for my work-in-progress JavaScript book – and in doing so have examined a number of different JavaScript classical-inheritance-simulating techniques. Out of all the ones that I’ve looked at I think my favorites were the implementations employed by base2 and Prototype. I wanted to go about extracting the soul of these techn
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
