🎯【保存版】JavaScriptの「Arrow関数 vs 通常関数」完全理解！現場での使い分け＆落とし穴🔥 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Nuxtの開発元NuxtLabs、Next.jsの開発元Vercelへの合流を発表
Webアプリケーションフレームワーク「Nuxt」の開発元であるNuxtLabsは、同じくWebアプリケーションフレームワーク「Next.js」の開発元であるVercelへの合流（Join）を発表しました（Vercelの発表、NuxtLabsの発表）。 We are excited to announce that NuxtLabs is joining @Vercel to pursue our mission on creating the best DX to deliver the best UX. Read more at https://t.co/Lp4SPXR31B pic.twitter.com/l4D5dbJNBi — NuxtLabs (@nuxtlabs) July 8, 2025 NuxtとNext.jsのそれぞれの違いと特徴とは NuxtLabsがオープンソースソフ
「JavaScript」の商標をOracleから開放するよう求めた審判で無関係な「Node.js」の画像が証拠として使われた件に当事者が反発
プログラミング言語「JavaScript」の商標を保有しているOracleに対し、多数のエンジニアらが商標の取り消しを求めた審判で、Oracleは第三者が立ち上げたプロジェクトの画像を商用利用の証拠として提出しました。この点について当該プロジェクトの当事者が「Oracleの行為は欺瞞(ぎまん)的である」と指摘していたのですが、当局はこの主張を証拠不十分で却下しました。 JavaScript™ Trademark Update | Deno https://deno.com/blog/deno-v-oracle4 JavaScriptはOracleが商標を保有していますが、JavaScriptという言葉は一般的な用語として広く認識されているとして、エンジニアら1万4000人以上の署名をもって商標を開放するよう求める運動が展開されています。 JavaScriptの実行環境である「Deno」や「
JavaScript で Wasm 使ってるなら要注意！ そのメモリ、本当に解放されてますか？ - カミナシ エンジニアブログ
数ヶ月前、画像処理ライブラリ OpenCV.js を使って Web カメラの映像をリアルタイム処理するプロトタイプを作っていたときのことです。 OpenCV.js は C++ で書かれたコードを WebAssembly（Wasm） にコンパイルして作られており、Wasm ならではのブラウザ上での高速な処理が可能なライブラリです。 実際、画像のフィルタ処理や特徴点検出など、ユニットテストの段階では高速に実行でき、開発は一見順調に進んでいるかのように見えました。 ところが、いざアプリケーションに画像処理モジュールを組み込んでみると、起動したカメラが数秒経つとなぜか止まってしまいました。 コンソールにもエラーは出ず、Chrome を再起動すればまた数秒だけ動く……そんな不可解な状態に悩まされました。 原因は、Wasm のメモリリーク。 そう、恐ろしいことに C++ 製 Wasm で作られたライブ
CommonJS と ES Modules の違い 🚀 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JavaScriptの世界には、モジュールを扱うための2つの主要なシステムがあります。それが「CommonJS」と「ESモジュール（ECMAScript Modules）」です。どちらもコードを分割し、再利用可能にするための仕組みですが、いくつか重要な違いがあります。 📚 モジュールとは？ モジュールとは、特定の機能やデータを持つ独立したコードの単位のことです。モジュールにすることで、コードの可読性や保守性が向上し、大規模なアプリケーション開発がしやすくなります。🚀 🌟 CommonJS モジュール CommonJSは、主にNod
JavaScript (Node.js) にはセミコロンをつけよう！ - Qiita
/Users/kosuke/Workspace/issue-recorder/greet.js:8 [hello, world] = greet() ^ ReferenceError: Cannot access 'world' before initialization at Object.<anonymous> (/Users/kosuke/Workspace/issue-recorder/greet.js:8:9) at Module._compile (node:internal/modules/cjs/loader:1378:14) at Module._extensions..js (node:internal/modules/cjs/loader:1437:10) at Module.load (node:internal/modules/cjs/loader:1212:32
【海外ニュース】ES2025対応の詳しすぎるJavaScript解説書が無料公開され全プログラマ大歓喜
6月14日、Axel Rauschmayer氏は新刊書籍「Exploring JavaScript (ES2025 Edition)」を公開した。 本書は、モダン JavaScript の習得を容易にし、初学者から上級者までを対象に ES2025 までの全機能を体系的に解説するものである。以下、その内容を紹介する。 書籍の概要 「Exploring JavaScript」は、従来版「JavaScript for impatient programmers（せっかちなプログラマのためのJavaScript）」を大幅に拡充した最新版だ。モダンな機能に焦点を当てることで、読者が古い文法に煩わされずに学習を開始できる構成となっている。 ハイライト モダン機能を中心に据え、素早く学び始められる 必要に応じて深掘りできる発展的セクションを用意 テスト駆動型演習・フラッシュカードなどの補助教材を同梱 E
JavaScript の Promise / async / await をおさらいした - Qiita
はじめに 趣味のプログラミングで JavaScript を使い始めて随分になります。ところが、非同期処理や Promise になかなか慣れません。そろそろきちんと使えるようにしておきたいと思いました。 非同期関数を順に呼出する 例えば、3 つのファイルを順に読込して処理したいとします。以下のコードを書きます。 import fs from 'fs'; fs.readFile("ファイル1", "utf-8", (err, data) => { console.log("readFile (1) finished."); }); fs.readFile("ファイル2", "utf-8", (err, data) => { console.log("readFile (2) finished."); }); fs.readFile("ファイル3", "utf-8", (err, data) =
JavaScript PrimerのNotebookLMが利用可能になりました！
JavaScript PrimerのNotebookLMが利用可能になりました。 NotebookLMは、Googleが提供するAIを活用したノートブック環境で、登録したソースに対して質問をしたり、情報を検索したりすることができます。 次のリンクから、JavaScript PrimerのNotebookLMにアクセスできます。 📖 JavaScript Primer - 迷わないための入門書 - NotebookLM JavaScript Primer on NotebookLM JavaScript PrimerのコンテンツがNotebookLMに入ってることで、読者は書籍の内容についてNotebookLMに直接質問したり、Podcastとして音声で聞いたりすることができるようになります。 NotebookLMを活用することで、JavaScript Primerを読み進める中で生じた疑
ECMAScript source phase imports がはやく動くようになってほしい
Node.js 24.0.0 でECMAScript source phase importsが動くようになりました。 (--experimental-wasm-modules が必要です) Node.jsエコシステムは様々なサードパーティーツールに支えられているので、Node.js自身が新しい機能をサポートしたからといってすぐさまアプリケーションやライブラリで採用できるわけではないですが、この機会に何が嬉しいのか説明しようと思います。 サンプル まず以下のサンプルコードを見てください。 本コードで重要なのは以下の3行だけです。 import source addModuleSource from "./add.wasm"; const addModule = await WebAssembly.instantiate(addModuleSource); console.log("123
2025-05-29のJS: TypeScript Native Previews、Firefox 139、Angular 20、Chrome 137
JSer.info #736 - TypeSciptのGo言語でのネイティブ実装である@typescript/native-previewが公開されました。 Announcing TypeScript Native Previews - TypeScript TypeScriptをGo言語に移植した実装で、コンパイラであるtsgoと合わせてVSCode拡張などもリリースされています。 TypeScriptネイティブ移植観察レポート TSKaigi 2025 - Speaker Deck Firefox 139がリリースされました。 Firefox 139.0, See All New Features, Updates and Fixes Firefox 139 for developers - Mozilla | MDN hidden=until-found属性のサポートとTempora
JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG
2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
無料・広告なし・登録なしでスマホ・PCからブラウザで動画が編集できるウェブアプリ「Clip JS」を実際に使ってみた
「ClipJS」はFFmpegのWebAssembly版であるffmpeg.wasmとNext.js、Reactの動画生成ライブラリであるRemotionで構築された動画編集ウェブアプリです。登録不要かつ無料で、PCやスマートフォンのブラウザから使うことができます。 ClipJS https://clipjs.vercel.app/ 今回はClipJSにPCのGoogle Chromeからアクセスしてみました。動画編集を行うには「Get started」をクリックします。なお、利用にはユーザー登録は必要なく、無料でも使うことができます。 プロジェクトを作成するため、「Add Project」をクリック。 プロジェクト名を入力し、「Create」をクリックします。 作成されたプロジェクトをクリック。 ClipJSのUIが表示されました。無料で使えるウェブアプリですが、広告は一切表示されていま
JavaScriptのジェネレータ関数を実務で使った話 - Qiita
ジェネレータ関数はJavaScriptの機能の中でもマイナーな機能で、functionの代わりにfunction*で関数を作るのが特徴です（アロー関数版のジェネレータ関数式はありません）。また、その中ではyieid式が使用可能になります。 ジェネレータ関数については、存在は知ってるけど実務で使ったことがないという方も多いのではないかと思います。 そこで、今回は筆者がこれまでの経験で唯一、ジェネレータ関数を実務で使ったケースを紹介します（具体的なユースケースについては実際の業務そのままではなくこの記事用に用意したシチュエーションとなるので、そこはご了承ください）。 配列の組み立てが複雑になりがち 例えば、「メインメニューの表示内容が、ユーザーが管理者ユーザーかどうかで異なる」という仕様を実装したい場合を考えましょう。普通に実装すると、こんな感じになるはずです。 function getMai
【Agent2Agent】 公式の A2A のデモアプリのお試し： Python・JavaScript のサンプルを混在させてみる - Qiita
はじめに 以下の記事を書いた時に扱った Googleさん公式の A2Aデモアプリ関連の話です。 ●【Agent2Agent】 公式の A2A のデモアプリを試してみる（3つのエージェントを組み合わせる） - Qiita https://qiita.com/youtoy/items/da42061852bf9ad3b79b 今回の内容 上記のお試しでは、デモアプリの公式情報に書いてあった以下 3つのエージェントの組み合わせを試していて、Python で実装されたものを使っていました。今回は、それ以外のエージェントのサンプルで JavaScript で実装されたものを組み合わせてみます。 ※ A2Aクライアントと A2Aサーバーの実装で使われている言語が異なっても、間が A2A を介したやりとりになるので普通に混在させられるはずですが、それを実際に確かめてみました とりあえず構成に関して、以下
Solid.js入門ガイド｜React超えの爆速フレームワークを徹底解説【2025年最新版】 | しんすーブログ
Solid.js入門ガイド｜React超えの爆速フレームワークを徹底解説【2025年最新版】 Solid.jsは、仮想DOMを使わずネイティブDOMを直接操作することで、圧倒的な描画速度と省メモリを実現した次世代フロントエンドライブラリです。この記事ではその基本から導入手順、Reactとの違い、最新エコシステムまで詳しく解説します。 Solid.jsとは？高速フロントエンドの新定番 Solid.jsは仮想DOMを排し、シグナル単位で依存関係を追跡する「細粒度リアクティブシステム」を採用した軽量ライブラリです。 圧縮後サイズは約7 kBで、React 18.3＋ReactDOM（gzip約41 kB）と比べてもおおむね6分の1。 参考：React-DOM bundle increase 200 kB（GitHub） 小ささだけでなく、静的解析によりコンポーネントツリーから不要コードを除去する
WebAssemblyはJavaScriptの何倍速く動くのかベンチマークしてみた。
近年のWebアプリケーションは、単なる情報表示にとどまらず、複雑なデータ処理や高度な計算処理を必要とするケースが増えています。TypeScriptは型安全性と優れた開発体験でフロントエンド開発の標準となりつつありますが、パフォーマンスが重要な処理においては限界に直面することもあります。 一方、WebAssembly（以下Wasm）は、ブラウザ上で動作する低レベルなバイナリフォーマットとして、ネイティブに近いパフォーマンスを実現する技術です。C++やRustなどの言語からコンパイルされ、JavaScriptとシームレスに連携できるため、Web開発の可能性を大きく広げています。 しかし、「いつ、どないな場合にWasmを導入すべきなんか」「導入コストに見合う性能向上が得られるんか」といった疑問に対する実践的な回答は、まだ共有が不十分です。 この記事では、大規模データ処理に焦点を当て、TypeSc
同じ名前で分割代入する場合はショートハンドで強制するESLintルールをTypeScriptで作った
2025/05/12 有識者から no-useless-rename というESLint本体に含まれているルールを紹介していただき、これでこと足りそうでした。 この記事のカスタムルールの内容自体はほぼ意味のないものになってしまいましたが、カスタムルールを作っていく過程においては参考になるところもあると思うので引き続き残しておきたいと思います。 始めに 弊社ではESLintルールのobject-shorthandを設定しており、ショートハンドで書けるものはショートハンドで強制されるようにしています。これによってコードがスッキリしたものになるのですが、一部ショートハンドにならないケースがありました。
なぜJavaScriptでは関数をconstで定義するのか？functionとの違い・メリット・使い分け | しんすーブログ
なぜJavaScriptでは関数をconstで定義するのか？functionとの違い・メリット・使い分け JavaScriptで関数を定義する際、「function宣言」ではなく const foo = () => {} のような関数式が一般的になりつつあります。 この記事では、なぜ現場では const 関数式が推奨されるのか、巻き上げや再代入防止といった仕様面から、ReactやTypeScriptとの相性、ベストプラクティスまで体系的に解説します。 なぜJavaScriptでは関数をconstで定義するのか？モダン開発における標準スタイルの理由 フロントエンド現場では、const foo = () => {} のような関数式を採用するコードベースが主流になりました。React・Vue・Svelte などのコンポーネント指向フレームワークでは、再レンダリングや副作用管理の明示性が求められる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptジェネレータ関数とユーティリティで楽に配列を生成する - Qiita