さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有フロントエンドカンファレンス北海道2025にて発表 https://www.frontend-conf.jp/ Dateに代わる新たな日時操作標準APIとして、長らくTC39のプロポーザルだった Temporal がついに標準化間近。 Dateに苦しみ、多くのライブラリを用いて日時操作と格闘し…
Temporal APIの現在地（2025年2月時点）
はじめに Temporal APIは、一言で要約すると「JavaScriptの日付・時間の処理をまともにする」ためのプロポーザル(仕様提案)です。 この記事では、Temporalについて「今どういう状態なのか」「今すぐ使うにはどうすればいいのか」「今すぐ使う場合に注意すべきことは何か」といった情報を提供します。 仕様 Temporalは現在stage 3です。 2024年6〜9月にかけて巨大な仕様変更(normative change)があったものの、2025年現在Temporalは仕様として「ほぼ完成」しています。2つ以上のJavaScript処理系に実装され次第stage 4になり、ES202xとして標準化される予定です。 ドキュメント 最近、MDNにTemporal関連のドキュメントが一気に追加されました。リファレンスとしてはこれを見るのがいいでしょう。 また、プロポーザルのドキュメ
サーバサイドJavaScriptの標準策定を目指す「WinterTC」がECMA International傘下で始動、W3CのWinterCGから移行
サーバサイドJavaScriptの標準策定を目指す「WinterTC」がECMA International傘下で始動、W3CのWinterCGから移行 W3CでサーバサイドJavaScriptを中心とした非Webブラウザ環境におけるJavaScriptの互換性について議論してきた「Web Interoperable Runtimes Community Group 」（WinterCG） とECMA Internationalは、サーバサイドJavaScriptランタイムにおけるAPIの互換性を実現するための新グループをECMA International傘下の「TC55 – Web-interoperable server runtimes」（WinterTC）として設立すると発表しました。 WinterTCには、Node.js、Deno、Verel、Fastly、Netlify、Sh
core.jsの作者が大変らしいけど、js業界も気軽に npm i し過ぎ 2023｜名称未設定の逆張り思考実験
忘れちゃいけない。オープンソースの公開は、好意であり、矜持である。断じて義務ではない。 2023 core.js
僕が思い描くTypeScriptの未来を勝手に先取りする
Web Developer Conference 2024 https://web-study.connpass.com/event/321711/
AWS LambdaのコールドスタートとLLRTによる改善について
はじめに 今回は、アプリエンジニアでも比較的触ることの多いLambdaの課題の一つであるコールドスタートとLLRTを使った改善方法について紹介したいと思います。 コールドスタートとは Lambdaはイベント駆動型のサーバーレスコンピューティングサービスです。 API GatewayやEventBridge等様々なサービスから起動されます。 Lambdaが呼び出されると、AWSはLambdaを実行するために必要なインフラストラクチャを自動的に構成・管理を行います。 関数が初めて呼び出される場合や長時間呼び出されていなかった場合、新しいコンテナを起動する必要があります。これを「コールドスタート」と呼び、時間がかかり、遅延が発生することがあります。 コールドスタートの影響について コールドスタートによる遅延は様々な影響が考えられます。 特にリアルタイム性が求められるようなシステムでは、この遅延で
You Don't Need Next.js | ドクセル
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
H3 (unjs/h3)について
この記事について この記事は、UnJSの主要なライブラリを調査していくシリーズ記事の1つになります。 シリーズ記事の概要や今後公開される予定の記事の確認はこちらの記事を参照してください。今回はH3というライブラリについて紹介します。 H3の特徴 H3(unjs/h3)は軽量で高速なHTTPサーバーのフレームワークで、HTTPサーバー部分の実装としてNuxt(Nitro)に含まれていますが、H3単体で使うこともできます。 H3の主要な特徴として、次のものがあります: サーバーレス環境、エッジ環境、Node.js/Bun/Deno等の様々な環境で動作し、移植性が高い 軽量なフレームワークで、パフォーマンス性能が高い unjs/radix3を使った高速なルーティング (※ radix3についてはこちらの記事で紹介しています) Web標準に準拠したシンプルなAPI node/connect/exp
2023年のDenoの変更点やできごとのまとめ
Denoアドベントカレンダー 24日目の記事です🎅 この記事では、2023年にDenoに関して起きた出来事や大きな変更点などをまとめます。 Denoのアップデート Node.js互換性の改善 Node.js互換性の向上のために、様々な改善や機能追加などが行われています。特に、既存のNode.jsプロジェクトをDenoで動かせるようにするための機能がいくつか導入されています。 大きな点としては、Astroが動作するようになりました。 今年、Node.js互換性に関連して実装されたもののうち、主要なものをいくつか紹介いたします。 node:URLのサポート node:形式のURLを記述することで、Node.jsの組み込みパッケージをDenoから読み込めるようになりました。 import { EventEmitter } from "node:events"; const emitter =
JavaScriptを大きく変えうる Dataflow Proposals の概要と論点(Call-this, Pipe Operator)
Dataflow Proposals とは 以下の5つのプロポーザルをまとめて Dataflow Proposals と呼んでいる。 Stage 2: Pipe operator Stage 1: Call-this operator Stage 1: Partial application(PFA) Stage 1: Extensions Stage 0: Function.pipe and flow 例えば Pipe operator, Call-this operator, Partial application を組み合わせると、以下のように書けるようになる。（提案段階なので変わる可能性アリ） import { getAuth, getIdToken } from "firebase/auth"; function isPublic(article) { return articl
高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？
はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴
JavaScriptのES2021で追加された新機能まとめ
2022/06/22追記 最新仕様ES2022がリリースされたので、新しく記事を書きました。 JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。 これまでの仕様はES2020でしたが、先日2021年6月22日にES2021が正式仕様として承認されました。 22.06.2021 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2021の全機能が使えます。 本記事では、ES2021すべての新機能をまとめて紹介します。 大きな数値を_区切りで書け
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
Jestのモックを駆使してテストをよりよくする
JavaScriptで単体テストする際は、Jestを使うのがデファクトになってきています。 単体テストでは、関連するモジュールをモックにしてテストすることが多いですね。 ここでは、Jestのモックの機能と使い方をユースケース別に説明します。 クラスのstaticなメソッドをモックしたい 例えば、自分の関数内でDate.now()を使って時間を取得していると、テストを実行するたびに値が異なるため、テストがうまくいかないことがあります。 そのような場合、jest.spyOnを使います。 spyOnを使うことである特定の時間を返すことができるようになります。 class Test { func() { return Date.now(); } } describe("Date#now", () => { it("spyOnを使うと好きな時間に固定することができる", () => { const
構造分解（分割代入）
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年8月. Learn more See full compatibility Report feedback 構造分解（destructuring、旧：分割代入）構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の構文です。これは、データを受け取る場所（代入の左辺や、新しい識別子バインディングを作成する場所ならどこでも）で使用できます。
ECMAScript 2015 の分割代入は奥が深かった
はじめに 配列やオブジェクトの個々の値を各々の変数に代入する事ができる「分割代入」というのが登場しました。 結構便利そうではありますが、具体的にどのような事ができるのでしょう。 ECMAScript 2015 (ES2015 / ES6) にまだ慣れない人向けと、自分のためのメモとして置いておきます。 基本編 おそらく一番使うであろう書き方です。 配列 通常、配列から値を取り出すときはインデックス（添字）を指定してやらなければいけませんが、分割代入ではまとめて変数に代入できるので便利です。 /* 一個ずつ取り出す場合 */ var individuals = ['早坂美玲', '森久保乃々', '星輝子']; var cute = individuals[0], cool = individuals[1], passion = individuals[2]; console.log(cut
[JavaScript] jQuery無しでも$(ドル記号)で要素選択したい
昨今のモダンブラウザに於けるJava Scriptの標準仕様(ECMAScript)への準拠の流れを受けて、わたしもChrome拡張(エクステンション)など実行環境を制限出来るウェブアプリの開発に於いてはjQueryに頼らないコーディングを心がけるようになりました。 ただ、いくらネイティブJavaScriptが高度化したとはいえ現状ではまだまだ発展途上な感が否めず要素を選択するだけでもソースが冗長になりがち。 // jQuery $(".class"); // 非jQueryだと長ったらしい document.querySelector(".class");jQueryの開発チームもECMAScript標準化には関与しているそうなので、将来的に「$()」が「document.querySelector()」のエイリアスになるんじゃね？なんて思っていたら、既にChromeブラウザのdevTo
![[JavaScript] jQuery無しでも$(ドル記号)で要素選択したい](https://cdn-ak-scissors.b.st-hatena.com/image/square/6606b63dcbb1d54d1fc3f2463e3784a2e7a54deb/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fwww.buzzyvox.com%2Fwp-content%2Fthemes%2Fbuzzyvox%2Fimages%2Fsiteicon.png%3Fssl%3D1)
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 一部破壊的な変更があり 既に非推奨と公表していたAPIを削除 ドキュメントにない隠しAPIの削除 特定の入力値に対する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React は次の10年を生き残れるか：3つのトレンドから考える
Array.fromは実は有能ではないか？ - Qiita
