意外と知らないJavaScriptの便利機能Object.freezeとObject.seal - Qiita
オブジェクトの話って退屈？ 「オブジェクトの話をします」と言われると、多くの人が「ああ、オブジェクトね」と思われる方も多いのではないでしょうか。 私はオブジェクトの機能で言うとObject.assignでクローンを作ったり、キーを取り出して配列を操作したりするので十分知っていると思っていた時期がありました。 そこで今や古い技術扱いされているjQuery。そのjQueryの使い方から参考になる便利なテクニックがあり、今回はObject.freezeとObject.sealについて調べてみました。 Object.freezeは文字通り「凍結」 Object.freezeは、その名の通りオブジェクトを完全に凍らせちゃいます。いったん凍結すると、そのオブジェクトは一切変更できなくなります。 以下のような使い方になります。
ESLint コアルールの TypeScript 対応について
ESLint コアルールの TypeScript 対応について ESLint v9.23.0 で ESLint のコアルールの TypeScript 対応が開始しました。 その後の ESLint のアップデートでもコアルールの TS 対応が進んでいます。ESLint コアの責務を増やすような機能追加は少し意外だと感じたので、その背景について調べてみました。 背景: 従来のコアルールの拡張方法の課題 ESLint のコアルールは JavaScript を想定して書かれたものであるが、TypeScript に対してもほぼ期待通り動作するルールが多い。TypeScript は JS のほぼ上位互換な言語であるため、TypeScript 用のパーサー (@typescript-eslint/parser) が吐き出す AST もほぼ上位互換であり、パーサーさえ TS 用のものを使えば多くの ESL
2025-04-17のJS: Zod 4 beta、Next.js 15.3とRspack、LLMを使ったテストのマイグレーション
JSer.info #732 - Zod 4 betaがリリースされました。 Introducing Zod 4 beta | Zod Docs パフォーマンスとBundle Sizeの改善が行われ、Tree Shaking可能なAPIを提供する@zod/miniと@zod/coreパッケージが公開されています。また、再帰も可能なオブジェクトの定義をするz.interface() API、メタデータを管理するz.registry() API、JSONスキーマ変換のためのtoJSONSchema() APIなどが追加されています。その他にも文字列のTop Level APIの追加や変更、エラーメッセージをmessageからerrorパラメータへ変更など多くの変更が含まれています。 Next.js 15.3がリリースされ、Rspackをビルドツールとしてサポートするようになりました。 Next
JavaScriptのPromise、asyncの決まり事，awaitと .then() の関係 - Qiita
JavaScriptで非同期処理をするときに一番使われる技術に「Promise」「async」「await」があります。本記事は、その基本として「なぜ必要なのか」を分かりやすく解説します。また、これらを使う際の“決まりごと”や“使い方の型”も紹介します。 非同期処理とは JavaScriptは基本的に1本のスレッド(単線)で動作します。 たとえばネットワーク経由のAPI呼び出しなど、答えが返ってくるまで時間がかかる処理を直接動かすと、他の処理が止まってしまいます。 そこで、JavaScriptは "非同期" にする方法として Promise という構造を用意しています。 Promiseとは Promiseは、一言で言うと「後で答えが返ってくるボックス」です。 Promiseの基本形
応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」をHTML＋JavaScriptで自作した話 - Qiita
応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」をHTML＋JavaScriptで自作した話 はじめに 2024年春、応用情報技術者試験に独学で合格しました。 そのときずっと思っていたのが、 「もっとサクッとスマホで過去問を解けるサイトがあったらよかったのに…」 ということ。 そこで合格後、「過去の自分がほしかったもの」を形にするべく、 資格試験の過去問演習サイトを自作しました。 👇 サイトはこちら 📎 https://ap-shiken-navi.jp/ サイトの概要 応用情報技術者試験ナビというサイト名で公開中です。 現在は午前試験の過去問を対象に、以下の年度の問題を掲載しています。 令和6年 春・秋（160問） 令和5年 春・秋（160問） 令和4年 秋（80問） 📱 レスポンシブ対応で、スマホ・タブレット・PCすべてに対応しています。 ▼ トップページ画面イ
2025-04-09のJS: express 5.1(正式リリース)、Safari 18.4、ESLint bulk suppressions
JSer.info #731 - Express 5.1.0がリリースされました。 Express@5.1.0: Now the Default on npm with LTS Timeline このバージョンはExpress 5.xシリーズの正式リリースとなります。 npmでのexpressのデフォルトバージョンも5.xへと変更されました。ドキュメントが刷新され、4.xから5.xへの移行を支援するためのcodemodによるマイグレーションツールも提供されています。 同時にLTS（Long Term Support）ポリシーも発表され、Express 4.xは2026年10月1日にサポートが終了する予定となっています。 Safari 18.4がリリースされました。 WebKit Features in Safari 18.4 | WebKit 大きな機能としてDeclarative Web
【JavaScript】MDNが推奨する最強の書き方 - Qiita
はじめに MDNのドキュメントを眺めていたら、JavaScript のサンプルコードの作成ガイドラインという章を見つけました。第三者にコードを公開するような人向けにまとめられたものですが、正しい書き方の実践としてみることができるので、クローズドなプロジェクトの中でも使えるかもしれません。ただ、モノによってはチームで決めた慣習と食い違うこともあるかもしれないので、採用はケースバイケースになると思います。 上記のページが紹介された記事があまり見当たらなかったので、折角なので共有してみようと思います。あと、ところどころ補足を付け加えています。 対象読者 基本的には初心者向け ただ、幾つかは中級者の方でもためになるものがあるかも？ 規則の一般性 ☆：よく見かける書き方。一般的 ☆☆：あまり見かけないかもしれない書き方。あるいは、意識的には規則づけられてなかった書き方 ☆☆☆：クローズドなプロジェク
【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 🔥 なぜ今このツールが注目されているのか X(Twitter)で335いいね・40リツイートを集め、GitHubでも1700スターを獲得した「solygambas/html-css-javascript-projects」が話題になっています。私も実際に3週間使ってみたところ、作業時間が約35%削減され、驚くほどの効果を実感しました！このツールがなぜ開発者コミュニティで急速に広まっているのか、その理由と活用法を徹底解説します。
2025-04-03のJS: Next.js LTS Policy、Rsdoctor 1.0、zx@lite
JSer.info #730 - Next.jsがLTSポリシーを公開しました。現在のメジャーバージョンをActive LTSとし、それ以前のメジャーバージョンは最初のリリースから2年間はMaintenance LTSとしてメンテナンスされます。 Next.js Support Policy | Next.js by Vercel - The React Framework このLTSポリシーは、Next.jsのミドルウェアバイパスに関するポストモーテムの一環として公開されています。 Postmortem on Next.js Middleware bypass - Vercel Rsdoctor 1.0がリリースされました。webpack-bundle-analyzerのようにbundle sizeの分析やビルドの分析が行えるツールです。rspackまたはwebpackで利用できます。
JavaScriptで配列を非破壊的に変更するならこうしよう2025 - Qiita
はじめに JavaScriptの配列操作には、元の配列を直接変更する「破壊的（destructive）」なメソッドと、元の配列は変更せず、一部が元と異なる《新しい》配列を生成する「非破壊的（non-destructive）」なメソッドがあります。 「破壊的か非破壊的か」を意識べきケースの例として、React があります。React はオブジェクトの同一性のみによって《画面の状態が更新されたか》を判定するので、配列などのオブジェクトを set 関数で更新する場合には、非破壊的に変更する必要があります。 かつては、非破壊的操作のメソッドが十分にそろっていなかったので、非破壊的操作が必要な場合に「古い配列をコピーしてから、新しい配列に対して破壊的操作をする」ことでしのぐことが多くありました。 しかし、今は違います。 主に ES2023 で「配列の非破壊的な変更」のメソッド群が追加され、サポートが
cssと少しのJavaScriptで、ヘッダー追従要素あっても、それが被らないでスムーズスクロールを実装する - Qiita
まずはじめに ヘッダー部分に追従要素がある時、ページ内スクロールをすると、その追従要素が重なってくることがあると思います。 それをcssと少しのJavaScriptで解決しようという話です。 どう解決するか cssだけでスムーズスクロールとスクロールした時の余白を設定できるようになりました。 scroll-behavior https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior scroll-padding-top https://developer.mozilla.org/ja/docs/Web/CSS/scroll-padding-top これらを使って解決しようと思います。 <div id="content" class="content"> <nav id="nav" class="nav"> <a href="#
CSS だけでフォームバリデーションが超進化！JavaScript不要の裏技公開！ - コハム
Enhance Your Form Validation with Pure CSS — No JavaScript Needed! 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ユーザーが入力フィールドと対話する際にリアルタイムの視覚的フィードバックを提供するなど、フォームに追加のバリデーションを設けることを考えたことはありますか？例えば、正しい入力には緑色の枠線を表示し、不正な入力には赤色の枠線を表示するといった具合です。通常、これを実現するにはJavaScriptやReactなどが必要で、少し複雑になることがあります。しかし、CSSだけでこれを実現できるとしたらどうでしょうか？嘘ではありません — 実際に可能なのです！ シンプルなフォームの作成 有効および無効な状態にCSSを適用する :user-validと:user-inval
RustベースのJavaScriptツールチェーン開発プロジェクト「Oxc」が、ESLint互換のリンター実装を目指すOxlintベータ版をリリースし大きな注目を集める
3月17日、JavaScriptツールチェーンをRustベースで置き換えることを目指すプロジェクトOxcが、Eslintの置き換えを目指す「Oxlint」のベータ版をリリースした。 3月17日、JavaScriptツールチェーンをRustベースで置き換えることを目指すプロジェクトOxcが、Eslintの置き換えを目指す「Oxlint」のベータ版をリリースした。 以下に、その内容を紹介する。 Oxcとは何か Oxcは「JavaScript Oxidation Compiler」の略称であり、Rustで記述された高性能なJavaScript向け開発ツール群の総称である。JavaScriptに不可欠とされるコンパイラツール（パーサー、リンター、フォーマッタ、トランスパイラ、ミニファイア、リゾルバ）を構築することを目的として開発が進められている。プロジェクトの目標は、VoidZeroの一環としてJ
The JavaScript Oxidation Compiler
For more detailed instructions on how to use Oxlint and integrate it with your project or editor, check out the installation guide. Highlight of new features since general availability Significant performance improvements, up to twice as fast compared to the previous releaseIncludes over 500 rules built-in, with no extra installation requiredMany rules from the typescript, unicorn, react, react-p
HonoJSがJavaScriptの未来を変える！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Leapcell: 次世代のサーバレスプラットフォームでWebホスティング JavaScriptランタイムフレームワークHonoの詳細理解 Github上で、JavaScriptランタイムフレームワークのHonoはすでに22,000のスターを獲得しています！ Honoの誕生背景 Honoの誕生は2021年12月に遡ることができます。その作者は、当時Cloudflareの社員として、Cloudflare Workers向けのアプリケーションを作成したいと考えていました。しかし、フレームワークを使用しない場合、コードは非常に冗長になり、要件
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【海外記事紹介】Webフロントエンド開発の新たな潮流となるか？Rust+WebAssemblyを使用する動きが加速中 — Amazon Prime Videoにおいて7.6倍のUIレイテンシ削減
Next.js個人備忘録④：Next.jsでTypeScriptとJavaScript、どちらを使うか迷ったため、記事にまとめてみた - Qiita
Promise / async-await / Generatorの違いと使い分け：JavaScript非同期設計のための構文戦略 - Qiita
JavaScript getterとsetterに関するまとめ📔 - Qiita
JavaScript constは変更不可という理解を捨てる🚮 - Qiita
