ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
JsDoc Toolkitを使ってJavaScriptのAPI仕様書を作る（環境構築から出力まで） | DevelopersIO
そんな訳で、JsDocについて少し調べたので、備忘録としてここに残しておくとします。 はじめに - JsDocについて Java開発者の方々ならば、JavaDocというのは馴染み深いを通り越して、もはや聞き飽きているかもしれません。同様にFlashのActionScriptにはASDoc、PHPにはPHPDocなるものがあります。ちょっとした規模のアプリケーションを開発すると、後々の保守を考慮してこういったAPI仕様書を作成し、後から「あれ、ここの処理って何の為にあるんだっけ？」となっても、ソースコードを直接追いかけることなく、概要を大まかに確認できるようにしておくのが慣例かと思います。※あくまで慣例です。実際にやっているかどうかは・・・(ry JsDocは、名前のとおりJavaScriptのAPI仕様書を指し、JavaDocと同様にHTMLドキュメント形式で出力されたもので、Webブラウ
二章第一回 HTMLの木構造 — JavaScript初級者から中級者になろう — uhyohyo.net
二章第一回 HTMLの木構造このページの最終更新日：2017年6月7日 いよいよ、HTMLと本格的に提携していくことになります。第一章は、これからこの第二章以降で説明する内容を理解するための土台作りでした。第一章では「オブジェクト」について説明しましたが、実はまだまだあれは氷山の一角に過ぎません。表面に軽く触れただけの話です。オブジェクトについては第九章で更に深く解説します。 しかし、あれだけ理解すれば、とりあえずここからの話を理解するのにはひとまず十分です。 console.logを使おうところで、本題のHTMLの話に入る前に、便利なものをひとつ紹介しておきます。今までJavaScriptで何かをした結果を確認するのにalertを使っていましたが、これはいちいち消さないとプログラムが次に進まないしたいへん不便です。そこで、このような場合に便利なのがconsole.logです。 これがco
Closure Linterの使い方 - Google JavaScript スタイルガイド - 日本語訳
#divclass(page_title){ &this_page() } - このページは &blanklink(){http://code.google.com/intl/ja/closure/utilities/docs/linter_howto.html} の日本語訳です。 - &blanklink(Closure Linter){http://code.google.com/intl/ja/closure/utilities/index.html}はJavaScriptのコードスタイルがGoogleのスタイルガイドに適合しているかをチェックするツールで、Google自身が提供しています。またエラーを警告するだけでなく、エラー箇所を自動的に修正してくれる機能も持っています。 このドキュメントは Closure Linter のインストールと利用の仕方を解説するものです。 ** Cl
FLINTERS Engineer's Blog
2024-08-07 研修終了後ブログ BN研修の締めとして振り返り #エンジニア #新卒 #研修 2024-07-31 【24卒】FLINTERSエンジニア研修を終えて 研修 株式会社FLINTERSに新卒でエンジニアとして入社し、3ヶ月間の研修を終えたのでその概要をお伝えしようと思います。 #24卒 #25卒 #研修 #新卒 #新卒エンジニア 2024-07-24 雰囲気と研修内容：FLINTERSの新入社員の3ヶ月振り返り 2024年度BN研修まとめ 2024-06-21 Webフロントエンドプロダクト用にテスト戦略を考えた話 ブログ祭り梅雨 Webフロントエンドプロダクト用にテスト戦略を考えた話 2024-06-21 今期振り返り ブログ祭り梅雨 今期振り返り #今期の振り返り 2024-06-21 今期の振り返り AWS ブログ祭り梅雨 今期の振り返り #AWS 2024-06-
JavaScript Reference - MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �� ��View in English ��� ��Always switch to English JavaScript リファレンスは、 JavaScript 言語に関する事実の保管庫として機能します。言語全体がここで詳細に記述されています。 JavaScript のコードを書いていると、これらのページをよく参照することになります（だから「JavaScript リファレンス」という題名なのです）。 JavaScript 言語は、ブラウザーやサーバーサイドのスクリプトなど、何か大きな環境の中で使用されることを想定しています。ほとんどの場合、このリファレンスは環境に依存しないようにしており、ウェブブラウザー環境のみを対象としている訳ではありませ
関数 - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback 一般的に言うと、関数とは外部 (再帰の場合は内部) から呼び出すことのできる「サブプログラム」です。プログラムそのもののように、関数は関数本体 (function body) と呼ばれる連続した文で構成されます。関数には引数として値を渡すことができ、関数は値を返すことができます。 JavaScri
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
React.jsとFlux - Qiita
今回はReact.jsとも関わりがあるFluxについて紹介したいと思います。 Flux is Architecture ↑の図はfacebookのfluxのリポジトリにあるものですが、Fluxは上記のようなArchitectureの名称です。facebook/fluxのrepositoryに行ってもらうとわかるのですが、実装としてはDispatcherの部分があるだけです。 Unidirectional data flow 先ほどの図を見てもらうとわかる通り、Fluxではアプリケーションの複雑さをなくすため、データの流れを一方向にします。 そのため全体の処理の流れはわかりやすくなりますが、Angular.jsなどで書くときに比べて冗長に感じることもあるかと思います。 しかしながら単純なデータの流れを作ることで、ある程度の規模になってアプリケーションが複雑化してもデータやイベントの流れがスパ
FacebookのFluxアーキテクチャの始め方 Part 1 | POSTD
私のように、Reactを使ってより進んだことがしたいと考えたなら、おそらく Flux に注目した経験があると思います。ざっと目を通してタブを閉じ、JavaScript開発者としての自分の人生を見直したことでしょう。 もしReactになじみがなければ、私の記事 「React入門」 を読んでみてください。 Fluxとは？ Fluxは、遠目には始めるために複雑な手順を踏まなければいけないように映ります。しかし、 GitHubにあるexample を見てみれば、これがどのように機能するのかが実に明確になってきます。 簡単に言うと、Fluxは美化された 出版-購読型モデル のアーキテクチャです。データはシステム内を一方向に流れ、そこから様々な利用者が必要に応じてデータを取得します。これについて考えるには、私たちの体に例えてみると簡単です。 イベント – 血液 血液は私たちの体内を一方向に流れています
Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる - undefined
ブラウザ上もでrequire使いたい 現状Coffeeのclassを異なるファイルから参照するにはwindow.HogeClassとか@HogeClassとかでグローバル変数をってたんだけどBrowserifyを使えばNode.js のモジュールのようにrequireで読み込みことができるっぽい。参考記事を見ながら簡単なサンプルを実際に作ってみた。 grunt-cli のインストール npm install -g grunt-cli package.jsonを作成 npm init 対話形式でpackage.jsonを作成。 必要な情報を入力してください。 プロジェクトに必要な情報を記述するjsonファイルが生成されます。 browserify grunt grunt-browserifyのインストール npm install browserify grunt grunt-browseri
本当のClosure Compilerをお見せしますよ。
天下一altJS武闘会での発表 http://connpass.com/event/6402/ Google Closure Compilerの最新事情について
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
ES6+カジュアルトークの発表資料です。 http://connpass.com/event/9113/
iOS8 で IndexedDB を使うための 5 つの注意点 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 遅ればせながら、 iOS8 がついにリリースされましたね。 OS レベルでのたくさんの機能追加にあわせて、 Web ブラウザ (Safari) の HTML5 対応も大きく進展しました。そのひとつが、クライアントサイドの NoSQL データベースである IndexedDB のサポートです。 IndexedDB を使うことで、Webブラウザ側に大量のデータをキャッシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://lostlinksearch.net/blog/2013/05/android%E3%81%AEwebview%E3%81%8B%E3%82%89%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%92%E6%A4%9C%E7%9F%A5%E3%81%99%E3%82%8B/
GitHub - facebookarchive/flux: Application Architecture for Building User Interfaces
Fluxアーキテクチャの覚え書きを書いた - saneyuki_s log
Amazon.co.jp: JavaScript 第6版: デ-ヴィド・フラナガン, 村上列: 本
Amazon.co.jp: JavaScriptリファレンス 第6版: デ-ヴィド・フラナガン, 木下哲也: 本
Amazon.co.jp: パーフェクトJavaScript (PERFECT SERIES 4): 井上誠一郎, 土江拓郎, 浜辺将太: 本
