JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう 高津戸壮（株式会社ピクセルグリッド） ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(
Timer APIs(Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimationFrame, setImmediate) with Canvas Animation - Qiita
Timer APIs(Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimationFrame, setImmediate) with Canvas AnimationanimationcanvasrequestAnimationFrameDate.nowperformance.now このエントリでは、「ブラウザ上で Canvas アニメーションを効率的に動かすコードを書こうとした場合に、どういった API を利用すれば良いか?」をテーマに、Timer API について説明します。 このエントリに登場する Time API は、Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimatio
requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
Pannellum
A Lightweight Panorama Viewer for the Web Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free.
christoffer.me
We’re getting things ready Loading your experience… This won’t take long.
NPMとleft-pad : 私たちはプログラミングのやり方を忘れてしまったのか？ | POSTD
さあ開発者のみなさん、真面目な話の時間です。読者の皆様はおそらくすでにお気づきでしょうが、今週、ReactやBabelやその他大量の有名なNPMパッケージ群が壊れました。そしてその原因は少々驚くようなものでした。 ReactやBabel、その他のパッケージが依存する、left-padというシンプルなNPMパッケージがあります。この記事を書いている現段階で、このパッケージは GitHub上で11 star となっています。このパッケージは全体で 11行のシンプルな行があり、文字列の左を詰める基本的な関数が実装されている というものです。上記のリンクが消えた場合に備えて、コード全体をいかに掲載しておきます。 module.exports = leftpad; function leftpad (str, len, ch) { str = String(str); var i = -1; if
常用域でO(1)のleftpad - Qiita
'use strict'; var padStart = require("lodash").padStart; var spaces = [ '', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ']; var zeros = [ '', '0', '00', '000', '0000', '00000', '000000', '0000000', '00000000', '000000000', '0000000000', '00000000000', '000000000000', '0000000000000', '00000000000000', '000000000000000',
JavaScriptの文化とleftpadの話とpadStartについて - from scratch
無駄にラノベみたいに長いタイトル書いちゃったんですが、まぁやっぱり一言くらいは残しておくかと思ったので書きます。長いのでまとめだけでも見てもらえると良いかもしれません。 leftpadの話はかなり大事になっていて、Node.js界隈を中心としてその他のOSSをやっている全体的に話が波及しています。幾つかの記事を読みました。今回はJSの文化と歴史についてちょっとずつ書いていこうかなと思います。 本の虫: npmからkikとその他諸々が消されたまとめ 江添さんの話はすごくよくまとまっていて、ネタも含めた上で一番面白い話になっていました、ここで言われている下記の疑問に答えていこうと思います。 もっと憂うべきパッケージがある。isArrayだ。このパッケージは一日88万回もダウンロードされていて、2016年2月だけの一ヶ月間に1800万回もダウンロードされていて、72個ものNPMパッケージが依存し
left-padの文字列連結はクソではない - NullPointer's
例のleftpad, GCを虐めるためとかコンパイラの最適化を確認するために用意する、「無駄に一時オブジェクト量産するクソコードの典型例」みたいな実装なので、こんな小さい関数のために、信頼できない人のコードを、実装を見るでも無く、依存性追加してたってことで、— INADA Naoki (@methane) March 24, 2016 ここから始まる一連の、モジュールの依存性に関する議論はなかなか興味深いが、自分的に気になったのは以下の一節 GCを虐めるためとかコンパイラの最適化を確認するために用意する、「無駄に一時オブジェクト量産するクソコードの典型例」みたいな実装 ソースを見てみようか。 left-pad/index.js at 0e04eb4da3a99003c01392a55fa2fdb99db17641 · azer/left-pad · GitHub なるほど一見するとクソコー
「NW.js（node-webkit）」と「Electron」の違いと感想
ここ数年、「NW.js（旧node-webkit）」を触ってきました。 そして、先週の金曜日の夜から、今週の朝にかけて「Electron」で、ブログ更新用ソフトを作りました。 というわけで感想です。 ● 方向性がだいぶ違う 「NW.js」も「Electron」も、「node.js」＋「WebKit」なのですが、方向性が大きく違うと感じました。 「NW.js」は、既存のウェブアプリに「node.js」の機能を追加した印象です。 「Electron」は、「node.js」のプログラムから「WebKit」を呼び出したものです。 そういった違いが、色濃く表れるのは、複数ウィンドウを使う場合です。 「NW.js」だと、ウィンドウから、ウィンドウを呼び出すことになり、「最初のウィンドウを閉じたらどうなるの？」→「実行は続く」という、直感的ではない状態になります。 それに、aタグのtarget="_bl
デジタルをわかりやすく - catch.jp blog
フリーランスのテクニカルライター 可知 豊の個人ブログです。 IT・ビジネス・プログラミング学習などをテーマに、多くのメディアで記事を書いています。 このほかに、Webコンテンツや簡単なプログラムの作成、Webシステムやプログラミングのトレーニング支援、企業メディアの企画・制作・運営にたずさわってきました。 お仕事、絶賛募集中です。 Works 知る、読む、使う！ オープンソースライセンス 著書・実績 自己紹介 Blogs このブログの記事一覧 Heppocode Garage 人差し指でパソコン入力 そのほか ＊ 2024-09：ながらく、いくつかのWebサイトをWordPressで運営してきましたが、 静的サイトジェネレータPelicanを導入して記事を移行しました。 catch.jp blog catch.jp wiki オープンソース・ライセンスの談話室
There’s Math.random(), and then there’s Math.random() · V8
Show navigation Math.random() returns a Number value with positive sign, greater than or equal to 0 but less than 1, chosen randomly or pseudo-randomly with approximately uniform distribution over that range, using an implementation-dependent algorithm or strategy. This function takes no arguments. — ES 2015, section 20.2.2.27 Math.random() is the most well-known and frequently-used source of rand
Electron + React + Redux - KAYAC Engineers' Blog
JSで書くデスクトップアプリが熱い Electron 熱いです。 Atom を始め、Qiita の Kobito や Slack など、 十分に実用できるアプリケーションが登場しはじめています。 なにかと話題のRPGツクールMVは、NW.js（旧node-webkit）ですが、これもJSで書かれていますね。 NW.js は、その他、女の子といちゃこらする系のゲームでも使われています。 JS でデスクトップアプリを書いて、うん千万売り上げるのも、もはや絵空事ではありません。 今回は、Electron と Redux、React の組み合わせで、 デスクトップアプリを作るまでの、簡単なチュートリアルを書きます。 登場人物紹介 Electron Github が開発してる、JS でデスクトップアプリが書けるすごいやつ NW.js より活発そうですごい React Facebook 製のすごいやつ
HTMl5 CanvasでColor Cycling - Nothing ventured, nothing gained.
また、魅力的なHTML5デモが公開された。 その昔、Color Cyclingという技術があった。PCのビデオカードが256色しか同時に利用出来ないときに、その256色を動的に素早く切り替えることで多くの色を使えるようにする技術で90年代初頭まで多く使われていた。 参照: Wikipedia/Color Cycling（英語） 現在では32ビットのTrue Colorのビデオカードや3D環境が一般的になったためほとんど使われることは無い。しかし、モバイルやWebなどのように利用出来る色が制限された2D環境で、この技術が復活するかもしれないと考えて開発された魅力的なデモが公開された。これが本当にクールだ。 Color Cycle: True 8-bit Color Cycling with HTML5 デモでは上にある""をクリックするか下向きの矢印アイコンをクリックすることでほかのデモに切
Old School Color Cycling with HTML5 | EffectGames.com
Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript (ES5) でクラスを実現するための基本 - Qiita
【javascript】やさしいクラスの作り方 - Qiita
Three.js - examples
パーティクル編集ツール Particle Develop - ICS
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
