はてなブックマーク

Note: Qiita のアップデートにより現在は動作しない。 現状ではユーザーの「LGTMした記事」「フォローしているユーザー」「コメント履歴」「編集リクエスト履歴」を見るためにはいちいち「...」ボタンをクリックしなければいけない。これは面倒なので、より快適に閲覧できるようにナビゲーションタブを追加するUserScriptを作成した。 インストールにはUserScript管理用の拡張機能が必要。 Chrome: Tampermonkey Firefox: Tampermonkey, Greasemonkey // ==UserScript== // @name Qiita User Page Nav // @namespace https://qiita.com/righteous // @version 0.1 // @description Adds an navigation t

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

イントロダクション JavaScript を使う上で非同期処理、特に promise を理解することは非常に重要である。async/await も promise の上に成り立っているので、promise を理解して始めて正しく使うことができる。この記事では JavaScript における非同期処理をどのくらい理解できているかをチェックするための問題を紹介する。 それぞれのコードについて、実行したときにコンソールに何がどういう順序で出力されるかを考えてみよう。なお、コードはブラウザーで実行するものとし、解答は ECMAScript Specification と HTML Living Standard に沿ったものとなっている。 🚗 初級 問題1.1 const p1 = Promise.resolve(1) const p2 = p1.then(x => x * 2) console

必要な知識 JavaScript の基本的な構文、関数、プロパティ、配列 イントロ 例えば「JavaScript で Web ページ上に <a> 要素が何個あるか数えろ」と言われたら、どのようなコードを書くだろうか？もちろん getElementsByTagName() などを使えば簡単だが、それらを使わずに自分で DOM ツリー上を探索して数えるアルゴリズムを実装するとしたら、どうするだろうか？ DOM ツリーというのがどういうものかわからない人も、構造自体はシンプルなので調べてみてほしい。<div> や <a> といったものは要素といい、要素の中にさらに別の要素(子供要素 / child element)がいくつか含まれたり含まれなかったりする。 このような問題は、再帰関数を使えば簡潔かつ直感的なコードで表現することができる。この記事では JavaScript を用いて説明するが、同じ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? イントロ MDN はもはや業界標準の JavaScript リファレンスサイトであるが、JavaScript の syntax (構文) や低レベルな動作については情報が載っていないことがある。このような場合は仕様に立ち返ってみる必要があるが、ECMAScript の仕様は非常に分かりにくい。この記事では、ECMAScript の仕様がどういうルールで書かれているか、どう読めばいいかを軽く説明する。 if 文の syntax の仕様ってどうなってるの？ if 文は statement1 であるから、"13 ECMAScript Lang

*アプリケーション自体は公開される 各サービスの特徴 CodeSandbox メジャーなフレームワークのテンプレートが用意されており、すばやく開発を始められる。他の人が CodeSandbox で作成したプロジェクトを Fork できるのも便利。Visual Studio Code と同じ Monaco というエディターをベースにしているため、オートコンプリート機能が充実しており、同様のショートカットを使えるので普段 VSCode を使用している人には使いやすいだろう。ただし拡張機能は使えない。 本質的に異なる2種類の開発環境が用意されている。 Client Environment ビルド処理を含め完全にブラウザ内で実行される いったんエディターを開けばインターネットに繋がらなくなっても開発を続けられる(ただし NPM パッケージの追加には当然インターネット接続が必要) Webpack の

【JavaScript】マウスによるクリックと element.click() ではリスナーの実行のされ方が違った【非同期処理】 概要 テストなどにおいてJavaScriptから擬似的に要素をクリックするために、click() メソッドや dispatchEvent() メソッドを使用したことがあるかもしれない。これらは実は非同期処理に関して"本当のマウスクリック"とは異なる振る舞いをすることがある。これを理解するには task、microtask などの JavaScript の非同期処理の実行モデルについて知る必要がある。 ちなみに、完全にユーザーの操作をシミュレートしたい場合は puppeteer のような直接ブラウザを操作するツールを使うといいだろう。 よく知られている違い 本題の前に、本当のクリックと click メソッドの分かりやすい違いを2つあげる。 違い1: mousedo

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 npm に初めて触れるときは、package.json がどういう役割をもっているのか、パッケージをインポートするとはどういうことなのかなど分からないことだらけであり、筆者も少しずつ調べては試すことを繰り返した記憶がある。これから Node.js を学ぼうという人にはこのような部分でつまづいてほしくないため、この記事では npm を使う上で必要な概念的知識を説明する。この記事を読めばスムーズに Node.js の学習が始められると思われる。 NPM とは NPM と名のつくものは実は 2 つあり、ひとつはオンライン上のパッケージレ