TypeScript/JavaScript Array完全攻略2024 | フューチャー技術ブログ
TypeScriptアドベントカレンダーの12/5のエントリーです。昨日は@nanasi-1さんの【TypeScript】ジェネレーターによる遅延評価でフィボナッチ数列を生成するでした。 イマドキのJavaScriptの書き方2018というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデートするつもりで書いてみました。 実環境で使えるECMAScriptバージョン今時のブラウザは常に最新に更新されるはずなのでECMAScript 2024の機能もフルに使えるはずですが、おそらくNode.jsのLTSが一番古いJavaScriptエンジンということになるのかな、と思います。本記事執筆時点でサポート中のバージョンは以下の4つです。軽くメソッドを調べたりした感じ、こんな感じかと。202x年の11月ぐらいになると、ES202xがLTSバージョンで
進化した正規表現：JavaScriptの正規表現の歴史と未来 | POSTD
クイックサマリー：以前は、JavaScriptの正規表現は他の言語の正規表現に比べてパフォーマンスが劣っていたものの、近年改良が重ねられ、他の言語に見劣りしなくなっています。この記事では、Steven Levithan氏がJavaScriptの正規表現の歴史と現状を評価し、より読みやすく、保守性とレジリエンスに優れた正規表現の書き方をアドバイスします。 モダンJavaScriptの正規表現は、皆さんがよく知っている従来の正規表現と比べると随分進化しました。正規表現はテキストを検索して置き換えるツールとして非常に優れている一方で、書くのも理解するのも難しいという根強い評判があります（しかし今から説明するように、この認識は時代遅れかもしれません）。 正規表現に関するこの認識は、JavaScriptに特に当てはまります。PCREやPerl、.NET、Java、Ruby、C++、Pythonといっ
JavaScriptを用いて車をハッキングすることは可能
技術者で作家のチャーリー・ジェラルド氏が、JavaScriptとSDR無線機「HackRF One」を用いて車のハッキングに成功したことを報告しています。なお、ジェラルド氏は、あくまで啓蒙目的で友人の車を用いて行った実験の内容を報告したもので、マネをして発生した問題については責任を負わないと断りを入れています。 Hacking cars in JavaScript (Running replay attacks in the browser with the HackRF) | Charlie Gerard | Senior frontend developer & Creative Technologist Charlie Gerard | Senior frontend developer & Creative Technologist https://charliegerard.de
2024-10-29のJS: Svelte 5、MSW v2.6.0(WebSockets API)、State of CSS 2024
JSer.info #713 - Svelte 5がリリースされました。 Svelte 5 is alive Svelte 5では、Runesと呼ばれる構文とReactiveの仕組みがサポートされています Svelte 4の構文は引き続きサポートされていますが、マイグレーションガイドではRunesへの移行方法が紹介されています。 Svelte 5 migration guide • Docs • Svelte MSW v2.6.0がリリースされました。 Release v2.6.0 · mswjs/msw MSW v2.6.0では、WebSockets APIのモックがサポートされました。 詳細は次のドキュメントを参照してください。 Handling WebSocket events - Mock Service Worker ws - Mock Service Worker State
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号)
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/10/15 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 PR TIMES フロントエンドの CI パイプラインを改善して、CI 処理時間と Billable Time を 50%を削減した話 | PR TIMES 開発者ブログ changed-files という github action 使って、変更があった特定のディレクトリのみ
イテレータを分岐させるとどうなる？ Iterator Helpersに見るJavaScriptのイテレータの挙動
2024年10月のTC39ミーティングでは、Iterator HelpersがStage 4となり、ECMAScriptの仕様に追加されることが決定しました。Iterator HelpersはすでにGoogle Chromeなどで試すことができます。 Iterator Helpersは概してわかりやすい機能群ではありますが、やはり元々がJavaScriptということで、直観的には理解しがたい挙動もあります。そのような挙動は、とくにイテレータを分岐させたときに見られます。 ということで、この記事ではイテレータを分岐させた場合の挙動を見ていきましょう。Iterator Helpersそのものに関する基礎的な説明は省略していますので、他の記事をご覧ください。 イテレータを分岐させる Iterator Helpersは、イテレータに生えたメソッドであり、返り値は新しく作られたイテレータです。そのた
便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver
DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新しいライブラリを紹介します。 Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライブラリのデモ ライブラリのインストール ライブラリの使い方 ライブラリの仕組み ライブラリのサポートブラウザ カスタムプロパティのトランジションに関する注意事項 はじめに
先進的なWeb技術を詰め込んだAstro 5.0 β版リース — Server Islandsに注目
9月18日、Astro 5.0 Betaがリリースされた。Astroは、モダンなウェブサイト開発のための静的サイトジェネレーターで、特にフロントエンド開発において人気が高まっている。サーバーレンダリングと静的サイト生成の両方をサポートし、ReactやVueなどのフレームワークとも互換性がある点が特徴だ。性能向上や使いやすさを重視しており、ビルド後のファイルサイズを最小限に抑えることで、表示速度の高速化を実現している。この新バージョンでは、コンテンツ管理のための「Astro Content Layer」や、新しい「Server Islands」機能が安定版として導入され、開発者にとってより柔軟かつ効率的なウェブサイト構築が可能となる。Astro 5.0 Betaの主要な新機能は以下の通りだ。Content LayerContent Layerは、Astro 5.0で導入された強力なコンテンツ
Safari 18.0リリース — 最注目のView Transitions APIなど、Web開発者向けの機能を一挙紹介
9月17日、AppleはSafari 18.0をリリースした。iOS 18、iPadOS 18、macOS Sequoia、そしてvisionOS 2と共に、53の新しいウェブプラットフォーム機能、25の非推奨機能、そして209の修正が加えられた。このリリースでは、特にCSS、HTML、JavaScriptの新機能に注目すべき点が多く、Webエンジニアにとっては重要なアップデートである。 Safari 18.0における新機能 1. Distraction Control Safari 18では「Distraction Control」が導入された。この機能により、ウェブ閲覧中に表示されるサインインバナーやクッキー通知、ニュースレターのサインアップオーバーレイなど、煩わしい要素を非表示にできる。Distraction ControlはiOS 18、iPadOS 18、macOS Sequoi
フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ
TOPコラム新発見！フロントエンド技術の今フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ 2024年9月2日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念
2024-09-01のJS: Rspack 1.0、Safari Technology Preview 202、Material UI v6
JSer.info #705 - webpackとの互換性を持つようにRustで書かれたbundlerであるRspack 1.0がリリースされました。 Announcing Rspack 1.0 - Rspack 0.7からの破壊的な変更もいくつか含まれているため、マイグレーションガイドも公開されています。 Migrating from Rspack 0.x - Rspack Safari Technology Preview 202がリリースされました。 Release Notes for Safari Technology Preview 202 CSSのbackground-clip: border-area/ruby-align、shape() function/@pageでjis-b4とjis-b5のサポートなどが追加されています。 また、ECMAScript Proposal
2024-08-15のJS: Node v22.6.0(`--experimental-strip-types`)、Firefox 129
JSer.info #703 - Node.js v22.6.0がリリースされました。 Node.js — Node v22.6.0 (Current) 実験的な機能として、型の記述を取り除いてTypeScriptファイルを実行する--experimental-strip-typesフラグを追加されています。 関連: Node.jsのTypeScriptサポートについて また、Node.js DevToolsでNetwork Inspectionをサポートする--experimental-network-inspectionの追加なども行われています。 Firefox 129がリリースされました。 Firefox 129 for developers - Mozilla | MDN Firefox 129.0, See All New Features, Updates and Fixes
JavaScript エンジンの高速化
これらの JavaScript エンジンのうち、以下では特に JavaScriptCore を扱います。 最適化の基本戦略 JavaScript をはじめとする動的言語は、主にインタープリタにおいて実行されます。しかし、インタープリタはコンパイルされたコードと比較して実行に時間を要するという欠点があります。そこで、インタープリタの最適化では、バイトコードの JIT コンパイルが最初に行われます。 しかし、コンパイルには当然時間がかかります。少しでも高速化されたコードを生成するには、より多くの時間をコンパイルにかけなければなりません。コンパイルによる速度向上とコンパイルのレイテンシはトレードオフの関係にあります。 そこで、多くの JavaScript エンジンは、インタープリタと多階層の JIT コンパイラの組み合わせで構成されています。次の図は、主要な JavaScript エンジンの設計
JSで書かれたECMAScript RegExpパーサーの比較 | Memory ice cubes
OXCで正規表現パーサーを実装してるときに全部一通り読んでみて、みんな違ってみんな良いってなったので。 候補はこちらの3つ。 https://github.com/jviereck/regjsparser https://github.com/DmitrySoshnikov/regexp-tree https://github.com/eslint-community/regexpp かのAST Explorerでも、RegExp部門ではこの3つがリストにある。 AST explorer https://astexplorer.net/ 前提 ECMAScript本体だと、ESTreeというデファクトがあるけど、残念ながらRegExpにはない。 ESTreeでのRegExpの扱いはこんな感じで、ただの文字列でしかない。 interface RegExpLiteral <: Literal
「ES Modules仕様、わけわからんくなってる」を整理する「Module Harmony」とは？
本記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 「Module Harmonyについて」ということで発表を始めさせていただきます。「フロントエンドアーキテクチャーの現状と未来」というイベントタイトルからは少し外れますが、モジュールと言われるJavaScriptの1つの仕様の中で、こういうことが起きてるんだよという、少し角度を変えた話をさせていただければと思います。
Chrome/Edgeが実装したクロスドキュメントビュー遷移APIを用いて、Astroが「JavaScriptなしのビュー遷移」を実現
6月12日、The Astro Blogで「JavaScript を使わないビュー遷移(Zero-JavaScript View Transitions)」と題した記事が公開された。この記事では、Astroが提供する新しい機能であるJavaScriptを使わないビュー遷移について詳しく紹介されている。以下に、その内容を簡潔にまとめて紹介する。 ビュー遷移APIとは？ ビュー遷移APIは、ネイティブブラウザ遷移を実現するための新しいAPIのセットである。Webの標準技術として実装が進んでいるため、近い将来すべてのブラウザ上で利用可能になる。従来、この機能はJavaScriptを多用するシングルページアプリケーション（SPA）でしか実現できなかったが、最近の進歩により、ネイティブページ遷移がウェブプラットフォームにもたらされた。 クロスドキュメントビュー遷移とは、ウェブブラウザにおいてページ間
JavaScriptの標準規格「ECMAScript」を見直す。これからの注目機能も紹介
JavaScriptの標準規格「ECMAScript」を見直す。これからの注目機能も紹介 2024年6月5日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側 - yamaScrapbox
JavaScript Runs the World—Maybe Even Literally
【JavaScript】ここがしんどかったよTauri開発【Rust】 - Qiita
