setTimeout を完璧に理解する
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
正式仕様リリース！ JavaScriptの最新仕様ES2022で追加された「全」新機能
JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。 これまでの仕様はES2021でした。 本日6月22日、ES2022は正式仕様として承認され、ES2022が最新仕様となりました。 22.06.2022 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2022の全機能が使えます。 本記事では、ES2022すべての新機能を紹介します。「何が使えるようになったのか？」「どうしてそれが必要だったのか？」が、できるだけわかりやすいように解説しました
Amazon Prime Videoが動画再生にWebAssemblyを採用。再生デバイス上にWasm VMをデプロイ、高フレームレートなど実現
これだけ多種多様なデバイスに対して、ログイン画面やパーソナライズされたポータル画面、動画の再生などの機能を実現するために、Amazon Prime VideoのアプリケーションはC++で開発されたJavaScript VMと、その上で動くJavaScriptアプリケーションの2つから構成されています。 そしてそれぞれが必要に応じてデバイスにダウンロードされ、実行されます。 特にJavaScriptのアプリケーション部分は実行時にダウンロードされ実行されることで、機能追加などの変更やバグフィクスが容易になっていると説明されています。 プロトタイプのWebAssembly化で10倍から25倍高速に Amazon.comがこのAmazon Prime VideoのアプリケーションにWebAssemblyの採用を検討し始めたのは2020年8月とのことです。 同社はプロトタイプとして低レイヤのJav
JavaScript Primer 迷わないための入門書
JavaScript Primer 迷わないための入門書 azu, Suguru Inatomi アスキードワンゴ 3,344円 (3,040円+税) 変化に対応できる基礎を身につけよう! JavaScriptは激しく変化している言語です。このような変化に対応できる基礎を身に付けられるよう、単に書き方を解説するのではなく、プログラミングの現場で直面する問題を自分自身で解決するのに必要な調査方法についても焦点を当てています。 関連サイト本書の関連ページが用意されています。 JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？ | Web Scratch内容紹介変化に対応できる基礎を身につけよう! 本書の「第1部 基本文法」では、JavaScriptの文法と機能について、実際の利用方法を示しながら解説しています。また「第2部 ユースケース」
TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
お断り (2022-12-13 追記) この記事はマニフェストのバージョンが 2 の時点で作成したものですが、マニフェストの最新バージョンは 3 であり、Chrome Web Store においてはバージョン 2 の拡張機能が すでに受け付けられない状態 です。 それでもなおこの記事を参照される場合は、公式の マイグレーションガイド も合わせてご確認いただければと思います。 Overview https://developer.chrome.com/extensions/manifest についての自分用おぼえがきです。 マニフェストファイルの書き方にフォーカスしていますので、個々の用語の説明などは端折ったりしています。 記載が必須の項目 以下の項目は、マニフェストファイルに必須です。 manifest_version マニフェストファイル自身のバージョンです。 現在のバージョンは 2 で
HYDRA
live coding networked visuals /////////////////////////////////////////////////////////// Hydra is a platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer. To get started: Close this window Change some numbers Type Ctrl + Shift + Enter /////////////////////////////////////////////////////////// Built using WebR
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
ESLint対応物語 ~no-restricted-syntax~ - Qiita
むちゃくちゃ間が空いちゃいましたが、明日会社でLTやるので書きますw 今回は**「no-restricted-syntax」=「制限構文を使っちゃだめ」** というルールの紹介と対応方法をまとめたいと思います。 具体的にはどんなもの？ no-restricted-syntax このルール自体に制約はなく、オプションで指定した構文を禁止する、といったもののようです。 ちなみに eslint-config-airbnb v14.1.0ではこんな感じで設定されています。 // disallow certain syntax forms // http://eslint.org/docs/rules/no-restricted-syntax 'no-restricted-syntax': [ 'error', { selector: 'ForInStatement', message: 'for.
マウスイベントで取得されるカーソル座標パラメータの整理(offset, page, screen, client) - Qiita
はじめに もはや何番煎じかわかりませんが，jsのマウスイベントにて取得されるカーソル位置パラメータを図とサンプルを見ながら整理します．なぜ今さらこんな記事を書くかというとoffsetX,Yにて取得される値について長年勘違いしていたことが発覚したためです（恥ずかしい...）．そちらについては，こちらの記事を御覧ください， 図解でわかるカーソル座標パラメータ 例として，ページ中にあるid=containerの要素に対してマウスのイベントを付与した時を考えます．コードで書くなら例えば のような感じです． 得られるパラメータがそれぞれ表している値の意味を下図にのせました． event.offsetX / Y 要素内でのカーソル座標(マウスが載っているDOMの左上を原点とした座標)を取得． event.clientX / Y ブラウザウィンドウ内でのカーソル座標を取得．ウィンドウの左上が常に (0,
JavaScriptでHSVからRGBに変換
以下のようなカラーサンプルを作りたかったので、HSL and HSV（wikipedia）の計算式を参考にHSVからRGBに変換するプログラムをJavaScriptで書いてみました。 実際の計算式は？ HSL and HSV（wikipedia）で公開されている計算式は以下のような感じです。 （「HSL and HSV」（5 Feb 2017, at 22:40 UTC）『ウィキペディア』より引用） 計算式中の「if 0 ≤ H' ≤ 1」の部分ですが、HSV色空間（ウィキペディア日本語版）では「if 0 ≤ H' ＜ 1」なっていましたので、今回は「if 0 ≤ H' ＜ 1」を使うことにしました。それがどれほどの影響を与えるのかは正直よくわかりませんが…。 HSVからRGBへの変換プログラム function hsvToRgb(H,S,V) { //https://en.wikiped
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
オリジン間リソース共有 (CORS) - HTTP | MDN
HTTPガイドHTTP の概要HTTP の進化典型的な HTTP セッションHTTP メッセージMIME タイプ（IANA メディア種別）よくある MIME タイプHTTP の圧縮HTTP キャッシュHTTP 認証HTTP Cookie の使用HTTP のリダイレクトHTTP 条件付きリクエストHTTP 範囲リクエストHTTP クライアントヒントCompression Dictionary Transport Experimental Network Error Logging Experimental コンテンツネゴシエーション既定の Accept 値の一覧ユーザーエージェント文字列を用いたブラウザーの判定HTTP/1.x のコネクション管理プロトコルのアップグレードの仕組みプロキシーサーバーとトンネリングプロキシー自動設定ファイルHTTP セキュリティHTTP Observatory実
XMLHttpRequestを使ったCSRF対策 - 葉っぱ日記
合わせて読んでください：Flashと特定ブラウザの組み合わせでcross originでカスタムヘッダ付与が出来てしまう問題が未だに直っていない話 (2014-02/07) XMLHttpRequestを使うことで、Cookieやリファラ、hidden内のトークンを使用せずにシンプルにCSRF対策が行える。POSTするJavaScriptは以下の通り。(2013/03/04:コード一部修正) function post(){ var s = "mail=" + encodeURIComponent( document.getElementById("mail").value ) + "&msg=" + encodeURIComponent( document.getElementById("msg").value ); var xhr = new XMLHttpRequest(); xhr
async/await地獄 - Qiita
地獄を抜けたらそこは地獄だった。 以下はHow to avoid (or escape) async/await hellという記事の日本語訳です。 How to avoid (or escape) async/await hell async/awaitはたしかに我々をコールバック地獄から解放してくれました。 しかし、それは恐るべき地獄の、ほんのプレリュードにすぎなかったのです。 そう、async/await地獄の誕生です。 この記事ではasync/await地獄が何であるか、そしてそれから逃れるためのヒントをいくつか紹介します。 What is async/await hell 非同期JavaScriptを使用する際、しばしば複数の関数呼び出しすべてにawaitをつけがちです。 これによってパフォーマンス上の問題が発生します。 あるステートメントは別に手前のステートメントに依存はしてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd012de25b70691c33af879e24161878bd017409/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY1Mjg1MjYlMkZkZTFjOTBmNmE3MjJhODY1ZDI3ZmFkODk4N2RhNTU0ZDhhODY1ZGJmJTJGbGFyZ2UucG5nJTNGMTU4MjI2MzEwMj9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz1lNDMwM2E1MmY5YjQyOWZlYTUyNTI2MzcyZjhlMGRiYg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D665c9263d8fde7538f5a183884a145e5%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MjYyNDg4MTg3OWIwZmRkYzgzYjZmYTZiNzUxYTExOTc%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MjlhYjk2ZGU2MDY4ZTQwZTI4YjM3ZTExNWI2MWQ1NQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4921f7432a9b21f0593f66774c8857d0)
mya-ake.com
Google Translate
JSLounge Archives
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
