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
Array.fromは実は有能ではないか？ - Qiita
Array.fromは配列風オブジェクトや反復可能オブジェクトから配列を作る標準組み込み関数です。 主な使い道1 イテレータからの変換 javascriptでは、mapやreduceと言った便利な高階関数がArrayにしか標準実装されていない割に、 MapやSetと言った組み込みオブジェクトから要素を順番に取り出そうとすると大体イテレータや列挙可能オブジェクト経由です。 (それ自体は良い抽象化だと思うんですが、whileとかfor ofになるのが辛い) イテレータを配列に変換したい場合がしばしばあります。
分割代入 - JavaScript | MDN
分割代入 (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 の分割代入は奥が深かった
はじめに 配列やオブジェクトの個々の値を各々の変数に代入する事ができる「分割代入」というのが登場しました。 結構便利そうではありますが、具体的にどのような事ができるのでしょう。 ECMAScript 2015 (ES2015 / ES6) にまだ慣れない人向けと、自分のためのメモとして置いておきます。 基本編 おそらく一番使うであろう書き方です。 配列 通常、配列から値を取り出すときはインデックス（添字）を指定してやらなければいけませんが、分割代入ではまとめて変数に代入できるので便利です。 /* 一個ずつ取り出す場合 */ var individuals = ['早坂美玲', '森久保乃々', '星輝子']; var cute = individuals[0], cool = individuals[1], passion = individuals[2]; console.log(cut
[JavaScript] jQuery無しでも$(ドル記号)で要素選択したい – buzzyvox
昨今のモダンブラウザに於けるJava Scriptの標準仕様(ECMAScript)への準拠の流れを受けて、わたしもChrome拡張(エクステンション)など実行環境を制限出来るウェブアプリの開発に於いてはjQueryに頼らないコーディングを心がけるようになりました。 ただ、いくらネイティブJavaScriptが高度化したとはいえ現状ではまだまだ発展途上な感が否めず要素を選択するだけでもソースが冗長になりがち。 // jQuery $(".class"); // 非jQueryだと長ったらしい document.querySelector(".class");jQueryの開発チームもECMAScript標準化には関与しているそうなので、将来的に「$()」が「document.querySelector()」のエイリアスになるんじゃね？なんて思っていたら、既にChromeブラウザのdevTo
![[JavaScript] jQuery無しでも$(ドル記号)で要素選択したい – buzzyvox](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
はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上
なぜ人は必死でjQueryを捨てようとしているのか
最近はやりのjQuery Hateの謎に迫る！ （というか、これであってるのか教えてほしいという発表）
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
あのライブラリは何故誕生したの?のまとめ - Qiita
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
humble software development - envision
Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations. TimeSeries template with real-time data. This demo features animation of the selection when new data arrives. The data itself is from a function but could be a callback to a remote data source. (click to code) HTML5 time series chart. This uses the TimeSeries template. Templates provide pre-built interactive
Error 404 (Not Found)!!1
The requested URL /home was not found on this server. That’s all we know.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
