Class構文について - JS.next
概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp
[JavaScript] newは大事だよ！ / LiosK-free Blog
2010-07-19 カテゴリ: Client Side タグ: JavaScript トラックバック JavaScriptのnewって何？一体何なの？という話 - 愛と勇気と缶ビール クラスってものはJavaScriptにはないはずなのに、 new ClassName();と書くとあたかもClassNameクラスのオブジェクトのインスタンスが生成され、それが返ってくるかのような挙動をしている。 これは気持ち悪い。言語仕様としてはクラスは本来存在しないのに、クラスのようなものが導入されている。まともな神経を持った人間なら、一体 new演算子って何なの？という疑問を持つのが当たり前である。 こんな扱いを受けているnewがあまりにも不憫で涙した＞＜ newはprototype-basedなJavaScriptを書くための唯一の手段[1]で、真にJavaScriptらしいコードを書くためには欠か
写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
2-1. リサイズ処理 Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
jThree Class Tokyo #1 に行ってきました | takemikami's note
10/26(日)に【たった5時間でWebGLをマスターするjQueryユーザーのための勉強会】jThree Class Tokyo #1 というイベントに行ってきました。 jThree Class Tokyo #1 http://jthree.doorkeeper.jp/events/16100 会場は、渋谷のmixiさんでした。会場には、モンスト１周年のポスターが貼られていました。 当日の流れは、jThreeで作った作品の紹介、jThreeの使い方の概要、チーム毎に分かれて実際に作品を作ってみるという流れでした。 ちなみに次回は、来月(11/22)に開催予定とのことです。 https://atnd.org/events/58240 jThreeで作った作品の紹介URLメモをとっていたものだけの紹介になってしまいますが、jThreeを使うと、次のような作品がthree.jsよりも簡潔なプロ
JavaScript：undefined値の判定
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書
Vue.js で 複数のViewModelを連携させる - kitak blog
追記: 2016/04/28 1.xのVueでは、Reactのようにpropsを利用することでコンポーネント間で値の受け渡しを行うことができます。 また2.0では、$dispatch, $broadcastは非推奨になるので、注意してください。 refs: 2.0 features · vuejs/vue Wiki · GitHub こんにちは。りんご と にんじん と 生姜の入ったジュースを飲んでいます、きたけーです。 今日はVue.js で 複数のViewModelの連携について考えてみます。 VueはViewModel間の親子関係を定義することができますが、今回考えるのは(DOMで)親子関係がなく「リストからひとつの項目を選択したときに、その項目の詳細を別の要素で表示する」ようなケースです。 べたに書くと、こんなかんじになります(Coffeeです)。 listVM = new Vue
【JavaScript 】プロトタイプを中心に。Object.prototype.toString.call の理由。 - せかいや
■topic summary study about JavaScript prototype. (not prototype.js) JavaScript 難しい。。 Objectプロトタイプによって継承されたプロパティはenumerableではない enumerableではないため、for in文には出現しない。 var map={}; for (var key in map){ console.log(key); }何も出力されない 存在を確認する場合はgetOwnPropertyNamesを使う。 Object.getOwnPropertyNames(Object.prototype);■実行結果 ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf", "
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
Home - Browserscope
Disclosure: Aussie Hosting is community-run. We sometimes earn a commission when you buy hosting through our links. Learn more. On Jan 21st of 2020, BrowerScope has joined forces with Aussie Hosting. Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers. Unfortunately as of
BrowserifyからWebpackへの移行時の注意点 - Qiita
思い立ったが吉日ということで、プロジェクトのモジュール管理をRequire.jsからBrowserifyへと移行し、その直後にWebpackに移行しました。もうちょっと考えてツールを選ぼうと思います。 さて、Require.jsからBrowserifyへ変えた理由は、シンタックスをCommonJS的に書けるようになって、全体がシンプルになるから、という理由でしたが、BrowserifyからWebpackへの移行は、もうちょっと切ない理由での移行になりました。 Webpackとは ドキュメントも若干わかりづらいですが充実しており、基本的にここだけで必要な情報はほとんど得られます。 なのでこちらをどうぞ・・・じゃさすがにあれなので、ドキュメントに書いてある、作られた動機などを若干紹介します。 今はモジュールシステムがいろいろある CommonJS AMD <script> タグ ES6 Mod
iOS7.1のMobile Safariでアドレスバーを隠す方法 - インターファーム開発部ブログ
こんにちは、河森です。 今日はリリースされたばかりのiOS7.1に搭載されているMobile Safariについて書こうと思います。 以前のアドレスバー隠し iOS6.xまではページの読み込みが完了した後に、 JavaScriptにて縦にスクロールさせることでアドレスバーを隠すというやり方がありました。 iOS7.0ではどうなったのか 以前まで使えていたやり方は通用しなくなり、 ユーザーがページをスクロールしない限りは、 フルスクリーンにすることは出来なくなってしました。 これにより、iScrollやSencha Touchなどのライブラリやフレームワークを利用したり、CSSの-webkit-overflow-scrolling: touch;などでページのスクロールを制御している場合は、表示領域が狭いままという問題がありました。 iOS7.0では開発者主導でアドレバスバーが消せなくなった
Server Sent Events(SSE)の使いどころと使い方 | GREE Engineering
Flameの箱を捨ててしまったためどうやって送り返すか困っています。@kyo_agoです。 今日は2014年6月にβ公開したGREEチャットで通信に使用しているSSEを紹介したいと思います。 SSEとは SSEとはServer-Sent Eventsの略でW3Cで提案されているhtml5関連APIの一種です。 これはサーバとの通信やJavaScript APIを中心としたもので、サーバからPush通信を行うための仕様です。 サーバからPush通信に関してはこれまでもCometやWebSocketが存在しましたが、SSEは互換性や効率などの点でそれ以外の技術に対する特徴があります。 ここからは具体的な仕様や、実際に使用した場合の感想などを紹介したいと思います。 通信方式 SSEはHTTP/1.1を使用し、Content-Type: text/event-streamで通信を行います。 基本的
Navigation TimingとDom processing phase
Navigation Timingの仕様では、ナビゲーションや要素にアクセスするタイミングの情報を得ることができる。このNavigation Timingの情報を表示するには、ブラウザのデベロッパーツールなどのコンソールで、window.performance.timingを実行する。現在のサポートブラウザはCan I use… Support tables for HTML5, CSS3, etcの通り。 取得できる情報は下の画像のグラフのような値。最初の値であるnavigationStartは、ひとつ前のDocumentをunloadする作業を開始した直後に発生する（前のDocumentがなければfetchStartと同じになる）。そして、リダイレクトが必要なリダイレクトの時間、新しいDocumentの取得をし始めたらfetchStart、domainのlookup、サーバーとの接続、
Vue.js概要？ - Qiita
Vue.js とは 原作者である Evan You氏 が中心となって開発中のクライアント サイドJavaScirpt(JS)フレームワークです。 MVC の派生種である、GUIライブラリに適した MVVM を設計基盤と して採用し、構築されています。 MVVM を採用していること が、構文の理解しやすさに繋がって います。 MVVM を採用したフレームワークでは、表示そのものであるView、 表示するデータ 及び データを操作する手続き をひとまとめにした View Model(VM)、が舞台上の役者です、それらを管理する コントローラ(Controller)は、存在するものの、黒子のような 存在で、ユーザからは隠蔽されているため、コードを書く際に 意識する必要はありません。 公式サイトで Vue.js の特徴は Approachable、Performant、Versatile という３
『フロントチューニンガソン 最速を目指すには』
11:10～ 課題ページの確認＆PageSpeed Insightsの実行目的：チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20～ 画像ファイルの最適化目的：画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FINAL FANTASY Record Keeper の作り方
Bibi | EPUB Reader on your website. — ビビ。EPUB リーダを、あなたのウェブサイトに。
GitHub - petehunt/webpack-howto
モバイル時代のWebパフォーマンス
