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
useEffect: 基礎から使用すべきでない例まで
はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動（ボタンクリック等）による、
ぼくのかんがえたさいきょうのGAS開発手法2023
前提clasp の制約、Script API の考え方、Google Drive の考え方に素直に従うその条件下である程度モダンな開発環境での開発を目指す 可能ならコードは VCS で管理する（pull-req など）ドキュメントベースで共同作業に向いた手法で開発を進める特にカジュアルに始めやすい Google Apps Script は悪い意味での属人化まっしぐらになりやすい。これが長期間の業務に影響しないような、ワンショットのものなら別にそれでもよいが、これが誰かに引き継がなければいけないような状況が生まれると一気に地獄みが増してしまうので、そうなってしまう前により良い開発手法を考えておきたい。 考慮したことGAS は素朴に作ると Script 本体の構造がそれを利用する container （例えば Spreadsheet）のデータ構造などと密結合になってしまう。この状態のままコード
JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応 サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独の実行ファイルを生成できる「bun build」機能が搭載されました。 同じくバージョン0.6で高速なバンドラ「Bun Bundler」もβ版となり、6月に登場したバージョン0.6.7ではDiscordのボットを操作するDiscord.jsやWebブラウザを操作するPuppeteerなどの動作も確認されています。 下記はBunの開発者であるJarred Summer氏のツイート。 Standalone executables are coming
moment.js・day.js よりも速くて軽い cdate ライブラリ - Qiita
moment.js や day.js と似たインターフェースを実装した高速・軽量の JavaScript ライブラリ『cdate』をリリースしました。→ https://www.npmjs.com/package/cdate cdate の主な特徴： moment.js や day.js、Luxon よりも高速 moment.js と同じ .format("YYYY-MM-DD HH:mm:ss") 出力フォーマットに対応 strftime と同じ .text("%Y-%m-%d %H:%M:%S") 出力フォーマットに対応 moment.js と同様に .add(1, "month").startOf("week").endOf("day") のような計算に対応 .tz("Asia/Tokyo") あるいは .utcOffset("+09:00") のようなタイムゾーン（時間帯）指定に対
[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)
TypeScriptのゾッとする話 ~ Zodの紹介 ~
現在( 2021/09/13 )、この記事の情報は古くなっている可能性があります！ そのため、なるべくは公式ドキュメントを参照してください。 参照: 公式ドキュメント この記事について 先日、「 エンジニアとして一番怖いモノは何？ 」と知人に尋ねると、 「 実は、TypeScript が一番怖い 」 と言ってきました。 そんな訳ないだろうと思っていたのですが、どうやら知人は本気の様子。 「 TypeScript が嫌いならまだしも、TypeScript が怖いとは、これはナニかあるな 🤔 」 と思った私は、TypeScript First なライブラリである Zod を知人に紹介して、事の真意を確かめようとしたのでした。 怖いならもっと怖がらせてやろうと思ったのは内緒 🤫 しかし、知人に紹介するだけでは勿体ないので、今回は皆さんに知見を交えながら Zod の事を紹介していこうと思います
ESlint で import を自動ソートする
import が増えてくると、その順序が気になってきます。 外部ライブラリからのインポートは上にあって欲しいし、reactからのインポートはさらに上に固定したくなりませんか？ ESlint のeslint-plugin-importというプラグインを使えば簡単にソートできます。 使うのはeslint-plugin-importのimport/orderというルールです。 設定も色々あって、ある程度の自由度で順序を決めることもできます。このルールは fixable なのでeslint --fixコマンドで自動ソートが可能です。 公式の解説もあるのですが分かりにくい個所や誤っている個所もあるためこの記事を作成しました。 ソートした例 早速eslint-plugin-importのimport/orderを使ってソートした例です。 上が下のようにきれいになります。 ソート後はreactからのイン
TypeScriptで積極的にMapを使おう。
TypeScriptにはMapオブジェクトというのが存在します。 Mapとは KeyとValueを扱うオブジェクトになります。 JavaScriptの世界では、オブジェクトというと下のようなものになります。 { name: "nanana", skills: ["TypeScript", "React", "GraphQL"], age: 10 }
JavaScript で配列を ZIP する
JavaScript で map メソッドを使用して配列を圧縮する JavaScript で Array.from メソッドを使用して配列を圧縮する JavaScript では、2つの配列を圧縮したい場合があります。このチュートリアルでは、JavaScript を使用して 2つのコレクションをフラッシュする方法について説明します。 Python の zip 関数に対応する JavaScript を作成する必要があります。つまり、同じ長さのコレクションが多数ある場合は、ペアの配列を作成する必要があります。 map() メソッド、Array.from() メソッド、Array.prototype.fill() メソッドを使用するなど、JavaScript で 2つの配列を圧縮するさまざまな方法があります。 JavaScript で map メソッドを使用して配列を圧縮する JavaScript
JavaScript Patterns Workshop | JavaScript Patterns
The content is based on Patterns.dev - a free online resource on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. The patterns covered on this website and in the workshop can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario. The goal is to raise aware
The new wave of Javascript web frameworks
The new wave of Javascript web frameworksMake sense of the proliferation of new Javascript web frameworks. A deep dive into the problems at scale and the recent evolution of innovation. IntroductionStaying current in the Javascript ecosystem is not for the faint of heart. It’s challenging for those entering the industry to follow what’s happening amongst the new libraries, frameworks, concepts, an
Simple colored logging for your JavaScript CLI output
I love writing CLI scripts using JavaScript (mostly with deno, zx, or plain node.js). Here's something I add to almost all my scripts: a tiny copy-pasteable way to color the output of success and failure messages without adding external libraries. With a green ✔ and a red ｘ character: console.success = (...args) => console.log("\x1b[32m✔\x1b[0m", ...args); console.failure = (...args) => console.er
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すぐ使える Cloudflare Workers！
GitHub - wxt-dev/wxt: ⚡ Next-gen Web Extension Framework
TypeScript | Bedrock Wiki
GitHub - vanjs-org/van: 🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.
yarn run実行時の不要なログを抑制する
jest-extended | jest-extended