The Inner Workings of JavaScript Source Maps
Source maps are the main piece in the jigsaw puzzle of mapping symbols and locations from "built" JavaScript files back to the original source code. When you debug minified JavaScript in your browser's DevTools and see the original source with proper variable names and formatting, you're witnessing source maps in action. For example, when your browser encounters an error at bundle.min.js:1:27698,
【海外記事紹介】関数型プログラミングがフロントエンド開発に与えた功罪
― ウェブの「純化」と「ねじれ」の10年10月5日、Ahmad El-Alfy氏が「How Functional Programming Shaped (and Twisted) Frontend Development」と題したブログ記事を公開し、話題を呼んでいる。 ― ウェブの「純化」と「ねじれ」の10年 10月5日、Ahmad El-Alfy氏が「How Functional Programming Shaped (and Twisted) Frontend Development」と題したブログ記事を公開し、話題を呼んでいる。 この記事では、20年以上のフロントエンド開発経験を持つ著者が、関数型プログラミング（FP）の理念が現代のフロントエンド開発をいかに形成し、 また一部ではプラットフォーム本来の力をねじ曲げてきたか という経緯と影響について述べている。 以下に、その内容をポイン
Auth.js is now part of Better Auth | Better Auth
Auth.js is now part of Better AuthAuth.js, formerly known as NextAuth.js, is now being maintained and overseen by Better Auth team We’re excited to announce that Auth.js, formerly known as NextAuth.js, is now being maintained and overseen by Better Auth team. If you haven't heard of Auth.js, it has long been one of the most widely used open source authentication libraries in the JavaScript ecosyst
JavaScriptビルドツール徹底ガイド──歴史と進化、LINEヤフーの技術選定 - Findy Tools
本記事は、LINEヤフー株式会社のフロントエンドスペシャリスト、浜田真成さんによる寄稿です。 JavaScriptのビルドツールについて、その役割や歴史的な変遷をたどりながら、2025年現在の主要ツールの特徴と選定ポイントを解説します。LINEヤフーでのユースケースも交え、アプリケーション開発における最適なビルドツール選びの参考となる内容です。 はじめにこの記事は、Web開発におけるJavaScriptのビルドツールの役割やその特徴について解説するものです。 2025年現在までのビルドツール事情を整理し、アプリケーション開発者が「どのビルドツールを、何の目的で選択すべきか」を判断する1つの指針となれば幸いです。 1. ビルドツールの役割と歴史的変遷1-1. ビルドツールがなぜ必要なのかWebアプリケーション開発では、JavaScriptを用いることが主流です。 一方で、JavaScript
GraphQLの「Resolver並行性・I/O並列性」の言語別実装比較(JS, Go, Ruby, PHP)
はじめに GraphQLは柔軟なデータ取得を可能にする一方で、N+1問題やI/Oによるレスポンス遅延が課題になることが多いです。 このような課題を解決するために、各言語・ライブラリが「Resolverの並行実行」や「I/Oの並列化」などの工夫をしています。しかし、その実装方式は言語ごとにかなり違いがあります。 この記事では、graphql-js（Node.js）、graphql-go（Go）、graphql-ruby（Ruby）、graphql-php（PHP）の主要なGraphQLサーバー実装を比較します。 なぜResolverの並行性が必要なのか GraphQLでは、クライアントから柔軟かつ複雑なデータ取得要求（クエリ）が送られることが多く、1つのクエリが多数のResolver（データ取得処理）を呼び出す構造になります。 このとき、Resolverの並行性（複数のResolverを同時
フォームのバリデーションのバリエーション（JavaScript） - Qiita
前回のこの記事をJavaScriptにしました。 https://qiita.com/WebDesignGaju/items/7a6f3a68c3a0d690c7ed 主な変換ポイント 1. jQuery → Vanilla JavaScript の基本変換 $(document).ready() → document.addEventListener('DOMContentLoaded') $('selector') → document.querySelector() / document.querySelectorAll() .on('event', function) → .addEventListener('event', function) .addClass()/.removeClass() → .classList.add()/.classList.remove() 2.
【CSS】リンクの色をJavaScriptから取得できるようになる、予定 - Qiita
このgetComputedStyle().colorは、リンク先を訪れたことがあるか否かに関わらず、必ず『未訪問』の色になります。 色だけでなく、訪問済か否かを識別可能なあらゆる情報は取得不可能です。 実は2010年ごろまではリンク色を取得することが可能で、そのためトラッキングやターゲティング広告に悪用されていました。 これが問題視された結果、Firefoxを皮切りにChrome・Safariもリンク先が訪問済か否かをJavaScriptから取得できないように改修されました。 現在では、リンク先を訪問したかどうかを一般的な方法では調べることはできません。 とはいえこれらの対策は場当たり的なものであったため、先日根本的な解決策としてPartitioning :visited links historyという対応が行われました。 詳しくは先日解説を書いたのでそちらを見てください。 簡単にまとめ
ChatGPT vs Claude vs Gemini コード品質比較｜同一要件で生成されたJavaScriptを徹底解析 - Qiita
ChatGPT vs Claude vs Gemini コード品質比較｜同一要件で生成されたJavaScriptを徹底解析 はじめに AI コードジェネレーターの選択は、開発効率に大きく影響します。本記事では、ChatGPT、Claude、Gemini に全く同一の要件を与えて生成されたコードを技術的観点から徹底比較します。 83サイトの構築経験を通じて得た知見をもとに、各AIの設計思想とコード品質を詳細に分析しました。 実験概要 共通要件 売上管理ダッシュボードの作成を3つのAIに依頼しました。 要求仕様： 売上データCRUD操作 Chart.js による可視化 ローカルストレージでの永続化 リアルタイムフィルタリング レスポンシブ対応 制約条件： 単一HTMLファイル 外部ライブラリはCDN経由のみ ES6以降の文法使用可 評価指標 コード品質：可読性、保守性、拡張性 アーキテクチャ：
JavaScriptのメモリリークと検出方法 - Qiita
はじめに JavaScriptアプリケーションが動作していると、時間経過とともに動作が重くなったり、不安定になったりすることがあります。 その原因の一つに「メモリリーク」があります。 本記事では、JavaScriptのメモリ管理の基本から、ChromeのDevToolsを用いたメモリリークの検出方法までを紹介します。 メモリリークとは メモリリークとは、不要になったメモリ領域が何らかの理由で解放されず、保持し続ける現象のことを指します。これにより、利用可能なメモリが徐々に減少し、システムのパフォーマンス低下や、最悪の場合にはクラッシュを引き起こす可能性があります。 JavaScriptエンジンのメモリ管理 JavaScriptエンジンはスタック領域とヒープ領域の二つのメモリ領域を持っており、扱うデータの種類によって2つのメモリ領域を使い分け、メモリ領域の割り当てを行います。 スタック領域
【JavaScript】階層構造を持つデータから枝番付きの連番を取得する - Qiita
// データ用 const categories = [ {id: 1, name: 'Web', parentId: null}, {id: 2, name: 'HTML', parentId: 1}, {id: 3, name: 'CSS', parentId: 1}, {id: 4, name: 'JavaScript', parentId: 1}, {id: 5, name: 'DB', parentId: null}, {id: 6, name: 'SQL', parentId: 5}, {id: 7, name: 'DB設計', parentId: 5}, {id: 8, name: 'インフラ', parentId: null}, {id: 9, name: 'Linux', parentId: 8}, {id: 10, name: 'AWS', parentId: 8} ]
Reactのeslintの設定集(日本語訳) - Qiita
この記事の概要と注意 2025年6月26日時点に書いています。年数が経つとルールも変わってくるので公式ドキュメント優先でお願いします。 ESLintとは JsやTsでコードの間違いやスタイルの乱れなどを見つけてくれるツールです。 設定方法 ESLintv9（または v8.21.0 以降から導入された構成で設定していきます。(今回の場合) import eslintPluginImport from 'eslint-plugin-import'; import tseslint from 'typescript-eslint'; export default [ ...tseslint.config({ files: ['**/*.ts', '**/*.tsx'], parserOptions: { project: './tsconfig.json', }, }), { rules: {
【図解解説】Cloudflareをマスター！2時間でNext.jsを開発して学ぶチュートリアル【初心者OK】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 AIが日々進化しており、個人開発を誰もが気軽にできるような世界になってきました。 私もかなり焦りながら勉強をしておりついていくのに必死です。 個人開発のハードルが下がった中で、日々多くの個人開発がリリースされています。 その中でNext.js × Hono × Cloudflareという構成をネット上で見る機会が増えました。 この構成をすることは個人開発者にとっては大きなメリットがあります。 (だいたい)無料枠でサービスが動かせる 簡単にデプロイすることが
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を読み進める中で生じた疑
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
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
RubyエンジニアがJavaScriptを書くときに知っておくべきreturnの罠 - Qiita
はじめに RubyからJavaScript（以下JS）に入門するとき、「なぜかfilterやsomeが思ったとおりに動かない」と感じることがあります。 その原因の一つが JavaScriptではreturnを明示的に書かないと値が返らない という仕様です。 この記事では、Rubyエンジニアがつまずきやすいこの点にフォーカスし、JSとの違いと注意点を紹介します。 Rubyでは「最後に評価された値」が返る Rubyでは、ブロックの最後に評価された値がそのまま戻り値になります。
Javascript おじさん.com
JavaScript の宝石箱や！！JavaScript の初心者から、職業エンジニアまで、幅広く役立つプログラミング情報を、JavaScript おじさんこと中西が提供します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【海外記事紹介】Tailwind CSSがフレームワーク非依存のコンポーネント群を発表、「Web標準重視」「クライアントJS最小化」の潮流が明確化
Reactで詰まった原因、実は「JavaScriptの構文」だった - Qiita
JavaScript の世界から「オブジェクト」という単語を排除したい！ - Qiita
