eslint-plugin-no-barrel-filesを導入してBarrel filesをやめた話 | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではフロントエンドのReactリプレイス当初より Barrel file を作成するルールがありました。しかし、先日そのルールを廃止することに決めたため、その経緯についてご紹介します。 Barrel filesとは Barrel filesとは複数のモジュールを1つのファイル（Barrel file）にまとめてexportすることを指します。以下の例ではutils/test.ts 、utils/fuga.ts 、utils/hoge.ts で export されている定数を utils/index.ts で再exportしています。 // utils/test.ts export const test = 1; // utils/fuga.ts export const fuga = 2; //
[JS]Temporalの嬉しい進捗 MDNドキュメント＆Firefox対応開始
こんにちは、booost technologiesバックエンドエンジニアのma_meです。 直近の業務でフロントエンドのタイムゾーンで苦しめられていた中、JSの日付処理を劇的に改善するTemporalの明るい進捗ニュースが飛び込んできて、大変喜んでいます。 今回はそんなTemporalの明るいニュースをお伝えしたいと思います。 記事の概要まとめ Temporalの包括的なドキュメントがMDNに追加された Firefox Nightlyにも実装されはじめた 嬉しいニュース JavaScript Temporal is coming | MDN Blog Temporal って何？ そもそもTemporalについての説明です。 JSの日付APIは選択肢が殆ど無いうえ、あまり機能が充実しておらず、フロントエンドで日付を扱う際にはライブラリが必須な状況でした。 ライブラリも一筋縄ではなかなかいかず
![[JS]Temporalの嬉しい進捗 MDNドキュメント＆Firefox対応開始](https://cdn-ak-scissors.b.st-hatena.com/image/square/0fa51646125c7b1cc66253ced53c444e567c7115/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--bH2aoryE--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BJS%25255DTemporal%2525E3%252581%2525AE%2525E5%2525AC%252589%2525E3%252581%252597%2525E3%252581%252584%2525E9%252580%2525B2%2525E6%25258D%252597%2525E3%252580%252580MDN%2525E3%252583%252589%2525E3%252582%2525AD%2525E3%252583%2525A5%2525E3%252583%2525A1%2525E3%252583%2525B3%2525E3%252583%252588%2525EF%2525BC%252586Firefox%2525E5%2525AF%2525BE%2525E5%2525BF%25259C%2525E9%252596%25258B%2525E5%2525A7%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Ama_me%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzY1MDIxZThkNDcuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3Abooost%252520technologies%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzMzZjVkODUyNTcuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
【JavaScript】ES2025の新機能全部解説する - Qiita
ES2025 / ES2024 / ES2023 / ES2022 JavaScriptの仕様は、TC39というところで決められています。 ブラウザベンダや関係者が定期的に会合を行い、様々な新機能について話し合って今後のJavaScriptの方向性を決めていきます。 ここでは2024年にFinishedになった、すなわち仕様が確定して複数のブラウザで実装がなされたproposalについて紹介してみます。 主要ブラウザでは既にほとんどの機能を使用可能です。 ちなみに、2024年2月から2025年1月までにStage4になったproposalがES2025と呼ばれます。 ややこしいですね。 Finished Proposals Promise.try 同期かもしれないし非同期かもしれない、Promiseを返すかもしれないしそうでないかもしれない、そんな関数があります。 その関数を使う際に、いち
GitHub - LavaMoat/LavaMoat: tools for sandboxing your dependency graph
LavaMoat is a set of tools for securing JavaScript projects against a category of attacks called software supply chain attacks. This genre of attack occurs when a malicious dependency makes its way into a developer's application. An attacker could use the dependency to then steal important secrets (like credit card numbers, private keys, or data) or make the application vulnerable to a range of ot
ENCA 25日目: 正規表現の Well-known Symbols メソッドをプリミティブに対して実行しない（進行中）
正規表現の Well-known Symbols メソッドをプリミティブに対して実行しない（進行中） 文字列のメソッドで呼ばれる正規表現の Well-known Symbols メソッドですが、渡ってくる引数がオブジェクトかどうかの判定をしておらず、プリミティブに対しても実行されてしまうことを見つけてしまいました。 つまりプロトタイプ汚染することによって、想定されていないコードを実行させることが出来てしまいます（Node.js REPL で試すと内部コードから呼び出されてクラッシュします）。 // プロトタイプ汚染 String.prototype[Symbol.split] = () => { throw new Error("bang!"); }; // throws Error "foo bar".split(" "); これは問題があるだろうということで ECMA-262 に PR
ENCA 24日目: IsRegExp の挙動変更（リジェクト）
IsRegExp とは ECMAScript の仕様に IsRegExp が定義されています。これは文字列のメソッド内で、渡された引数が正規表現オブジェクトかどうかを判定する際に用いられます。使われている箇所について見てみると以下の2つのパターンに分類できます。 引数として文字列のみを許容するため、正規表現オブジェクトが渡ってきたら TypeError を投げたい場合 String.prototype.includes String.prototype.startsWith String.prototype.endsWith 引数に正規表現オブジェクトが渡ってきたら g フラグを持っているかチェックしたい場合 String.prototype.matchAll String.prototype.replaceAll IsRegExp の挙動変更（リジェクト） IsRegExp は以下のよう
ENCA 23日目: RegExp.prototype.replace のキャプチャで2桁から1桁にフォールバックする仕様修正
RegExp.prototype.replace と正規表現 文字列を置換する際に用いる RegExp.prototype.replace は第一引数に正規表現[1]を受け取ることが出来ます。その場合第二引数には文字列か函数を渡すことでマッチした部分文字列を置き換えます。文字列を使った例が以下のようになります。 console.log("foo".replace(/foo/u, "bar")); // "bar" console.log("foo".replace(/(foo)/u, "$1 $1")); // "foo foo" console.log("foo".replace(/(?<char>o)/u, " $<char> ")); // "f o o"
ENCA 22日目: 正規表現の名前付きキャプチャグループでエスケープシーケンスを扱えるように
Unicode エスケープシーケンス色々 UTF-16 のサロゲートペアを含む 𝒜 について考えます。これは文字列リテラルとしては次の3つの表現をすることが出来ます。 "𝒜" "\ud835\udc9c" "\u{1d49c}" 変数宣言としては次の2つの表現をすることが出来ます。 let 𝒜; let \u{1d49c}; 正規表現リテラルでは u もしくは v フラグを使った Unicode 対応モードの場合3つの表現をすることが出来ますが、そうでない場合は後方互換性を考慮して "\u{1d49c}" の場合だけ展開されないようになっています（単に \ が無視される）。 console.log(/𝒜/u.test("𝒜")); // true console.log(/\ud835\udc9c/u.test("𝒜")); // true console.log(/\u{1d
ENCA 21日目: Function.prototype.bind でターゲットの length が Infinity な場合の挙動明示
函数の length プロパティ JavaScript の函数は length プロパティが設定されるようになっています。これは函数を作った際に受け取る引数（デフォルト引数や残余引数が現れる前の引数）の数が設定されます。
Phaser 2からの変更点 - ゲームプログラミングノート
Phaser 3はPhaser 2とは別物と言ってもいいくらいに多くの点が変化しました。 変更点に関してはPhaser World Issue 116に詳しいことが書いてあります。 madmimi.com 個人的に気になった変更点 その中から個人的に気になった変更点をいくつかピックアップしたいと思います。 ディスプレイツリー構造が廃止になった Phaser 2ではあるオブジェクトに別のオブジェクトを子要素として追加し、全体としてはツリーの構造にして一つの表示物を作るのが一般的でした。 Phaser 3ではそのようなことができなくなっています。ゲームオブジェクトが他のゲームオブジェクトを子要素として含むことはできず、全てのゲームオブジェクトがフラットになるようです。 この変更はかなり影響があるのではないでしょうか。Containerを使えばディスプレイツリーと同じようなことはできますが、Ph
ENCA 20日目: クラスの name プロパティ設定を早める
クラスの name プロパティ JavaScript のクラスは name プロパティが設定されるようになっています。これは SetFunctionName が実行されることによるもので、通常の函数と同様に、クラス宣言、クラス式問わずに設定されます。 // クラス宣言 class Foo {} console.log(Foo.name); // "Foo" // 変数宣言でクラス式を使う const Bar = class {} console.log(Bar.name); // "Bar"
ENCA 19日目: `eval?.()` の direct eval 化（リジェクト）
direct eval とは eval 函数を実行する際、参照される変数名が eval そのままで実行される場合を direct eval と呼び、そうでない indirect eval と区別しています。direct eval はそのスコープでの実行となりますが indirect eval は別のコンテキストで実行されます（新しく <script> タグが作られて実行されると考えるとわかりやすいかもしれません）。 globalThis.foo = "global foo"; { const foo = "shadowed foo"; // direct eval console.log(eval("foo")); // "shadowed foo" // indirect eval const indirectEval = eval; console.log(indirectEval("
Shinyai.js 第1回 JavaScriptクイズの解答と解説 - 焼売飯店
この記事は、syumai Advent Calendar 2024 18日目の記事です。 まずはクイズにチャレンジ！ 今回のJavaScriptクイズにチャレンジできる特設ページを作ったので、まずはこちらで遊んでみてください。 Shinyai.js 第1回 JavaScriptクイズ - https://shinyaijs.syum.ai/events/1 v0にベースを作ってもらって、@opennextjs/cloudflareを使ってCloudflare Workersにデプロイする形でホストしています。 Shinyai.jsとは？ Shinyaigeekの家で行われた、ただの飲み会です。 何故か全員発表資料があったので、自分の持ってきたクイズに回答したり、それぞれのスライドを映したりしながら酒を飲んでいました。 準備不足だったために、当日に解説をちゃんと用意できていなかった問題もいく
Termo - An Easy to use terminal for your browser
Include the following script tag in your HTML file. <script src="https://cdn.jsdelivr.net/gh/rajnandan1/termo/dist/termo.min.js"></script> Install the package using npm. npm install @rajnandan1/termo Include / Import. import Termo from '@rajnandan1/termo'; Please note that termo is a client side library and it will not work in server side code. Sample React Code import React, { useEffect, useRef }
GitHub - lingui/js-lingui: 🌍 📖 A readable, automated, and optimized (3 kb) internationalization for JavaScript
Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language. --- W3C Web Internationalization FAQ Lingui is an easy yet powerful internationalization (i18n) framework for global projects. Clean and readable - Keep your code clean and readable, while the library uses ba
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - yudppp/styled-formatter: A CLI tool to format `styled-components` template literals in your codebase. It ensures that your CSS-in-JS remains clean, consistent, and easy to read, supporting both `styled-components` and `css` tagged template litera
ENCA 17日目: catch 束縛変数とそのブロック内の for...of 内の var による変数名重複の許容
davidbonnet/astring: 🌳 Tiny and fast JavaScript code generator from an ESTree-compliant AST.
GitHub - nissy-dev/tenbin: Tenbin provides tools to minimize the differences in test execution times across shards.
ENCA 15日目: typeof の implementation-defined を削除
