You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
site: http://develo.org/2014/04/29/1614.html サイトをpjaxを使って実装して思ったのですが、ページ移動がものすごくはやくて快適!今後サイト新しく作るときはpushStateとAjaxの組み合わせ検討してみてもよいかなぁって思いました! pushStateとは Ajaxなどで、非同期なサイトを作る際に、 アドレスが変更されない問題をjsで解消してくれる便利なやつです。 少し前の話だとFlashサイトを作るときに#(ハッシュ)をつけてurlを管理したりしていました。 pushStateを使うと普通にページ遷移しているようにアドレスを変更することができます! Ajaxとは ページを遷移せずに情報だけを非同期でとってきてサイトに描画する仕組みのことです。 pjax pushStateとAjax 2つを合わせてつくった仕組みのことです。 実際に作るにあた
JavaScriptの関数の基本事項 備忘&復習も兼ねて、JavaScriptの関数の基本的な使い方や特徴をまとめてみたいと思います。 (途中で確認のためのコードを挟んでいますが、出力結果は省略してあります) 1.リテラルを介して作成される リテラルの4つの構成要素 JavaScriptの関数は以下の4つの要素で構成されたリテラルによって作成される(関数宣言)。 予約語 function 関数名(省略可能) JavaScriptの識別子として有効な名前である必要がある 関数名をつけておくと、外部から呼び出すことができるだけでなく、内部で再帰的に自身を呼び出すことも可能になる 関数名が省略された場合は 無名関数 とよばれる () で囲まれたカンマ区切りの関数のパラメータのリスト リストは空でもよいが、()は必ずつける {} で囲まれた命令文 空でもよいが、{}は必ずつける
コンストラクター MutationObserver() DOM の変更が行われたときに指定されたコールバック関数を呼び出す新しい MutationObserver を生成して返します。 メソッド disconnect() MutationObserver のインスタンスが今後の通知を受け取ることを、 observe() が再び呼び出されるまで停止します。 observe() 指定したオプションに合う DOM の変更が発生したときに、コールバック関数を介して通知を受信し始めるように MutationObserver を構成します。 takeRecords() MutationObserver の通知キューから保留中の通知をすべて削除し、 MutationRecord の新しい配列 (Array) で返します。 Mutation Observer と resize イベントリスナーのカスタマイ
有給を駆使し一足早くクリスマス休暇に突入、ヒャッホイ Ingress やるぜーと 意気込んでいた矢先ノロウイルスにやられダウンした。かなしい。鎮まれ俺の胃袋・・・ そんな腹痛日和の気晴らしとして今日は Garbage Collection Advent Calendar に参加してみることにしました。 Advent Calendar 初体験につきよくわかってないけど勝手に参加していいんですよね? GC というとジェネレーショナルだのパラレルコンカレントだのといった話が目立ちがちだけれど、 現実の問題というかブラウザを相手にするとそれ以外の細々とした面倒が目につく。 GC つき言語 (JavaScript) のコードと C++ で書かれたコードとの連携は最たる面倒の1つ。 たとえば WebKit の DOM は C++ で実装されており、 C++ のオブジェクトは JavaScript 処理
身近なところで話題になったので。 過去にも、「empty() とか remove() するより、DOMオブジェクトにアクセスして innerHTML = ”” した方が速いよ!」というブログエントリを投下する方が多かったのですが、「必ずAPIを使う」こと。 理由は、「メモリリークの温床だから」 GitHub で manipulation.js のソース読めば判るとおり、結構頻繁に jQuery.cleanData() が実行されてます。― jQuery.cleanData() メソッドは、data() API として独自に実装された「各要素と紐づけられるキー・バリューストア(メモリストア)」に対する処理なので、innerHTML を使う場合でも、jQuery.cleanData() を使うなら、まぁ問題無いです。 要するに、jQuery (Zeptoみたいな類似ライブラリもそう)は、常にH
PhantomJSはすごく便利なのですが、ちょろっと使いたいだけのときにスクリプトファイルを用意するのは若干面倒です。対話モード(REPL)も用意されていますが、対話的に使うだけならChromeの方が使いやすい場面が多いです。 今回の想定シーンは、「GitHubでStarしてくれた人の一覧が欲しい」というようなケース。時々、Issueで全員に連絡したいことがありますよね。↓ こういうやつ。 @user1, @user2, @user3, ... GitHubだとJSONを返すAPIが用意されているので、それを使います。 コンソールを開く 新規タブを開いて、about:blankに移動します。まっさらな状態にするのがポイントです。 jQueryを仕込む PhantomJSを使う場合もそうですが、素のJavaScriptだと面倒が多いので、jQueryを仕込みます。次の2行を実行すればOK。
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
歴史認識 だいたい以下のような流れだと認識している。 IE8以前を含むECMAScript 3暗黒時代があった この時代をベースにベストプラクティスが構築 + HTML5ブームが発生した 暗黒時代なんで結構つらいし、IE9じゃないとECMAScript 5使えないし、結局辛い CoffeeScriptを筆頭としたaltJS一派に救いを求めた(結局Coffeeは一過性のカフェインだったわけだけど) 気がついたらECMAScript 6が来そうになっていた ES6でのsyntaxの拡張・標準ライブラリの増強はカッコいい 気がついたらES5当たり前、ES6も使えそうな世界が来そうになっていた(希望的観測が多分に含まれているのは暗黙の了解と化している) ES6、altJSの次のナウい世界として注目を集める だいたいこんな感じで、ECMAScript 5を用いたベストプラクティス的な物が存在しない、
本稿では,switch(true) イディオムの是非について論じて行きたいと思います.なお,話をややこしくしないために,本稿では JavaScript における switch(true) イディオムのみについて考察します.(当然ですが,言語によって switch のシンタックスおよびセマンティクスは大きく異なります.例えば ruby の case はいわゆる C-like な switch とは全く異なり,フォールスルーがない点や === 演算子による柔軟性がある点などにおいて同列に語れるものではありません.) 賛否両論の switch(true) switch(true) イディオムに関しては,様々な意見があります.記事の末尾に,各所から集めて来た意見をまとめておきますので参考にしてください.ここで私が述べたいことは,このイディオムに対しては とにかく賛否両論ある ということです. いっ
はじめに スタイルガイド自体は各々のルールでかなりの数が存在しますが、 下記のおすすめ4選を押さえておけば問題ないと思います。 おすすめ4選 Google JavaScript Style Guide Googleによる、最も代表的なスタイルガイドです。 時間のない方は、これだけにでも目を通しておく事をおすすめします。 JavaScriptのBad Partsについても述べられています。 英語:https://google.github.io/styleguide/javascriptguide.xml 日本語:http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html Closure Linterを使用することで、チームでの統一がしやすくなります。 グーグル製JavaScript文法チェッカー jQuery JavaScript Styl
Chrome拡張を作っていると,最近のモダンなWebサイトが後から動的にDOM要素を追加してきて困ることがある.毎度対処方法をぐぐっているので,ここにまとめておく. 追加される要素にイベントハンドラを付加したい jQueryのonメソッドにselectorを渡すことで,あとから動的に追加された子要素に対してもイベントを発火することができる. liveメソッドでも同様のことが出来たが,1.7で廃止された. 要素が追加されたことそのものを検出する DOMNodeInserted: 非推奨 要素が追加されたときに発火するDOMNodeInsertedというイベントが存在する.少し前に試した時はモダンなブラウザでは動いた. DOMに要素が挿入される度にイベントを起こすDOMNodeInsertedの扱い方 - 三等兵 にあるように,処理をブロックしないように非同期処理を行うべきだろう. 現在,DO
Many apps and sites build their own custom controls with HTML and JavaScript. These controls are not intrinsic like the ones provided by the input element. To work well with the rest of the web platform, these controls must be able to adapt to content changes, respond to events, and handle user interaction. Apps and sites need to monitor the DOM for mutations and respond accordingly. In Internet E
はじめに この記事は、 JavaScript/ES6 promisesについてを理解するために読んだ方がよいと思われる記事やスライド等を紹介しています。 PromisesやDeferredといった言葉を非同期処理の話などで聞いた事があるかもしれませんが、 現在Promisesは次のECMAScriptの言語仕様として策定が進められています。 ECMAScript Language Specification ECMA-262 6th Edition – DRAFT domenic/promises-unwrapping まだES6は策定段階ですが、既にPromisesについてはpolyfillとして利用できるライブラリ等もあり、また他のライブラリ内でもjQuery.Deferred()やAngularの$q等類似する実装が存在します。 そのため、Generators等に比べると今すぐ使える
今さらやけど、まとめ。 注:自分用まとめのため、下記リンクとか見ていただいた方が幸せになれるかもしれません。 参考:Hello There! - Google Chrome メッセージングとかそういった高尚な内容にも踏み込まないレベル。 最低限の構成 Chrome拡張!とは言えそんな身構える必要はなくて、最低限のファイルさえ用意すれば、ちゃんと動いてくれます。 manifest.json (アイコン) ほんと、最小限すぎるけどコレだけでも立派な拡張として認識してくれますw manifest.json { // Require! "manifest_version": 2, "name": "myEx", "version": "1.0", // Recommend. "description": "My first extension.", "icons": { "16": "icons/
便利便利と言われつつも使ってみないと良さがわからないのがDeferred Object。身近なところで言うと、$.ajaxが返す、doneとかfailとかを呼べるアレもDeferred Objectです。使いこなすと色々な処理をコールバックを渡すよりもうちょっと綺麗に書けるようになります。 ということで最近プロジェクトで使ったパターンを中心に例をあげてみます。 コードはすべてCoffeeScriptの擬似コードです。 まず最初に便利な書き方を覚える Deferred Objectは$.Deferred()で作るわけですが、これには「作られたDeferred Object自体を引数にとる関数」を引数として渡せます。これを利用すると d = $.Deferred() doSomethingWithCallback -> d.resolve() d を $.Deferred (d) -> doS
jQueryを用いて書いたコードと同等な働きをするコードをjQuery抜きで書くとどのようになるのかを示したWebサイト「You Might Not Need jQuery」(jQueryは必要ないかも)が先日話題になりました(はてなブックマークも180以上付いています)。 ちょうどこのWebサイトを話題にした記事「Choosing Vanilla JavaScript」が、Webデザイナ向けに情報発信をしている著名なWebサイト、A List Apartに掲載されていました。 Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことを示しています。 この記事は何でもjQueryを使うのではなく、正しい選択をしようというテーマの内容になっており、参考になりそうだったので翻訳
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用:InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く