これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy
数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。 他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSvelteなどと一緒に使用することもできます。 Swapy Swapy -GitHub Swapyの特徴 Swapyのデモ Swapyの使い方 Swapyの特徴 Swapyは、フレームワークやライブラリに依存することなく、わずか数行のコードであらゆるレイアウトをドラッグして移動できるレイアウトに変換するためのJavaScriptツールです。 MITライセンスで、個人でも商用でも無料で利用できます。
[JavaScript] 負数の四捨五入がExcelと合わない問題 - Qiita
はじめに 背景と概要 要件 JavaScriptを使用して小数n桁の四捨五入を行う 計算結果はExcelと合わせること JavaScriptのMathオブジェクトでは小数n桁の指定ができません。 JavaScriptライブラリを使用できない事情があり、関数を作ることにしました。 この際、負数の計算で、JavaScriptとExcelの結果に差異が発生してしまいました。 この問題を解決するまでの知見を共有します。 前提バージョン ECMA Script 2015 問題点 まずは、こんなコーディングをしてみました。 数値と端数処理桁数を受け取り、四捨五入した結果を返す関数です。 function myRound(number, pricision) { var _pow = Math.pow(10, pricision); return Math.round(number * _pow) /
![[JavaScript] 負数の四捨五入がExcelと合わない問題 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/eee60f627898ef67b79eafa5dea90a318c0e03da/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOCVCMiVBMCVFNiU5NSVCMCVFMyU4MSVBRSVFNSU5QiU5QiVFNiU4RCVBOCVFNCVCQSU5NCVFNSU4NSVBNSVFMyU4MSU4Q0V4Y2VsJUUzJTgxJUE4JUU1JTkwJTg4JUUzJTgyJThGJUUzJTgxJUFBJUUzJTgxJTg0JUU1JTk1JThGJUU5JUExJThDJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hN2IyNjgzNGQ2Nzg2NDBkYmYzNmM0NmNiNDM5NTQ1Ng%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweS1zb21lJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05ZjAxMjhkMTNlZjJhZTBiZWQxMDIyNzZhZGFjNmJjYQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D4197f48a6f61e21899287d85eb8d793b)
polyfill.ioを使うのは危険かもしれない(危険だった) - Qiita
TL;DR 2024/06/26 実害が出ているようです、polyfill.ioを利用している場合は直ちに利用を止めましょう。 GIGAZINE: JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Codebook: Polyfill.io使ったサプライチェーン攻撃でサイト10万件以上に影響 polyfill.ioから配信されるスクリプトが汚染される環境下にあり、危険な可能性があります。利用している方がいらっしゃいましたら外しておくことをおすすめします。または安全なバージョンのものがCloudflareとFastlyから利用できるので、ドメインをpolyfill-fastly.netやpolyfill-fastly.ioに変更して利用しましょう。 背景 自社で使用しているマーケティングプラットフォームサービスで作成したWebページをGo
Polyfill supply chain attack hits 100K+ sites
by Sansec Forensics Team Published in Threat Research − June 25, 2024 The new Chinese owner of the popular Polyfill JS project injects malware into more than 100 thousand sites. Update June 28th: We are flagging more domains that have been used by the same actor to spread malware since at least June 2023: bootcdn.net, bootcss.com, staticfile.net, staticfile.org, unionadjs.com, xhsbpza.com, union.m
JavaScriptの便利な記法や関数の紹介およびそれらの注意点について - Qiita
はじめに JavaScript初学者を抜けたあたりの方にむけて、便利な記法や関数、その注意点について紹介します。 初歩的な文法やデータ型などの知識は前提として解説を省きます。 JavaScriptの巨大なテーマとしては非同期処理などもあるのですが、巨大すぎるために本稿では割愛させていただきます。 let/constの使い分けについて 変数は不変なconstおよび可変なletを利用することができます。原則的にはconstを使い、再代入が必要な個所のみletを使うのが標準的です。 letを利用している時点で 「処理のどこかで再代入される」 と処理内容の推論を働かせてコードを読む人が多いと思います。このようなコードの読み方をするという前提を踏まえてコードの可読性を高めるうえでも、再代入されるかされないかを意識してconst/letを使い分けることが重要です。
Service Workerの基本とキャッシュ制御 - プログラミング雑ネタ集
2021/10/12更新 目次 Service Workerとは Service Workerでできること Service Workerの制限 Service Workerのライフサイクル 動作するまでの流れ Service Workerの登録 Service Workerのインストール Service Workerの有効化 キャッシュ制御 キャッシュ対象ファイルの準備 リクエストに対する応答「キャッシュに無ければネットワーク」 リクエストに対する応答「ネットワークがダメならキャッシュ」 リクエストに対する応答「オフライン不可である旨を表示」 古いキャッシュの削除 ユーザーによるキャッシュ削除 個人的に感じた疑問 Q. Service Workerとブラウザキャッシュはどのような関係にあるのか？ Q. 何らかの誤りにより更新ができなくなってしまうようなことは起きないのか？ Q. どんなリク
CVE-2024-4367 - Arbitrary JavaScript execution in PDF.js — Codean Labs
This post details CVE-2024-4367, a vulnerability in PDF.js found by Codean Labs. PDF.js is a JavaScript-based PDF viewer maintained by Mozilla. This bug allows an attacker to execute arbitrary JavaScript code as soon as a malicious PDF file is opened. This affects all Firefox users (<126) because PDF.js is used by Firefox to show PDF files, but also seriously impacts many web- and Electron-based a
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
javascript でなぜ 2^53 - 1 以下の整数を正確に表せるのか - Qiita
javascript の勉強をしていて疑問に思ったことについて調べたので書きます。冷静に考えるとかなり当たり前のことなのですが、同じ疑問を持つ人もいるかと思うのでメモを残しておきます。勘違いがあったら教えてください。 jsでは数値はすべて浮動小数点型で表す ほとんどのプログラミング言語では、整数と整数以外の実数を異なる型で表す（以下、面倒なので整数以外の実数を単に実数と表現する場合がある）。つまり、数値の中でも整数だけを特別に扱う型がある。例えば、Cでよく使うのは整数はint、実数はdoubleなどですね。これに対して、 javascript では整数だけを表す型というのがなく、数値はすべてNumberという型で表現される。つまり、3も0.3も同じ型の値である。Numberは実数を表すのによく使われる64bit の浮動小数点型なので、 javascript では整数も実数っぽく表しているこ
JavaScript Visualized - Promise Execution
Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
うるう日にしか発生しないバグ
昨日うるう日にしか発生しないバグに遭遇した。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になる。閉区間。 とあるコードの
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
リアルタイム通信用のコネクションをタブ間で共有してまとめる
これはなんらかのアドベントカレンダーの何日目かの記事だったりしません。 KOBA789 です。仕事では人工衛星の搭載ソフトウェアを書いたり、人工衛星の管制システムのソフトウェアを書いたりしています。 先日、こういうツイ……ポストをしたらちょっとバズりました。意外と興味持ってくれる人が多かったので、それに関連するオタク早口記事でも書くかぁと思って筆を執っています。 うちの人工衛星の開発ツールはウェブ技術でできている 前述のポストは管制システムについてですが、開発用ツール（C2A DevTools）もまた React + TypeScript でできています。 まぁ画面見てもなにがなんだかという感じだと思いますが、UNIX サーバーで top コマンド叩いたときの内容と、サーバーのログが合体したみたいなものが表示されていると思ってください。 これらの数値は gRPC-web の Server-
async/awaitにおけるエラー処理を実行の順番から整理する - Qiita
はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？ async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解できていなかったため、エラーの所在を突き止めるのに苦労してしまいました。 そのため、これを機にasync/awaitにおけるエラーハンドリングについて備忘録的にまとめておきます。 この記事のまとめ; catchされるエラーはrejectのみか、throwされたエラーも含まれるか →両方catchできる async関数における処理の順序、awaitがある場合とない場合 →awaitがない場合には同期的に処理が実行され、catchできなくなる エラー処理を外側に伝播し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タスクキューとマイクロタスクキュー｜イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JavaScriptでconsole.logを使用してませんか？
難しすぎると話題の「警視庁の音ゲー」、JavaScriptでベタ書きされていた→作り切る根性がすごいし参考になりそうな実装だった