JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響
ウェブブラウザのバージョン間の違いを無効化するJavaScriptライブラリ「Polyfill.io」が、2024年2月のプロジェクトオーナー変更後、マルウェアが混入されてサプライチェーン攻撃に利用され、10万以上のサイトに影響が出ています。 Polyfill supply chain attack hits 100K+ sites https://sansec.io/research/polyfill-supply-chain-attack 「Polyfill.io(polyfill.js)」はアンドリュー・ベッツ氏が開発したJavaScriptライブラリです。ウェブブラウザのバージョン間で機能の違いがあると開発時に苦労しますが、Polyfill.ioを利用すれば、新しいバージョンにしかない機能を古いバージョンで利用できるようになるため、バージョンの違いを気にすることなく開発を進めること
JavaScriptのthisって何this? - Qiita
はじめに こんにちは。kosukein38です。 JavaScriptでthisを書いて毎回これ何参照してるんだっけ?ってなるので、軽くまとめてみました。 対象者 thisって何this?な人 内容 JavaScriptにおけるthisは、現在の実行コンテキストに依存する特別なキーワードです。 その値は、関数がどのように呼び出されるかによって異なってきます。 単独関数内のthis 単独関数が呼び出された場合（つまり、オブジェクトのメソッドとしてではなく）、thisはグローバルオブジェクト（ブラウザではwindow）を参照します。 ただし、strictモードではthisはundefinedになります。
「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモ - Qiita
「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモJavaScriptブラウザmqttp5.js 自分が観測していた中では、以下のポストが発端になっていると思われる話です。 この作品にインスパイアされた作品を作られた方も見かけていて、その作品や技術面のメモを残したく、記事を書きました。 技術的な部分について 「素敵な作品だなー！」と思って、も「し実装するとしたら必要そうなものは何か」と考えたら、「スクリーン内のブラウザのウィンドウの位置を取得する仕組み」と、「異なるページ間で情報をやりとりする仕組みがあれば良さそう」と思いました。 ページ間の通信の仕組み 上記の 2つの技術のうち、「異なるページ間で情報をやりとりする仕組み」については、別端末間で IoT の仕組み（技術的には MQTT）を使って
【JavaScript】LocalStorageで値が保持されるカウンター作成 - Qiita
はじめに webサイト制作の学習で「ボタンを押したらカウントが増える」という仕組みを作成した際、 ページの再読み込みをするとカウントが初期値に戻ってしまうという問題が発生しました。 しかし、「Local Storage」を使うことでこの問題を簡単に解決することができたので、 Local Storageを利用した「値が保持されるカウンター」の作成方法をまとめました。 作成したもの 「クリック」のボタンを押すと数字が1ずつ増えるカウンターを作成しました。 ポイントはページ更新をしたり、ブラウザを開き直したりしてもカウントの値が保持されるということです。 ブラウザに値を保存する「Local Storage」 今回、値の保持を実現させるために「Local Storage」を利用しました。 Local SrotrageとはWebページで取り扱うデータをブラウザに保存する仕組みで、 以下のような特徴が
JSでブラウザの戻るボタンを止める方法。 - Qiita
ウェブ開発の世界では、JavaScriptは開発者がインタラクティブでダイナミックなウェブアプリケーションを作成できる強力なツールです。ウェブ開発における一般的な要件の1つに、ブラウザの戻るボタンの動作を制御することがあります。 このブログ記事では、ブラウザの戻るボタンを無効にするJavaScriptのコード・スニペットを深く掘り下げ、それがどのように機能するのかを順を追って説明します。 function DisableBackButton(){ window.history.forward() } DisableBackButton(); window.onload = DisableBackButton; window.onpageshow = function(evt) { if (evt.persisted) DisableBackButton() } window.onload
JavaScriptとブラウザ戦争の関係を知りたい - Qiita
おはようございます！ 昨日からはJavaScriptをもっと知りたいというテーマで、現代の開発環境に至るまでの歴史を調べてみるという記事を書いています！ 歴史的な背景を知ることで、JavaScriptの理解を深めて開発に活かしたいというのが目的で、その中でも「モジュール」「パッケージ管理」「ビルド」という概念がよく分かることを目指しています。 元ネタはこの動画です！非常にわかりやすくて面白いのでぜひ見てください！ この記事は、この動画の内容を自分なりに解釈して分からないところを調べながら書いています。 それでは本題に進みましょう！ 前回のおさらいとJavaScriptの課題の背景 前回は、JavaScriptの誕生と初期の課題についての記事でした。 ざっとおさらいしていきましょう。 1995年に登場したJavaScriptは、Webページを動的にする画期的な技術でした。しかし、その初期には
メソッドの名付けは決して甘くない——二つの JavaScript プロポーザルが歩んだ道のり - Qiita
はじめて技術記事を書いてみました。ぐらふぃーむと申します。 ECMAScript（いわゆる JavaScript）の先端を操る TC39 に関する情報が（少なくとも日本語コミュニティでは）思うより少なかったため初回は「SmooshGate 事件」と「Array Grouping プロポーザル」を取り上げようと思います。 拙い文章なのでおかしいところがあればご指摘願います。編集リクエスト機能もご活用ください。 SmooshGate 事件 2023 年になって Array.prototype.flat メソッドを知らない JavaScript デベロッパーはほとんどいないでしょう。しかしその裏にはあまり知られていない、メソッドの名前や運命に関わる出来事があります。それが「SmooshGate 事件」です。 メソッド自体を解説する文章ならいくらでもありますのでそれを省きさせていただきます。念のた
【JavaScript】スクロールが終わった時に発生する「新しいイベントScrollend」とは？ - Qiita
はじめに みなさんは、JavaScriptでスクロールが終わった時に何か処理を行いたいと思ったことはありますか？ 「スクロールが終わった時にアニメーションしたい」や「スクロールが終わった時に動画や音楽を再生させたい」など、 そんな頻繁に思いはしないと思いますが、たまにはあると思います。 この記事では、そんな時に使えるスイベントscrollendを紹介します。 スクロールが終わった時に発生する Scrollend Scrollendは、実験的な機能です。 Chrome Canary, chrome 112以降, Firefox 109以降のブラウザで対応しています。 ※投稿日2023/2/10時点
p5.js と ml5.js の組み合わせでブラウザ上でのリアルタイム物体検出を試す（COCO-SSD を利用） - Qiita
この記事は、以下のツイートで動画・画像をのせていた、ブラウザ上でのリアルタイム物体検出の話です。 上記の内容は、以下の OpenProcessing のスケッチにアクセスすると、実際に試していただくことができます。 ●ml5.js で物体検出（COCO-SSD を利用） - OpenProcessing https://openprocessing.org/sketch/1795350 実装した内容の話 今回の内容は、p5.js と ml5.js の 2つを組み合わせて作っています。その実装内容や、実装に関する補足を、この後に書いていきます。 実装の際に参照した情報 実装時には、以下の ml5.js公式のドキュメントを見て実装しました。 ●ObjectDetector https://learn.ml5js.org/#/reference/object-detector ml5.js によ
【JavaScript】ES2023の新機能 - Qiita
ES2023その2 / ES2023 / ES2022 / ES2021 2023年一発目ということで、ES2023にFinished Proposalsとして取り入れられた機能を見てみましょう。 ちなみにFinished Proposalは「複数の実装が既に存在する」が前提なので、2023という名前にもかかわらず既に一部のブラウザで使用可能です。 というかES2023の新機能は全てのモダンブラウザで既に使用可能です。 ES2023 Array find from last 末尾からの検索です。 const array1 = [5, 12, 8, 130, 4]; console.log(array1.find(element => element > 10)); // 12 console.log(array1.findLast(element => element > 10)); //
タグを入れるだけで Web サイトを高速化する Repro Booster について思うこと - Qiita
こんにちは。ぬこすけです。 最近(2022/10/26)に、マーケティングツールを開発する Repro が、タグを入れるだけでウェブサイトの表示速度を高速化させるツール「 Repro Booster 」をリリースしました。 ニュース Repro 公式サイト PRTIMESより引用 表示速度アップの仕組みは簡単にいうと、ユーザーのクリックを予測して次のページのデータを先読み & 端末にキャッシュして次のページの読み込み速度を上げるようです。 たまたま SNS でこのニュースを見かけた時、「 ほげえええ 」と衝撃が走りました。 表示速度アップの仕組み自体はエンジニアだったらあまりびっくりはしないかもしれません。 例えば、 Next.js には next/link でリンクを元にデータの先読み機能があったり、 gueess という機械学習を用いてユーザーが次にアクセスする可能性が高いページを予測
setTimeout の真の力、あなたは知っていますか？ - Qiita
こんにちは。ぬこすけ です。 皆さんは「 setTimeout とはどんな関数でしょう？」と聞いたら、どう答えますか？ おそらく、ほとんどの人が「指定した時間に処理が走るようにする関数」と答えるのではないでしょうか？ function main() { console.log('動いたよ！！'); } // 大体 ３ 秒後に main 関数が動き出す setTimeout(main, 3000); 大雑把な理解としては問題ないですが、実は setTimeout の隠された能力はそれだけではありません。 setTimeout の隠された能力を知るとどんな良いことがあるのでしょうか？ 例えば、次のような良いことがあります。 ブラウザに対する理解が深まる Web サイトのパフォーマンスを向上させることができる ドヤれる まず、 ブラウザに対する理解が深まります 。 かのアリストテレスはこう言い残
IEが終了したので、webpackやbabelは不要？ - Qiita
IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。 そもそもなぜフロントエンドを「ビルド」していたのか そもそもなぜwebpackやbabelを使ってJavaScriptをバンドル（1ファイルにまとめる）していたのか 1. HTTP/1.1とモジュールシステムの相性の悪さ ブラウザにはES Moduleというモジュールシステムが導入されています。これはimport文で他のファイルを読み込むことができるシステムです。 HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。 2. ブラウザのES Module対応率の低さ ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Mod
body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden
僕が成長するきっかけになったJavaScriptの問題と全解説 ~昔の僕のクソコードを添えて~ - Qiita
この記事は僕がちゃんとプログラミングを勉強し始めるきっかけとなったJSの問題に関する内容の記事になります。 はじめに 最近ではNext.jsを使った長期インターンに参加できるほどに少しはマシになったとは思いますが、半年前まではJavaScriptを少しかじっただけで、何も理解していませんでした。 しかし、ある時期に今回ご紹介する問題を 否が応でも 解かないといけない状況になり、JS-Primer(JSの教科書的なやつ)と睨めっこしながら奮闘しなんとか解き、先輩方にそれをレビューしてもらいました。 そこで 、今回の記事では、 前よりは成長した僕の知見と、先輩エンジニアの方々のアドバイスを融合させつつ 昔の僕のコードの何がダメなのか より良い解答（1を踏まえて、どこを改善すると良くなるのか） 補足説明 この3点に着目しつつ解説していこうと思います！ 前置き この問題は（ほぼJSの知識だけで解け
【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】 - Qiita
で、上記の通り「矩形波、三角波」って見たらアラフォー以上の人は「ファミコンじゃん」ってなったり、むしろ、コナミ矩形波倶楽部を思い出す方も多いかもしれません。 技術的なこと まぁ、ソースを見て貰えば特に難しいことはしていない（いつものように殴り書きだし…）のでコインであれば「♪シミー」という音を鳴らせばできるわけです。 const AudioContext = window.AudioContext || window.webkitAudioContext const audioContext = new AudioContext() const gainNode = audioContext.createGain() gainNode.connect(audioContext.destination) gainNode.gain.value = 0.1 const oscillator =
ついにTypeScriptがブラウザで動くようになりそう 〜 JavaScriptへの型構文の導入について - Qiita
ついにTypeScriptの構文がJavaScriptに組み込まれ、ブラウザで直接TypeScriptが動くようになりそうです。 TypeScriptとは何か？ TypeScriptと言っても、指し示す範囲が文脈によって異なります。筆者が観測した範囲では、以下の3つが「TypeScript」だと言われているようです。 言語としてのTypeScript（const a: number = 1のような構文を持つ言語） 型チェックをおこなうCLIツール（tscコマンド） 型チェックやトランスパイルを行うライブラリ（microsoft/TypeScriptリポジトリ） この記事で触れるのは、言語としてのTypeScriptの話です。const a: number = 1のような構文が、ブラウザで動くようになるという事です。 これまではどうだったか？ 以下のようなTypeScriptプログラムがあり
初学者友人「JavaScriptって役に立つの？」わい「ブラウザ設定で無効にっと。ほれ。」→結果… - Qiita
初学者友人との、ある日の会話 友人「なぁ、JavaScriptって本当に役に立つの？」 わい「おぉ。めちゃくちゃ役に立つで。」 友人「ほう。どんなふうに？」 わい「うーん…どんなふうにか…。せや！ブラウザ設定でJavaScriptを無効にっと。ほれウェブサイトみてみ。」 友人「おぉ！！！すげぇぇぇっっっ！！！」 １枚の絵は千の言葉を語る JavaScriptの凄さを知るには、ブラウザ設定でJavaScriptを無効にしてからウェブサイトを閲覧してみましょう。 この記事に書いてあること この記事では、ブラウザ設定でJavaScriptを無効にして、ウェブサイトを閲覧したらどうなるのかを書いています。 JavaScriptの凄さを改めて実感してもらい、一人でも多くのフロントエンドエンジニアのモチベーションに繋がればと思います。 なお、JavaScriptをオフにしてウェブサイトを閲覧するという
ウェブサイトがJavaScriptとCookieなしで個人を追跡する方法が一発で理解できる「No-JavaScript fingerprinting」
「フィンガープリント」とは、JavaScriptやCookieなしでウェブサイトのユーザーを識別するための固有識別子で、ユーザーの属性・行動・興味・関心といった詳細な情報をもとにマッチする広告を表示するターゲティング広告に用いられます。そんなフィンガープリントが、JavaScriptやCookieを使わずにどうやってユーザーを特定しているのかがよくわかるサイト「No-JavaScript fingerprinting」が公開されています。 No-JavaScript fingerprinting https://noscriptfingerprint.com/ 今回はGoogle ChromeからNo-JavaScript fingerprintingにアクセスしてみます。アクセスする前に、JavaScriptを使用しないようにあらかじめブラウザから設定しておきます。Chromeの右上にあ
JavaScriptはJavaのScript版(であろうと努力はした) - きしだのHatena
JavaとJavaScriptを混同する人に、名前がかぶってるだけの別モノという指摘がされることもあります。間違いではない。 技術的にも実務的にもコミュニティ的にもそのとおりではあります。 ただ、そう言い続けられた結果、ほんとに単にLiveScriptの名前にJavaをもってきてJavaScriptにしただけという誤解があるようです。 JavaScriptはJavaのScript版、少なくともそうであろうという努力はされていました。 JavaScriptリリース時のCNETの記事には「JavaScript is based on Java」という記述があります。 Netscape and Sun Unveil JavaScript - CNET 実際には、LiveScriptにJavaから文法やライブラリなどを持ち込んでリリースにこぎつけたというのがあります。 JavaScriptのDat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
