イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
Open source maintainer pulls the plug on npm packages colors and faker, now what? | Snyk
On January 8, 2022, the open source maintainer of the wildly popular npm package colors, published colors@1.4.1 and colors@1.4.44-liberty-2 in which they intentionally introduced an offending commit that adds an infinite loop to the source code. The infinite loop is triggered and executed immediately upon initialization of the package’s source code, and would result in a Denial of Service (DoS) to
Rust Is The Future of JavaScript Infrastructure
Rust is a fast, reliable, and memory-efficient programming language. It's been voted the most loved programming language six years in a row (survey). Created by Mozilla, it's now used at Facebook, Apple, Amazon, Microsoft, and Google for systems infrastructure, encryption, virtualization, and more low-level programming. Why is Rust now being used to replace parts of the JavaScript web ecosystem li
TypeScriptのJSDocサポートでできること、できないこと
TypeScriptの主要な入力ファイルは .ts, .tsx, .mts, .cts ですが、JavaScriptファイル (.js, .jsx, .mjs, .cjs) も読み込んで処理することができます。JSDocによる型アノテーションを認識するため、生のJavaScriptでもそれなりに型をつけることができます。 本稿ではタイトル通り、TypeScriptのJSDocサポートでできることとできないこと (.ts でしかできないこと) をまとめます。 おことわり 本記事はTypeScript 4.4時点での実装状況に基づいています。なるべくソースコード中の関係する箇所を参照するようにしたので、今後の変更はご自分で検証してください。 (TypeScript Playgroundで試すだけでも有用です JavaScriptモードで開始できるリンク) JSDocの機能一覧・TypeScri
JavaScriptの非同期処理をじっくり理解する (4) AbortSignal, Event, Async Context
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 中止処理 並行処理ではしばしば実行中の処理を中止したい場合があります。 古典的なキャンセル処理 Webブラウザ/Node.jsともに、 setTimeout の中止が可能です。 const timeout = setTimeo
[TypeScript]モノレポ管理ツール比較検討
モノレポ管理のツールを検討したときのメモ Background 自分が所属するチームで開発する JavaScript/TypeScript のプロダクトが増えてきて、同じような内容のリポジトリがいくつも存在している（n個とする）。 変更を加えていくにつれて、それぞれの差分が大きくなり、以下のような問題が発生する。 開発が止まっているプロジェクトの構成が古くなり、修正コストが発生する 開発が複数同時進行している場合、同じような実装を手動で同期する必要がある これらは共通の基盤等があれば効率的に（理想的にはn分の1の労力で）開発が可能であり、将来的なコストを考えると、いまのうちにその仕組みを考えておきたい。 Proposed Solutions 要件は以下 複数のパッケージをnpmとしてpublishできる アプリケーションも管理できる Nx, Rush, Lerna を主要な選択肢としている
![[TypeScript]モノレポ管理ツール比較検討](https://cdn-ak-scissors.b.st-hatena.com/image/square/e204665caf2bdc344987086461dd0424f7c8112d/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--mp4vbqB0--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BTypeScript%25255D%2525E3%252583%2525A2%2525E3%252583%25258E%2525E3%252583%2525AC%2525E3%252583%25259D%2525E7%2525AE%2525A1%2525E7%252590%252586%2525E3%252583%252584%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E6%2525AF%252594%2525E8%2525BC%252583%2525E6%2525A4%25259C%2525E8%2525A8%25258E%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aokmttdhr%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I5NmZlMjc4YTYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
ちょっと複雑なシェルスクリプトをJavaScriptで書く - lacolaco-engineering
ちょっと複雑なシェルスクリプトを https://github.com/google/zx を使って書くとJavaScriptプログラマにとってはメンテナンスしやすい /lacolaco/lacolaco.iconはzx歴 3-4ヶ月ってところ (2021-08) 嬉しいところ async/awaitが使える 配列が扱いやすい モジュールで再利用しやすい 他のNode.jsライブラリと併用できる Prettierでフォーマットしやすい Lintしやすい エディタ支援が安心 Made by Google 微妙なところ JavaScriptプログラマ以外にとっては無用 とはいえシェルスクリプトによほど慣れてる人以外はよく整理されたJavaScriptのほうがセマンティクスを読み取りやすいのではないか スクリプト自体はこんな感じ（公式READMEより） code:js #!/usr/bin/en
Reactのパフォーマンス改善を勉強会で開催しました - JX通信社エンジニアブログ
はじめまして、新卒フロントエンドエンジニアのぺいです。 JX通信社でフロントエンドの開発はReactが主流になっており、React Hooksを使った開発が欠かせません。hooksは便利な反面、適材適所使い所を理解していないと逆にパフォーマンスが悪くなってしまう場合があります。そこで今回は普段フロントエンドを書かない人も勉強会に参加するのを考慮し簡単な改善から応用としてReactで書かれたFASTALERT *1の改善まで行ってもらいました。 前提条件 勉強会の内容 再レンダリングされているコンポーネントを見つける なぜ再レンダリングされてしまうのか 改善方法 コンポーネントのメモ化 関数のメモ化 最終的な変更箇所 毎回コンポーネントや関数をメモ化すべきなのか コストの高い計算 無駄なレンダリング カスタムhooks 最後に 参考 前提条件 react 17.0.1 勉強会の内容 最終的な
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
React's UI State Model vs Vanilla JavaScript DOM State — A Beginner's Introduction
This article is aimed at beginners who've never had the chance to see 'why React'. It takes a very contrived example to make a point about how React's declarative state model could help keep state sanity when code scales. If you're an experienced developer these series of posts by Steven might give deep insights about why declarative abstractions scale in a way you might not have thought before. T
JupyterLite: Jupyter ❤️ WebAssembly ❤️ Python
JupyterLite is a JupyterLab distribution that runs entirely in the web browser, backed by in-browser language kernels. MotivationJupyterLite is a reboot of several attempts at making a full static Jupyter distribution that runs in the browser, without having to start the Python Jupyter Server on the host machine, usually done by running jupyter lab or jupyter notebook in a terminal. The goal of th
RustからWebAssembly (wasm)を生成してJavaScriptとブリッジ通信してみる | DevelopersIO
Rustはじめました Rustイイですよね。Cと同程度のパフォーマンスで動作して、メモリリークを防止し、マルチスレッドも安全に記述できます。GC（ガベージコレクション）処理よりも高速にメモリーを開放します。今まで、より高速に動くプログラミング言語を求めるとC/C++等が必要になり、安全面で気をつけないところが増えてしまって手が出しづらく、一方で、Javaなどの安全面が確保された言語や、JavaScriptやPythonなどのスクリプトで記述できる言語は、nullやundefinedなどを気をつける必要があり、更に実行速度を上げるには課題がありました。（Javaは十分速いと思います） Rustは、C/C++と同程度のパフォーマンス（強い）を持ちつつ、型やメモリやスレッドに関する安全面を備えているため、今後、OSやミドルウェアの開発に使われることが増えるのではと思っています。一方で、JavaS
microCMSとDeno(Aleph.js)で少し未来のWEBサイト開発
今日は少しだけ未来のWEBサイト開発のお話をします。 ですが、ある程度形になりそうなので、それほど遠くはない未来かもしれません。 Aleph.jsとmicroCMSで簡単なWEBサイトを作成してみました。 開発したサイトは以下のシンプルなサイトになります。 Deno製フレームワークAleph.js 今回はDeno製のSSGフレームワークであるAleph.jsを使用してWEBページを作成してみました。Aleph.jsとはNext.jsにインスパイアを受けたフレームワークであり、ドキュメントの構成もとてもよく似ています(というかNext.jsのドキュメントを引用して作成されています)。 microCMS HeadlessCMSは国産のCMSであるmicroCMSを利用しました。最近ではJavaScriptSDKが開発され、さらに開発がしやすくなりました。 Deno(Aleph.js)の開発は何
eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select
移行のメリットはコストを上回るか？ JavaScriptのTypeScript化で気をつけるべき5つのポイント
技術とノウハウを武器に、膨大かつ複雑なデータの「検索」「分析」「可視化」といった課題を解決するフォルシア株式会社が「FORCIA Meetup #2」を開催しました。2回目の今回のテーマは「2020年度にエンジニアが取り組んだこと」。東川翔氏は、マイクロサービスをJavaScriptからTypeScriptに移行したときの気づきについて発表をしました。 JavaScriptからTypeScriptへの移行プロジェクトが始動 東川翔氏（以下、東川）：「JavaScriptからTypeScriptの移行のプロジェクトに関して気を付けた点」について話していきます。 まず自己紹介です。東川と申します。新卒の2年目で新規旅行アプリの開発をしています。興味のある言語はTypeScriptやPostgreSQLです。最近はクライアントアプリケーションの構築にも興味があって、Next.jsに関してアドベン
【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 全体のまとめは今後誰かが書いてくれると思いますので
一見 TypeScript に見える JavaScript コード
const [resolvedHexVersionId, setResolvedHexVersionId] = useState< HexVersionId | undefined >(); たしかに読みにくいと思う。 しかし、代入(や変数)の右辺に関数呼び出しがあり、その型引数が Union Types もしくは Intersection Types の場合はこんな感じにするという処理が Prettier 2.3.1 から存在し、それには合理性があると思っている。Union Types や Intersection Types が一定以上長い場合は2.3.1のようなフォーマットになっている方が整ってみえる(と思う)。 この記事の本題ではないので、気になるひとは該当の Issue や https://github.com/prettier/prettier/pull/10949 や htt
WebAssemblyで、JITコンパイラに迫る高速なJavaScriptエンジンを実装へ。Bytecode Allianceが技術解説。JavaScript以外の言語でも
WebAssemblyで、JITコンパイラに迫る高速なJavaScriptエンジンを実装へ。Bytecode Allianceが技術解説。JavaScript以外の言語でも 「Bytecode Alliance」は、WebAssemblyをWebブラウザだけでなく、デスクトップPCやサーバ、IoTデバイスなどあらゆる環境で、セキュアに実行することを目指している団体です。 Fastly、Mozilla、Arm、Google、マイクロソフト、インテルをはじめとする企業や団体が名前を連ねています。 参考：WebAssemblyをあらゆるプラットフォームでセキュアに実行できるようにする「Bytecode Alliance」発足。インテル、Mozilla、Red Hatなど 同団体は「WASI」と呼ばれる、どのOSやホストシステムでWebAssemblyモジュールが実行されたとしても、安全かつ透過的
microCMS SDK + Next.jsを用いた開発手順
こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。 SDKを用いて開発するメリットとしては、Fetch APIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web版「Excel」の新しいマクロ機能「Office スクリプト」が一般リリース／ユーザー操作をJavaScriptとして記録・編集・再生・共有
