ECMAScriptの最新動向 2022年01月版 | サイボウズ フロントエンドエキスパートチーム
この記事では2021年01月24日~27日に開催された TC39 meeting 88th で議題に上がったプロポーザルについて紹介します。 For Stage 4 For Stage 4 の提案はありませんでした。 For Stage 3 Array.fromAsync Stage 3 にはなりませんでした。 Array.fromAsync は次のようにして非同期イテラブルから配列を生成するスタティックメソッドを追加するプロポーザルです。 async function * asyncGen (n) { for (let i = 0; i < n; i++) yield i * 2; } const arr = await Array.fromAsync(asyncGen(4)); https://github.com/tc39/proposal-array-from-async/issu
webpack と ES Module Import Assertions についての調査 | Marginalia
しかし現実のユースケースではまだまだモジュールバンドラーを使ってデプロイ前にモジュール解決を済ませることが多いだろうから、Import Assertionsを直接ブラウザ上で使用することは少ないだろう。 というわけでソースコードで Import Assertionsを使ったときに、webpack によるモジュール解決がどのように振る舞うかを調べてみた。なぜ調べる必要があったかというと、ドキュメンテーションが（そこそこ探した限りでは）見つからず、ブログなどのアンオフィシャルなものすら見当たらなかったからだ。だが、GitHubの履歴を見ると間違いなくImport Assertionsに対応する実装は加えられていたので、実態がどうなっているかは実際に動かして試すこととなった。 アサーションなし（ファイル拡張子による判別）data.json ファイルを拡張子付きのパスでインポートする。webpac
2022-03-08のJS: TypeScript 4.6、Chrome 100 beta、新しいMDN
JSer.info #582 - TypeScript 4.6がリリースされました。 Announcing TypeScript 4.6 - TypeScript TypeScript 4.6では型推論の改善が行われています。 また、--target es2022のサポート、checkJsが有効時のJavaScriptの構文エラーのチェックが改善されています。 次の4.7では、TypeScript 4.5で保留となっていたNode.js ESMの対応を進める予定となっています。 TypeScript 4.7 Iteration Plan · Issue #48027 · microsoft/TypeScript Chrome 100 betaがリリースされました。 Chromium Blog: Chrome 100 Beta: Reduced User-Agent Strings, Mul
JavaScriptライブラリ「Wijmo」のFlexGridをReact＋ASP.NET Core環境で使ってみよう
本記事では、グレープシティのJavaScriptライブラリ「Wijmo（ウィジモ）」に含まれるグリッド部品FlexGridを、Reactと組み合わせて利用する方法を説明します。ReactとASP.NET Coreを利用するVisual Studio 2022のテンプレートをもとに、FlexGridを表示させる実装を行います。関連して、ASP.NET CoreでWeb APIを作成して、APIの戻り値をFlexGridで表示する方法も説明します。 はじめに Wijmo（ウィジモ）は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現状の最新版は「2021J v3」です。 図1 Wijmoの製品ページ Wijmoが提供するUI部品は、単体で利用する他に、Angu
ESLint の設定を ESLint でチェックする
ESLint の設定、見直せてますか？ スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 今回は ESLint の設定を ESLint でテストする という一見奇妙な表題で、 ESLint 設定周りの課題を解決したお話をします。 https://eslint.org/課題感ESLint には標準で多数のルールが組み込まれており、それぞれに詳細なオプションが用意されています。それに加えて、豊富なサードパーティ製のルールや、設定を継承する仕組み(extends) まで揃っているため、設定パターンは無限にあると言っても良いでしょう。 コードベースが小さいうちは、 eslint:recommended のような推奨設定を継承するだけで、すぐにベストプラクティスを実践することができます。 しかし、Vue や TypeScript といった技術構成や、Pretti
2022-02-22のJS: Deno 1.19、Next.js 12.1、Monorepo Toolsまとめ
JSer.info #580 - Deno 1.19がリリースされました。 Deno 1.19 Release Notes deno vendorという外部モジュールをリポジトリ管理するためのコマンドが追加されています。 deno vendorは外部モジュールをローカルにインポートし、Import mapsでマッピングして利用できます。 Proposal: deno vendor · Issue #13346 · denoland/deno Deno.FileをDeno.FsFileにリネームし、Deno.Fileがdeprecatedとなっています。 Deno.Fileは次のメジャーアップデートで削除される予定です。 Deno.FsFileやDeno.ConnなどがWeb Streamsに対応、CompressionStream/DecompressionStreamのサポート、cons
正規表現の脆弱性 (ReDoS) を JavaScript で学ぶ
先日、このようなツイートを書いたところ、かなりの反響がありました。 JavaScript の正規表現の脆弱性の例でいうと、例えば /\s+$/ は脆弱性があると言える console.time(); /\s+$/.test(" ".repeat(65536) + "a"); console.timeEnd(); 結構時間がかかるのがわかる。でも /\s+$/ を見て「これは危険だな」と理解出来る人はそんなにいない。JavaScript に限らないけれど。 — Takuo Kihira (@tkihira) February 17, 2022 これは一般に ReDoS (Regular expression Denial of Service) と呼ばれる脆弱性です。正確に理解するのが難しい脆弱性なので、少し解説してみたいと思います。 結論 長い記事になるので、最初に「とりあえずこれだけ知っ
「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはwebpackなど
「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはwebpackなど 回答者の国別分布を上位5位までを見ると米国が14％、ドイツが4.8％、ロシアが4.5％、フランスが4.2％、イギリス（UK）が4％となっており、日本の回答者は1.3％で15位、中国の回答者も1.3％でした。 一方、言語別では英語が70.1％と他を圧倒しており、2位がスペイン語で5.4％、ロシア語が5％、フランス語が3.3％、ドイツ語が2.3％、中国語、ポルトガル語、そして日本語が1％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWeb Audio API、WebGLなど新しいブラウザAPIがどのくらい使われているかや
マークダウンとJavaScriptでインタラクティブなWebサイトを作れる「Reactive Doc」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、マークダウンで手軽にWebサイトを構築できるサービスをご紹介します。 一般的なマークダウン記法で簡単にWebコンテンツを作れるのですが、独自のコードブロックを挿入してインタラクティブなフォーム要素も挿入できるのが特徴です。 さらにJavaScriptで好きな機能を開発できる仕組みが提供されており、簡単なWebアプリを作るなど自由度の高いサービスに仕上がっています。 すべて無料で使えるので、ご興味ある方はぜひ参考にしてください！ 【 Reactive Doc 】 ■「Reactive Doc」の使い方 それでは、「Reactive Doc」をどのように使えばいいのか詳しく見ていきましょう！ 利用するためにユーザー登録やログインなどは一切不要です。サイトに訪れたらトップ画面にある【Try it】ボタンをクリックするだけです。 専用のWebエ
モダンなJavaScript/TypeScript実行環境「Deno」
class: middle, center <img src="./assets/logo.svg" align="center" width="200" /> モダンな JavaScript/TypeScript 実行環境 Deno --- class: middle, center 「Deno」 聞いたことありますか? 🙋♀️ 🙋♂️ --- class: middle, center 「Deno」 使ったことありますか? 🙋♀️ 🙋♂️ --- class: middle, center 今日は Deno を 「聞いた事ない」 ~ 「触った事はある」 ぐらいの人向けの話をします --- # 話す人 <img src="./assets/hinosawa.jpg" align="right" width="300" /> 日野澤歓也 twitter @kt3k Web
2022-02-14のJS: Parcel 2.3.0、Vite 2.8.0、Angular Compilerがどのように動いているか、JavaScriptでDDD
JSer.info #579 - Parcel 2.3.0がリリースされました。 Release v2.3.0 · parcel-bundler/parcel ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。 Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更などの変更が含まれています。 Reduce the number of npm dependencies needed by parcel by devongovett · Pull Request #7576 · parcel-bundler/parcel Vite 2.8.0がリリースされています。 vite/CHANGELOG.md at main · vitejs/vite macOS Montereyで50
JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI
アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。 各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。 CSSUI MITライセンスで、商用プロジェクトでも無料で利用できます。 ピュアCSSで実装されたコンポーネント: JavaScriptを読み込む必要がないため、コンポーネントの待機時間はありません。 カスタマイズが簡単: スタイルの追加は簡単です。デフォルトのCSS変数をオーバーライドするか、クラスを使用してコンポーネントをカスタマイズできます。 スタンダードなHTML: 各コンポーネントは、モダンなHTML要素で構築されています。 ビギナーでもプロでも簡単: 簡単なプロトタイプから実稼働のW
100万行の大規模なJavaScript製システムをTypeScriptに移行するためにやったこと | CyberAgent Developers Blog
現在ピグ事業部の主力サービスである「ピグパーティ」でサーバーサイドエンジニアをしております新卒2年目の川口です。普段はSRE関連の業務を主とし、サーバーサイドの業務効率改善や、システムの運用保守、時には機能の開発や修正なども担当しております。 ピグパーティは、2015年にiOS/Androidでリリースされたアバターコミュニティアプリで、サーバーサイドはNode.js(JavaScript)+MongoDBを採用しています。 ピグパーティではこれまでにプライベートクラウドからGCPへの移設、Kubernetes(GKE)の採用など、技術的負債の排除や新技術の採用などを積極的に行ってまいりました。今回は、サーバーサイド開発時の大きなボトルネックになっていた、型がわからないことに起因する複数の問題を解決するために、TypeScriptを導入することにしました。その結果、システム規模に対して少な
Vanta.jsで3Dアニメーションを手軽に実装！
Vanta.jsで3Dアニメーションを手軽に実装！3Dアニメーションが手軽に実装できるVanta.jsというJavaScriptのライブラリがあります。Webサイト上で色や表示方法をカスタマイズして、コピペするだけで完成です。今回はこのJavaScriptライブラリを紹介します！ この記事は動画でも紹介しています。動画派の方はこちらをどうぞ！ 鳥をふわふわ動かしてみようVanta.jsのサイトに行くと、デモとして鳥がふよふよ飛んでるような背景が表示されています。この画面右側に、カスタマイズするためのパネルが用意されているので、好みのデザインに変えてみましょう。「Birds」の場合は色や鳥の数、鳥のサイズ、スペース、スピードなどが調整できます。 <div id="bird"></div> <script src="three.r119.min.js"></script> <script sr
JavaScript で学ぶビット演算の基礎
唐突にビット演算の話です。今回は本当に基礎的な事しか書きませんので、ある程度のレベルの方には常識レベルの話になることをご承知ください。 近年のプログラミング環境で、ビットを意識する機会はほとんど無くなりました。プログラミングの抽象化が進んだおかげで良いことだと思います。今や知らないのが普通なのかもしれません。しかし、もしちょっと低レイヤーな処理を書く機会があった時に、今までの私達にとっては常識レベルであった知識であっても、重要度が下がり学ぶ機会も無くなってしまったが故に、知らない人はそこで躓いてしまう可能性が高いことに気が付きました。この記事は、普段のプログラミングにはあまり必要のないビット演算を、とりあえずこれだけ知っておけばその先は自力でなんとかなるかな、というレベルまで解説したいと思います。 解説は JavaScript を使って行いますが、基本は他の言語でも同じです。 JavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nordic.js - Call for Speakers
Switching a Jest Project from Babel to SWC
JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」:phpspot開発日誌
Moving from JavaScript to TypeScript
オープンソースの開発に携われるエンジニアを大募集！
