JavaScript の Segments という機能を知りました。 JavaScript って標準 API でこんなこともできるのかhttps://t.co/ckHTlqcium pic.twitter.com/hrwfgvtF4J — naporitan (@naporin24690) December 25, 2023 これは面白い！ ブラウザの標準機能で自然言語処理ができる時代だ！ とりあえず、お手元で試したい方はこちらをどうぞ。お使いのブラウザの console に貼り付ければ動くはずです。 const segmenter = new Intl.Segmenter("ja", { granularity: "word" }); const string1 = "東京都府中市は「とある科学の超電磁砲」の舞台ではない。京都府中京区も違う。"; const segments = seg

Module Harmony とは 現在 TC39 で多くのモジュール機能を追加する提案が進行しています。かつてはそれぞれの提案が無秩序に進行していましたが、2023年5月に Module Harmony として整理されました。この記事ではそれら提案についてまとめようと思います。 モジュール提案仕様の依存関係 インポートフェーズ修飾子 モジュールの読み込みがフェーズに分けられ、それぞれに対して修飾子が提案されています。シンタックスとしては import の後ろに修飾子を付けます。 import <Modifier> <ImportBinding> from <ModuleSpecifier>; import.<Modifier>(<AssignmentExpression>); モジュールの各フェーズと修飾子の対応 アセット参照 URL やパス解決のみをするのがアセット参照です。Asset

HTML HTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。 CSS CSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。 JavaScript JavaScriptは主にWebブラウ

モノレポ管理ツール単体を管理するGitHubリポジトリとしてみると Lerna Bazel Nx あたりのStar数の多さが目を引きます。 ※npm Workspaces, pnpm Workspaces, Rush, Turborepo, Yarn WorkspacesのGitHub Star数はモノレポ管理以外の機能も含まれるリポジトリのためご参考 Trends比較 今回各ツールのトレンドを比較するため GitHub Star History npm trends State of JavaScript の調査を行いました。 GitHub Star History GitHub Star Historyで各GitHubリポジトリのStar数推移をチェックしてみました。 引用：GitHub Star History | bazel vs bolt vs lerna vs moon vs

JavaScript のインポート地図がクロスブラウザでサポートされるようになりました。 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ES モジュールは、ウェブ アプリケーションに JavaScript コードを含めて再利用する最新の方法です。これらは最新のブラウザでサポートされており、従来の非モジュール式 JavaScript 開発アプローチに比べていくつかの利点があります。 ES モジュールを使用する最新の方法は、<script type="importmap"> タグを使用することです。このタグを使用すると、外部モジュール名とそれに対応する URL のマッピングを定義できます。これにより、コードに外部モジュールを組み込んで使用するのが容易になります。 <script type="importmap"> アプローチを使用するには、まずそれを HTM

このドキュメントは、次の Biome のブログの日本語訳になります。 細かい内容については、ぜひ原文の方を読んでもらえると嬉しいです。 ロードマップ 2024 コアコントリビューターとメンテナーが 2024 年にフォーカスしようとしていることを共有できることはとても嬉しいです。一方で、Biome はコミュニティ主導のプロジェクトであるため、取り上げている全てのアイデアのリリースを約束することはできません。 もしいくつかのアイデアに共感し、それらの開発を加速させたいと思った際には、次のような方法でサポートすることができます。 プロジェクトとコミュニティに参加する。アイデアを実装するためのサポートをすることができます。 スポンサーになる。Biome をお使いの会社では、スポンサーになることができます。Biome は CI の時間を削減し、費用を節約できるほど速いです。パフォーマンスは、プロジェ

みなさんこんにちは。@ryuzeeです。 2024年1月10日〜12日開催のRegional Scrum Gathering Tokyo 2024の登壇資料を公開します。 「ベロシティ Deep Dive」ということで過去のDeep Diveシリーズの続きになっています。 過去のDeep Diveシリーズはこちらからご覧ください。 プロダクトバックログ Deep Dive スプリントプランニング Deep Dive スプリントレビュー Deep Dive セッション資料は以下になります。 結論から言うと、「ベロシティなんかにDeep Diveせず、もっと重要なところに集中しろ」です。 スクラムチームの状況を何らかの数値で表したいという考え自体は尊重しますし、それが役に立つこともあります。 ただし、数字遊びをしたところでプロダクトの価値を生み出せるわけではないので、ほどほどにしましょう。 ス

After talking to hundreds of developers and looking at thousands of Next.js repositories, I've noticed ten common mistakes when building with the Next.js App Router. This post will share why these mistakes can happen, how to fix them, and some tips to help you understand the new App Router model.

chibivue について chibivue とは 一言で言うと Vue の一部を自分で作ってみて、Vue の深い理解や本家のコードが読めるようになるオンラインブックです。 「はじめに」の本書の目的部分で詳細に書かれていますが、「Vue とは何なのか？」をステップバイステップでコードを書きながら学べる教材です。 まだ私は基礎編（Minimum Example）のみしか学習していませんが、フロントエンドに関わったことがある身として学習体験が非常に良かったので紹介する記事を書きました。 対象者 chibivue では、「Vue.js を触ったことがある」かつ「TypeScript が書ける」人が対象者となっています。 私はがっつりフロントエンドとして業務に携わった経験は 1 年ほどでしたが、何とか理解できるレベルだったので多くの Vue 経験者は対象者に入るはずです。 また、わからないことがあ

Jestでモジュールをモックするのは便利ですが、モジュールの一部をモックしたい場合に困ることがあります。 // my-module.js export function foo() { ... } export function bar() { ... } // bar だけモックしたい import { foo, bar } from "./my-module"; jest.mock("./my-module", () => ({ bar: jest.fn(), })); describe("foo", () => { it("works", () => { expect(foo("yay")).toEqual("wow"); }); });

<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー

【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ

Next.js App Router TrainingIntroducing various basic patterns of app router with simplified code.