すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始
［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始 開発者がブラウザの互換性を気にすることなくWebアプリケーションを開発するためのJavaScriptライブラリ「Polyfill.io」が、ドメイン名ごと中国企業に売却されたことを受けて、CloudflareとFastlyが急きょライブラリをフォークし、安全が確認されているコードの配信を開始しました（Cloudflareの発表、Fastlyの発表）。 Polyfill.ioをドメインごと中国企業に売却 Polyfill.ioはAndrew Betts氏が開発したオープンソースのJavaScriptライブラリです。Polyfill.ioを組み込むことで、ブラウザのバージョンを気にすることなくWebアプリケーションの開発を行うことができる便利なラ
Polyfill.io を使って JavaScript の Polyfill を適用する - Qiita
この記事の内容は古いので大幅に削除しました。 2024年現在では Fastly Polyfill を検討されるのが良いようです。 https://polyfill-fastly.io TL;DR Polyfill.io という非常に便利なサービスを使って、Internet Explorer などのブラウザでも最近の JavaScript を動くようにします。その為に必要なのは、以下のような <script> を一行追加するだけです。 はじめに JavaScript の実装で Fetch API を使用したい場面がありました。 https://developer.mozilla.org/ja/docs/Web/API/Fetch_API この機能が Internet Explorer (以下、IE) 非対応である為、何かしらの対応をすることになりました。 （尚、この解説での IE のバージョ
【徹底解説】JavaScriptでモジュールの作り方 - Qiita
ライブラリとモジュールの違い ライブラリとモジュールは、両方ともコードの再利用を促進するために使用される概念ですが、意味や使用方法においていくつかの違いがあります。 ライブラリ: ライブラリは、特定の機能や機能セットを提供する再利用可能なコードの集まりです。 一般的に、ライブラリは独立して使用され、他のプログラムやプロジェクトで利用されることを目的としています。 ライブラリは、一般的な問題を解決するための関数、クラス、ユーティリティ、データ構造、アルゴリズムなどの要素を含むことがあります。 ライブラリは、プログラム全体に影響を与えることなく、必要な機能を選択的に使用できるようにするため、モジュールやコンポーネントとして提供されることがあります。 モジュール: モジュールは、コードの構造化と組織化を目的とした小さな単位です。 モジュールは、関連するコードのグループ化とカプセル化を容易にします
JavaScript モジュール - JavaScript | MDN
JavaScript のプログラムはとても小さいものから始まりました。初期の用途は、必要に応じてウェブページにちょっとした対話的な機能を追加する独立したスクリプト処理がほとんどであったため、大きなスクリプトは通常必要ありませんでした。そして何年かが過ぎ、今や大量の JavaScript を持つ完全なアプリケーションをブラウザーで実行することはもちろん、JavaScript を他のコンテキスト（例えば Node.js）で使うこともあります。 それゆえ近年は、JavaScript プログラムをモジュールに分割して必要な時にインポートできるような仕組みの提供が検討されるようになってきました。Node.js は長年この機能を提供しており、モジュールの利用を可能にする JavaScript ライブラリーやフレームワークも数多くあります（例えば、他の CommonJS や、AMD ベースのモジュールシ
JavaScriptにおけるモジュールとWebpack - Qiita
JavaScriptにおける「モジュール」の定義 モジュール(module)とは「変数や関数をまとめたもの」で, JavaScriptにおいては1つのモジュールは1つのjsファイルに対応します. 一つの大きなjsファイルにあらゆる機能を書くのではなく, モジュール化を行なって小規模なjsファイルの組み合わせとして表現することにより, コードの可読性が増したり変数や関数名の衝突を防ぐことができたりなどの様々な恩恵が受けられます. importとrequireの違い importとrequireはどちらもモジュールの読み込み方法を表しています. importはブラウザ上で動作するES6のモジュールシステムであり, requireはNode.jsの環境で動作するCommonJSのモジュールシステムという違いがあります. importについて モジュール側では関数やクラスを定義する際に先頭にexp
【JavaScript】exportと importを使ったモジュール化【module】
みなさんこんにちは、現役エンジニアのサメハックです アパレル企業でトップ販売員を経て 未経験からWebエンジニアに転職し、 現在正社員として5年働いています！ JavaScriptの解説シリーズです。 今回はexportとimportを使ったモジュール化について学んでいきましょう！ 駆け出しエンジニアや未経験の方、 また新入社員を指導する先輩社員にとっても わかりやすいように解説していきます！
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
JSON.stringify() - JavaScript | MDN
JSON.stringify() は値をそれを表す JSON 表記に変換します。値は以下のように変換されます。 Boolean、 Number、 String、および (Object() により得られる) BigInt の各オブジェクトは、文字列化の際に慣習的な変換セマンティクスに従い、対応するプリミティブ値に変換されます。(Object() により得られる) Symbol のオブジェクトは、プレーンオブジェクトとして扱われます。 BigInt の値を文字列化しようとすると、例外が発生します。しかし、BigInt が (モンキーパッチ BigInt.prototype.toJSON = ... により) toJSON() メソッドを持っている場合、このメソッドにより文字列化できます。この制約により、適切な文字列化の方法（そして、ほとんどの場合、対応する逆変換の方法）が常にユーザーによって明
[Node.js] JSONをキレイに整形して出力する - ねこの足跡R
小ネタです。 結論から言うと、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などに渡す場合はこちらを利用します
![[Node.js] JSONをキレイに整形して出力する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/7dfd89aa35a36a9b4f644c2bba616ffee6c0db86/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061406498%2F1701343054)
Array.prototype.forEach() - JavaScript | MDN
標準組み込みオブジェクトArrayコンストラクターArray() コンストラクター静的メソッドArray.from()Array.fromAsync()Array.isArray()Array.of()静的プロパティArray[@@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.findLastI
YouTubeのショート動画を連続再生する拡張機能を作ってみた | 日記の間 | あかつきのお宿
この記事を三行にまとめると ショート動画終了時に自動でスクロールしたい なぜか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
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
𝕏(Twitter)のホームで最新ツイートを自動で取得するためのユーザースクリプト
はじめに タイトルのスクリプト自分用に作っていたので共有です。 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 機能など ステータス 一番左の●印です。 緑なら稼働中 灰
【JavaScript】スクロール位置を取得・設定する
JavaScriptでスクロール位置を取得する scrollYプロパティで縦方向のスクロール位置を取得する windowオブジェクトのscrollYプロパティを取得することで、取得時点での縦方向のスクロール位置を取得することができます。 // スクロールされた時、現在の縦方向のスクロール位置をコンソールに出力する window.addEventListener('scroll', () => { const y = window.scrollY; console.log(y); }); windowオブジェクトにaddEventListenerでscrollイベントを追加することで、ブラウザ上でスクロールされた時に処理を実行することができるようになります。 また、windowオブジェクトのonscrollプロパティに処理を代入することでも実装できます。 window.onscroll =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
this.x is not iterable
jQuery.map() | jQuery API Documentation
JavaScriptのarrayのmap関数でアロー関数を使う - Qiita
TypeScript で例外を throw した方が 良いのか 悪いのか
