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 で CPU が Intel かどうかを判定する（ついでに JIT を検知する）
先日、次のような Tweet を見かけました TIL I discovered that TensorFlow.js uses an interesting trick to sniff your CPU architecture in WebAssembly. pic.twitter.com/LVyywIM48I — Robert Knight (@robknight_) January 4, 2023 面白かったので、なぜこうなるのかの解説と、ついでにこのテクニックを使った JIT 検知方法などについて紹介します。 JavaScript における低レイヤーの扱い JavaScript においては、挙動が比較的しっかりと仕様に定められているために、環境による振る舞いの違いはあまり発生しません。しかし、低レイヤーに降りるほど振る舞いは実装依存になり、環境差が発生する余地が出てきます。 一番
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/b26f7dc8f9e783316f720174980e93c627438d74/height=288;version=1;width=512/https%3A%2F%2Fefcl.info%2Fpublic%2Ffavicon.png)
NestJS の基礎概念の図解と要約
はじめに 仕事で使用することになった NestJS について、公式の NestJS Fundamentals Course やドキュメントなどで勉強を進めているのですが、新しい概念が次々と現れるため消化しきれなくなってきました。そこで、まず全体の俯瞰図をしっかりと頭に入れるために、公式ドキュメントの Overview に出てくる範囲の概念を図解して整理し、また各々の役割やプロジェクト内のどこにどのように設定していくかについてまとめることにしました (逆に、大枠とは関係ない部分については大胆に省きました)。 対象読者としては、簡単な CRUD アプリケーションなどを NestJS によって作成したことがあり、基礎的な概念や構成要素について何となくは把握したものの、どうもスッキリとは理解できていない気がする、というような方を想定しています。 この記事が自分のような NestJS 入門者のお役に
Assertion functions in TypeScript - LogRocket Blog
Matteo Di Pirro I am an enthusiastic young software engineer who specialized in the theory of programming languages and type safety. I enjoy learning and experimenting with new technologies and languages, looking for effective ways to employ them. Assertion functions in TypeScript are a very expressive type of function whose signature states that a given condition is verified if the function itsel
ReactでTwitterのタイムラインなどを埋め込む | Narumium Blog
React(Next.js)でTwitterの埋め込みを行いたい。 主にタイムラインが対象ですが、一応何でも埋め込めるようにしておきます。 ライブラリを使ったり使わなかったり。 公式埋め込み まず前提として公式で簡単に埋め込みコードが作れます。 https://publish.twitter.com/ コレクション、ツイート、プロフィール、リスト、モーメント、いいね、各種ボタンを埋め込みに使える。検索結果はないんですね。 これらはツイートなどの単体、タイムライン、ボタン形式で埋め込まれる。 ここで生成するとdomとscript読み込みを出されるのですが、Reactで外部scriptの読み込みは普段することが少ないです。 場合によってはindex.html(nextjsなら_document.js)にで読み込むのもいいけど、埋め込まないページでは負荷が増えるだけになる。 それでライブラリを使
ECMA-262を読んだ日
// 🤔 = 🤔(U+1F914) getCharacterLength("🤔"); // 1 // が = か(U+304B) + ゙(U+3099) getCharacterLength("が"); // 2 // 👨👩👧👦 = 👨(U+1F468) + ゼロ幅接合子(U+200D) + 👩(U+1F469) + (U+200D) + 👧(U+1F467) + (U+200D) + 👦(U+1F466) getCharacterLength("👨👩👧👦"); // 7 あ，なんかコードポイント数を返す っぽい ですが，そのようにキッパリと言及されているわけではないので，多少モヤモヤしますね．もしかしたら，「コードポイントを数える っぽい 動作」なだけで，上記のテストではわからない例外があるのかもしれません． MDNの本文には，これ以上の情報
Temporal documentation
This Stage 3 proposal is experimental. Do try it and report bugs; don't use it in production! ECMAScript 拡張の ISO-8601 と RFC 3339ISO-8601とRFC 3339は、日時データをコンピュータが扱いやすいようにシリアライズするための業界標準規格です。 しかし、これらの規格は、ECMAScript ユーザーが望むすべてのケースで十分とは言えません。ISO-8601 や RFC 3339 がカバーしていない、以下の 3 つの重要なユースケースがあります： IANA タイムゾーン名 「月と日」の構文 カレンダーシステム このドキュメントの目的は、Temporalのために ISO-8601 や RFC 3339 を補足することです。 IANA タイムゾーン名Joda Tim
Temporal で JavaScript の次世代の日時処理に触れてみる - Qiita
この記事は Recruit Advent Calendar 2021 の 7 日目の記事です。 イントロダクション Web アプリケーションの新規開発をしていて、先日、日時処理のライブラリ選定をする機会がありました。直近のプロジェクトで date-fns を使っていたので、今回もそれでいいかと考えていたのですが、Temporal が TC39 プロポーザルではあるが stage 3 になっているから試してみてもいいんじゃないかという話になりました。stage 3 であれば API 変更のハードルは非常に高いそうです。stage 3 になるまでの提案はこちらの記事が参考になります。少し見ただけでも大きく変わっていることがわかります。 プロジェクトはまだ開発段階ですが、実際に Temporal をプロジェクトに導入しながら、検証兼開発を進めていいます。しかし、Temporal を実際に使って
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
Building Great User Experiences with Concurrent Mode and Suspense – React Blog
At React Conf 2019 we announced an experimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building the new facebook.com. This post will be most relevant to people working on data fetching libraries for React. It shows how to best integrate them with Concurrent Mode and Suspens
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
イベントオブジェクトの target と currentTarget の違いとそれに伴う TypeScript の挙動を調べてみた
こんにちは。 突然ですが、 event.target と event.currentTarget、どのように使い分けていますか？ そもそも違いあるの？と思うかもしれません。 単刀直入にいうと、大いにあります。使い方によってはバグを発生しかねません。ていうか僕の場合は発生しました。（二時間ぐらいかけてデバッグしたのはまた別の話） 今日は、この二つのプロパティーの違い、そしてどう TypeScript に影響するか、の話をします。
Event.currentTargetとEvent.targetの違いについて
Event.currentTargetプロパティとEvent.targetプロパティの違い イベントハンドラやイベントリスナーを登録したあと、イベントが発生すると登録したコールバック関数が呼び出されます。この時、一番目の引数に発生したイベントの情報が格納された Event オブジェクトが渡されてきます。 <input type="button" value="button" id="xxx"> <script> function butotnClick(event){ console.log('Hello'); } let button = document.getElementById('xxx'); button.addEventListener('click', butotnClick); </script>
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
【Next.js 11】next/script には JavaScript の基本がつまっていた
修正(2021/06/17) ツイッターでご指摘をいただき、一部修正を加えました🙇 はじめに 2021/06/16 未明に Next.js の新メジャーバージョン v11 がリリースされました。 ほぼ同じタイミングで Next.js Conf (Next.js のカンファレンス)が開催されており、Zenn ユーザの中にはリアルタイムで見ていた人も多いのではないでしょうか。 Core Web Vitals をはじめとした 、パフォーマンス改善に関する話題や新機能が多く、Google のチームが Next.js で最適化のトライを行いながら、Nuxt や Angular に反映していくというのが印象的でした。最先端の取り組みが、普段メインで使用している Next.js で行われているということで、非常に嬉しい限りです。 Next.jd 11 全体のまとめは今後誰かが書いてくれると思いますので
Navigation timing - Web APIs | MDN
DOM construction has finished and interaction with the DOM is possible. Only the current document is included, so usually there is only one PerformanceNavigationTiming object to observe. It extends the PerformanceEntry interface with the entryType of "navigation" and also inherits from PerformanceResourceTiming, so all of the timestamps from the process of fetching the document are available as we
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AWS SDK for JavaScript
Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】
Modern JavaScript Date Utility Library