MutationObserver
コンストラクター MutationObserver() DOM の変更が行われたときに指定されたコールバック関数を呼び出す新しい MutationObserver を生成して返します。 メソッド disconnect() MutationObserver のインスタンスが今後の通知を受け取ることを、 observe() が再び呼び出されるまで停止します。 observe() 指定したオプションに合う DOM の変更が発生したときに、コールバック関数を介して通知を受信し始めるように MutationObserver を構成します。 takeRecords() MutationObserver の通知キューから保留中の通知をすべて削除し、 MutationRecord の新しい配列 (Array) で返します。 Mutation Observer と resize イベントリスナーのカスタマイ
配列の重複をはじく、もしくは重複を取り出す - Qiita
var a = [1,2,3,3,2,2,5]; // 重複を削除したリスト var b = a.filter(function (x, i, self) { return self.indexOf(x) === i; }); // 重複のみをリスト var c = a.filter(function (x, i, self) { return self.indexOf(x) !== self.lastIndexOf(x); }); // 重複を検出したものを重複しないでリスト var d = a.filter(function (x, i, self) { return self.indexOf(x) === i && i !== self.lastIndexOf(x); }); console.log(a); // [ 1, 2, 3, 3, 2, 2, 5 ] console.log
Lazy Load(画像の遅延読み込み)を実装する方法
レイジーロード(遅延読み込み)とは、その名の通り、画像を遅れて読み込ませるテクニックのことです。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。「遅れて」というよりは、「適切なタイミングで」と言った方が正確でしょうか。さて、このことはどのような意味を持つでしょうか？ 転送量の節約ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問して「やっぱ止めた」とすぐに戻るボタンをクリックして帰った経験はありますよね。基本的に、ブラウザは訪れた時点で、ページの全ての画像を読み込みます。 このページに、仮に100枚の画像が掲載されていたとしたらどうでしょうか。ちょこっと訪問されるだけで、毎回、見られてもいない大量の画像の転送が発生してしまいます。余計な転送が発生することで、運営者側にとってはサーバーコストが増える、閲
onscroll - 要素のスクロール時に処理を行う方法 | JavaScript プログラミング解説
スクロール位置の取得 element.onscroll = function() { // スクロールされたピクセル数 var scroll = this.scrollTop; // スクロール範囲の最大のピクセル数 var range = this.scrollHeight - this.offsetHeight; } ドキュメントのスクロール位置 ドキュメントがスクロールされた位置 (scrollTop) を取得するとき、ブラウザによってそれを返すオブジェクトが異なります。よって次のように、2つのオブジェクトから取得するようにします。 window.onscroll = function() { var scrollTop = document.documentElement.scrollTop || // IE、Firefox、Opera document.body.scrollTo
JS 配列の重複を取り除きたい - かもメモ
配列の重複した値を削除したい時のメモ。 filterでループさせindexOfで値の重複をチェックするパターン array.indefOf(value)がvalue自身のインデックスと異なる場合は既に配列内に同じ値があるという判定 var arr = [0, 1, 2, 3, 4.1, true, false, 1, "2", "", 4.2, null, undefined, NaN, false]; function removeDuplicateValue(arr) { return arr.filter((val, i, self) => { return self.indexOf(val) === i; }); } console.log( removeDuplicateValue1(arr) ); // => [ 0, 1, 2, 3, 4.1, true, false, '2
ESLint 1.0.0新ルールまとめ - Qiita
こんにちは、@armorik83です。ESLint 1.0.0がリリースされました（今朝Twitterで気付いた）。以前.eslintrcを晒したあとあまり面倒を見てなかったので、これを機に動向を追ってみました。 1.0.0新ルールまとめとしましたが、前回の記事以降にリリースされたv0.21.0からv0.24.0も扱います。全ての変更点やBreaking Changeは扱わず、新ルールだけ取り上げます。 v0.21.0 (May 10) https://github.com/eslint/eslint/releases/tag/v0.21.0 dot-location http://eslint.org/docs/rules/dot-location
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
JavaScript - .eslintrc晒す - Qiita
【追記150803】ESLint v1.0.0がリリースされました。メジャーリリースに伴いBreaking Changeが入っていますので、下記のままでは使えないオプションが存在します。1.0.0での新ルールについてはこちらの記事でまとめています。本稿は記録のため、当時のまま残します。 どうも@armorik83です。ESLintのオプションを全部読んで吟味したので応酬を載せます。TypeScriptを辞めたというより、単機能ライブラリならES6の方が早く書けたという程度です。まさかりはブコメから。 小分け まずは小分けにして。見出し名は公式サイトと同じにしてあります。2がexit code 1投げるやつ、1はログのみ、0が無視。 Possible Errors
ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編] - Qiita
ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編] ※こちらは2015/9/25日の古い記事です。（ESLint v1.5.1 released 22 September 2015） 現時点(2019/9/25)ではESLint v6.4.0です。 最新のドキュメントを読みに行くことを強くオススメします。 (近いうち新たに加筆してこちらに更新する予定です) こんにちは。森田と申します。芸人をしています。今回は ESLintのエラールール。日本語「ざっくりしたの」ないのか、と思ってぐぐしてもなさそうなので自分の勉強のためにも書きました。 こちらの記事は数あるカテゴリーの中の「ベストプラクティス編」です。 他カテゴリーはこちら ESLintのエラールール。日本語ざっくり解説[可能性あるエラー編] ESLintのエラールール。日本語ざっくり解説[スタイル編] ESLintのエ
![ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b96e9e3b8f2a90e75f5e28673e4397df82afd59/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNjQzNzclMkZwcm9maWxlLWltYWdlcyUyRjE1NjEwMjcxMDE_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTg0ZjcxNjZhY2UzNWE1YTgwMGM0ODczMDgzMDZkN2U5%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D7524e75505a08e198507260c3a730951%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9RVNMaW50JUUzJTgxJUFFJUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgwJTgyJUU2JTk3JUE1JUU2JTlDJUFDJUU4JUFBJTlFJUUzJTgxJTk2JUUzJTgxJUEzJUUzJTgxJThGJUUzJTgyJThBJUU4JUE3JUEzJUU4JUFBJUFDJTVCJUUzJTgzJTk5JUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgzJTk3JUUzJTgzJUE5JUUzJTgyJUFGJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgyJUI5JUU3JUI3JUE4JTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MTFlZmY3NjRlNWIwMmJiNWJmYTJkZTVjMDU1ZjhiNzg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBNLUlTTyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWI4ODNjYTVhZWVlZTA2OTU1OWExNjRkZTMxM2QyYWRm%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De83855d2603c5c6eb0475aa09c739e2f)
【脱初心者JavaScript】名前空間のイロハ - Qiita
名前空間は、中規模以上のアプリを書くにあたって必須のパターンです。 JavaScriptでは、グローバルスコープを汚染することを防ぐ代わりに、 唯一のアプリケーションのグローバルオブジェクトを作成することが主流です。 また、プロトタイプチェーンを用いることによって、 モジュールコンテナを作成することもできます。 var MYAPP = {}; MYAPP.name = "My First SPA"; MYAPP.data = "2015/06/25"; MYAPP.Update = function(){ ... }; MYAPP.Delete = function(){ ... }; // オブジェクトのコンテナ MYAPP.modules = {}; MYAPP.modules.name = "My First SPA's first module"; MYAPP.modules.da
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
ふじこのプログラミング奮闘記
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」についてTweet どうも（ｏ´ω｀ｏ）ノ 今年もあと10週間ですねー。 今日はjQueryの、イベントのバブリングについてです。 バブリングの「バブル」は泡です。たぶん。 jQueryはHTMLで書かれた要素（DOM）を、以下のようにツリー形式で持っています。 そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。 これがイベントのバブリング（「伝達」とでも言うのかな）です。 クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。 イベントは子供から順番に起きます。 よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で 「return false;
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）
即時関数の構文 即時関数はスコープを汚染せずに新たなスコープを作成するための唯一の手段 即時関数が使われるケース まとめ JavaScriptには「即時関数」という構文があります。即時関数は関数を定義すると同時に実行するための構文で、この即時関数を使ってコードを書いたことのある方も多いのではないかと思います。 JavaScriptに慣れている方にとっては「何を今さら」といった書き出しかもしれませんが、私はこの即時関数を初めて知った時、その必要性がイマイチ見出せませんでした。それは、「関数を定義と同時に実行するのは分かるけど、別に普通に関数を定義して、その関数を呼び出せばいいじゃん」って思ったからです。 確かに、一度しか使われないような関数をいちいち名前付きで定義してそれを呼び出すというコードは冗長的かもしれません。そのような場合は即時関数を使った方がよりスマートなコードになるでしょう。です
strict モードへの移行 - JavaScript | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ��DView in English ��ZAlways switch to English JavaScript の厳格モード (Strict mode) は、 JavaScript の自由度を制限することにオプトインすることによって、暗黙のうちに Sloppy モードからオプトアウトする方法です。厳格モードは単なるサブセットではなく、通常のコードとは意図的に異なる意味を持っています。厳格モードに対応していないブラウザーは、厳格モードに対応しているブラウザーとは異なる動作をする可能性がありますので、厳格モードに関する側面に対応しているかどうかの機能テストを行わずに厳格モードを頼らないでください。厳格モードのコードと非厳格モードのコードは共存
JavaScriptにおけるvar/let/constの使い分け
JavaScriptの3つある変数宣言、varとletとconstは、よく混乱を生みます。どれも変数を宣言することに変わりはないので、違いがわかりにくいのです。このことが初学者を混乱させている場面をたびたび目にしますし、プログラミングに慣れ親しんだ人でも役割を意識しないまま書いていることがあります。 そこでこの記事では、3つの変数宣言の役割とその使い分けについて、それぞれ簡単に紹介してみます。 3種類の変数宣言とその使い分け var – 変数を宣言する varは、JavaScriptにおいて変数を宣言する上で、最も基本的な方法になります。varで宣言された変数は関数スコープとなり、宣言のスコープ先頭への巻き上げ（Hoisting）が行われます。（※変数のスコープおよび巻き上げについてはここでは解説しません。） var x = 10; x = 20; もともと、JavaScriptの変数宣言
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaTechnology Slot Online | Cara Daftar bermain Slot Online
jQueryのDeferredが便利過ぎた - Qiita
JavaScript つい忘れてしまう配列のソート方法 - Qiita
JavaScript (ES5) でクラスを実現するための基本 - Qiita
