Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

【2024/08/20】 WasmCG で進行している ES Module Integration についての記述を追加 Import Attributes の assert キーワードが正式に仕様から取り除かれたのに追随 【2024/05/26】 せっかくなので好きなTC39 Proposals発表ドラゴンをファーストビューに追加 モジュールインスタンスフェーズがなくなり、ソースフェーズと同じレイヤーへと変更されたのに追随 Import Attributes で assert キーワードの廃止が検討されていることを追記 同期モジュールアサートがディレクティブを使うよう変更されたのに追随 Compartments のインターフェースが変更されたのに追随し、独立の章としてまとめるよう変更 好きなTC39 Proposals発表ドラゴン（ニコニコ動画、YouTube） Module Harmo

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

はじめに こんにちは、「拳で」 と申します! NRI OpenStandia Advent Calendar 2023の16日目は 今モノレポやるならどのツール使うのがいいのん?? というタイトルでお送りいたします! 最近モノレポで開発することがあり、モノレポ管理を行うためのツールってちょいちょい聞くけど何が勢いあるんだろう?と気になったので調べてみました。 皆様のおすすめのツールや設定などがございましたらぜひコメントで教えていただけると大変喜びます🙇‍♂️ TL;DR フロントエンド(JavaScript/TypeScript)開発プロジェクト向けモノレポ管理ツールは、 npm Workspaces・Lerna・Nx・Turborepo が勢いがある 各ツールの選定基準は個人的に以下を推奨 ライトに手早くモノレポ管理したい： npm Workspaces 複数のnpmパッケージの開発・

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

このドキュメントは、次の 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. Using Route Handlers with Server ComponentsConsider the following code for a Server Component:

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つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー

はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまったので、気になる部分だけ読んでみても良いのだ！ フロントガチ初心者の方は読んでるだけでも勉強になると思うので、暇な時にのんびり読むことをお勧めするのだ！ 対象読者 フロントを勉強し始めた初学者さん フロントがメイ

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