Web Developer Conference 2024 https://web-study.connpass.com/event/321711/

コールドスタートとは Lambdaはイベント駆動型のサーバーレスコンピューティングサービスです。 API GatewayやEventBridge等様々なサービスから起動されます。 Lambdaが呼び出されると、AWSはLambdaを実行するために必要なインフラストラクチャを自動的に構成・管理を行います。 関数が初めて呼び出される場合や長時間呼び出されていなかった場合、新しいコンテナを起動する必要があります。これを「コールドスタート」と呼び、時間がかかり、遅延が発生することがあります。 コールドスタートの影響について コールドスタートによる遅延は様々な影響が考えられます。 特にリアルタイム性が求められるようなシステムでは、この遅延で大きな障害や想定していなかった事象が発生することがあります。 例えばAPIのレスポンス時間が重要なアプリや、IoTデバイスからのイベント連携処理等の数100ms以

[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 ( <

この記事について この記事は、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

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 =

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（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴

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すべての新機能をまとめて紹介します。 大きな数値を_区切りで書け

去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。

JavaScriptで単体テストする際は、Jestを使うのがデファクトになってきています。 単体テストでは、関連するモジュールをモックにしてテストすることが多いですね。 ここでは、Jestのモックの機能と使い方をユースケース別に説明します。 クラスのstaticなメソッドをモックしたい 例えば、自分の関数内でDate.now()を使って時間を取得していると、テストを実行するたびに値が異なるため、テストがうまくいかないことがあります。 そのような場合、jest.spyOnを使います。 spyOnを使うことである特定の時間を返すことができるようになります。 class Test { func() { return Date.now(); } } describe("Date#now", () => { it("spyOnを使うと好きな時間に固定することができる", () => { const

Array.fromは配列風オブジェクトや反復可能オブジェクトから配列を作る標準組み込み関数です。 主な使い道1 イテレータからの変換 javascriptでは、mapやreduceと言った便利な高階関数がArrayにしか標準実装されていない割に、 MapやSetと言った組み込みオブジェクトから要素を順番に取り出そうとすると大体イテレータや列挙可能オブジェクト経由です。 (それ自体は良い抽象化だと思うんですが、whileとかfor ofになるのが辛い) イテレータを配列に変換したい場合がしばしばあります。

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 const [a, b] = array; const [a, , b] = array; const [a = aDefault, b] = array; const [a, b, ...rest] = array; const [a, , b, ...rest] = array; const [a, b, ...{ pop, push }] = array; const [a, b, ...[c, d]] = array; const { a, b } = obj; const { a: a1, b: b1 } = obj; const { a: a1 = aDefault,

はじめに 配列やオブジェクトの個々の値を各々の変数に代入する事ができる「分割代入」というのが登場しました。 結構便利そうではありますが、具体的にどのような事ができるのでしょう。 ECMAScript 2015 (ES2015 / ES6) にまだ慣れない人向けと、自分のためのメモとして置いておきます。 基本編 おそらく一番使うであろう書き方です。 配列 通常、配列から値を取り出すときはインデックス（添字）を指定してやらなければいけませんが、分割代入ではまとめて変数に代入できるので便利です。 /* 一個ずつ取り出す場合 */ var individuals = ['早坂美玲', '森久保乃々', '星輝子']; var cute = individuals[0], cool = individuals[1], passion = individuals[2]; console.log(cut

昨今のモダンブラウザに於けるJava Scriptの標準仕様(ECMAScript)への準拠の流れを受けて、わたしもChrome拡張(エクステンション)など実行環境を制限出来るウェブアプリの開発に於いてはjQueryに頼らないコーディングを心がけるようになりました。 ただ、いくらネイティブJavaScriptが高度化したとはいえ現状ではまだまだ発展途上な感が否めず要素を選択するだけでもソースが冗長になりがち。 // jQuery $(".class"); // 非jQueryだと長ったらしい document.querySelector(".class");jQueryの開発チームもECMAScript標準化には関与しているそうなので、将来的に「$()」が「document.querySelector()」のエイリアスになるんじゃね？なんて思っていたら、既にChromeブラウザのdevTo

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の削除 特定の入力値に対する

最近はやりのjQuery Hateの謎に迫る！ （というか、これであってるのか教えてほしいという発表）Read less

注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで

はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して