なぜJavaScriptでは関数をconstで定義するのか？functionとの違い・メリット・使い分け | しんすーブログ
なぜJavaScriptでは関数をconstで定義するのか？functionとの違い・メリット・使い分け JavaScriptで関数を定義する際、「function宣言」ではなく const foo = () => {} のような関数式が一般的になりつつあります。 この記事では、なぜ現場では const 関数式が推奨されるのか、巻き上げや再代入防止といった仕様面から、ReactやTypeScriptとの相性、ベストプラクティスまで体系的に解説します。 なぜJavaScriptでは関数をconstで定義するのか？モダン開発における標準スタイルの理由 フロントエンド現場では、const foo = () => {} のような関数式を採用するコードベースが主流になりました。React・Vue・Svelte などのコンポーネント指向フレームワークでは、再レンダリングや副作用管理の明示性が求められる
Rust製リンターOxlint徹底解説｜ESLint比最大100倍の高速化と導入法 | しんすーブログ
Rust製リンターOxlint徹底解説｜ESLint比最大100倍の高速化と導入法 2025年3月15日、Rust製ツールチェーンOxcはESLint互換リンターOxlintのベータ版を正式公開しました。 参考：https://oxc.rs/blog/2025-03-15-oxlint-beta 発表時点で500超のルールを標準搭載し、小規模リポジトリではESLint比で最大100倍近い速度向上が報告される一方、大規模プロジェクトでは2〜5倍の短縮が一般的で、実用性と性能の両立が注目されています。 ベータ版はGA版（0.15系）からルール数を約2.5倍に拡充しつつ、パフォーマンスをほぼ2倍へ引き上げました。 参考：https://oxc.rs/docs/guide/benchmarks この記事ではベンチマークの詳細、導入手順、競合ツール比較、コミュニティの活発度、移行リスクまで網羅的に整
MDN推奨JavaScriptコーディングガイド徹底解説｜React・TypeScript対応の最新ベストプラクティス | しんすーブログ
MDN推奨JavaScriptコーディングガイド徹底解説｜React・TypeScript対応の最新ベストプラクティス JavaScript は自由度が高く、個々の書き方が混在しやすい言語です。チーム開発ではスタイルの不一致がバグの温床になり、レビュー工数も膨らみます。 Mozilla が公開する JavaScript Sample Code Guide は、同社が社内のドキュメントやチュートリアル用に用いているコーディング規約を外部公開したものです。公式の絶対基準ではありませんが、実践的かつ網羅的に整理されているため、社内ガイドのたたき台として価値があります。 ここではこのガイドを軸に、最新ブラウザ環境・React 18・TypeScript 5 で役立つベストプラクティスを具体例付きで解説します。 配列初期化のベストプラクティス ― Array.from と new Array の使い
2025-05-07のJS: koa v3.0.0、Node.js 24とNode.js 18 EOL、`//# allFunctionsCalledOnLoad`
JSer.info #734 - Koa v3.0.0がリリースされました。 Release v3.0.0 · koajs/koa koa/docs/migration-v2-to-v3.md at master · koajs/koa Node.js 18未満のサポート終了、Generatorを使ったMiddlewareのサポートを終了など破壊的な変更が含まれています。新機能として、app.currentContextでAsyncLocalStorageを使用した現在のコンテキスト取得をサポート、Blob/ReadableStream/Responseのサポート、カスタムストリームのサポートなどが追加されています。 Node.jsのv24がリリースされました。 Node.js — Node v24.0.0 (Current) Node.js 24では、V8 13.6へアップデート、npm
TypeScriptとは？JavaScriptとの違いや導入のメリット・課題を解説｜Udemy メディア
システム開発 2025/05/02 TypeScriptとは？JavaScriptとの違いや導入のメリット・課題を解説 TypeScriptの利用を検討しているものの、 ・使い方が分からない…。 ・JavaScriptとの違いが知りたい…。 という方も多いのではないでしょうか。そこでこの記事では、 ・TypeScriptのメリット・デメリットやJavaScriptとの関係性 ・TypeScriptのインストールからコンパイルまでの方法 について解説します。 TypeScriptの利用経験がない方でも、この記事を読めば、TypeScriptの特徴や基本的な使い方がわかります。 また、Udemyの講座を併用すれば、TypeScriptでアプリ開発をするための実践的な内容が学べます。 公開日：2020/03/16 TypeScriptとは？ TypeScript（タイプスクリプト）は、JavaS
意外と知らない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="#
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptやTypeScriptで出てくる記述の意味や名称など - Qiita
【海外記事紹介】Webフロントエンド開発の新たな潮流となるか？Rust+WebAssemblyを使用する動きが加速中 — Amazon Prime Videoにおいて7.6倍のUIレイテンシ削減
Next.js個人備忘録④：Next.jsでTypeScriptとJavaScript、どちらを使うか迷ったため、記事にまとめてみた - Qiita
Promise / async-await / Generatorの違いと使い分け：JavaScript非同期設計のための構文戦略 - Qiita
