Polyfill.io
Filter PolyfillsFilter the polyfills in the "Available Polyfills" list.Available PolyfillsCheck the boxes of the polyfills or polyfill-sets you want to have in your bundle. defaultIncluded PolyfillsArray.fromArray.isArrayArray.ofArray.prototype.everyArray.prototype.fillArray.prototype.filterArray.prototype.forEachArray.prototype.indexOfArray.prototype.lastIndexOfArray.prototype.mapArray.prototype.
JavaScript／TypeScript開発のためのオールインワンキット「Bun 1.0」がリリース
Bunは、JavaScriptの優れた点をすべて捨てることなく、遅さと複雑さを排除することを目的に開発されており、任意のライブラリやフレームワークの動作が可能となり、使い慣れたツールを使って開発を行うことができる。 一方で、BunはNode.jsの代替となり、トランスパイラなしで各種ファイルの実行が可能であり、クラス最高のパフォーマンスとesbuild互換のプラグインAPIを備えたJavaScriptバンドラとして各種バンドラを置き換えられる。さらに、npm互換のパッケージマネージャであり、Jest互換のテストランナであり、高速なJavaScriptランタイムでもある。 これまで、BunではmacOSとLinux用のネイティブビルドのみを用意し、Windowsで利用する場合はWindows Subsystem for Linuxが必要だったが、「Bun 1.0」ではWindows版の実験的
JavaScriptのUIフレームワーク「Svelte 4」正式リリース。パッケージサイズが10MBから3MBへ大幅縮小、ハイドレーションコードも高速に
JavaScriptのUIフレームワーク「Svelte 4」正式リリース。パッケージサイズが10MBから3MBへ大幅縮小、ハイドレーションコードも高速に JavaScriptのUIフレームワーク「Svelte」の最新版となる「Svelte 4」が正式にリリースされました。 https://t.co/9qz0sDglCe — Svelte 4 Ever (@SvelteSociety) June 22, 2023 Svelteは読みやすく簡潔なコードでWebアプリケーションのユーザーインターフェイスを構成できるフレームワークです。Stack Overflowの調査では開発者の人気が急速に高まっていることでも注目されています。 Svelteの最大の特徴はコンパイラであるということです。UIフレームワークは、なんらかのライブラリをアプリケーションに同梱することが一般的ですが、Svelteではコー
JavaScriptのtypeofには5種類のobject型があるので注意
typeofには5種類のobject型がある JavaScriptではtypeof演算子を使うとデータ型を調べることができます。 console.log(typeof 123) // => number console.log(typeof 'foo') // => string console.log(typeof true) // => boolean console.log(typeof undefined) // => undefined console.log(typeof function() {}) // => function console.log(typeof Symbol('bar')) // => symbol console.log(typeof 9876543210n) // => bigint
1分でできるJavaScriptで国民の祝日を判定する方法
JavaScriptで国民の祝日を判定 JavaScriptのnew Dateによる日付の処理をしている際に国民の祝日を判定したいことがあります。 たとえば2018年1月1日(月)のような月〜金の曜日でも祝日の場合は(月)のように赤くするなどの処理です。 JavaScriptにはgetHolidayはない JavaScriptには曜日を数値で取得するgetDayはあるが祝日を取得するgetHolidayのようなものはない。 そのため祝日のデータをあらかじめ用意しておく必要がある。 祝日のデータは自分で作成しない 祝日のデータを自分で作成して判定に使用している人をたまに見かけるが、祝日は毎年変わるしデータを自分で作成するのは手間がかかる。 間違った祝日データを作成してしまう可能性もあるので自作は避けたほうがよい。 内閣府から祝日のデータをダウンロード 内閣府のWebサイトには国民の祝日につい
キャプチャグループを設定してパターンの一部にマッチした文字列を取得する
正規表現のパターンの中にキャプチャグループを設定することで、パターン全体にマッチした文字列とは別に、パターンの中の一部分にマッチした文字列を取得することができます。ここでは JavaScript の正規表現でキャプチャグループを利用する方法について解説します。
Cookie属性 HttpOnlyとSecure - Qiita
Cookie属性としてこれを付与するとJavaScriptからアクセスできなくなる。 → Cookieに格納されたセッションIDをJSで盗もうとするのを防げたりする。 → Httpでしか送信できないとか、そういう意味ではない。
JavaScript | localStorageへのデータ保存と取得・破棄、注意点など | 1 NOTES
JavaScriptを使ってlocalStorageにデータを保存する方法と、保存したデータを取得、または保存されているデータを破棄する方法です。 また、有効期限やデータの保存量制限、その他注意点も紹介しています。 localStorageが使えるか確認するlocalStorageの処理を実装する場合、window.localStorageでアクセスしているブラウザがlocalStorageが使えるか確認処理を記述して、使える場合のみに処理を実装します。 if (window.localStorage) { //localStorageの処理 }localStorageへデータを保存するlocalStorageへデータを保存するにはlocalStorage.setItem()を利用します。 localStorage.setItem()は保存するデータのキー名と文字列データを設定して実行しま
TypeScript: ESLintで`_`を変数に含めた時に`no-unused-vars`のルールを無効化する方法MEMO - Madogiwa Blog
Vue.jsのsetupのprops等、引数を使わないけど型定義だけ設定しときたい場合等、no-unused-varsを無効化したいケースがあります。 github.com 毎回eslint-disable-lineを使うのも手間なので、他の静的解析のツールの慣習に従って_始まりの場合は許容したかったのですが意外と簡単にできたのでメモ やり方 やり方は簡単で以下のような設定を入れるだけです。 "rules": { "@typescript-eslint/no-unused-vars": [ "warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_", "caughtErrorsIgnorePattern": "^_", "destructuredArrayIgnorePattern": "^_" } ] }, argsIgn
あなたが知らないであろう15個の強力なJavaScriptのテクニック🗡🔈🔥
はじめに この記事はこちらの記事の和訳となります。 なお、著者には許可をいただいております。是非原文もご覧ください。 拙訳なので、ご指摘などあればお待ちしております。 Javascriptのバグ修正や答えを求めてGoogleやStackOverflowを探し回るのは楽しくないでしょう🏴☠️。 この記事では、生産性⚡を最大化し、苦痛🩸を最小化する、20個（訳註:正確には15個）の短く、パワフルなJavaScriptのテクニックを紹介します。 それではコードを見ていきましょう🤘 配列の重複を除去 配列から重複した要素を除去します。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a',
配列の分割代入 (destructuring assignment) | TypeScript入門『サバイバルTypeScript』
配列の分割代入JavaScriptでは、配列から要素を取り出す方法のひとつに、array[1]のようにインデックスでアクセスする方法があります。この方法とは別に、分割代入(destructuring assignment)という方法を使っても、配列要素にアクセスできます。 たとえば、[1, 2, 3, 4, 5]のような配列から、最初の3要素を取り出して変数に代入するには次のように書きます。
My new error...
2023 年度の僕のエラーハンドリング について書きたい。 昨日Safe Data Fetching in Modern JavaScriptを読んでいて、fetch に限った話ではないが一家言ある内容だったので書きたくなった。 おそらくやりすぎだとか非効率と言われる点はあると思うので、みんなの一家言も教えて欲しい。 対象は Typescript での サーバー開発想定だが、TS であればクライアント開発にもほとんどに当てはまる話だと思う。 例外のスローではなく Result 型を使う Result は失敗するかもしれないという文脈を与えてくれる型 エラーハンドリングの戦略として例外を投げるのではなく、Result 型を返すやり方がある。 Result 型というのは export type Result<T, E> = Ok<T> | Err<E>; export interface Ok
【JavaScript】非同期処理のasync/awaitはPromiseの書き換えということを理解しておきたい
【JavaScript】非同期処理のasync/awaitはPromiseの書き換えということを理解しておきたい 2021年8月25日 2021年8月25日 プログラミング, JavaScript こんにちは。なんだか久々の投稿となってしまいました。 JavaScriptを使用してコードを書いていると、ほとんどの場合で利用することになる、非同期処理についての記事となります。 非同期処理の1つであるPromiseについて理解した上で、それを簡潔に書けるasync/await構文の紹介もしています。 JavaScriptを始めたてですと、このあたりでつまづくこともあるかもしれませんが、何となくでコードを書かないようにしっかりと、async/awaitはPromiseの書き換えということを理解して行きましょう。
history.back() でページを戻ったときの JavaScript の挙動 - 無駄と文化
「ページ A」から「ページ B」へ遷移した後に「ページ B」で hidtory.back() が実行され「ページ A」に戻ってきたとき、「ページ A」で走っていたスクリプトの挙動について考えよう。 ちなみにブラウザの「戻る」ボタンでページを戻ったときにも全く同じ議論が通じる。 TL;DR ページ A で window.addEventListener('unload', ...) されているときは、JavaScript の状態はリセットされ再実行される ページ A で window.addEventListener('unload', ...) されていないときは、JavaScript の状態はリセットされずに再開される 下記の参考ページを読んで nmi.jp hidtory.back() 後に JavaScript の挙動おかしくなりがち 長年 hidtory.back() 後の Jav
Promise.all と Promise.allSettled の違いを理解して適切に使い分けましょう
🌼 はじめに 実はpromise.allSettledは使ったことはありません！が、今後使いたい場面がありそうなのではっきり整理しておきたいと思います。 1. Promise.all Promise.allは引数として受け取ったPromiseがすべて成功(fulfilled)したら解決されるプロミスに結果値の配列を返し、一つでも失敗したら残ったPromiseは実行せずすぐエラー処理に移ります。 MDNからサンプルコードをもらってきました。 まずすべてのPromiseが成功する場合です。成功した結果値の配列を返してますね。このとき配列の順番は実行完了順ではなく引数で渡された順と同じになります。 const promise1 = Promise.resolve(3); const promise2 = 42; const promise3 = new Promise((resolve, re
throttleとdebounce
throttleとdebounceといきなり言われてピンとくる人もそうでない人も、ここらでおさらいしませんか？ という回です。これらが何なのか、どう使うのか、どう実装するのかを今一度確認していきましょう。 なぜ今更こんなことをするのかというと、自分が先日忘れていたからです😳 ナニコレ throttleとdebounceとは、簡単に言うと間引き処理の一種です。連続して大量に繰り返される処理を間引いて負荷を軽減させたりするときに使います。 throttle 連続して大量に繰り返される処理を一定感覚で間引くものです。 よく使われるのはscrollイベントです。スクロールイベントをすべてハンドリングすると処理回数が多くなり、場合によってはスクロールがもっさりしてしまいますよね。それを防ぎます。 debounce 連続して大量に繰り返される処理が指定時間内に何度発生しても最後の1回だけ実行するもの
人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る
人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る 複数のJavaScriptやTypeScriptの依存関係などを解決し、コードやフォント、画像などのリソースなどをまとめるバンドルツール（あるいはモジュールバンドラやビルドツールなどとも呼ばれます）は、多数のライブラリやコンポーネントなどを用いてチームで開発するWebアプリケーションの開発には欠かせないツールとなっています。 そのバンドルツールの代表がwebpackです。約4万人のITエンジニアによるアンケート結果が示された「State of JavaScript 2022」でもwebpackはGulpやViteなどを抑えて最も人気のあるバンドルツールとなっています。 参考：「State of JavaScript 2022」公開。利用
動的に増える要素それぞれにイベントハンドラを設定したい
やりたいこと querySelectorAll()で取得できる要素が動的に増える場合でも、そのそれぞれにイベントハンドラを設定したい どういうこと？ 下記コードで最初に定義しているtaskCompletedButtonsは、別のイベントによって動的生成されるボタン要素たちです。それに加えて、新しく増えたボタンに対しても同じようにイベントハンドラを設定したいです。 const taskCompletedButtons = document.querySelectorAll('.btn-completed'); taskCompletedButtons.forEach((e) => { e.addEventListener('click', (j) => { if(j.target.className === 'Hello') { // なにか処理がはいります } }); }); 解決策 イベ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの参照渡しと値渡しについて
【React】【Vue】など流行りのフレームワークを使うもののためのJS基礎「クラス、インスタンス」