Implementations of the new JavaScript Temporal object are starting to be shipped in experimental releases of browsers. This is big news for web developers because working with dates and times in JavaScript will be hugely simplified and modernized. Applications that rely on scheduling, internationalization, or time-sensitive data will be able to use built-ins for efficient, precise and consistent d
Complete beginners start here!Getting started with the webGetting started with the webInstalling basic softwareWhat will your website look like?Dealing with filesHTML basicsCSS basicsJavaScript basicsPublishing your websiteHow the web worksHTML — Structuring the webIntroduction to HTMLIntroduction to HTMLGetting started with HTMLWhat's in the head? Metadata in HTMLHTML text fundamentalsCreating hy
最近の日本のフロントエンド界隈では「Native ESM時代」という言葉が聞こえてきます。Native ESM時代におけるビルドツールがどうなるかといったことが主な話題です。 個人的には面白い概念なので流行ってほしいと思い、Native ESM時代とは何かを解説する基礎的な資料を用意しました。 そもそもNative ESMとは Native ESMとは、ES Modulesのことです。つまり、ECMAScript仕様の一部として定義されたモジュールシステムを指します。現在、モダンな部類のフロントエンド開発において広く用いられている、import宣言でインポートしexport宣言でエクスポートするのがES Modulesです。 特に、ES Modulesはブラウザによって直接理解されるモジュールシステムです。Nativeという単語はこのことを強調しています。 Native ESM時代とは N
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ
最近シリコンウエハーもらって嬉しかったago（@kyo_ago）です。 このエントリはGREE Advent Calendar 2013 11日目の記事です。 今回はクライアントサイドJavaScriptにおけるライセンス管理の問題を取り上げたいと思います。 ライセンス管理の問題点 「使用しているライブラリのライセンス管理をどうするか」はクライアントサイドJavaScriptにかぎらず発生する問題ですが、クライアントサイドJavaScriptには以下の様な特徴があるため問題が複雑になります。 コードが結合、圧縮される場合がある クライアントサイドJavaScriptでは読み込みの速度を上げるため、使用しているライブラリの結合、圧縮を行うことがあります。しかし、この時誤ってライセンス文が捨てられてしまうことがあります。 ソースが外部に公開される クライアントサイドJavaScriptではソー
こんにちは。フロントエンドエキスパートの平野（@shisama_）です。 フロントエンドエキスパートチームでは業務時間の 30 % の時間で技術探究を行っています。 今回は探究した技術の中から Node.js の ES Modules（以下 ESM）についてと Dual Package (CommonJS/ES Modules) に対応した npm パッケージの開発について紹介します。 ES Modules の特徴 ESM はブラウザ互換 ESM は Strict モード ESM は非同期 ESM は静的解析可能 Node.js の ESM 対応について Dual Package（CJS/ESM）に対応した npm パッケージの開発 Conditional Exports によるファイルの指定 .mjs と .cjs require など CJS 特有の機能を使う ESMから CJS ファ
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
ECMAScript 6（2015年6月に公開され、今もなお比較的新しい JavaScript）の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は イテレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める！（この記事） Qiita: JavaScript の ジェネレータ を極める！ また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 （2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table） 1. ことばの定義 1.1. イテレータ (Iterator
ITPの仕様 次々と新しいバージョンがリリースされるITP。微妙にアップデートされ、仕様がわかりにくくなっているので現時点で最新のものを解説する。 ITPの目的と概要 われわれウェブサイト運用者は cookieやローカルストレージなどを使ってブラウザにドメインのデータを保持し、 それらのデータを必要に応じてツール間で連携する ことによって行動計測やコンテンツの出し分けなどのマーケティング活動を行っている。ITPはウェブサイト訪問者のプライバシー保持のためにそれを制限する仕組みである。具体的に何をやっているのかざっくりまとめると、 この3つのケースにおいて cookieなどを使ったデータ保持が短期間しかできなくなる（期間の長さはケースごとそれぞれ異なる） リファラが使い物にならなくなる 可能性があるということである。その結果 コンバージョントラッキングができない リマーケティング広告が配信で
対象読者 ES6を詳しくは知らない なんとなくJavaScriptを書けるけど、JSのthisの特性についてまだよく知らない アロー関数式を知らない、または知っているけど実装経験がない 概要 JavaScriptのES6で導入されたアロー関数式を、関数のただのシンタックスシュガーに過ぎないと思っていたのですが、調べてみると実際そうではないようだったので、thisの話と一緒にまとめてみました。 アロー関数式とは ES2015（ES6）から利用可能になった新しいJavaScriptの構文の一つです。 ES6とは、2015年に標準として策定されたJavaScriptの新しい文法です。 ES6では他にも、letによる変数宣言が可能になったり、promiseという非同期処理の実装ができるようになったりと、アロー関数式以外にも様々な構文追加がありました。 さて、この記事の主題はそのなかでもアロー関数な
In our 2019 Dev Survey, we asked what kind of content Stack Overflow users would like to see beyond questions and answers. The most popular response was “tech articles written by other developers.” So from now on we'll be regularly publishing articles from contributors. If you have an idea and would like to submit a pitch, you can email pitches@stackoverflow.com. Hey there, I'm Ryland Goldstein, a
Request.destinationはRequestインターフェイスのプロパティで、リクエストしているコンテンツの種類を文字列で返します。これをService Workerのfetchイベント時に用いると、リソースの種類別にキャッシュ戦略を切り替えることができます。 Request.destinationの使い方 Request.destinationでは一体どんな文字列が返されるのでしょうか。Fetch StandardのRequest.destinationの仕様の一部を抜粋します。 A request has an associated destination, which is the empty string, "audio", "audioworklet", "document", "embed", "font", "image", "manifest", "object",
地獄を抜けたらそこは地獄だった。 以下はHow to avoid (or escape) async/await hellという記事の日本語訳です。 How to avoid (or escape) async/await hell async/awaitはたしかに我々をコールバック地獄から解放してくれました。 しかし、それは恐るべき地獄の、ほんのプレリュードにすぎなかったのです。 そう、async/await地獄の誕生です。 この記事ではasync/await地獄が何であるか、そしてそれから逃れるためのヒントをいくつか紹介します。 What is async/await hell 非同期JavaScriptを使用する際、しばしば複数の関数呼び出しすべてにawaitをつけがちです。 これによってパフォーマンス上の問題が発生します。 あるステートメントは別に手前のステートメントに依存はしてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く