Storage Access API - Web API | MDN
Storage Access API（ストレージアクセス API）は、埋め込まれたクロスオリジンのコンテンツが、通常はファーストパーティのコンテキストでのみアクセスできるストレージ（これをオリジンのファーストパーティストレージと呼びます）に無制限にアクセスする方法を提供します。 API は、埋め込まれたリソースがファーストパーティストレージに現在アクセスできるかどうかを確認し、ユーザーエージェントからファーストパーティストレージへのアクセスを要求できるメソッドを提供します。 ほとんどのブラウザーは、埋め込まれたクロスオリジンリソースのクッキーおよびサイトデータへのアクセスを制限する多くのストレージアクセスポリシーを実装しています。 これらの制限は、各最上位オリジンの下に埋め込まれたリソースに一意のストレージスペースを与えることから、サードパーティのコンテキストでリソースが読み込まれたときの
JavaScript: 豆知識 - Qiita
暗黙型変換 果たしてMath.maxは何と答えるのか!? Number? NaN? それどころか文法違反? 1文字も見落とさずじっくり観察してね。 Math.max(!1,!0) Math.max(-0,null) Math.max(1,0..a) Math.max(1,NaN) Math.max(-1,true) Math.max(-1,"") Math.max(-1,[]) Math.max(-1,[,]) Math.max(-1,[,1]) Math.max(-011,[-1e-1-1]) Math.max(-1,[{}]) Math.max(011,10) Math.max("011",10) Math.max(-["-012"],013) Math.max(" \n011\n ",012) Math.max(" \11\n","\r\f\v") Math.max("0b11","
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
【JS】「ただの {}（ブロック文）」を使うと嬉しいこと
JavaScript の 「ブロック文」 をご存知でしょうか。 波括弧（ブレース）で囲む、コレです。 if ブロック if () {} や、for ブロック for () {} として目にすることが多いですが、 {} 単体でもブロック文になります。 これだけだとオブジェクトと思ってしまうかもしれませんが、ブロック文になります。 （オブジェクトとブロック文の解釈については javascriptのオブジェクトリテラルは評価されるまでは、あくまでブロック文でしかない - メモを揉め が詳しいです） なんの意味もないように見える「ただの {}（ブロック文）」ですが、意外と便利なことがあるのでこの記事ではそれを紹介します！
buttonタグのsubmitした値がPOSTされなかった話 - Qiita
クリックしたボタンによって処理を分ける formでpostする際において複数のボタンを設置している場合、クリックしたボタンの値を受け取って処理を分岐できる。 例えばメールフォームなどで、確認画面から入力画面に戻るか、送信するかという場合、以下のような処理で実現できる。 <form action="post.php" method="post"> <button type="submit" name="action" value="back">戻る</button> <button type="submit" name="action" value="send">送信</button> </form> $action = (string)filter_input(INPUT_POST, 'action'); if ($action === 'back') { // 入力画面に戻る処理 //
deck.glを使ってGoogle Mapに大量のポリゴンを描画してみる - Qiita
Google Mapはとても優れたプロダクトです。地図と言ったらGoogle Map、と思われる方も多いはずです。 地図を使ったアプリケーション開発においても、ユーザーに広く認知されたGoogle Mapを使いたいという要望を聞く機会が良くあります。 Google Mapを使ったアプリケーション開発を行う際に、Maps JavaScript APIを使って開発を行うことが多いと思います。Maps JavaScript APIはGoogle Mapを使ったWebアプリケーション開発を行う際に使用するJavaScriptライブラリです。 Maps JavaScript APIを使ったアプリケーション開発を進める中で、loadGeoJson()やaddGeoJson()を使って大量のデータを描画した際にパフォーマンスの問題が出てくることがあります。 この記事では、deck.glを使ってGoogl
JavaScript でキューを実装して性能を比較してみた - Qiita
JavaScript でキューを実装して性能を比較してみた。 今回は、以下の条件で実装を行った。 クラスとして実装する 1個のデータのエンキューとデキューを行うメソッドをそれぞれ実装する それ以外のメソッド (要素数、先頭を削除せずに取得など) は実装しない エラー処理 (空のときにデキューを試みるなど) は行わない なお、実装で出てくる # つきのメンバ変数はプライベートプロパティである。 方針・実装 配列のpush・shift 配列の末尾に要素を追加するメソッド push をエンキューとして用い、配列の先頭から要素を取り除いて返すメソッド shift をデキューとして用いる。 エンキューとデキューがともに1回メソッドを呼び出すだけで実現でき、シンプルな実装になる。 class QueueShift { #q = []; enqueue(value) { this.#q.push(val
React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた
Reactのhooks、すごいですよね。関数コンポーネントの自由度があがって色々実現できそうです。 私はReactについては2年ぐらい知識止まってるので、かなり衝撃的でした。ContextとかSuspenseとかいろいろ増えてて今更追いつくのは難しいけど、hooksはちょっと使ってみたいなーと感じました。 そんなhooksですが、使い方はそこそこわかるけど動作原理がさっぱりわからなかったので、ちょっと調べてみました。 そもそもHooksってなに hooksは関数コンポーネントからReactのいろいろな機能をフックでき、自分で汚く実装するんじゃなくてReactが面倒見てくれるよーってやつです。useStateで状態を持たせることができ、useEffectでcomponentDidMountみたいなことを実現、あとほかにもuseXXX系がいろいろ、という感じです。 useStateを例に見てみ
C++/Java系言語で1文字だけでコメントアウトするブロックを切り替える - Qiita
概要 プログラミングをしていると実装の方式を試してみることがあると思います。あるいは、別の実装でうまくいくか自信のない時、今あるものはコメントアウトしておいて別の実装を試してみたり。そんな場合、今時はエディターの機能で簡単にブロックをコメントアウトしたりできますが、言語仕様をうまく使って一文字編集するだけでコードブロックをコメントアウトする小技を大昔に思いついていて今でも使うことがあるので紹介します。実装中の試行錯誤の時には便利です。 この技はC++/Java/Javascript系の、ブロックコメント/* ... */とインラインコメント//がサポートされている言語で利用できます。 ブロックを/の削除でコメントアウトする 以下のように書いておくと、一番最初の/を削除すると最初の行がインラインコメントからブロックコメントに切り替わり、ブロック全体がコメントアウトされます。 先頭行が//で始
TC39 に新設された Stage 2.7 について | blog.jxck.io
Intro TC39 の Stage 2 と Stage 3 の間に、新たに Stage 2.7 が追加された。 これはなんだろうと思った人が、検索で辿りつけるよう、その経緯と目的をまとめる。 TC39 Stages TC39 は、 ECMAScript (つまりまあ JS) の新機能を議論する Task Group だ。 ここでは、比較的自由に新機能の提案がなされ、定期的に行われるミーティングでの議論や、実装からのフィードバックを経て、 Stage が上がっていく仕組みをとっている。 旧来の Stage は 0~4 まであった。ざっくり言うと以下のようなものだ。
JavaScriptでの型判別まとめ(typeof, Object.prototype.toString.call) - Qiita
console.log('string: ', typeof 'a', Object.prototype.toString.call('a')) console.log('String: ', typeof new String(""), Object.prototype.toString.call(new String(""))) console.log('number: ', typeof 0, Object.prototype.toString.call(0)) console.log('Number: ', typeof new Number(0), Object.prototype.toString.call(new Number(0))) console.log('boolean: ', typeof true, Object.prototype.toString.call(t
HTML: iframeを使った手品 - Qiita
iframeのidは既定値で空文字。加算処理で0としても扱える。当然outerHTMLはiframeのものを指す。 面白い事にonloadの処理を反復している。ただの反復ではなく再帰処理ッポイのだ。 setIntervalのようなsetTimeout
【jQuery】jQuery4.0.0の変更点紹介 - Qiita
いまさらjQuery？ ここの人たちは見たくもない現実かもしれませんが、世界の9割はjQueryでできていいます。 ということで世界70億人が待望していたjQyery4のベータバージョンが2024/02/06に公開されたので以下で紹介します。 ちなみにjQuery1が2006/08/26、2が2013/04/18、3が2016/06/09のリリースであり、メジャーバージョンアップとしては8年ぶりとなります。 しかし開発が止まっていたとかというとそういうわけもはなく、流石に2010年代前半ごろの更新ラッシュは落ち着いてきたとはいえ、着実にメジャーバージョンが3のまま3.7.1まで更新され続けています。 jQuery 4.0.0 BETA! jQuery 4.0.0の開発を長いこと続けてきましたが、ついにベータ版リリースの準備が整いました。 やらなければならないことはたくさんあり、開発チームは
うるう日にしか発生しないバグ
昨日うるう日にしか発生しないバグに遭遇した。Javascriptを書く人には有名な話だとは思うので大して面白くはないかもしれないが一応メモ。 詳しくは書けないがバグが発生した関数の仕様としてはざっくりと下記のような感じ。 対象の年月日が基準日の1年前から1年後の間に含まれる場合はtrueを返しそうでない場合はfalseを返す 引数として2020-12-24というフォーマットの文字列が渡される(判定対象の日) 引数として2021-01-01というフォーマットの文字列が渡される(+-1年の基準日) Javascriptで書く (例) 対象の日: 2024/10/10 基準日: 2024/01/28 この時、trueになる範囲は2023/01/28 ~ 2025/01/28。なので2024/10/10はtrue。2023/01/28も2025/01/28もtrueになる。閉区間。 とあるコードの
WebAssemblyを利用してJavaScriptアプリケーションのパフォーマンスを向上させる方法 - Qiita
ウェブアプリケーションのパフォーマンス向上は、ユーザーエクスペリエンスの向上に直結します。そこで、本記事ではWebAssemblyを使用してJavaScriptアプリケーションの実行速度を向上させる方法を紹介します。 1. WebAssemblyとは WebAssembly（通称Wasm）は、ウェブで高速な実行を実現するためコードです。。これは、ウェブブラウザ内で実行できる低レベルのバイナリフォーマットであり、JavaScriptの補完として設計されています。WebAssemblyの主な目的は、ウェブでの高性能なアプリケーションの実現を支援することです。これにより、C、C++、Rust、Goなどの言語で書かれたプログラムをウェブアプリケーションで直接実行することが可能になります。 Amazon Prime Videoで動画再生にWebAssemblyを採用されている実例があるようです。 2
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
今年3月に公開されたChrome 111とEdge 111にView Transitions APIが搭載されました。View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に
図で理解するJavaScriptのプロトタイプチェーン - Qiita
JavaScriptのリファレンスといえばMDNですよね。 JavaScriptで調べものをする際に、真っ先に見る方も多いでしょう。 そんなMDNですが読めていますか？ 例えばArrayのページを見てみましょう。 さらっと書かれているprototype JavaScriptを理解するにはプロトタイプチェーンを知る必要がある 本記事の目的 プロトタイプチェーンを理解する MDNをより読めるようにする JavaScriptのObjectやArrayなどの基本型の構造を理解する 確認環境や記述について Chrome 52のコンソールで動作確認 ES5で記述 説明のしやすさを重視、プロトタイプをあらわすのに__proto__を使って記述 まずはオブジェクトについてみていく シンプルなオブジェクトを作る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React の state の仕様ってどう思いますか？？
JS Visualizer 9000