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部 ユースケース」
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita
初心者が見た瞬間になるもの特集です。 小テクだったり、省略記法だったり、、 実際私も出会ってになりました！ 追記 即時関数のところで説明にある 他には、+や-等でも動きます。 の"等"が気になった方に朗報です。こちらの記事で"等"を知ることができます！！ [JavaScript] "!function() {}()"以外の即時関数を紹介するぜ よろしければ覗いてみてください！ !! is 何 booleanへの型変換。 例 const obj = { hoge: "hoge" } function hasHoge() { return !!obj.hoge // => true } 論理否定（！）を二つ繋げて、boolean への型変換をしています。 !の結果を!で評価しているんですね〜。 JSON.parse(JSON.stringify(obj)) is 何 ディープコピー。 例
![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f41f8fc8f5c58150b8766676dfe5b1c5bfeb140/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0zYmU5ODdjNjUyZjg2NDdkODA2NDVmN2QwNDI4NDhiNA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWFhMTA4ZTQ0M2JiMmI1NTI2NDc2ZmQzNzI5YzQ0NDI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Da816bfb051a3a0d8f1e62c8fc6a915b0)
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..in
マウスイベントで取得されるカーソル座標パラメータの整理(offset, page, screen, client) - Qiita
マウスイベントで取得されるカーソル座標パラメータの整理(offset, page, screen, client)JavaScriptHTML5jQuery はじめに もはや何番煎じかわかりませんが，jsのマウスイベントにて取得されるカーソル位置パラメータを図とサンプルを見ながら整理します．なぜ今さらこんな記事を書くかというとoffsetX,Yにて取得される値について長年勘違いしていたことが発覚したためです（恥ずかしい...）．そちらについては，こちらの記事を御覧ください， 図解でわかるカーソル座標パラメータ 例として，ページ中にあるid=containerの要素に対してマウスのイベントを付与した時を考えます．コードで書くなら例えば のような感じです． 得られるパラメータがそれぞれ表している値の意味を下図にのせました． event.offsetX / Y 要素内でのカーソル座標(マウスが載
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
論理演算子「&&」「||」について JavaScriptの基本である論理演算子の && || について、 根本的に勘違いをしていたことに最近気付いたので自戒の意味を込めてここに記します。 論理演算子の使い道 1. お馴染みの使い道「条件処理」 JavaScriptには皆さんご存知の通り論理演算子&& ||が存在します。 それぞれ「AND」「OR」という意味で、条件処理の中で使うことが多い演算子です。 // aとbに0または1を足し続ける // aとbのどちらかが最大値に達すると終了 var a = 0, b = 0, max = 50; // 条件式その１ AND while (a < max && b < max) { // 0または1を足す a += Math.round(Math.random()); b += Math.round(Math.random()); console.l
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
Read files in JavaScript Stay organized with collections Save and categorize content based on your preferences. How to select files, read file metadata and content, and monitor read progress. 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, uploading photos
オリジン間リソース共有 (CORS) - HTTP | MDN
HTTP ガイド リソースと URI ウェブ上のリソースの識別 データ URL MIME タイプ入門 よくある MIME タイプ www 付きと www なしの URL の選択 HTTP ガイド HTTP の基本 HTTP の概要 HTTP の進化 HTTP メッセージ 典型的な HTTP セッション HTTP/1.x のコネクション管理 プロトコルのアップグレードの仕組み HTTP セキュリティ Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-Content-Type-Options X-Frame-Options X-XSS-Protection Mozilla web security guidelines Mozilla Observatory HTTP アクセス制御 (CORS) HTTP
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ページを開く
mya-ake.com
Google Translate
JSLounge Archives
