-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add 2024-05 * update * update * jaページを利用 * add mugi pickup article * add nus3 part * ad notable article b4h0_c4t * add saji notable * update order * add stream url --------- Co-authored-by: nus3 <hadayota33@gmail.com> Co-authored-by: b4h0-c4t <hodaka.origin.0524@gmail.com> Co-authored-by: saji-ryu <rsajiki@gmail.com>
- Loading branch information
4 people
committed
May 23, 2024
1 parent
8d4fdb9
commit efde8cb
Showing
1 changed file
with
205 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,205 @@ | ||
| --- | ||
| title: Cybozu Frontend Monthly | ||
| date: "2024-05-28T17:00:00+09:00" | ||
| slug: "2024-05" | ||
| connpass: "https://cybozu.connpass.com/event/318405/" | ||
| streamUrl: "https://www.youtube.com/watch?v=YHFDpCrXrrM" | ||
| no: 47 | ||
| members: | ||
| - name: "@b4h0_c4t" | ||
| link: https://twitter.com/b4h0_c4t | ||
| - name: "@sajikix" | ||
| link: https://twitter.com/sajikix | ||
| - name: "@mugi_uno" | ||
| link: https://twitter.com/mugi_uno | ||
| - name: "@nus3_" | ||
| link: https://twitter.com/nus3_ | ||
| guest: | ||
| --- | ||
|
|
||
| ## 👀 Notable Articles | ||
|
|
||
| ### [About "slow types" - Docs - JSR](https://jsr.io/docs/about-slow-types) | ||
|
|
||
| - 共有者: @sajikix | ||
|
|
||
| 新しいパッケージレジストリである JSR では「明示的に記述されていない型」や、「理解するために広範な推論を必要とするほど複雑な型」を `slow types`としてマークし、このようなような型を利用していないかをチェックするようにしているという記事です。 | ||
|
|
||
| #### `slow types` の問題 | ||
|
|
||
| JSR ではドキュメントの自動生成や npm 互換の型宣言生成のために多くの型解析を行っており、推論コストの高い型が含まれると以下のような問題が発生します。 | ||
|
|
||
| - 多くのパッケージで 1.5~2 倍近い解析時間がかかる | ||
| - 一部 npm 互換の型宣言生成が行えない場合がある | ||
| - 型からドキュメントを生成することができない場合がある | ||
|
|
||
| またそもそも完全に TypeScript の型推論を行うことができるのは`TypeScript compiler(tsc)`のみで、この tsc の複雑な推論機能は頻繁にアップデートされます。自動的に型宣言やドキュメントを生成する JSR にとって、明示的でなく型推論の必要な型を利用することは生成物の冪等性を保証できないことにつながります。このような理由から、JSR では `slow types` を使用せず明示的に型をつけることを推奨しており、これを Scoring にも反映させています。 | ||
|
|
||
| 詳しくはこの記事について言及した github issue も詳しいです。 | ||
|
|
||
| - https://github.com/jsr-io/jsr/issues/444#issuecomment-2079772908 | ||
|
|
||
| #### 何が `slow types` なのか | ||
|
|
||
| では具体的に `slow types` はどのようなものが該当するのでしょうか。JSR においては export されている関数、クラス、const, let に 明示的な型記述がない場合や、型が単純に推測できるものより複雑な場合に `slow types` としてマークされます。(内部的に import/export しているもので明示的な型記述がないものは JSR としては`slow types`としていません。`slow types`はあくまで外部に export されている変数や関数・オブジェクトの推論の難しさに焦点を当てています。) | ||
|
|
||
| 例えば返り値の方を方を明示していない関数や初期化部分を参照しないと算出できないプロパティやメソッドなどが該当します。 | ||
|
|
||
| ```ts | ||
| export function foo() { | ||
| return Math.random().toString() | ||
| } | ||
| ``` | ||
|
|
||
| またパッケージはグローバル・スコープや他のモジュールを拡張するために、`declare global`、`declare module`、`export as namespace` を使用することはできないなどの制約もあります。 | ||
|
|
||
| #### `slow types` を防ぐ | ||
|
|
||
| deno-lint を利用している環境では `no-slow-types` というルールによって意図しない slow types の発生を防ぐことができるとしています。 | ||
|
|
||
| また必ずしも`slow types` を防げるとは限りませんが、同じような思想から考案された [`--isolatedDeclaration option`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/#isolated-declarations)が TypeScript 5.5 で導入されています。 | ||
|
|
||
| --- | ||
|
|
||
| ### [React 19 Beta の公開](https://ja.react.dev/blog/2024/04/25/react-19) | ||
|
|
||
| - 共有者: @mugi_uno | ||
|
|
||
| React 19 Beta が公開され、多くの機能が利用可能になりました。以前から Canary チャンネルに含まれていて、Next.js ユーザーなどは先行して利用していた機能が多く含まれています。 | ||
|
|
||
| 機能追加・変更の一部を抜粋すると次のようなものが挙げられます。 | ||
|
|
||
| - Action (非同期トランジションを用いた関数のサポート) | ||
| - `use()`・`useActionState()`・`useFormStatus()`・`useOptimistic()` などの hooks | ||
| - Server Component / Server Action | ||
| - `ref` の Props アクセス (`forwardRef` が不要に) | ||
| - `<Context>` を直接プロバイダとして利用可能に | ||
| - ドキュメントメタデータやスタイルシートのサポート | ||
| - など | ||
|
|
||
| また、[React 18.3](https://github.com/facebook/react/releases/tag/v18.3.0) も公開されました。これは 18.2 と機能的にはほぼ同一ですが、React 19 へ移行した場合に警告を出してくれるため、問題点の事前検出に役立ちます。 | ||
|
|
||
| --- | ||
|
|
||
| ### [React Compiler](https://react.dev/learn/react-compiler) | ||
|
|
||
| - 共有者: @b4h0_c4t | ||
|
|
||
| React 19 Beta から利用可能な実験的機能として React Compiler が登場しました。 | ||
|
|
||
| React Compiler は一般的な JavaScript のセマンティクスと [Rules of React](https://react.dev/reference/rules) に適合したコードベースに対して自動的にメモ化を差し込むことができます。 | ||
|
|
||
| 現在は、コードベースが React Compiler に適合しているかチェックできる `react-compiler-healthcheck` と Vite 用のプラグインである `vite-plugin-react`、Babel プラグインの `babel-pluin-react-compiler`、eslint プラグインとして同様の機能を備えた `eslint-plugin-react-compiler` が公開されています。 | ||
|
|
||
| --- | ||
|
|
||
| ### [Merging Remix and React Router](https://remix.run/blog/merging-remix-and-react-router) | ||
|
|
||
| - 共有者: @nus3\_ | ||
|
|
||
| React Router v7 で Remix が統合され、Remix で提供されていたすべての機能が React Router で使えるようになりそうです。 | ||
|
|
||
| React Router v7 がリリースされたタイミングで、インポート先を`@remix-run/*`から`react-router`に変更することで移行が可能。codemod も提供予定。Remix パッケージの今後については、なるべく早く共有するとのことです。 | ||
|
|
||
| - React Router から Remix の移行を簡単にするためのブリッジを作りすぎた結果、Remix と React Router の違いがなくなってきた | ||
| - React Router のアプリを Remix に移行することの難易度が高い | ||
| - React Router から Remix の移行を簡単にしたとして、書き換えの印象を与えてしまう | ||
| - そこで React Router のメジャーバージョンアップデートであればどうだろうか？ | ||
| - React が提供する最新で最高な機能を活用できるような React エコシステムを作りたい | ||
| - 今は React Router v7 の安定化に取り組んでいる | ||
| - Remix プロジェクトでは今後取り組む予定のエキサイティングな計画がある。Remix はしばらくお休みの予定 | ||
| - Remix をよりサーバー中心のものにして、その上に React Router プロジェクトを使用するようなアイデアも考え中 | ||
|
|
||
| ## 🗓 Monthly Articles | ||
|
|
||
| ### 📖 Framework, Library | ||
|
|
||
| - [React の `fetch()` 拡張が削除](https://github.com/facebook/react/pull/28896) | ||
| - React に標準で含まれていた `fetch()` に対するパッチが削除されました。Next.js では別のパッチとして対応が維持されるようです。 | ||
| - [Deep Dive into Rspack & Webpack Tree Shaking](https://github.com/orgs/web-infra-dev/discussions/17) | ||
| - Webpack と Webpack 互換の Rspack の Tree Shaking 概念について解説されています。 | ||
| - [eslint-plugin-import をフォークした eslint-plugin-i が eslint-plugin-import-x にリネームし、独立パッケージとして開発が開始される](https://github.com/un-ts/eslint-plugin-import-x/issues/24) | ||
| - eslint-plugin-import をフォークした eslint-plugin-i が以前から存在していましたが、課題解決などに限界があることから、独立した eslint-plugin-import-x というパッケージとして開発が開始されました。 | ||
| - [Tracking: ESLint v9 support](https://github.com/eslint/eslint/issues/18391) | ||
| - ESLint プラグインの ESLint v9 対応状況をトラッキングするページです。 | ||
| - [React 19 Beta の公開](https://ja.react.dev/blog/2024/04/25/react-19) | ||
| - React 19 Beta が公開されました。Actions, `use()`, ref の Prop アクセスなどが含まれています。 | ||
| - [React Spectrum - May 1, 2024 Release](https://react-spectrum.adobe.com/releases/2024-05-01.html) | ||
| - React Aria の 5 月のリリース内容をまとめた記事です。Submenu, DropZone, File Trigger などが正式版になるなどの変更が加えられています。 | ||
| - [@headlessui/react@v2.0.0](https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.0.0) | ||
| - HeadlessUI@react v2.0 の新機能や変更点を紹介する記事です。Checkbox や Form に関連するコンポーネントが追加されるなどの変更が加えられています。 | ||
| - [Libraries with issues #25](https://github.com/eps1lon/DefinitelyTyped/issues/25) | ||
| - React を取り巻く一部の周辺ライブラリで起票した React19 対応 Issue をまとめた Issue です。 | ||
| - [Hey everyone, thank you for sharing some of the challenges with accessing pathname.](https://github.com/vercel/next.js/issues/43704#issuecomment-2090798307) | ||
| - Next.js で、Server Components や Layout が URL/Pathname にアクセスできない理由を記した Issue コメントです。共通レイアウトのレンダリングの都合によるものと説明されています。 | ||
| - [In a future React release, it's likely we'll patch the Date API during SSR and hydration to prevent mismatches.](https://twitter.com/acdlite/status/1785691330988986587) | ||
| - 今後の React のリリースにて、React の SSR とハイドレーションの間で生じる Date 値のミスマッチを防ぐために、Date API へパッチを適用することを検討している旨を知らせるツイートです。 | ||
|
|
||
| --- | ||
|
|
||
| ### ⚡️ Services | ||
|
|
||
| - [JSR Is Not Another Package Manager](https://deno.com/blog/jsr-is-not-another-package-manager) | ||
| - npm パッケージ・レジストリがほとんど進化していない現状を指摘して、JSR が目指すところを表明した記事です。 | ||
|
|
||
| --- | ||
|
|
||
| ### 💬 Languages | ||
|
|
||
| - [Announcing TypeScript 5.5 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/) | ||
| - TypeScript 5.5 Beta が公開されました。新しい型推論や正規表現の構文チェックなどが含まれます。 | ||
| - [JavaScript: 最初の 20 年](https://inzkyk.xyz/js_20_years/) | ||
| - Allen Wirfs-Brock, Brendan Eich 著『JavaScript: the first 20 years』の翻訳ページです。 | ||
|
|
||
| --- | ||
|
|
||
| ### 🖥 Browsers | ||
|
|
||
| - [Google、サードパーティ cookie 廃止を 3 度目の延期](https://www.itmedia.co.jp/news/articles/2404/24/news102.html) | ||
| - Chrome でのサードパーティクッキー廃止が延期されました。2025 年初頭からの廃止が予定されています。 | ||
| - [Intent to Ship: View Transitions Same-Origin Navigation](https://groups.google.com/a/chromium.org/g/blink-dev/c/LsA567xpe7k) | ||
| - Chrome にて、View Transition が MPA でも利用できるようになりました。利用するには `viewTransition API for navigations` のフラグを有効化する必要があります。 | ||
| - [Intent to Prototype: Find-in-page highlight pseudos](https://groups.google.com/a/chromium.org/g/blink-dev/c/5FS_4mVQBLc) | ||
| - ページ内検索されてヒットした要素のスタイルを`::search-text`で変更できるようにする仕様です。 | ||
| - [Intent to Prototype: Multi-argument alt text in CSS Generated Content](https://groups.google.com/a/chromium.org/g/blink-dev/c/uCOrwnFuqNA) | ||
| - CSS の content 属性で画像を指定したときに設定できる alt テキスト（例：`content: url("cat.jpg") / "A cute cat";`の`"A cute cat"`）に関数値を含む複数の引数値を指定できるようにする仕様です。 | ||
| - [Intent to Prototype and Ship: Align navigator.cookieEnabled with spec](https://groups.google.com/a/chromium.org/g/blink-dev/c/xU3gTW4aTfg) | ||
| - `navigator.cookieEnabled`の挙動を元の仕様に合わせる変更が行われます。今までは、3rd Party Cookie 非推奨化に伴いパーティション化されていないクッキーへのアクセス可否を示していましたが、単にそのサイトで Cookie が使用できるかどうかを返すようになります。 | ||
| - [Chromium Blog: How Machine Learning improved the Chrome address bar on Windows, Mac and ChromeOS](https://blog.chromium.org/2024/04/how-machine-learning-improved-chrome.html) | ||
| - Chrome 124 からアドレスバー（omnibox）に入力を与えた時のサジェストに機械学習モデルが使用されることを紹介した記事です。 | ||
| - [Google Chrome's new post-quantum cryptography may break TLS connections](https://www.bleepingcomputer.com/news/security/google-chromes-new-post-quantum-cryptography-may-break-tls-connections/) | ||
| - Chrome 124 から耐量子暗号(Post-quantum cryptography)を使用した TLS 通信が有効になったことを伝える記事です。 | ||
| - [Ship: navigator.clipboard.read() and navigator.clipboard.write()](https://groups.google.com/a/mozilla.org/g/dev-platform/c/lNXj_A-Lllk) | ||
| - クリップボード操作を行う `navigator.clipboard.read/write()`が Firefox127 からデフォルトで利用できることに触れています。 | ||
| - [Ship: New Set Methods](https://groups.google.com/a/mozilla.org/g/dev-platform/c/MvkV6MI6dMs) | ||
| - 新しい Set メソッドが Firefox127 からデフォルトで利用できることに触れています。 | ||
| - [Prototype: CSS Anchor Positioning](https://groups.google.com/a/mozilla.org/g/dev-platform/c/4cbytMKbHtg) | ||
| - CSS Anchor Positioning に関して、Safari の WebKit は公式見解がないものの、仕様の共同編集はしていることに触れています。 | ||
|
|
||
| --- | ||
|
|
||
| ### 🤖 Runtimes | ||
|
|
||
| - [Node.js — Node.js 22 is now available!](https://nodejs.org/en/blog/announcements/v22-release-announce) | ||
| - 近々リリースされる Node.js 22 の新機能や変更点を紹介する記事です。`require()`を使った ESModule の読み込みが一部条件下で可能になるなどの変更が加えられています。 | ||
| - [Bun v1.1.5 | Bun Blog](https://bun.sh/blog/bun-v1.1.5) | ||
| - Bun v1.1.5 の新機能や変更点を紹介する記事です。クロスコンパイルのサポートなどが追加されています。 | ||
|
|
||
| --- | ||
|
|
||
| ### 🦆 Others | ||
|
|
||
| - [Accessibility Visualizer Browser Extension](https://github.com/ymrl/a11y-visualizer) | ||
| - アクセシビリティ情報を可視化するブラウザ拡張機能です。代替テキストや見出しレベルなどを視覚的に確認できます。 | ||
| - [Creating a pointer-friendly submenu experience](https://react-spectrum.adobe.com/blog/creating-a-pointer-friendly-submenu-experience.html) | ||
| - メニューをホバーしているときにサブメニューが表示される UI において、ポインターの操作性を向上させるためのアプローチを紹介した記事です。ホバー範囲の工夫のみならず、ポインターの速度なども勘案されています。 | ||
| - [TSKaigi のタイムテーブルが公開](https://tskaigi.org/talks) | ||
| - 2024 年 5 月 11 日に開催される TSKaigi のタイムテーブルが公開されました。 | ||
| - [builderscon 2024 をやります！](https://blog.builderscon.io/entry/2024/04/25/130353) | ||
| - 2024 年 8 月 10 日に builderscon 2024 開催が発表されました。現在トークを募集中です。 | ||
| - [The Front End Developer/Engineer Handbook 2024](https://frontendmasters.com/guides/front-end-handbook/2024) | ||
| - 2024 年のフロントエンド周辺の領域に関する解説を網羅的に扱ったドキュメントです。 | ||
| - [WebAssembly は次世代のコンテナ技術になれるか？](https://zenn.dev/mizchi/articles/wasm-component-model-futures) | ||
| - WebAssembly のコンテナ代替としての可能性と問題点について考察しています。 | ||
| - [Web フロントエンド版 DX Criteria が公開](https://prtimes.jp/main/html/rd/p/000000024.000081310.html) | ||
| - Web フロントエンドの技術領域観点について、全 100 項目からなるガイドラインが公開されました。 |