JavaScript 長いループ 分割 - hitode909の日記
ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
JavaScriptの非同期処理を理解する その2 〜Promise編〜 | さくらのナレッジ
こんにちは！小田島です。前回の「コールバック編」を納稿したとき、アイキャッチ画像はJavaScriptのロゴにタイトルの文字を入れただけというとんでもないやっつけ仕事だったのですが、さくナレ編集部の方に「シリーズで理解が深まる」というすごい煽り文句がついたとてもカッコいい画像に差し替えていただきました。アイキャッチ詐欺にならないようにがんばります。 非同期処理シリーズの2回目はPromiseについての説明です。前回はコールバックについて説明しましたが、Promiseを使うことでどのように便利になったのでしょうか。それでは見ていきましょう！今回はコードが多いのでかなり分量が多く感じられるかもしれませんが、実際はあまり大したことはありません。 今回の目的 今回説明するのはPromiseです。これはFutureパターン（Promiseパターン）というデザインパターンの一種で、ECMAScript
リーダブルコード 5-6章 コメントについて · GitHub
readable-code-chap5-6.md 5章 コメントすべきことを知る コメントの目的は書き手の意図を読み手に知らせることである コメントすべきでないことを知る コードを書いているときの自分の考えを記録する 読み手の立場になって何が必要かを考える コメントすべきではないこと パっとみて当たり前にわかることをコメントに書かない // 休日を計算する function caliculateHoliday() { ... } // 関数実行時の年の1/1から12/31まで、祝日を除く休日を計算する function caliculateHoliday() {....} コメントにパッと見でわからないことを書くようにしよう 関数名がひどい場合はコメントではなく関数名を書く // Kintoneのカスタマイズでコメントを128kbに制限する // コメントにはコメント内容、コメント時刻、コ
関数の仕様を正しく実装していることをどう保証するのか - $shibayu36->blog;
静的型チェックがあったらテストはあまり書かなくて良いのか - $shibayu36->blog; で静的型チェックがあったとしても、テストをあまり書かなくて良いわけではないという話を書いた。するとブコメでいろいろ意見をもらえた。これらの意見から、関数の仕様を正しく実装していることをどう保証するのかについてもう少し深く考えてみようと思い、その考えがまとまってきたので、ブログに書いておく。 一応前提として、今回の話は自分の経験とこれまでの本を読んだ知識を元に自分で考えたものであり、何かの理論に則って話しているわけではない。この部分が違うなどあれば突っ込みを受けたい。 今回考える仕様 このようなことを考える時、非常にシンプルに考えたほうが理解がしやすいので、以下の様な仕様を持つ関数addNaturalIntを考える。 関数addNaturalIntは正の整数を二つ受け取り、足しあわせて正の整数を
JavaScriptのクロージャは内部でどう機能するのか | POSTD
もうだいぶ前からすでに私はクロージャを使っています。使い方を学びましたが、実際にクロージャがどう機能するのか、また、使うと隠れたところで実際に何が起きるのかを明確に理解しているとは言えませんでした。そもそも、クロージャとは一体何なのでしょうか。 ウィキペディア はあまり役に立ちません。クロージャはいつ生成され、いつ削除されるのでしょうか。どのように実装されるべきなのでしょうか。 "use strict"; var myClosure = (function outerFunction() { var hidden = 1; return { inc: function innerFunction() { return hidden++; } }; }()); myClosure.inc(); // returns 1 myClosure.inc(); // returns 2 myClos
クラスの落とし穴1 - プロパティの初期化 - Qiita
クラスの落とし穴1 - プロパティの初期化 (この投稿) クラスの落とし穴2 - メソッドとクロージャ クラスの落とし穴3 - 継承 クラスの落とし穴4 - プライベート変数の実装 はじめに javascriptでもクラスを作成する事が多くなってきました。 しかし、「javascriptにはクラスがない」とよく言われ、実装側が擬似的にクラスを定義しています。 クライアントサイドで大規模開発が増えてきたため、オブジェクト指向の概念で実装したいと思っているのでしょう。 javascriptでは安易な疑似クラスの作成によって見事落とし穴にはまる事があります。 ここでは、本来javascriptにはないクラスをうまく実装する方法を順に追って説明します。 "落とし穴とは、 うまく動いているけど気がついていないだけで実はマズい実装の事 とします 簡単なクラスの実装 クラスの定義には幾つかの方法がありま
モダンJavaScript環境構築一歩目
JavaScriptの現状を支えるエコシステム群を軽く紹介して、モジュールについて少し掘り下げた勉強会
プログラミングとかウェブでよく出てくる小難しい英単語30選 - Dance with Tech
よくプログラマー（エンジニア）は、 数学が得意な人じゃないと出来ないとか言われたりしますが、 個人的には数学というより、 英語が出来る（好きな）人の方が有利だと思っています。 だってプログラミングってコメント以外英語ですし。 「なでしこ」とかはありますけどｗ 僕は学生時代、どちらかと言うと数学が苦手なタイプでしたが、 英語はわりと出来る方でした（というか好きだった）。 もちろん、数学も出来た方が有利に決まっていますが、 普通にご飯を食べていく分にはそんなに必要無いと思います。 ということで、 英語の意味を理解すると、仕事が更に捗るんじゃないかと思いまして、 プログラミングとかウェブで出てくるけど、 ちょっと意味が分かりづらい英単語30個をまとめてみました！ プログラミングで出てくる英単語30選 英単語読み方意味 allocate アロケート 割り当てる attr（attribute） アト
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
【導入決定！】PHP7で実装されるスカラー型宣言とは？ | 東北ギーク
* NaN でなく PHP_INT_MIN から PHP_INT_MAX までの範囲内の値に限る ** 数値形の文字列のみ。数値形の文字列に他の文字が続く場合も使えるが、 Notice が出る *** __toString メソッドを持つもののみ 弱い型検査モードで行われる暗黙の型変換は、PHP が従来他の構文（算術演算子や条件式、組み込み関数の呼び出しなど）で行ってきたのと同等のものです。 厳密モード 一方、厳密な型検査のモードを使う場合は、関数は宣言されたのと正確に一致する型のみを受け付けるようになります（int → float の拡大変換をのぞく）。 ファイルの先頭に declare(strict_types=1); と書くことで、そのファイル内での関数呼び出しの際に厳密モードでの型検査が行われるようになります*1。 以下のように使います。 <?php declare(strict_
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Architect Note
JavaScript難読化読経