WebAssemblyを利用してJavaScriptアプリケーションのパフォーマンスを向上させる方法 - Qiita
ウェブアプリケーションのパフォーマンス向上は、ユーザーエクスペリエンスの向上に直結します。そこで、本記事ではWebAssemblyを使用してJavaScriptアプリケーションの実行速度を向上させる方法を紹介します。 1. WebAssemblyとは WebAssembly（通称Wasm）は、ウェブで高速な実行を実現するためコードです。。これは、ウェブブラウザ内で実行できる低レベルのバイナリフォーマットであり、JavaScriptの補完として設計されています。WebAssemblyの主な目的は、ウェブでの高性能なアプリケーションの実現を支援することです。これにより、C、C++、Rust、Goなどの言語で書かれたプログラムをウェブアプリケーションで直接実行することが可能になります。 Amazon Prime Videoで動画再生にWebAssemblyを採用されている実例があるようです。 2
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる 2024年6月リリースのChrome 126とEdge 126でJ
図で理解するJavaScriptのプロトタイプチェーン - Qiita
JavaScriptのリファレンスといえばMDNですよね。 JavaScriptで調べものをする際に、真っ先に見る方も多いでしょう。 そんなMDNですが読めていますか？ 例えばArrayのページを見てみましょう。 さらっと書かれているprototype JavaScriptを理解するにはプロトタイプチェーンを知る必要がある 本記事の目的 プロトタイプチェーンを理解する MDNをより読めるようにする JavaScriptのObjectやArrayなどの基本型の構造を理解する 確認環境や記述について Chrome 52のコンソールで動作確認 ES5で記述 説明のしやすさを重視、プロトタイプをあらわすのに__proto__を使って記述 まずはオブジェクトについてみていく シンプルなオブジェクトを作る
【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】 - Qiita
const getNodesByXPath = (xpath) => { const result = document.evaluate( xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); return [...Array(result.snapshotLength)].map((_, i) => result.snapshotItem(i)); }; const nodes = getNodesByXPath('//div'); nodes; // [div, div, div, ...] 3. XPath とは 3.1. 概要 XPath とは XML 文書（HTML 含む）のさまざまなノードを指し示すことができるパス文字列のことです。 XPath は XML Path Language の略
【JavaScript】setTimeout(fn, 0)が遅さが分かるサイト - Qiita
発端 こちらの記事を読んだとき、未知との遭遇でよく分からなかったのだが、調べるとクソ重い処理をUIがフリーズしない程度にちょくちょく実行する方法としてsetTimeout(fn, 0)というものがある。ということを知った。 そして、setTimeout(fn, 0)は遅いらしいので他のアルゴリズムと比較したいと思った。 比較 1から100000までの和を求めてもらう。 おわかりいただけただろうか。 比較に使わせていただいたアルゴリズム Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do w
JavaScriptでObjectに空のStringを足すと0になる！？……わけではなかった
ASTをみてみよう この不思議な現象を調査するために、AST（Abstract Syntax Tree: 抽象構文木）の状態を見てみることにしました。ASTはソースコードを構文解析した結果をツリー構造にしたもので、AST Explorerを使うと簡単に見ることができます。 ({}) + "" のAST ({}) + "" のASTをみると、ひとつの ExpressionStatement となっているのがわかります。ExpressionStatement の leftは ObjectExpression 、 operator は + 、rightは Literal となっていて、たしかに Object と String の足し算になっています。これなら確かに"[object Object]" が返ってくるでしょう。 {} + ""のAST しかし、{} + "" のASTをみると、Bloc
</> htmx - high power tools for html
NEWS: htmx finished 2nd in the 2023 JavaScript Rising Stars "Front-end Frameworks" category, just behind React (htmx is a library, btw) and #10 overall! Thank you to everyone who starred us! introduction htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hyper
【javascript】演算子なしでFizzBuzzを書く - Qiita
【javascript】演算子なしでFizzBuzzを書く ※この記事には通常では考えられないような記法が多々登場します 演算子、使ってますよね？ね？？（こんな記事見てる人なら） Javascriptにはたくさんの演算子があります。 それを使わないチャレンジです。要は自慢したいだけ 演算子の規定 演算子の規定は基本的にMDN Web Docsの式と演算子のページを参照しました 主なものは下記のものです（これが全てではないです） 算術演算子：+ - * / % ** 比較演算子：== != < > 代入演算子：= 論理演算子：! && || 三項演算子：? : グループ化：() そしてプロパティアクセス演算子です プロパティアクセス演算子 あまり聞き馴染みのない演算子ですが察しの良い方はもうお気づきでしょう ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ console.log() consol
ブラウザ上にセキュリティ上の懸念がない任意のスクリプト実行環境を用意したい
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
コンポーネントごとに考えるアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita
はじめに みなさん初めまして。🎅🏻 Qiita株式会社で マネージャー・PdM・デザイナーをしている、自分のことをデザイナーであると自認 @degudegu2510 です。 去年に続き、今年のQiita Advent Calenar 2023でも、1人で25記事以上投稿した方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉 Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、今年も25記事完走してやろうとこのカレンダーを作成しました。 「有給を使ってでも、25記事完走するぞ！💪🏻」という気概でいるので、購読・応援していただけると嬉しいです。 ※ 2022 完走賞：【完走賞ゲットだぜ！】CSSでポケモンマスターになってやる Advent Calendar 2022 テーマ このカレンダーは、 UIコンポーネントごとに考えるアクセシビリティ
正規サイトを改竄し、コインマイナーを配布する不正なJavaScriptについての情報共有 - Qiita
本書の目的 攻撃者を調査する過程で遭遇した手法について、 注意を促す狙いをこめて記事を作成しています。 もしも業務中に類似した攻撃の被害にあった場合は、 デジタルフォレンジック調査の実施をお勧めします。 自己紹介 ・セキュリティ会社で犯罪行為をするハッカーについて調査をしています。 ・筋トレにハマっています。 今回紹介する攻撃の概要 不正なJavaScriptが埋め込まれたWebサイトを閲覧 JavaScriptがPCの種類を判定し、Windowsであればマルウェアをダウンロード マルウェアを起動すると、コインマイナー、C2Agentとして動作 最初に、今回ご紹介する攻撃はNTTセキュリティブログで紹介されている攻撃と類似点が多いです。 細かいURLのパスやJavaScriptの挙動に差分は有りますが、 攻撃の思想や使用しているドメイン等から同一の攻撃者かもしれないなと考えています。 より
MDN は Wiki から GitHub 管理に変わって編集の敷居は高くなったのか？ - Qiita
はじめに この記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。 こんにちは。debiru です。MDN が Wiki プラットフォームだった頃から記事を編集したりしてきました。 今日は、現在の GitHub 管理されている MDN の編集に参加するのは敷居が高いのかどうかについて考えていきたいと思います。 MDN が Wiki だった頃 2020 年 12 月 14 日より、MDN は GitHub ベースの新しい Yari プラットフォームで運用しています。それまでは 2012 年 8 月 3 日に立ち上がった Kuma という Wiki プラットフォームが採用されていました。それ以前にはより古い Wiki プラットフォームが採用されていました。詳細は MDN のあゆみを参照ください。 現行のシステムとそれ以前では、Wiki であったかどうか
MDNとかをみんなで編集！翻訳！ のカレンダー | Advent Calendar 2023 - Qiita
オープン Web の開発者向けドキュメント MDN Web Docs には、Web アプリ開発に役立つノウハウなど、英語ドキュメントが日々どんどん追加されていっています。ただそのぶんドキュメントの日本語化(l10n=localization)は後手後手になっています。 新しいウェブ技術やウェブ標準に興味ある 翻訳に興味あるけど、どうしたらいいか分からない 英語は苦手だけど、日本語の文書を読みやすくするとかならできるかな Mozilla のコミュニティ活動に参加してみたい フォクすけに萌える MDN を翻訳してきたけど最近ご無沙汰気味 などなど、色々な方面からの参加をお待ちしています。 参考情報: みんなで編集！翻訳！カレンダー 2021 みんなで編集！翻訳！カレンダー 2020 みんなで編集！翻訳！カレンダー 2019 みんなで編集！翻訳！カレンダー 2018 MDN Web Docs ド
デジタル庁でjQueryが何をしているのか - laiso
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
Popover APIが便利そう - Qiita
Popoverの機能 Popover APIには便利な機能が標準で搭載されているため紹介します。 最上位のレイヤーに配置される ポップオーバーが最上位に出現するため、z-indexを調整する必要がありません。 ライトディスミス機能 簡易非表示という概念であり、 ESCキーで閉じる ポップオーバーの外側をクリックすると閉じる という機能で、ポップオーバー外をクリックして閉じるという動作を標準で対応しており、ESCキーで閉じることができるためアクセシビリティにも配慮されています。 複数のポップオーバーがあった場合は勝手に他を閉じてくれる 一つ目のポップオーバーを開いた状態で二つ目のポップオーバーを開くと自動的に一つ目のポップオーバーを閉じてくれます。 実装方法 実装方法は至ってシンプルです。 ポップオーバーにしたい要素にpopover属性と任意のidを付与 ポップオーバーの開閉を制御したい要素
ChatGPTといっしょにJavaScriptでスイカゲームっぽいものを作ってみる - Qiita
普段BtoBのお堅めWebアプリを作っているエンジニアがスイカゲームに魅了されてしまい、 ChatGPTをお供にスイカゲームっぽいものを作ってみたというお話です。 背景 私は普段、BtoBの割と堅めのWebアプリケーションを作っていて、 業務の中でJavaScriptと戯れる機会がそれなりにあるのですが、 業務アプリ以外で、JavaScriptのアクションゲームっぽいものをつくってみたいな～ と常々思ってました。 ただ、何から手を付けていいかわからなかったので、今まで未着だったのですが、 ちょうどよい機会なのでChatGPTに聞きながらスイカゲーム風の何かの製作に挑戦してみることにしました。 題材を考える 何かものづくりをするときは、モチベーションが欲しいですよね。 私は猫が好きなので、猫関連グッズをモチーフとした「ネコゲーム」を作って 猫たちと戯れたいと思います。 何はともあれ、素材をつ
JavaScriptの「継承」はどう定義されるのか？ 仕様書を読んで理解する - Qiita
継承は、クラスベースのオブジェクト指向における基本的な概念のひとつであると信じられています。JavaScriptにもES2015以降はclass構文があり、extendsを用いてクラスの継承を記述することができます。また、それより以前もprototypeを通じてオブジェクト指向的なプログラムが書かれてきました。 この記事では、JavaScriptにおける「継承」がどのようなものであり、どのように定義されるのかを解説します。タイトルにある通り、今回はECMAScript仕様書に対する解説を中心とします。 仕様書はJavaScriptというプログラミング言語がどのようなものかを定義する文書であり、あなたが書いたJavaScriptプログラムは仕様書に書かれた通りの動きをすることになります1。したがって、たとえあなたが自分自身で書いたものだったとしても、JavaScriptプログラムの意味を完全
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
element.styleでjsに上書きされている元のcssの探し方が知りたい
Object.getPrototypeOf(obj) と obj.__proto__ の違いを教えてください
自分的 CORS メモ