polyfill.ioを使うのは危険かもしれない(危険だった) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TL;DR 2024/06/26 実害が出ているようです、polyfill.ioを利用している場合は直ちに利用を止めましょう。 GIGAZINE: JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Codebook: Polyfill.io使ったサプライチェーン攻撃でサイト10万件以上に影響 polyfill.ioから配信されるスクリプトが汚染される環境下にあり、危険な可能性があります。利用している方がいらっしゃいましたら外しておくことをおすすめします。または安全なバージョンのものが
【JavaScript】動画以外の要素でもピクチャーインピクチャーできるらしい！ - Qiita
はじめに みなさんは、ピクチャーインピクチャーをご存じですか？ 動画やビデオ通話系のサービスやアプリではよくみますが、他の用途ではあまりみませんよね！ それもそのはずで、今までのピクチャーインピクチャーは、<video> 要素でのみ使うことができました。 ですが、Chrome 111 以降では、documentPictureInPictureを使うことで、<video> 要素以外の任意の要素をピクチャーインピクチャーさせることができるようになります。 今までできなかった <audio> や <img>のような要素をピクチャーインピクチャーさせることができるようになるので、CDジャケットを表示させながら音楽を再生させたりでき、webサイト上でできることが広がります。 そのためこの記事では、そんな documentPictureInPictureを使ったピクチャーインピクチャーについて紹介しま
rollup.jsでpreserveModulesを有効にしつつファイル名や拡張子を変える - Qiita
この記事の概要 rollup.jsを使っていて、アウトプット先を複数ファイルに分ける際にファイル名や拡張子を変更するのに手こずったので記事にしました。 背景 今回の悩みにぶつかった経緯は以下の流れです。 preserveModulesをtrueにしたい CJSとESMを両方含むパッケージを作りたい→拡張子をcjsとmjsの2つ用意したい {具体的なモジュール名}.jsになっているファイル名をindex.jsに統一したい ただし、最終的にこの内容は無くなった やること rollup.config.jsのoutput.entryFileNamesを追加する デフォルトのentryFileNamesは[name].jsが定義されているので、オーバーライドする export default { input: 'src/main.js', output: { dir: 'dist', entryFi
therubyracer と libv8 と libv8-node - Qiita
これはなに Rails で開発されているプロダクトで libv8 が使われており違いや浅く歴史について調べたので簡単にまとめました TL;DR therubyracer と libv8 と libv8-node すべて JavaScript Engine V8 を実行バイナリである 最初は therubyracer が開発されていたが、 実行環境の差分追従などが困難になり libv8 の開発を開始、その後再び困難になったことから libv8-node の開発が行われている therubyracer, libv8, libv8-node の何れかの利用が求められたら、現在は libv8-node を使うことが望ましい therubyracer について therubyracer は JavaScript Engine V8 実行を行う binary を提供している Gem です 2018 年
ゆめみからの挑戦状第3弾のreduceを用いる解法 - Qiita
皆さんこんにちは。先日、大喜利大会 ゆめみからの挑戦状 としてJavaScriptのクイズが出題され、とても盛り上がっていました。リンク先の記事では、自分の解答も面白解答として紹介していただきました。模範解答は flatMap を用いるものですが、筆者の解答では配列操作の定番のひとつとして reduce メソッドを使ってみました。 そこでの解法がやや難解なコードとなっていたので、解説記事を用意しました。 問題と解答 出題されたクイズの内容は以下の通りです（上述の記事から引用）。 const array1 = [1, 2, 3, 4, 5, 6] const array2 = array1./* ここに解答を書いてください */ console.log(array2) // -> [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6] const arra
React 18のSuspenseを使ってReact Hook Formの非同期な初期値の扱いを簡単にする - Qiita
はじめに 普段はスタートアップで建設業界向けのSaaSの開発をしているtaroと申します。 今回はReact18で登場したSuspenseを触っていたら、React Hook Formでフォームの初期値に非同期な値を設定するのが簡単になりそうだなーって思ったので、試してみました。 React Hook Formを使ったことがない方でもきっとわかるような内容になっていると思うので、ぜひぜひ読んでみてくださいー！ この記事はこちらのイベントに参加しています。 前提を揃えるためにReact Hook Formを少し復習 本題に入る前に、React Hook Formについて少し復習して前提を揃えていこうと思います。 （「復習はいらないよー！」って方は、React Hook FormでSuspenseを使うまで飛んでください！） またSuspenseについては、公式ドキュメントや別の記事等をご参考
SvelteではじめるWeb Components開発 - Qiita
はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We
チェックボックスが押されたらどこが何番目のチェックボックスなのかを特定し、マークダウンを更新する - Qiita
Qiita Teamでは、タスク管理なども行いやすいように、記事中のチェックボックスを押すとマークダウンも変更されるようになっています。 今回、元々この処理の一部がjQueryで書かれていたのをReactで書き直したので、整理も兼ねて記事に起こしています。 構成としてはすごく簡易的に書くと下記の図のような感じになっています（コンフリクトなどによるエラー処理などは説明の簡潔化のため省略）。 ブラウザ側でどうマークダウンを変換するのか？という部分まで担当してもらい、サーバーは更新するのみという構成です。 具体的な実装を見ていきましょう。 ページを描画する まずはページを描画しましょう。インポートは省略しています。 interface Props { item: { rawBody: string body: string updatedAt: string // コンフリクト検知用 id: s
"没IE時代" のCSSプロパティが凄い - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 今まで「IE非対応」が壁となり業務での使用を躊躇していたCSSプロパティがいくつもありました。 しかし、ネットや各メディアでも話題になった通り、2022年6月16日、ついにIEのサポートが終了しました（一部OSを除く）。 そこで、IE終了により解き放たれた画期的なCSSプロパティを、個人的メモも兼ねて記載していきたいと思います。 全く新しいレイアウトの形「grid-template」 「grid-template」を初めて知った時は驚きました。 このプロパティを使用すると、以下コードのように視覚的にレイアウトをコントロールすることが可能
既存のJestで書かれたテストを爆速実行するツール、uvu-jest を作りました - Qiita
blogからの転載です 概要 本記事ではタイトルの通り、テストコードの開発時間を短縮するべく、Jestで書かれた既存のテストコードを爆速で実行するツール、uvu-jest を開発したので、紹介させて頂きたいと思います！ 実行速度の改善結果としては下記のとおりです。 Node.js + express で実装したバックエンドの統合テストの実行時間: 1分20秒 => 9~14秒 React + Testing Libraryで実装したフロントエンドのユニットテスト: 1分20秒 => 20~30秒 立上がりのオーバーヘッドが少ないので、個別のテストの実行ではさらに差も出てくると思われます。 本記事ではツールの作成に当たって検討したことや、実装方法などをまとめたいと思います。 背景 先日 The State of JS 2021 も発表され、フロントエンド界隈のエコシステムはますますリッチにな
【React】ライブラリーを使わないでパララックスを使って、リッチなサイトを作る - Qiita
概要 みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？ 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーションが発火します。 このようなアニメーションを実装するのは大変です。 そのため、多くのライブラリーが公開され、簡単に実装できるようになっています。 ただ今回は、そんなライブラリーを使わずにパララックスのアニメーションを作成し、 リッチに見えるサイトを作成しました。 ↓作ったサイトはこちらです。ご覧ください。 ※ Qiita Engeer Festa 2022にご参加もお願いします。 パララックス（parallax）についてとは？ まずパララックス（parallax）にて解説します。 パララックス（parallax）とは？ パララックスとは、視差効果のことで、 Webサイトにおいては、パララックスはス
VS Code 用プラグイン Microsoft Teams Toolkit が GA リリース 🎉 - Qiita
こんにちは、みなさん元気にお過ごしでしょうか？ ここ一年ほど、一連のブログ記事(英語)で Teams Toolkit プレビュー版を紹介してきましたが、今回、Visual Studio Code 用 Teams Toolkit と Teams Toolkit CLI が GA (Generally available) リリースになったことをお知らせします。そして、.NET の Web アプリを構築している方のための Visual Studio 用 Teams Toolkit がプレビュー版で利用できるようになりました。Build カンファレンスでの発表も聞いていただけたでしょうか？ さて、プレビュー版以来、多くのアップデートや改善が行われていますが、この記事では VS Code のための Teams Toolkit の主要な新機能のいくつかについて紹介します。 🎞 シナリオベースの T
初心者プログラマーのための変数/関数/メソッドの英語命名規則 - Qiita
はじめに 「なんか、レビューのたびに変数名を指摘されてる気がする...」 「日本人なんだから、英語で命名とか無理...」 こんなお悩みありませんか？ この記事では、「プログラマーが英語の命名で悩んだ時にどうすれば良いか」をフローチャート形式で解説します！ これであなたも駆け出しエンジニアを卒業できるかも!? ※本記事はLaravel,Vue.jsのプロジェクトで運用されているルールを元に解説しています。 プロジェクト内だけの内輪ルールも含まれていますので、ご了承ください。 対象者 この記事は下記のような人を対象にしています。 駆け出しエンジニア プログラミング初学者 PHP(Laravel),JavaScript(Vue.js)で英語のネーミングに苦戦中 前提知識 下記のような中学・高校で学ぶ内容については理解していること前提で解説します。悪しからず。 三単現のsって何？ 5文型(SV/S
GitHub Packagesを使ってJavaScript libraryを管理する - Qiita
はじめに 今までGoではgo getを使った共通Packageの管理はしていましたが、JavaScriptではしていませんでした。 しかし、フロント開発で同一デザイナーで同じデザインシステムを採用することとなったシステムを作ることなり、既存システムの資産を効率良く管理できないかと思いGitHub Pakcagesを使うことになったので同様のことを行う方の参考になればと思います。 この記事では、yanrとnpmの両方を使った方法を説明させて頂きます。 GitHub Packagesとは 従来はnpm install などでinstallできるようにJava script libraryの管理にはnpmjs.comにアカウントを作成しnpmjs.comでlibraryを管理していたが、それらが全てGitHubで完結できるようになった。 なので、npmjs.comのアカウント作成とは不要になり、
peerDependenciesMetaのoptionalとoptionalDependenciesの違いとは？ - Qiita
package.jsonに設定する項目に、peerDependenciesMeta optional:trueと書かれているのを見て、optionalDependenciesとの違いが分からなかったので調べてみました。 違い このように書かれていました。 they're entirely different, albeit similar. optionalDependencies means, if the dep fails to install, don't fail the overarching install. peerDependenciesMeta allows you to provide extra information about peer deps, and marking one "optional" means "it's not an error if it
Unicodeの異体字セレクターを使ったステガノグラフィ：秘密の文字列をテキストにこっそり隠し込む方法 - Qiita
Unicodeの異体字セレクター(variation selectors)を使い、ユニコード文字列内に隠し情報を埋め込む方法です。 異体字セレクターとは 異体字セレクターは、文字の字体を詳細に指定するモディファイアのようなもの 異体字セレクターは16種類のコードポイントがある(FE00~FE0F) 仕組みの概要 隠したい文字列(hidden)を文字単位にバラす (例: js → j, s) 文字ごとに16進数に変換する (例: j → 6A) その16進数をひと桁ずつ異体字セレクターのコードポイントにマッピングする (例: 6→FE06, A → FE0A) 異体字セレクターの配列をひとつの文字列にまとめなおす 最後にそれを埋め込み先の文字列(body)に混ぜ込んで隠す。 よくあるユニコードステガノグラフィーとの違い ゼロ幅文字を使ったステガノグラフィー 次のようなゼロ幅空白文字を用いたス
JavaScriptのデバッグにはdebugger文を使おう - Qiita
JavaScript初心者のため、デバッグ力がまだまだ拙くどうしたらデバッグ力ってつくのだ…と悩んでいたら 👨💻 < スタックトレースするといいよ！ 👨💻 < スタックトレースするにはdebuggerとかconsole.trace()使うといいよ！ と教えていただきdebuggerを使ったらとても便利だったので🙏 スタックトレースとは スタックトレース (stack trace)とは エラーが発生したときに表示される内容で、そのエラーが発生するまでの過程（どんな処理がどの順番で呼び出されたかの流れ）を、ざっくりと表示したものです。 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 スタックトレースを使って問題をどう切り分けるか まずは問題が起きている箇所のスコープを狭くしていきましょう💡 問題の切り分け方として ざっくり入口と出口の関数に適切な値が入って
なぜ !1 なのか？ - Qiita
!1 ！？！？ そのコードを見た時、正直笑いました。 なんでそうなるの？？って。 そして理由を考えてみたのです。 かのプログラマーがそう書かないといけなかった理由を……。 推測① 短くしたかった まっさきに思いついたのがこれです。 false ５文字に対して、 !1 ２文字ですからね。 わからなくない。 わからなくはないんだけど……なぜ！ なぜ 0 にしない。 １文字いけただろ！ そこ妥協すんなよ！！ ということで、この推測は却下しました。 推測② 俺JSに詳しいんだぜって言いたかった ほら、あるじゃないっすか！ 三項演算子覚えたプログラマーが、やたらめったら三項演算子使っちゃうやつ。 めっちゃ見にくいからやめれ！！！ って感じで、 JavaScript の 1 が true として評価されるのを覚えた人が書いた、と。 これは普通にありそうだ。 ……でもなぜ 0 にしない！！ 同じタイミン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript オプション引数のデフォルト値を指定したい - Qiita
Puppeteerでヘッドレス Chromeのフルページスクリーンショットを撮る - Qiita
