JavaScriptの進化で変わる身近なコーディング習慣 uhyo ( https://twitter.com/uhyo_ ) JavaScriptは歴史が結構長い言語であり、さまざまなベストプラクティスがあります。一方で、JavaScriptは進化を続けており、それに伴ってこれまでに蓄積したベ…
JavaScriptの進化で変わる身近なコーディング習慣
JavaScriptの進化で変わる身近なコーディング習慣 uhyo ( https://twitter.com/uhyo_ ) JavaScriptは歴史が結構長い言語であり、さまざまなベストプラクティスがあります。一方で、JavaScriptは進化を続けており、それに伴ってこれまでに蓄積したベ…
Splideをスライダーの新たな定番としたく - Qiita
はじめに Webページ制作において、スライダーの登場頻度は異常に高いですよね。 cssでanimationプロパティを書くより、スライダーを実装する方が多いまであります。 その上、地味に仕様決めをちゃんとしておかないと、後であーだこーだなって実装コストが高くなることも往々にしてあるかと思います。 そのため、大体の仕様を満たすことができるようにライブラリを使って実装している方がほとんどかと思います。 そして、そのスライダーライブラリのデファクトスタンダードとなっているのが、slickとSwiperでしょう。 そこに第三の選択肢として、Splideを推したいのです。 Qiitaで「Splide」と検索しても意外と記事がなかったので、おすすめポイントをまとめてみたいと思います。 Splideとは Splideは、MITライセンス下でリリースされたアクセシビリティに配慮された軽量で高機能なスライダ
警告 (CVE-2022-23812): ウクライナ侵攻の抗議目的で peacenotwar モジュールが node-ipc パッケージを通じて npm 開発者を妨害 - Qiita
警告 (CVE-2022-23812): ウクライナ侵攻の抗議目的で peacenotwar モジュールが node-ipc パッケージを通じて npm 開発者を妨害JavaScriptSecurity脆弱性Snyk 本記事は2022年3月16日に発表した弊社の英語ブログAlert: peacenotwar module sabotages npm developers in the node-ipc package to protest the invasion of Ukraineを日本語化した内容です。 2022年3月15日、人気の JavaScript フロントエンドフレームワーク Vue.js のユーザーは、npm のエコシステムに対するサプライチェーン攻撃に見舞われました。これは、パッケージ node-ipc とそこから参照されている peacenotwar に対して、node
ウェブアプリとしてデプロイしたGASをブラウザからAPIとして呼ぶ際のCORSエラー - sambaiz-net
GASでAPIを公開する方法として、scripts.run APIで実行できる実行可能APIと、ウェブアプリがある。 前者は認証が走り実行者の権限で動くが、後者は認証を行わずデプロイユーザーの権限で動かすこともできるのでパブリックなAPIとして使うことができる。 当然、不正な操作が行われないように注意する必要があり、GASのQuotaやhard limitも気にする必要がある。無料で運用することができるが、レイテンシやエラーハンドリング、監視などを考えるとやや心許ない。 ウェブアプリではdoGet(e)とdoPost(e)を実装することでそれぞれのメソッドのリクエストをハンドリングできる。これ以外のメソッドには対応していない。 function doGet(e) { return ContentService.createTextOutput(JSON.stringify(e.parame
ブラウザバック感知の備忘録 - Qiita
はじめに 仕事でブラウザバック時のみ実行される JavaScript コードを作成したので、その際の知見を書き留めておきます。 画面読み込み完了イベントの発火 ブラウザバック時はキャッシュから画面が読み込まれることも相まって、使用するブラウザによって画面読み込み完了イベントの発火の扱いが異なります。 いくつかあるイベントの種類の中でも、「pageshow」はメジャーなブラウザ（Google Chrome, Firefox, Safari, Edge）のいずれにおいてもキャッシュから読み込まれた場合でも発火します。 ブラウザバックかどうかの見極め ブラウザやキャッシュの状況によって反応が異なるので、併記した方が良い二つの判定方法を記載します。 1. PageTransitionEvent.persisted PageTransitionEvent.persisted はキャッシュから読まれた
どうしてMath.max()は-Infinityになるし[].every(条件式)はtrueになるの？ - Qiita
これらは、別に「JavaScriptの奇妙な仕様」ではありません。 集合演算のできるほぼすべての言語が同様の仕様となっています。JavaのStream.allMatch()だってC# LINQの.All()だってそう。 これらの仕様は「中立元を返している」のだと理解すると腹に落とすことができると思います。 中立元 どんな数に1をかけても同じ数です。 どんな数に0を足しても同じ数です。 これらのことを「かけ算の中立元は1だ」「足し算の中立元は0だ」と表現します。演算しても元の数と同じ結果になるような数のことを、その演算の中立元だと言うわけです。 さて、数のゼロ乗は1になることを中学で習うと思いますが、納得のいかなかった方、いらっしゃいませんか。 33は3×3×3 32は3×3 31は3 30は、3を一個もかけ合わさないってどういうこと⋯？ “虚無”⋯？ 仕方ない、先生が1と言ったから1だと覚
![どうしてMath.max()は-Infinityになるし[].every(条件式)はtrueになるの？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2a93aa75bbc7165a602e6ae01c5a18997de7406b/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgxJUE5JUUzJTgxJTg2JUUzJTgxJTk3JUUzJTgxJUE2TWF0aC5tYXglMjglMjklRTMlODElQUYtSW5maW5pdHklRTMlODElQUIlRTMlODElQUElRTMlODIlOEIlRTMlODElOTclNUIlNUQuZXZlcnklMjglRTYlOUQlQTElRTQlQkIlQjYlRTUlQkMlOEYlMjklRTMlODElQUZ0cnVlJUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgxJUFFJUVGJUJDJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02MDA1ZGIwYzU1ZDAxZGIxOTA5ZTgxYzFiODI0Mjc4Yg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5dWJhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mY2QwYWIzMjZhNDAyNjA5ODc5OGEwMDc2OWFhYTMxZA%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Ko44Og44K544Oq44O85qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dbad6bd1d1ce546ffca311560812ab071)
JavaScriptの反意図性(クソ挙動)を指摘するバズツイ周辺解説 - Qiita
先日このようなツイートが話題になりましたね 無論この件は例のコインハイブ事件で言われるような反意図性とはずれる話題ですが、直感的ではないという点でうなずくものがあります 今回はなぜこれらがこのような結果になるのか、回避方法等順に説明しようと思います というのも、この中のいくつかはJavaScript固有のものではないので、他人事と思わないようにしていただきたく…… その上でJavaScriptの本当の意味でヤバイ箇所も説明できたらいいなと思います。 ①typeof NaN NaNとはNot a Numberの略、なのになんでnumberなんだ！！ この値は他のオブジェクトを数値に変換する関数parseInt(x)が失敗した場合、0*Infinity等の不確定な計算をした時に出力される値で、エラーを表現する値の一つです。 内部表現的にはただの浮動小数(IEEE754)なので、typeofがn
Webでも動く小説用VS Code拡張機能を作る
小説のバージョン管理をGitで行うにあたり手頃なエディターが欲しくなったので、ブラウザでも編集できるようVS Codeの拡張機能として作ってみた。 機能としては小説投稿サイトにあるような、 ルビや傍点を振る 行頭の字下げを揃える 字数のカウント プレビュー といったものを一通り備えている。 ルビや傍点の記法はカクヨムと同じものを採用し、傍点に対応していないサイト用にはルビによる代替表記に変換してコピーするコマンドを用意した。 ソースコードはGitHubで公開している: なおNode.jsで動作する小説用拡張機能としては、より多機能なものとしてSF作家の藤井大洋氏による が既にあり、今回の拡張機能を作る上でも参考にさせていただいた。 Web拡張機能 VS CodeはTypeScript製ということもあってブラウザでも動くようになってきている（Visual Studio Code for th
急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
[ECMAScript] Pipe operator 論争まとめ – F# か Hack か両方か - 株式会社カブク
※ 2021/09/15 時点の話です。議論が活発なので、これからどう流れるか分かりません。この記事ではたくさんのリンクを貼っていますが、議論の焦点を理解するにあたって最も重要なリンクはこれです。 TC39 Pipeline Operator – Hack vs F# https://benlesh.com/posts/tc39-pipeline-proposal-hack-vs-f-sharp/ 2 つの仕様案 TC39 の Pipe operator （以前は Pipeline operator と呼ばれていました、 Wikipedia によれば Pipe operator を日本語で「パイプライン演算子」と呼ぶようです）のプロポーザルには少なくとも 2 つの異なる仕様案「F# pipe」と「Hack pipe」があります。以前はこれらを組み合わせた「Smart mix」案もありました
![[ECMAScript] Pipe operator 論争まとめ – F# か Hack か両方か - 株式会社カブク](https://cdn-ak-scissors.b.st-hatena.com/image/square/3c5228e05eb2c2945c402094eb984595033f4d3f/height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2021%2F09%2Ffsharp-pipe-rxjs-1024x321.png)
JWTなどのTokenをlocalstrage(HTML5の)に保管することについて
HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。
VS CodeのPlug-In ExtendScript Debuggerを試してみる。 | onebitious's BLOG
投稿日：2021年6月19日 ExtendScript Debuggerとは、 Adobe製品をJavaScript(ES3)によって自動化プログラムを記述するVisual Studio Code（以下、VS Code）のPlug-Inです。 ExtendScript Toolkitは32bitアプリなので、macOS Catalina(v10.15)のリリースと同時に使用することができなくなりました。 Adobe自体もサポートを終了しています。 ExtendScript Debugger 1.1.0に移行したと謳っています。 DTPの仕事をしているときにツールを作りましたが、Macで使えなくなったことと、Web制作の仕事に移行したのを境に、メッキリ使わなくなりました。 VS Codeで使えるようになったのは知っていましたが、久しぶりにツールを検証する機会があったので取り上げてみました。
JavaScript の Array 処理はどれが速いのか？ (2021 年 12 月) - Qiita
JavaScript で Array に対して処理する方法はいくつかあります。 Array が提供しているメソッドとループで処理した場合にどちらが速いのか調べてみました。 ※ 特に記載がない限り 2021 年 12 月 18 日時点の情報になります。 短い結論 普通の for ループが最速です。 とはいえ Array が提供するメソッドも十分に速いです。 可読性やコード量を考えると速度がとても重要かつ高頻度で呼ばれる処理以外は Array が提供するメソッドで問題ないと思います。 先行研究 2 年以上前の記事ですが次の記事でループ処理について調べられています。 それによると普通の for ループが最速だけど Babel や TypeScript は for...of を普通の for ループに展開するとのことでした。 ほかにも Array の処理について調べた記事がいくつかありました。 1
Using WebTransport | Capabilities | Chrome for Developers
WebTransport's relationship to other technologies Is WebTransport a replacement for WebSockets? Maybe. There are use cases where either WebSockets or WebTransport might be valid communication protocols to use. WebSockets communications are modeled around a single, reliable, ordered stream of messages, which is fine for some types of communication needs. If you need those characteristics, then WebT
まだ使ってる？今は非推奨となったJavaScriptの書き方
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textConte
safariのみエラーが発生してしまう。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
requestAnimationFrameのループはPromiseに変換すると簡潔に書ける（かも） - Qiita
Chrome Platform Status
GitHub - zloirock/core-js: Standard Library
base64(Data URL)から画像データを復元したい