Deno 2 リリース — Node.jsとの互換性向上、標準ライブラリの提供、JSR連携など多数の改善を含むメジャーアップデート
10月10日、Denoは「Deno 2」を正式に発表した。Denoは、JavaScriptおよびTypeScriptをサポートする現代的なツールチェーンとして、すでに数多くの開発者に愛用されているが、新バージョンのDeno 2はさらに多くの機能と強化を備え、特にNode.jsおよびnpmとの互換性を大幅に改善している。 Deno 2の主要機能 Deno 2では、多くの新機能が導入されている。以下は主な機能である。 Node.jsおよびnpmとの互換性：Deno 2は、既存のNode.jsプロジェクトやnpmパッケージをシームレスにサポートしており、package.jsonやnode_modulesを直接利用可能である。これにより、既存のNodeプロジェクトにDenoのツールを導入することができる。Denoでは、npm:という形式でnpmパッケージをインポートすることも可能で、node_mo
Deno 2.0リリース候補版が公開、1.0のリリース以来最大のアップデート
9月20日、Deno 2.0のリリース候補版が公開された。これは、Deno 1.0のリリース以来、最大のアップデートであり、Node.jsとの互換性向上や依存管理システムの改良、グローバル変数の変更など、様々な新機能と改善が含まれている。 1. グローバル変数の変更 Deno 2.0では、windowグローバル変数が削除され、代わりにglobalThisやselfの使用が推奨されている。この変更は、Denoがブラウザと互換性を持つことを目指して導入されたwindowが、思わぬバグを引き起こしていたためだ。これにより、ライブラリがDeno上での動作時に問題を引き起こすことが少なくなる。 // Deno v1.x window.addEventListener("load", () => { console.log("loaded"); }); // Deno v2.x globalThis.
MochaからNode.jsテストランナーへの移行で何が起きたか ー Astroチームが解説
3月26日、Astroチームが「MochaからNode.jsへの500以上のテストの移行」と題した記事を公開した。この記事では、AstroのテストランナーをNode.jsに移行する過程での詳細な経験が紹介されている。 3月26日、Astroチームが「MochaからNode.jsへの500以上のテストの移行」と題した記事を公開した。この記事では、AstroのテストランナーをNode.jsに移行する過程での詳細な経験が紹介されている。 Astroチームは、開発環境の最適化を図るため、MochaからNode.jsへのテストランナーの移行を検討していた。その理由の一つとして、CIのジョブの高速化を挙げており、Mochaには十分な満足感があったものの、常に改善を模索していた。 具体的な利点として、AstroのメインモノレポであるAstro monorepoにおいて、MochaとChaiの2つの依存関
Node.js v20がVercelで利用可能に ー 新規プロジェクトのデフォルトバージョンへ
2024/03/26、VercelがNode.js v20 LTSを利用可能になったと発表した。 Node.js 20は、BuildsとVercel Functionsで完全にサポートされる。 Builds は、Vercelでのデプロイメントプロセスを管理し、アプリケーションのビルド、バンドル、最適化を行う機能である。Vercel Functions は、サーバーレス関数をホストするための機能であり、バックエンドのロジックを処理するために使用される。 Node.js 20をVercelで利用するのは簡単だ。プロジェクトの設定ページで、「一般」セクションにある「Node.jsバージョン」にて 20.xを選択できる。また、Vercelでの新規プロジェクトのデフォルトバージョンはNode.js 20となる。 Node.js 20は、パフォーマンスの向上やプロジェクト内のサードパーティライブラリへ
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応 サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独の実行ファイルを生成できる「bun build」機能が搭載されました。 同じくバージョン0.6で高速なバンドラ「Bun Bundler」もβ版となり、6月に登場したバージョン0.6.7ではDiscordのボットを操作するDiscord.jsやWebブラウザを操作するPuppeteerなどの動作も確認されています。 下記はBunの開発者であるJarred Summer氏のツイート。 Standalone executables are coming
Webサイト開発特化型AIサービスのWebエンジニアを募集！
Webサイト開発特化型AIサービスのWebエンジニアを募集！ 株式会社Tsunagu.AI @tsunaguai I want to hear a detailed Tsunagu.AI（ツナグドットエーアイ）は、「ヒトとデータを繋ぐ」をコンセプトに2017年4月に設立されたスタートアップです。 弊社では、Webサイト開発特化型AIサービス「FRONT-END.AI」を開発しております。FRONT-END.AIは、フロントエンド開発を自動化することを目指しているエンジニア向けのサービスです。 Webサイトのデザイン画像をFRONT-END.AIにアップロードすると、AIがデザインを認識して初期コーディングを行います。その精度は100％ではないため、初期コーディングの結果を修正するための管理画面も提供しています。サービスはエンジニアの使いやすさを重視しているため、UI UXに力を入れてサービ
Rust + Webpack = Rspack の紹介
概要 本記事では、JavaScript モジュールバンドラの一種である、 Rspack について、公式ドキュメントからわかることを要約し、自分なりの所感を付け加えて紹介します。 https://www.rspack.dev/misc/branding.html ※ 本記事は、Webpack に関する最低限の知識を前提としています。 ※ 本記事は、2023/03/12 時点の情報であり、古い内容が残っている場合があります TL;DR; Rspack は Webpack との互換性とパフォーマンスを両立したモジュールバンドラ Webpack より5~10倍高速 Webpack と設定ファイルや loader, plugin に充分な互換性を持つ Webpack の一般的な設定パターンがビルトインで用意されており、シンプルに使える 現在はアーリーステージで、Vue.js のサポートもこれからとい
Node.js と ECMAScript の Import Specifier は意味が違うらしい
Node.js の import specifier と ECMAScript の ImportSpecifier 先日 Firefox の JavaScript エンジンである SpiderMonkey の公式ブログに Import Maps についての記事が投稿された。 https://spidermonkey.dev/blog/2023/02/23/javascript-import-maps-part-1-introduction.html この記事は、そもそも ECMAScript Modules とは何かというところから入り、Node.js のモジュールシステムの歴史やブラウザの ECMAScript Modules との関係などを説明した後、本題である Import Maps について解説している。短い時間で読める面白い記事なので、まだ読んでいない人はぜひ読んでほしい。 この
Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ
こんにちは。PR TIMES フロントエンドエンジニアの岩元 (@yoiwamoto) です。 PR TIMES ではいくつかのページが React で実装されており、Webpack でビルドを行っていました。 今回は、一部のページを除いてこの Webpack を Vite へ置き換えたので、その経緯や結果を共有します。 まとめ ビルド時間が長いことが課題で移行を行い、結果として開発体験・デプロイ時間等が大幅に改善されました。 開発環境のみの移行 → フィーチャートグルでの本番試験 → リリース → Webpack の廃止と、移行は段階的に進めました。 なぜ Webpack をやめたのか 一番はやはり、ビルド時間の遅さです。 今回、当時の環境を再現することが難しく、改めて計測はできなかったのですが、本番用のビルドはおおよそ3~4分、開発環境での watch ビルドで変更が反映 (HMR)
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？ 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブな操作を実現するなどの仕組みを得たことでWebアプリケーション基盤へと発展しています。 現在、Webアプリケーションの仕組みとして代表的なものがSPA（Single Page Application）でしょう。 SPAはWebブラウザ上で多くの処理が行われるためユーザーの操作に対する反応が速く、インタラクティブ性の高い快適なWebアプリケーションを実現できる利点があります。 しかし、これからのWebはサーバサイドレンダ
Denoのライアン・ダール氏「親愛なるオラクル殿、どうかJavaScriptの商標を手放して」と呼びかけ
主要なJavaScriptランタイムであるNode.jsの作者であり、現在もDenoの開発を進めているライアン・ダール氏は、自身のブログで「Dear Oracle, Please Release the JavaScript Trademark」（親愛なるオラクル殿、どうかJavaScriptの商標を手放して）と呼びかけています。 JavaScriptはNetscapeがWebブラウザ用に開発したプログラミング言語であることはよく知られていますが、その名称はサン・マイクロシステムズが登録商標として所有し、同社がオラクルに買収されたことで現在はオラクルが所有しています。 ライアン・ダール氏はそのオラクルが唯一「Oracle JavaScript Extension Toolkit」以外にはJavaScript関連製品を持っておらず、V8やSpidermokeyといった主要なJavaScrip
JavaScript／TypeScriptランタイム「Deno 1.21」がリリース
「Deno 1.21」では、デフォルトで型チェックを無効にするパスであるdeno runにてDenoを開始し、型チェックは新たなサブコマンドであるdeno checkを使用して明示的に実行することが決定されたことを受けて、将来デフォルトをno-typecheck-by-defaultモードに切り替えるべく、サブコマンドdeno checkと環境変数DENO_FUTURE_CHECK=1が追加されている。なお、今後数か月以内のリリースにて、デフォルトで型チェックが無効になる。 さらに、setTimeout、setInterval、またはブラウザへのイベントハンドラのような非同期イベントループタスクでキャッチされない例外に対するDenoのエラー処理に対応すべく、グローバルイベントとしてerrorを追加し、event.preventDefault()によってイベントがキャッチされなかった場合に、
Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
Ayo.js について - from scratch
Ayo.js とは 「Node.js の fork です。」と言ってもまだできたばかりで正直このタイミングで記事にしてもまだ語ることはそんなに多くないです。 ただし、JavaScript界隈が騒ぎになりかけていることは確かです。日本でも発言が増えてきたので自分なりにまとめて今時点での話をしようと思います。 ちなみに読み方は好きに読んでくれ、と言われてます。 「アイ・オー」でもいいし、「エイ・ヨー」でも良いとのことです。ネーミング的には昔あった io.js fork騒動を想起させるネーミングになってます。もしも io.js についてご存じない方もいるのであれば、こちらをご参照ください。 yosuke-furukawa.hatenablog.com Ayo.js の目的 https://github.com/ayojs/ayo/blob/zkat/values/VALUES.md ここを見ると
Node 学園祭 2016 個人的なまとめ - Qiita
Node 学園祭 2016 印象に残ったセッションのまとめ。 計画・実施されたみなさま、とても楽しかったです。ありがとうございました !! 動画も公開されたようです。 Demystifying JavaScript Engines http://slides.com/a0viedo/demystifying-js-engines#/ https://github.com/a0viedo/demystifying-js-engines http://togetter.com/li/1047918 JavaScript エンジンについてのセッション。 2006 年ごろの牧歌的なインタープリターのハナシからはじまって、 JIT のかけ方、各実装ごとの最適化のかけかた、 Garbage Collection の実装まとめまで。 最後の話題である GC について↓あたり読めばいいかも。 http:/
React + Reduxで作ったIsomorphic(Universal) JSなサービス開発の裏側 | Recruit Tech Blog
はじめまして、2016年新卒入社のいちきです。僕は現在、11/14にWeb版がリリースされたばかりのブッキングテーブルというサービスの開発チームでフロントエンドからバックエンドまで一貫して担当しています！ ブッキングテーブルとは？ https://bookingtable.jp/ ブッキングテーブルは全国の飲食店の予約を全てネットで予約が出来る、予約特化アプリです。 既に2016年4月にiOS、Android版が同時にリリースされていましたが、遂に11/14に待望のWeb版がリリースされました！ ブッキングテーブルのWeb版は、Single Page ApplicationやServer Side Renderingなど、フロントエンド技術で様々な取り組みを行っています。 「予約特化アプリを目指す」という目標に対して、エンジニア側からもユーザにとっていかに良いUXを体験してもらえるかを考え
1分でわかるESLintの使い方とインストール手順
ESLintとは JavaScriptのコードが正しいかチェックするツール。 以下の手順で簡単にインストールして使用可能。 バージョンは6.8.0のものなので使用バージョンによっては質問内容が異なる場合がある。 1. npmをインストールする https://nodejs.org/ 2. ターミナルを開く ターミナル(コマンドプロンプト)でESLintをインストールするディレクトリに移動 cd ディレクトリのパス 3. ESLintをインストールする npm i -g eslint または sudo npm i -g eslint 4. ESLintの初期設定を行う eslint --init How would you like to configure ESLint? と表示されるので「To check syntax, find problems, and enforce code s
JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう
人によって異なるJavaScriptの書き方もチーム開発では揃っていないと気持ちが悪いし、バグのもとに…。構文チェックツール「ESLint」を導入すれば、スタイルガイドに合わせたチーム開発が捗るそうですよ。 「リンティング（linting）」という言葉に聞き覚えはありますか？ コードの潜在的問題を自動的に確認するためのツール（リンター）を使ったプロセスのことです。このようなツールを使用することで生まれる、重要なメリットがいくつかあります。 コードスタイルの一貫性を保つ：スペース、インデント、ブレース（波括弧）の配置などのコードスタイルの問題をリンターで確認できる。チームの同意を得たコーディングスタイルを設定ファイルに記述しておけば自動的に確認できる 潜在的エラーや良くないパターンを見分けられる：リンターは、重複変数、到達不能コード、無効な正規表現の可能性があるエラーを発見するため、より高度
Node.jsのパッケージ管理ツールnpmを使ってみよう
Node.jsのパッケージ管理ツールnpmを使ってみよう JavaScriptでバッチ処理を書くときに使うNode.js入門（3） さまざまな仕事を自動化するバッチ処理をJavaScriptで書こうと思ったときに外せないのが「Node.js」です。本稿では、Node.jsを使う上で、知っていると役立つ基本的な事柄を紹介します。 npmモジュールを使ってみよう - Excelファイルを自動生成 前回、ファイル検索ツールを作る方法を紹介しました。Node.jsのモジュールで、同じ命令が、非同期処理・同期処理と二系統用意されている理由や、使い分けの方法について紹介しました。今回は、Node.jsを使う上で欠かすことのできない、パッケージ管理ツールのnpmについて紹介します。npmを使うことで、Node.jsへ手軽に機能を追加できるのです。 npmについて npmは、Node.jsのパッケージ管理
はじめてのTypeScript開発環境構築（gulp, bower, webpack, tsd, npm）
はじめてのTypeScript開発環境構築（gulp, bower, webpack, tsd, npm） TypeScriptで開発しようとしたとき、いろんな問題にぶつかった。 もともとSIerではVisual Studioさえあればなんとかなる環境で育ってきたため、Web系のさまざまなツールを導入する上で何度も挫折した。 ということで、初心者（私）が初心者向けに「はじめてTypeScriptの開発環境（gulp + bower + webpack + tsd + npm）を構築するときの手順とポイント」についてまとめていこうと思う。 ツールの使い方間違っているよなどの指摘がありましたら、コメントやTwitterで教えてください。 この記事の目標 TypeScriptで開発したい ライブラリも使いたい（今回はjQueryを例にする） Web界隈のツールにも慣れたい 使用するツール（ツール
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
