ユーザー体験重視のSPAアーキテクチャ改 - laiso
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
Web 標準と、その限界
JavaScript、たくさんバックエンドで使われてますよね、あなたも使ったことはありませんか？ そんな バックエンドでも使われている JavaScript。そこに標準で組み込まれている Web 標準な API 。それを考えていきます。 Web 標準 とは何か Web を構成するための技術として、主に HTML/CSS/JavaScript があります。 どのブラウザでサイトを見ても同じ結果が得られるように、その HTML/CSS/JavaScript をまとめている仕様のことです。 例えば、 HTML の仕様は HTML Living Standard が主流で、 WHATWG という団体が決めています。 JavaScript では、構文や基本的な機能 (Arrayなどの言語使用) は ECMA という団体が ECMAScript を策定しています。この中にはfetchは含まれていないの
王道か邪道か？ タイムスタンプによるステート管理
Reactによるステート管理では、ある状態が変化したら付随して他の状態も変化してほしい場合があります。例えば、次のような場合を考えます。 チェックボックスが1つある。 チェックボックスの初期状態は、HTTP APIから取得したデータによって決まる。 ユーザーはチェックボックスを操作できる。 APIからデータを再取得する場合があり、その場合はチェックボックスの状態が再取得されたデータに従ってリセットされる。 皆さんは、このような要件をどのように実装するでしょうか。 やりがちな実装 まず、やりがちな実装を見てみましょう。 const apiData = useApiData(); const [isChecked, setIsChecked] = useState(false); useEffect(() => { setIsChecked(apiData.isChecked); }, [ap
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表 GoogleはWebブラウザ上でスプレッドシート機能を提供する「Google Sheets」の計算エンジンの性能をWebAssembyで実装し、従来のJavaScriptによる実装と比較して性能を2倍に向上させたことを明らかにしました。 これにより単純なSUM計算から複雑なクエリまで、シート上でのあらゆる計算を始め、ピボットテーブルの作成、条件付きフォーマットなどさまざまな処理が高速になるとのことです。 この性能向上は、JavaScriptで構築されていた計算エンジンをWebAssemblyに最適化したことで実現していると説明されており、そのためにWebAssemby GC（ガベージコレクション）機能を用いたとのことです。 そのため現時点ではChromeとMicrosoft
JavaScriptの活躍の場を広げる「ランタイム」の今
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
Rust製JavaScriptエンジン『Boa JS』を試してみた
主要なJavaScriptエンジンのTest262を毎日実行して結果を載せているtest262.fyiというサイトがあります。 （Test262とは最新のECMAScriptを実装できているかどうかのテストです。） このサイトの、2024/6/5現在の実装率ランキングはこちらです。 test262.fyiの画面キャプチャ（2024/6/5） V8(ChromeやNode.js、Deno等)、JavaScriptCore（SafariやBun等）、SpiderMonkey（Firefox等）という、大手エンジンとほぼ横並びで4位に食い込んでいるBoaとは何者でしょうか。 Boaは公式曰く『Rustで書かれた実験的なJavascriptのレキサー、パーサー、コンパイラー』です。これだけ揃えば、JavaScriptエンジンと言って差し支えないと思います。RustアプリケーションにJavaScri
デジタル庁でjQueryが何をしているのか - laiso
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
Vercel AI SDK で Ollama を使う方法
はじめに Vercel AI SDK (React 等から LLM の API をいい感じに stream で呼び出せるようにするやつ) から Ollama （OSS の LLM をローカルで動かすやつ） を呼び出す方法を調べました。 参考 課題 Vercel AI SDK の サンプルコードを、OpenAI から Ollama の langchain のモデルを使って、置き換えて動かそうとしたけど、なぜかうまくいかなかった。 解決方法 ここのディスカッションにいろんな解決方法が記載されている。その中からいくつか試した。 解決方法 1 OpenAI Compatibility API を使う OpenAI API と同じ API で呼び出す方法。呼び出せるモデルに制約がある。マルチモーダルの llava は呼び出せない。 URL 変えるくらい。シンプル。すんなり動いた。 解決方法 2 la
Behind VS Code Extensions for JavaScript / TypeScript Linting and Formatting
# Behind VS Code Extensions for JavaScript / TypeScript Linting and Formatting This slides are used at VS Code Conference Japan 2024 https://vscodejp…
ポップオーバー API の使用 - Web API | MDN
ポップオーバー API は、他のページコンテンツの上に表示するポップオーバーコンテンツを表示するための、標準的な、一貫性のある、柔軟な仕組みを開発者に提供します。ポップオーバーコンテンツは、HTML 属性を用いて宣言的に、または JavaScript を用いて制御することができます。この記事では、この機能のすべてを使用するための詳細なガイドを提供します。
Dart 3.3がFlutter Webに与える影響について
2024年2月16日、Flutter 3.19.0がリリースされました。 同時に、Dart 3.3.0がリリースされています。 この、Dart 3.3の目玉機能がextension typeです。この機能は、ぱっと見だと「どこで利用するんだろう」という印象のある機能なのですが[1]、Flutter Webにおいては非常に大きな影響を与える機能となっています。 以下、公式の紹介テキストです。 Evolving JavaScript Interop Dart 3.3 introduces a new model for interoperating with JavaScript libraries and the web. It starts with a new set of APIs for interacting with JavaScript: the dart:js_interop
Console Utilities API reference | Chrome DevTools | Chrome for Developers
The Console Utilities API contains a collection of convenience functions for performing common tasks: selecting and inspecting DOM elements, querying objects, displaying data in readable format, stopping and starting the profiler, monitoring DOM events and function calls, and more. Looking for console.log(), console.error(), and the rest of the console.* functions? See Console API Reference. $_ $_
Fetch APIは「PATCH」だけ大文字と小文字の挙動が異なる
const url = "https://fetch-api-normalization.deno.dev"; await fetch(url, { method: "PATCH" }); await fetch(url, { method: "patch" }); 実行すると、次のようなエラーを得るはずです。 PATCH を小文字で書いた際のエラーの一例 さて、どのような条件でこのエラーが発生するのでしょうか？これが意図されたものなのだとしたら、 GET や POST は大文字・小文字を無視してよくて PATCH は無視できない理由がなにかあるのでしょうか？以下でその理由を探ってみましょう。 いつエラーが発生するか このエラーは、 Fetch API を利用して外部の HTTP サーバーに対してリクエストを行う時に、 PATCH と書くべきところを patch と書いていると発生します。
ECMAScript Realms と ShadowRealm の提案 - Qiita
【2021/9/1 追記】 提案されていた API のリネームが検討されていましたが ShadowRealm に決まりました。それに伴って記事の中身を修正しています。 【追記ここまで】 Realms とは何か Realms は JavaScript の言語仕様である ECMAScript で定義されている概念です。 JavaScript のコードが評価されるグローバル変数や Array, Map といったビルトインクラス、そこで実行されるコードなどの状態やリソースのことを指します。 ShadowRealm 現在 TC39 で ShadowRealm クラスが提案されています。これを使うことで新しい Realm を作って、JavaScript を評価させることが出来ます。 Web Workers のように別のスレッドで動作されるわけではなく、同じスレッドで同期的に実行されます。 const
プロジェクト河豚🐡でWebの未来を感じてみよう #jsfes #projectfugu
JavaScript祭り2022での登壇内容です。 - JavaScript祭り2022 https://javascript-fes.doorkeeper.jp/events/138214 - Fugu Tracker https://fugu-tracker.web.app/ - IoTLT vol89にもぜひ来てね！ https://iotlt.connpass.com/event/252034/
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
イベントループと TypeScript の型から理解する非同期処理
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - rolldown/rolldown: Fast Rust bundler for JavaScript/TypeScript with Rollup-compatible API.
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
