DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
勉強会資料シェア Getting Started with RequireJS
げりんぐすたーてっど うぃず りくわぃあーじぇーぇす ということで、社内勉強会でRequireJSの入門資料をこさえたのでシェア。 利用したデモファイルセット http://d.aho.mu/S4mh なんとなくRequireJSが動くセットです。スライド中のr.jsによるビルドコマンドや、gruntを利用したビルドも試せるようになっています。 おさえるべき要点 いくつかの要点だけ記事内に文字列でおこしておきまする。 モジュラーと依存関係 Webサイト → Webアプリ への流れが明確になってきてフロントエンドが複雑化してきている今、1つのJSファイルにつらつらとCSSのようなノリで書き連ねる時代は終わりつつあります。 ParisJS #10 : RequireJS このあたりについては、上記の素晴らしいスライドから、Figureを拝借しました。個々のJavaScriptの粒度が揃えてモジ
Require.js を使ってみる - Memo
メモ。 いい加減やらないと行けないと思いつつ、二回ほど試して上手く行かなくて放置してたので再入門した。 ディレクトリ構成 ├── app.js ├── entities ├── libs │ ├── backbone-0.9.9-min.js │ ├── bootstrap-2.2.2-min.js │ ├── jquery-1.8.2-min.js │ ├── jquery-layout-1.3.0-30.77.js │ ├── jquery-ui-1.9.1.custom.js │ ├── jquery.jsPlumb-1.3.16-all.js │ ├── micro-log.js │ ├── moment-1.7.0-min.js │ ├── require-2.1.2-min.js │ └── underscore-1.4.3-min.js ├── main.js ├── mod
[JS] JavaScriptをモジュール分割して開発できるRequireJSに入門 - YoheiM .NET
こんにちは、@yoheiMuneです。 Webアプリケーションを作成する際に、最近良く利用するrequireJSというJavaScriptフレームワーク。 基礎から学んだことがなかったので、今回ブログに入門内容を纏めてみました。 RequireJSとは requireJSのWebページには、以下のような説明がされています。 RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quali
![[JS] JavaScriptをモジュール分割して開発できるRequireJSに入門 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/6796529debcc61a5574243be4d93ba3b1623d345/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F188.jpg)
斉藤祐也の海外WEBテク定点観測＜Issue.3-2013/08/03-2013/08/16＞
斉藤祐也の海外WEBテク定点観測＜Issue.3-2013/08/03-2013/08/16＞ 斉藤 祐也（株式会社リッチメディア） Bret Victor氏によるプログラミングの未来について、Trent Walton氏によるユーザーエンゲージメントを高めるデザイン、そしてBoris Smus氏による思いがけないデバイス連携方法など、14日間のWeb開発最新ニュース合計21件を紹介します！ 注目ニュースピックアップ プログラミングが迎えるべき未来 – Bret Victor 原題: The Future of Programming スライド/リファレンス インターネットが誕生してから約20年。コンピューターが身近なものになってからも、まだ決して長い時間が経ったとは言えない。iPadやiPod nanoの初期ユーザーインターフェイスコンセプトをデザインしたことで有名なBret Victor
04 | 8月 | 2013 | nacika.com
夜です。今回は何を思ったのか、backbone.jsの公式ページを眺めるという行為に及んでみたいと思います。 ちょっと見てみると、backbone.jsのルーティングがなんか便利そうじゃないですか。pushState触らなくていいとか！ ajax使うにはもうbackboneは手放せない存在なんじゃないでしょうか。githubは違うプラグイン使っているみたいですが… 公式ページ。backbone.jsの配布ページとマニュアルページがひとつに繋がっているタイプ。Ctrl+Fで検索しやすいのでなかなかいいかも。 IntroductionGoogle翻訳を使ってIntroductionを読んでみます。要約すると(確実に翻訳ミスがあります) jQueryをDOMを直接操作してHTMLを動的に動かす開発をしてるんでしょうけど、古いよフロントエンドとサーバー間でデータの受け渡しに四苦八苦してるBackb
JavaScriptコードのパフォーマンス比較ができるWebサービス「jsPerf」の使い方
自分が書いたJavaScriptのコードスニペットに対してどのコードが早いのかベンチマークを比較することができるWebサービスであるjsPerfの紹介と使い方。JavaScriptでは同じ機能を実現するための方法は様々であり、どのコードが優れているのかを調べる方法としてプロファイラなどを利用することがあります。しかし、JavaScriptはブラウザ毎によっても速度が変わることが多いため、ブラウザ依存のツールだと比較しにくくなるため、ブラウザ上でテストコードを実行し、それらのベンチマークを簡単に記録、比較できるサービスがjsPerfです。 jsPerfの比較方法 jsPerfの内部ではBenchmark JSというベンチマークライブラリが使用されています。(jsPerfの運営者が作成している) jsPerfの計測方法は一定時間内にどれくらいコードスニペット部が実行できたのかで比較します。その
Backbone.js入門: 初学者の為のロードマップ | mawatari.jp
最近、JavaScriptを多用するWebアプリケーションの開発に携わる機会が増えてきました。 jQueryのイベントハンドラをベタに書いていくのは、規模が小さいうちは良いのですが、機能追加・仕様変更等が多発すると少々面倒なことになります。このまま大きくなっていくと破綻が目に見えているので、構造化されたアプリケーションを作りたいと思いBackbone.jsを学び始めました。 Backbone.js 公式サイト 7月上旬から学び始めたので、まだ20日程度ですが、その中で学んだこと等を紹介します。これから勉強を始めてみようと思う人の参考になれば、幸いです。 以下の内容は、Backbone.jsの熟練者が指南しているわけではないことを予めご了承ください。ちなみに、平日の夜と、時間が取れるときの週末を使って勉強して、イベントサービスのWebAPIを串刺し検索するアプリ等を作るくらいには、Backb
Backbone.js ワインセラーチュートリアル – 第1部：はじめに | Adobe Developer Connection
JavaScriptの基礎の理解 サンプルファイル： GitHubからワインセラーアプリケーションのパート1のソースコードをダウンロードします。このアプリケーションを実行するには、RESTfulサービスが必要です。PHPバージョン（Slimフレームワークを使用）は、ダウンロードの一部として提供されます。ワインセラーアプリケーションの様々なバージョンをダウンロードできます。GitHubからこのアプリケーションのJavaバックエンド（JAX-RSおよびJerseyを使用）バージョンをダウンロードします。このアプリケーションのJavaバージョンについては、私のブログの記事「Using Backbone.js with a RESTful Java Back-End」をお読みください。non-BackboneのJavaバックエンドまたはPHPバックエンドをダウンロードします。 JavaScript
Backbone.js入門 「Events」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。この記事でいえば、bindは無くなり、現在ではonやlistenToが使われています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） ネタ切れ感が否めないBackbone.js Advent Calendarですが、今回から何回かに分けて懇切丁寧な入門記事を書いていこうと思います。 以下のように書き進めていく予定です。 Events View Model ViewとModelの連携 Collection ViewとModelとCollectionの連携 RouterとHistory なおここで扱うBackbone.jsのバージョンは0.5.3です。 Backbone.js入門 「Events」 Backbone.jsの
Backbone.jsのソースコードを読んだ
日本語のアノテーションがついているソースコードを読んだので、ちょっとわかりにくかったあたりをメモっておく。 コールバックリスト(107行目) リスト構造にしてあんのかなと思ったがtailってなんだろうと思ったら最後尾を常に指すようにしているらしい。 while (event = events.shift()) { list = calls[event]; node = list ? list.tail : {}; node.next = tail = {}; node.context = context; node.callback = callback; calls[event] = {tail: tail, next: list ? list.next : node}; } これは最後尾のobjectのnextとtailが同じ物を指すようにしているのでさくっと最後に空のオブジェクトの参
試して学ぶ Backbone.js入門 | Remote TestKit
Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsの概要から、インストール方法、Modelの基本を説明していきます。 はじめに Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsはその名が示す通り、Webアプリケーションにアーキテクチャという背骨を提供することを目的としたライブラリです。直ぐに複雑なスパゲッティコードになりがちなWebアプリケーションに、Backbone.jsが提供するEvent, Model, Collection, View, Routerというコンポーネントを使うことで、Webアプリケーションに一定の構造を与えることが可能になります。 例：Backbone.jsによるアーキテクチャイメージ Backbone.jsによるWebアプリケーションの一例 様々なJavaScri
MVCパターンでアプリケーションを構築する（Backbone.js）
本コーナーは、技術評論社発行の書籍『JavaScriptライブラリ実践活用［厳選111］』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。 『JavaScriptライブラリ実践活用［厳選111］』の詳細や購入は技術評論社のサイトや目次ページをご覧ください。 Backbone.jsはクライアントサイドMVCフレームワークの定番ライブラリの1つです。プレゼンテーションをView（ビュー）に、ビジネスロジック（ドメイン）をModel（モデル）に定義するスタイルで処理を記述します。このことにより、コードの保守性、再利用性、テスト可能性などを向上させることができます。 名称： Backbone.js 分類： フレームワーク URL： http://backbonejs.org/ 関連ファイル： backbone-0.9.9.js
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）
こんにちは、橋本です。 前回にひきつづき、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。 assert count debug dir dirxml error group groupCollapsed groupEnd info log markTimeline profile profileEnd time timeEnd timeStamp trace warn そのうち前回は、assertメソッドからgroupEndメソッドまで見て行きました。 今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。 infoメソッド console.info(messa
『スマートフォンで動くリアルタイム3Dグラフィック』
はじめまして。 アメーバ事業本部コア室コアディベロップメントグループの新屋です。 コア室では3Dアニメーションライブラリの開発を行っています。 リアルタイム・プリレンダ問わず3Dモーショングラフィックが好きで趣味でも3Dの制作をしています。プリレンダはTAKCOMさん、WOWのdaihei shibataさん、ogaoooooさん、リアルタイムはMasato Tsutsuiさん等の作品が好きです。 リアルタイム3D 昨今のスマートフォンの処理能力の向上に伴い、webブラウザでも一昔前にPCで動作していたようなリッチなコンテンツも高速に処理できるようになりました。 スマホサービスでは必ずと言っていい程CSSやjavascriptでのUI・演出アニメーションが組込まれています。 そうしたアニメーションの表現力を引き上げる方法の一つとしてリアルタイム3Dを紹介します。 リアルタイム3Dを扱う言語
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsdares
Loading...
I am mitsuruog: Backbone.js
javascriptで数字を3桁ずつカンマで区切る | laciport