サービスワーカーで PWA をオフライン動作させる - プログレッシブウェブアプリ (PWA) | MDN
前のページ 次のページ js13kPWA の構造と、基本シェルが起動し実行させる様子を見てきたので、サービスワーカーを使用したオフライン機能の実装方法を見てみましょう。 この記事では、 js13kPWA の例 (ソースコードはこちら) で使用されている実現方法を見てみましょう。 どのようにオフライン機能を追加するのかを学習します。 サービスワーカーの説明 サービスワーカーは、ブラウザーとネットワーク間の仮想プロキシーです。 これらはついにフロントエンド開発者が長年にわたって苦労してきた問題を修正します — 最も注目に値するのは、ウェブサイトの資産を適切にキャッシュし、ユーザーのデバイスがオフラインのときにそれらを利用できるようにする方法です。 これらは、ページのメインの JavaScript コードとは別のスレッドで実行され、DOM 構造にアクセスすることはできません。 これは、従来のウェ
Fix `.at`
Proposal: GitHub - tc39/proposal-relative-indexing-method: A TC39 proposal to add an .at() method to all the basic indexable classes (Array, String, TypedArray) I know that the .at method is already in Stage 4 and it is not the right time to talk about its specification, but I decided to create this topic because its specification is very very harmful. Take a look at the following code: const arr
undefinedとnull、どう使い分ける？
はじめに API連携などで、コンソールログやエラーメッセージで頻繁に見かけるundefinedやnull。 正直なところ、以前の私はこれらが出ても「なんとなく値が空なんだろうな」とふんわり解釈し、その違いをしっかり理解しないまま仕事をしていました。 そこで今回はこの2つの違いを「バイトのシフト表」に例えて誰でもわかるように簡単にまとめました。 自己紹介 はじめまして。株式会社Rabeeのフロントエンドエンジニア、dkichiです。 普段の開発の中で「理解がふわっとしているな」「苦手だな」と感じた部分を、自分なりにまとめて解消していこうと思います！ 結論 バイトのシフトで例えると以下になります。 undefined シフト表が 「空欄」 の状態。 意味：書き忘れ、またはまだ決まっていない。 null シフト表に 「休み」 と書いてある状態。 意味：あえて「値がない」ことを確定させている。 u
【Navigation API】SPAでもタブをぐるぐるさせよう - Qiita
きっかけ ReactやNext.jsの普及により、SPAのサイトも増えてきましたよね。 一般的なSPAでは、ページ遷移時にリンクのクリックをJavaScriptで検知し、DOMの再描画やHistory APIを用いたURLの書き換えなどを行うことが多いと思います。 また、処理に時間がかかる場合は、DOM上にスピナーやプログレスバーを表示するのが一般的だと考えていました。 しかし、Amaz○n Prime Videoでリンクをクリックしたところ、SPAであるにもかかわらず、プログレスバーだけでなくブラウザのタブも読み込み中の表示（ぐるぐる）になっていることに気づきました。 この挙動が気になって調べてみたところ、「Navigation API」によって実現できることが分かりました。 Navigation APIとは？ MDNによると、Navigation APIは、ナビゲーションアクション（ペ
Why JavaScript Needs Structured Concurrency | Blog | Effection
Effection Blog Why JavaScript Needs Structured Concurrency Scope owns lifetime. Cleanup is guaranteed. Promises async fn() fetch() setTimeout() server.listen() ● still pending ● still ticking ● port still bound finally {} ? Effection function*() function*() spawned task fetch() setTimeout() server.listen() scope ends ✓ halted + cleaned up Async should just feel normal. You hit Ctrl-C. The CLI exit
【React】Props のバケツリレー解消法について
はじめに Reactでは、コンポーネント間のデータの受け渡しにおいて、propsのバケツリレーの問題がよく発生することがあります。 バケツリレーとは、あるコンポーネントから別のコンポーネントに props を渡す際に、複数の中間コンポーネントを経由して渡しているだけの状態をいいます。 なぜこのような問題が発生するかというと、React では「単方向データフロー」を採用していて、コンポーネント間で直接データをやり取りすることができないためだからです。 Context API や状態管理ライブラリで解消する方法もありますが、props を渡すだけの分かりやすいコンポーネントを作成することも重要になってきます。 そこで今回は、不要なコンポーネント層を削除する方法や、コンポジションパターンを用いた解決策について紹介していきたいと思います。 バケツリレーとその問題点 バケツリレーとは? React
JavaScriptでQRコードを作ろ！｜donguri
Python、Swiftと試して来たので次はJavaScriptでの作り方です。JavaScriptでは を使って作ります。簡単に最小限で作ります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>QRコード</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> </head> <body> <div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("
using : リソース変数の管理が楽になるキーワード (JavaScript&TypeScript) - Qiita
概要 JavaScriptにおいて、変数を初期化できるkeyword var, let, constに加え、usingがまもなく追加される予定です。 usingキーワードで宣言した変数は、リソースタイプ変数として見なされ、変数がscope外になる前に自動でリソース解除作業を行うことができるようになり、従来の明示的にリソース解除コードを書くという面倒な作業がだいぶ楽になることが期待できます。 ECMAScript Proposalは以下となっておりStage3段階となってます。 https://github.com/tc39/proposal-explicit-resource-management#status ※ Stage4になると標準として確定されます。詳しくはThe TC39 Processをご参考ください。 また、TypeScript 5.2ではusingkeywordが利用可能
【JavaScript】正確な足し算ができるようになるよ - Qiita
は？なんだこれバグか？ ということで、配列に対してできるだけ正確な足し算ができるメソッドMath.sumPreciseが提案されています。 現在の進捗状況は、ステージは3であり仕様は確定しています。 Firefoxは2025/04/01リリースのFirefox 137で対応済です。 Safariはドキュメントでは2025/03/31リリースの18.4で対応したって言ってるんだけどCan I useやMDNでは未対応ってなっていてよくわかりません。 なんにしろmergeはされているのでそのうち動くと思います。 Chromeは実装すらもまだです。 やっぱ金にならんことには遅いなChrome。 ということで以下は該当のProposal、Math.sumPreciseの紹介です。 Math.sumPrecise 複数の値を合計するメソッドを追加する提案。 Status このproposalはTC3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://raw.githubusercontent.com/takechi/full2abbr_wsf/master/full2abbr.wsf
The Illusion of JavaScript DRM: A Three-Round Demolition of HotAudio's Copy Protection
GitHub - sizzlemctwizzle/GM_config: A lightweight, reusable, cross-browser graphical settings framework for inclusion in user scripts.
How JavaScript stores numbers in Memory | Vivek Lokhande Blog