This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback JSON.stringify() メソッドは、ある JavaScript のオブジェクトや値を JSON 文字列に変換します。置き換え関数を指定して値を置き換えたり、置き換え配列を指定して指定されたプロパティのみを含むようにしたりすることもできます。 console.log(JSON.stringify({ x: 5, y: 6 })); // Expected output: '{"x":5,"y":6}' console
小ネタです。 結論から言うと、JSON.stringify()の第2引数にnull、第3引数に数値を指定することで人間がパッと見て分かるよう整形した文字列が返されます。 const data = [ { "season": "202004", "title": "乙女ゲームの破滅フラグしかない悪役令嬢に転生してしまった…", "company": "SILVER LINK." }, ] // 機械に優しい const str1 = JSON.stringify(data); console.log(str1) // 人間に優しい const str2 = JSON.stringify(data, null, 2); console.log(str2) 実際に実行すると以下の通り。str1は直接プログラムから読み込むのに適しています。通常RESTfulAPIなどに渡す場合はこちらを利用します
標準組み込みオブジェクトArrayコンストラクターArray() コンストラクター静的メソッドArray.from()Array.fromAsync()Array.isArray()Array.of()静的プロパティArray[Symbol.species]インスタンスメソッドArray.prototype.at()Array.prototype.concat()Array.prototype.copyWithin()Array.prototype.entries()Array.prototype.every()Array.prototype.fill()Array.prototype.filter()Array.prototype.find()Array.prototype.findIndex()Array.prototype.findLast()Array.prototype.find
この記事を三行にまとめると ショート動画終了時に自動でスクロールしたい なぜかloop属性が消えない timeupdateイベントを使って残り時間を見る manifest.json { "name": "shortscroll", "description": "ショート動画を連続再生する", "version": "1.0.0", "manifest_version": 3, "content_scripts": [{ "matches": ["*://www.youtube.com/*"], "js": ["script.js"] }] } ショート動画終了時に自動でスクロールする function autoScroll() { currentReel = document.querySelector('ytd-reel-video-renderer[is-active]'); cur
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
はじめに タイトルのスクリプト自分用に作っていたので共有です。 https://greasyfork.org/ja/scripts/473371-twitter-autoload 取り急ぎ公開用にこまごま変更したので、おかしな動作あればコメントいただければ修正いたします。 なおコードは以下に置いているので好きにいじってもらっても構いません。 https://github.com/natsuyasai/TwitterAutoReloadScript 動作する画面 ホーム画面(/home未指定) https://twitter.com ホーム画面 https://twitter.com/home 通知画面 https://twitter.com/notifications 検索画面 https://twitter.com/search 機能など ステータス 一番左の●印です。 緑なら稼働中 灰
01. querySelectorAll ・querySelectorAllとは ・querySelectorAllの使用例 02. 複数セレクタ ・複数のセレクタを指定しANDで絞り込む(空白区切り) ・別々のクラスにあるセレクタを指定(カンマ区切り) ・1つのクラスにある複数のセレクタを指定する(区切り無し) 03. 動くサンプル ・querySelectorAllで背景色と文字の色を変える ・querySelectorAllで文字列を変える、表示非表示 ・querySelectorで文字列を変える、表示非表示 引数にCSSのセレクタを指定しNodeList(複数の要素)を取得します。 一致するものがない場合は、空のNodeListを返します。 NodeListのイメージ querySelectorAllの使用例 querySelectorAllでvalue値を取得する <input
オブジェクトのプロパティにアクセスすると、JavaScriptはプロパティを検索します。 そして、プロパティを見つけることができなかったら、undefinedを返します。 そのため、オブジェクトが特定のプロパティを持っているの確認は、undefinedと比較するのが手っ取り早いです。 const obj = { prop1:1 }; console.log( `存在${obj.prop1 === undefined ? "しない" : "する"}`); // 存在する console.log( `存在${obj.prop2 === undefined ? "しない" : "する"}`); // 存在しない
JavaScriptで利用できるquerySelector()やquerySelectorAll()のセレクター指定パターンのまとめです。 querySelector()、querySelectorAll()の基本 指定方法は引数にカンマで囲うgetElementById()やgetElementsByClassName()の代用、より複雑な指定が可能querySelector()は最初のひとつ、querySelectorAll()は全ての要素を取得CSSセレクタと同様の指定方法が可能(ワイルドカード、or、子要素など)疑似クラスも指定可能疑似要素(::before ::afterなど)の指定は空値が返る querySelector()とquerySelectorAll()の違いquerySelector()は指定したセレクターの条件と一致したHTML要素のうち最初のひとつを返します。 返
最近、Twitterのサードパーティークライアントが続々使用不可能となってから、たびたび代替として挙がるMarinDeck。 粗削りな部分は多々ありますが、それでも本家より何倍も使いやすいと感じています。 そんなMarinDeckのiOS版には、ある致命的なバグがあります。 それは、「スクロール中にスクロール場所が飛ぶ」というものです。40件ほどさかのぼるとすぐ発生するので、少しでも多くさかのぼろうとすると、見られないツイートが出てしまいます。 しかし、これは厳密にはMarinDeckのバグではなく、Webkitのバグだと考えられています(その証拠に、大元のウェブ版TweetDeckでも発生します)。 解決策では、解決策はないのでしょうか?幸いなことに、MarinDeckにはカスタムJSを読み込める機能がありますから、それを使いましょう。 今回は、このコードを使います。 この下に、コピー用
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling them, animating them, and fetching data—things that jQuery was great at. With broad browser support of ES6 (over 96% at the time of writing), now is probably a good time to move away from jQuery. I recently re
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96%のレベルに達しています(出典:caniuse.com)。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
文字列→16進数の文字列split() で配列にする → map() で各要素に charCodeAt(0) して数値 (UTF-16コード、0~65535) に変換 → 数値に toString(16) で16進表記の文字列に変換 → join() で結合。 文字列const hexStr = 'ABCDかきくけ'.split('').map(v => v.charCodeAt(0).toString(16)).join(' '); console.log(hexStr); // -> 41 42 43 44 304b 304d 304f 3051TypedArray|Buffer →16進数の文字列reduce() で各要素を toString(16) しながら結合。 TypedArray// Uint16Array生成 const uint16Array = Uint16Array.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く