サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
背景JavaScriptでは forEach という配列から要素を取り出して反復処理できる関数があります。 前の記事JavaScriptのforEach内でbreakができない理由【備忘録】 では、 forEach の中ではbreak が使えず、途中でループを抜けることができない理由についてまとめました。 今回はその続きとして、forEach の内部で await を使った場合に、非同期処理の完了を待たずに次の処理へ進んでしまう、という挙動について理由を調べてみました。 forEach内でawaitしてみる forEach の中で await して得られた値を配列に追加し、 forEach の直後に配列を console.log で出力する例で確認します。 for文の感覚でいえば、イテレーション中の await で都度処理を待ってくれるイメージなので、全ての要素への処理が終わったら配
HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。2023JavaScript Rising Starsでは、フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby onRailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogle
「1個の要素と複数個の要素を同じように書かせる」というのが実は jQuery の特徴の一つだと思っている。 document.querySelector() や querySelectorAll が出現して以降 jQuery の必要性はほとんどなくなったと言われる。
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
JavaScriptは実行するコードそのものをユーザーに公開してしまう仕様のため、リバースエンジニアリング対策のために難読化されていたり、アンチデバッガーが搭載されていたりします。そうしたアンチデバッグへのシンプルで効果的な対抗策がJavaScriptの解析技術を掲載しているブログ「nullpt.rs」にまとめられています。 EvadingJavaScript Anti-DebuggingTechniques https://www.nullpt.rs/evading-anti-debugging-techniquesJavaScriptの動作を解析するためのデバッグツールは多くのブラウザに搭載されており、例えばGoogleChromeの場合は開発者ツールの「ソース」タブからアクセスすることが可能です。解析したいJavaScriptを開き、コードの左側の部分をクリックすることでブレ
ちょっと面白そうだったので絶対に画像をダウンロード&スクレイピングさせないWebページを本気で作ってみたを突破してみようと思う。 方法 方法としては下記の3つくらいが簡単そうだけど、いちばん簡単な1つ目でやってみます。HTML,JS,JSONをDLしてHTML書き換え、ダウンローダとして使うChrome Extensionを書く Puppeteerなどを使う とりあえず、仕組みは書かれているので下記でcanvasのtextを無効化 + DL用のボタンを追加します。 <button id="dl">Download</button> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // ctxのfillTextをなにもしない関数に置き換える ct
ある時Twitterのタイムラインを見ていたら、「JavaScriptをWasm化して動かす意味がわからない」というような意見を見かけました。JavaScriptはブラウザに搭載されているV8のようなJavaScriptエンジンによって高速に動作するので、わざわざWasm化してもパフォーマンスは劣化するのになぜなのか?という話なんですが、これは「Wasm化=パフォーマンスのため」という考えだと意義がわからないのでこの記事ではそれについて解説します。JavaScriptをWasm化して動かすツールやライブラリとしては、Shopifyが開発しているJavyやquickjs-emscriptenなどがあります。JavaScriptをWasm化して動かすためには、ある特定のJavaScriptエンジンをWasm向けにビルドして動かす必要がありますが、そのような用途ではQuickJSというJava
データの取得・ルーティング・フォームの値の管理に至るまでJavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Webフロントエンドの開発においては、React やVue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまでJavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケ
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURLAPIやURLSearchParamsAPIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet forJavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fb26f7dc8f9e783316f720174980e93c627438d74%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fefcl.info%252Fpublic%252Ffavicon.png&f=jpg&w=240)
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
ブラウザのJavaScript 実行フローは、Node.js 同様 event loop に基づいています。 event loop の動作を理解することは最適化のためには重要であり、適切なアーキテクチャにとっても重要である場合があります。 このチャプターでは、最初にそれがどのように動作するかについて理論的な詳細を説明し、次にその知識の実践的な使用例を見ていきます。 Event Loopevent loop のコンセプトは非常にシンプルです。無限ループでJavaScript エンジンはタスクを待機し、それらを実行し、また次のタスクを待機します。 エンジンの一般的なアルゴリズムは次の通りです: タスクがある間: 最も古いタスクから開始し、それらを実行します。 タスクが現れるまでスリープし、現れると 1. に進みます。 これは、ページを閲覧するときに見られることの形式化です。JavaScri
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違いJavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません（仕様 7.2.14）。 console.log(undefined === null); // false console.log(undefined == null); // true
先日、こちらのツイートを見かけました。 それに対して筆者は以下のツイートをしたところ、いくつかの反応が寄せられました。 コード部分を再掲します。 async function foo1() { return await Promise.resolve(); } async function foo2() { return Promise.resolve(); } async function wait() { await null; } // pika // chu // と表示される foo1().then(() => console.log("pika")); wait().then(() => console.log("chu")); // chu // pika // と表示される foo2().then(() => console.log("pika")); wait().the
先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。 Isit :modal? by Jhey Tompkins コンテナクエリ（@container）と:has()疑似クラスについては、先日の記事をご覧ください。 レスポンシブの実装が今までと変わる！CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 :modal疑似クラスがCh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
