JavaScriptのIterator / Generatorの整理
目的と対象読者 IteratorとIterableとGeneratorとGenerator Functionの区別が曖昧な人 (記事前半) Generatorの制御フローを完全理解したい人 (記事後半) の理解を深めるための記事です。 まとめ IteratorとIterableの関係 Iteratorは狭義には呼び出し元の next 呼び出しに応じて要素を出力するインターフェースである。 IterableはIteratorを生成するインターフェースである。 IterableだからといってIteratorとは限らず、IteratorだからといってIterableとは限らない。しかし実際には多くのIteratorはIterableのインターフェースも実装している。 Iterableとコレクションは相互変換可能である。 Iterableは for-of ループで処理できる。 IteratorとG
Node.jsのReadableStreamを複製する方法
軽く調べたりドキュメントを流し読みしてみても、Node.js標準にはそのようなAPIが見つからなかったので、Node.jsのissuesから関連しそうなものを探してみると、このようなコードを見つけた // https://github.com/nodejs/readable-stream/issues/202#issuecomment-211244715 var fs = require('fs') var stream = require('stream') var contents = fs.createReadStream('./bigfile') // greater than 65KB var stream1 = contents.pipe(new stream.PassThrough()) var stream2 = contents.pipe(new stream.PassT
あらためてデコレーターを学ぶぞ
はじめに NestJS入門してみようとしたら、アットマークから始まる記述を知らなかったので調べたことを簡単にまとめた記事です（デコレーターのことよくわかってなかった） デコレーターの仕様は、過去にいろいろと変わって現在に至っているようでしたが、ようやく最近 ECMAScript では Stage 3 になり、TypeScript では今も実験的なサポート experimentalDecorators を使えますが、バージョン 4.8 で TC39 の Decorators を実装することが検討されているようです！ この記事は、TypeScriptのドキュメントのサンプルコードを動かしてみたり、あらためてNestJSのコード読んだりしてみた感想を書いてみました。 最近のデコレーターを追えてない、NestJSを動かしてみようとしたらデコレーターってなんぞや、となったかたの参考になれば幸いです。
The State of JavaScript Developer Survey
State of JavaScript The annual developer survey of the JavaScript ecosystem The JavaScript world could use a bit of classification. Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. Together, let's find out which libraries developers want to learn next, which have the best retention ratings, and much more.
JavaScript ASTを始める最初の一歩
何かJavaScriptのソースコードを機械的にチェックするためのツールを作りたいという場合に、JavaScriptのASTというものを触る必要が出てくると思います。 この記事では、その取っ掛かりとなる案内を簡単にまとめたものです。 ASTとは AST(Abstract Syntax Tree)はコードをパースした抽象構文木のこと。 JavaScriptの場合はJavaScriptオブジェクト(JSON)として表現されます。 コード: { "range": [ 0, 10 ], "type": "Program", "body": [ { "range": [ 0, 10 ], "type": "VariableDeclaration", "declarations": [ { "range": [ 4, 9 ], "type": "VariableDeclarator", "id": {
【JavaScript】DOM の変化を監視する MutationObserver – webfrontend.ninja
MutationObserver の使い方 まずは MutationObserver の使い方を簡単に紹介します。次のサンプルは span 要素のテキストの変更を検知して、変更前のテキストと変更後のテキストをコンソールに出力します。 // MutationObserver オブジェクトを生成 const observer = new MutationObserver((mutations) => { const rec = mutations[0]; // MutationRecord オブジェクト const before = rec.removedNodes[0].data; // 変更前のテキスト const after = rec.addedNodes[0].data; // 変更後のテキスト console.log('「' + before + '」が「' + after + '
PromiseのUnhandled Rejectionを完全に理解する
最近リリースされたNode.js 15ではデフォルトの設定が変更され、Unhandled Rejectionが発生した際にプロセスが強制終了されるようになりました。 では、Unhandled Rejectionがいつ発生するのか正確に説明できますか？ この記事では、Unhandled Rejectionに対する正確な理解を目指します。 ECMAScript仕様書で確かめる こういう場合に頼りになる唯一の情報源はECMAScript仕様書、つまりJavaScriptの言語仕様を定める文書です。この記事ではES2020の仕様書を参照します。 仕様書を"unhandled"で全文検索すれば、目的の記述を見つけるのはそう難しいことではありません。それは25.6.1.9 HostPromiseRejectionTrackerです。 これは抽象操作 (abstract operation) です。抽象
Promiseでエラーハンドリングのどういうところを解決できるのか？ - mookjp.io
Promiseでエラーハンドリングのどういうところを解決できるのか？ Jul 6, 2016 ( Feb 11, 2022 更新 ) このセクションはメモ書きです。 確実な情報ではなかったり、文章自体が書き途中のためところどころおかしかったりしますが、随時更新が入っていきます。 清書したものは別途、ブログ記事として移動します。 Node.jsのコード中でthrowされた場合、try-catchを入れないとuncaughtExceptionとなる。 また、EventEmitterでon('error')を定義していない場合もemit('error')の内容がthrowされるため、同様にuncaughtExceptionになる。 uncaughtExceptionが発生するとNode.jsはプロセスを終了する。 on('uncaughtException', err => {})で検知はできる
次世代のReact？ Solid.jsについて
最初に Solid.jsとは Solid.jsとはReactに大きく影響を受けたライブラリであり比較的新しいライブラリです。私が興味を持ったのも2021年のState of JSを見て、Solid.jsの満足度が以下の画像のようにReactやSvelteよりも上位であることに驚き、調べたからで、それまでは存在すら知りませんでした。 この記事の目的 Solidについて興味を持ったため簡単にSolidについて調査した結果を書いていこうと思います。また、Solidの認知度が少しでも上がり、開発手段の一つとして名前が上がるようになればと思っています。 SolidとReactの差 今回は主な違いでけを取り上げます。細かく知りたい方は公式サイトをご確認ください。 仮想DOM まず大きな差が仮想DOMを使っているのかどうかです。Reactで仮想DOMを使っているのは有名で、仮想DOMのおかげで高速なSP
JavaScript のクロージャーと for 文の let 初期化の例外
先日、次のような JavaScript クイズを Twitter で出しました。 // JavaScript quiz: 出力は？ const a = []; { for(let i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { let i; for(i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { for(let i = 0; i < 10;) { a[i] = () => console.log(i); i++; } } a[3](); — Takuo Kihira (@tkihira) August 15, 2022 答えは 3, 10, 4 なのですが、for 文の let 初期化専用の例外処理がない場合は 10, 10,
javascriptでクリップボードにコピー2021年版 - Qiita
概要 クリップボードにコピーではまりました。 ブログ記事に紹介された方法が古くなってたりしたので、ひとまず整理しとこうかと書きました。 変更履歴 2021-11-12 一部のスマホアプリ内ブラウザで動かなかったので対応しました 結論 /** * クリップボードにコピー * @param string value コピーする文字列 */ function copyToClipboard(value) { // モダンブラウザ if (typeof navigator.clipboard === 'object') { navigator.clipboard.writeText(value).then(function() { // 成功 console.log('clipboard.writeText OK'); }, function() { // 失敗（アプリ内蔵ブラウザの一部はここを通
CloudflareでもFastlyでもVercelでもDenoでもBunでもService Workerでも動く
HonoというWebフレームワークを作っています。 当初はCloudflare Workers向けに作っていたのですが、同じCDNであるFastlyのエッジランタイム、Compute@Edgeでも動くことが分かりました。また、Next.jsのEdge MiddlewareもしくはEdge API RoutesとしてVercelの環境でも動きます。そして、少々手を加えるとDenoでも動きました。もちろんDeno Deployにもデプロイできます。さらに、先程レポジトリが一般公開されたYet AnotherなJavaScriptランタイムのBunでも手を加えず動きました。 この「CloudflareでもFastlyでもVercelでもDenoでもBunでも動いた件」が、なかなか面白かったのでそれについて書きます。 Web標準のAPI これらの環境で同じように動くのは、JavaScriptでかつ
JavaScriptのArrayでuniqする8つの方法（と、その中で最速の方法） - 2018-12-27 - ククログ
この記事はQiitaとのクロスポストです。 みなさんはuniqというコマンドやメソッドをご存じでしょうか？ LinuxやmacOSのシェルのコマンドとして使えるuniqは、与えられた入力の中で（連続する）同じ値を重複と見なして除外するというコマンドです。例えばこんな風に使います。 $ cat /var/log/apache2/access.log | cut -d ' ' -f 1 192.168.0.12 192.168.0.10 192.168.0.12 192.168.0.12 192.168.0.11 192.168.0.10 192.168.0.11 192.168.0.11 $ cat /var/log/apache2/access.log | cut -d ' ' -f 1 | sort | uniq 192.168.0.10 192.168.0.11 192.168.0.1
top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（#nameみたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 ※ この記事は3分の1くらい読むと「まとめ」があり、残りはおまけで
javascriptの循環参照、circular dependencies。TypeError | codechord
stokpic / Pixabay javascriptを書いていて、requireの書き方で、ちょっとハマったのでメモ。 次のような要件を実装していくとします。 子要素を生成することができるclass Person{}をつくる。 要素を生成する機能は、class外に別途factory()メソッドを用意する。 Personにはchild()関数があり、factory()を実行して、子要素を作れる。 この仕組みを1ファイルですべて記述すると成功するのだけど、 ファイルを分割して、双方の関数をお互いがrequireしあうようにすると、 書き方によっては、そんな関数無いですよ！？と怒られます。 TypeError: factory is not a function では。そのコードを紹介します。 動かないコード factory.js const {Person} = require("./Pe
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
Node.js のタイマー | Node.js
Node.js のタイマーと仕組み Node.js のタイマーモジュールには、 一定期間後にコードを実行する関数が含まれています。 ブラウザの JavaScript API をエミュレートするためにすべてのメソッドがグローバルに利用可能であるため、 require() を介してタイマーをインポートする必要はありません。 タイマー関数がいつ実行されるかを完全に理解するためには、 Node.js のイベントループを読むことをお勧めします。 Node.js を使って連続した時間を制御する Node.js APIには、現時点以降のある時点でコードを実行するように スケジューリングする方法がいくつかあります。 以下の関数はほとんどのブラウザで利用可能であるためおなじみのように思われるかもしれませんが、 Node.js は実際にはこれらのメソッドの独自の実装を提供します。 タイマーはシステムと非常に密
Webエンジニアが勉強できるGit Repository 10選 - Qiita
2021/02/21 10選 => 12選に更新 2021/04/12 おまけを追加 2022/01/04 おまけにThe Modern JavaScript Tutorialを追加 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロード
JSer.info 10周年: JavaScript情報の集め方、書き方、まとめ方
JSer.infoは2011年1月16日に公開したJavaScriptの情報サイトで、2021年1月16日で公開してからちょうど10年です。 JSer.infoでは、10年間で10201サイト紹介し、522コの記事書いてきました。 JSer.infoの紹介したサイト数(累計)。ソース 10年間途切れることなく毎週更新していて、月別の記事数は毎年同じ推移です。 JSer.infoの月別の記事数。ソース この記事では、10年間やってきたJSer.infoの目的を振り返り、 JavaScriptの情報の集め方、書き方、まとめ方について書いていきたいと思います。 ⚠️ すべてを書いているのでものすごく長いです。 この記事やJSer.infoに関する意見や感想などは、次の場所に書いてください。 この記事をTweetする Twitter: #jserinfo GitHub Issue: JSer.in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
magnificPopupを使ったポップアップinポップアップを実装