Promiseに関して
どうもフロントエンドエンジニアのoreoです。今回は、Promiseについて再整理します。 １ 同期処理と非同期処理 ブラウザにおいて、JavaScriptは主にメインスレッド上で実行されます。処理はコールスタックに積まれ、後入れ先だし(LIFO)で、実行されています。同期処理では、一つの処理が完了するまでは、次の処理に移行しません。 一方、非同期処理は、処理がコールスタックから一時的に切り離され、コールバックキュー(※)に処理が格納されます。コールスタックに処理が積まれている状態では、コールバックキューに格納された処理は待ちの状態になります。コールスタックの処理が空になれば、コールバックキューに格納されている処理が、イベントループによって、先入れ先出し(FIFO)でコールスタックに積まれ処理されます。 ※コールバックキューについて コールバックキューにはマクロタスク、マイクロタスクの2種
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
onchange
onchange Use glob patterns to watch file sets and run a command when anything is added, changed or deleted. Install
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
JavaScriptはthisで挫折して初めて成長する - Qiita
なぜJavaScriptのthisは難しいのか Q. なんでみんなthisでこんなに苦しんでいるの？ 答えは簡単で、場所によってthisが何を指すのかが変わるからです。 特にこの問題はjQueryで起きやすいです。 かなり稀ではありますが、TypeScriptを使ってもやらかす人がたまにいます。 例として、以下のようなコードを考えてみます。 $(function(){ console.log(this);// －(1) $("input[type=checkbox]").each(function(){ console.log(this);// －(2) $(this).parent().find("label").each(function(){ console.log(this); // －(3) $(this).addClass("requied"); }); }); })
JavaScriptの口寄せ的な存在？ call()メソッド - Qiita
はじめに JavaScriptのメソッドcall()とapply()の使い方、何ができるのか？サンプル（簡単な使用例）、thisの参照先の考え方（windowとは？）についてまとめています。 call()は呼び出すメソッド call()は使いたい関数を、thisの参照先を変えて、呼び出すメソッドです。 call()は単語が意味するように何かを呼び出すメソッド 呼び出す相手は使いたい関数 = function 普通の関数呼び出しとの違いは関数のthisの参照先を変えられる 何ができるのか？ ここまでの説明では結局、何が出来るのか？ピンとこないと思います。 call()で出来ることをロールプレイングゲームで例えると、「呪文を使えない戦士が、僧侶の能力を自らに取り込んで、回復呪文を使う」。自分が持っていない誰かのスキルであっても、まるで口寄せのように使うことができる。そんなイメージかと思います。
JavaScript における配列コピー - Qiita
JavaScript における配列コピーの問題 JavaScript における配列（ array ）はオブジェクトのため参照コピーされる。 つまり、コピー先の配列を変更すると、コピー元の配列が変更されてしまうといった事象が発生する。 例えば次のようになる。 array = [1,2,3]; arrayCopy = array; arrayCopy[0] = 4; console.log(arrayCopy); // [4,2,3] console.log(array); // [4,2,3] : コピー元の値も変更される
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 (
JSONをインタラクティブに掘り下げるコマンド jid - Qiita
はじめに 私はCLIを利用することが多いのもあり、 jq は今やJSONを利用する上は欠かせないツールとなっています。 ただ ・ jqのクエリを書くことなれるまで少し時間がかかる ・ クエリを書くことに慣れたとしても、初見だったりして 構造を把握していないJSONに関しては非常に手間 でみたいな感じだなと思っていました。 インタラクティブに jq のクエリを書いていければいいのに、と思ってツールを探しました(CLI限定で)が、あまり良さそうなものが見つかりませんでした。 そこで、Golangで何か作ってみたいのもあったので、作ったのが jid というツールです。 リポジトリ Github : simeji/jid インストール 以下からバイナリダウンロードしてzip解凍するだけです。 https://github.com/simeji/jid/releases Macの場合はbrewで入れ
【JS・TS】コーディングTips集 - Qiita
概要 JavaScript/TypeScriptを書く中で、自分自身の気づき、他の方から頂いたアドバイスをメモとして残してきました。 その中で、使用頻度が高そうで、知っていれば誰でも簡単に実践できる物を抜粋して記事にしました。 ですので、主にJavaScript/TypeScriptの使用歴が浅い(プログラミングの歴が浅い)方向けに少しでも参考になれば幸いと考えています。 (※JS/TSに限った事では無いものも含まれます。また、こちらに記載した記法が必ずしも優れていると言うわけではありません。本記事はあくまでも、JS・TSを利用した際にこんな記法もあるよという紹介が主要点です。) 早期returnを利用する 条件を満たす場合に直ぐに return することで、コードのネストを減らし、コードの見通しを良くするテクニックです。 簡単な例としまして下記のコードが、 const checkNumb
なぜ我々は頑なにforを避けるのか - Qiita
動機 前回の記事を投稿したことを某SNSで通知したところ、そのSNSでこんなコメントをいただいた。転記する許可を取ったわけでは無いので私なりに要約させていただくと、 なぜそんなトリッキーな書き方をしてまでforを使うのを避けるのか そんな書き方をして可読性を下げるくらいなら素直にforを使う方が良い ということだと理解している。 なるほど、一理ありそうだ。しかし一方で、前回貼ったStackOverflowのQ&Aはなかなかの人気記事（質問に1243ポイント、回答に最大で1559ポイント）なので「多少トリッキーなことをしてでもforを書きたくない！！」という意見をもつプログラマも一定以上いるのだろう。当然私もその1人だ。 ということで、この記事で「なぜそこまで意固地になってまでforを書きたくないのか」を説明することにする。 尚、今回は前回の記事つながりで言語はJavaScriptを使うが、
<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
JavaScript正規表現テスター - instant tools
JavaScript用の正規表現チェッカーです。JavaScriptの正規表現を使った検索と置換を試せます。 「置換後文字列」欄に入力した場合だけ、replaceを使用し置換を行った結果を表示します (つまり、対象文字列を削除する置換はできませんが、細かいことは気にしないでください)。 コメント 正規表現は基本的機能は共通する部分が多いのですが、言語によって仕様が異なる部分が少なからずあります。 このチェッカーで動いても、JavaScipr以外の言語で動くとは限りません。 JavaScipr以外で使用する場合には参考程度に考えてください。 言語による違いは、必ず各言語の公式のドキュメントを確認することをお勧めします。 正規表現に関するお勧めの書籍は、佐藤竜一さん著の「正規表現辞典」です。 言語による違いも丁寧に説明されています。竜一さんは以前の職場の尊敬する先輩でもあります。 もともと20
JavaScript つい忘れてしまう配列のソート方法 - Qiita
var a = [5,3,9,1,10] a.sort(function(a,b){ if( a < b ) return -1; if( a > b ) return 1; return 0; }); 結果:1,3,5,9,10 var a = [5,3,9,1,10] a.sort(function(a,b){ if( a > b ) return -1; if( a < b ) return 1; return 0; }); 結果:10,9,5,3,1 //フルーツの名前と価格。価格でソートする var fruits = [ {name:"apple",price:100}, {name:"orange",price:98}, {name:"banana",price:50}, {name:"melon",price:500}, {name:"mango",price:398} ]
JavaScriptの型判定 typeof はもう使用しない！では、何を使ってますか？ - Qiita
typeof 使ってますか？ typeof って世間一般的に (恐らく) あまり使ってないんじゃないかと思います。 使ってない理由としては私的には以下のような理由です。 typeof null が "object" になる。 typeof [] や {} が "object" になる。 typeof new Number(0) とかも "object" になっちゃう。 まったく、直観的にイメージする判定ができないので使っていません。(…たまに使うかな) ただ、かなり前ですが小飼弾さんという方が typeof を再定義されていたのでこれを一瞬だけ使ってみたこともあります。 javascript - typeof()を再発明する javascript - 関数名の取得とtypeof()の再々発明 (そうとう古い記事なので参考にする場合には時代背景に考慮を) 今なら Array だけは Arra
分割代入とスプレッド演算子 - 30歳からのプログラミング
分割代入 分割代入とは、配列やオブジェクトから値を取り出し、それを個別の変数に代入すること。 デストラクチャリング、Destructuring assignmentとも呼ばれる。 まずは配列を分割代入する方法から見ていく。 let [a,b] = [1,9]; console.log(a,b); // 1 9 let x, y; let array = ['hoge', 'fuga']; [x, y] = array; console.log(x); // hoge console.log(y); // fuga 左オペランドに変数を配列形式で記述し、右オペランドに配列を記述する。 そうすると右オペランドの配列から1つずつ要素を取り出し、左オペランドの変数に代入していく。 なお、特定の要素をスキップすることも出来る。 let array = [1,2,3,4]; let [a, , ,b]
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Double Scrollbar For Scrollable Container - jQuery DoubleScroll
JavaScript 今ドキな書き方 ES2020
Sortable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace