Cybozu Frontend Monthly #44

Summary

今回の動画スクリプトでは、フロントエンドの最新トレンドと注目話題が詳しく解説されています。コアウェブビジュアルの指標がFIDからINPに変わる大きな変更に加えて、インタラクションの計測方法の進化が解説されています。また、Intraplopの2024年度の取り組みや、React 19のリリース、RemixのSPAモードなど、様々なフレームワークの進化と注目の新機能が紹介されています。さらに、ブラウザ間の互換性の問題や、ウェブ開発者にとって重要なTS会議やReactのテストフレームワークの話題も触れられています。最後に、ウェブサイトのリンクやボタンのタップしやすさを分析するサービス「Tappity」の紹介で興味を引く内容となっています。

Takeaways

• 📈 タスクの優先順位を決める際には、緊急性と重要性を考慮して、マトリクスを使用して分類します。
• 🔍 問題解決のプロセスでは、問題を正確に定義し、根本原因を特定することが重要です。
• 🚀 プロジェクトの進捗状況を追跡する際には、プロセス全体を可視化することで、チームが状況を把握しやすくなります。
• 🤝 コミュニケーションはプロジェクト成功の鍵であり、定期的なミーティングやフィードバックセッションを通じてチーム間のコミュニケーションを強化しましょう。
• 🛠️ 効果的なツールとシステムを導入することで、プロジェクトの効率性と組織性を向上させることができます。
• 📚 継続的な学習とスキルアップは、プロジェクトで直面する課題に対処するために不可欠です。
• 📅 プロジェクトのスケジュールを厳守し、タイムリーな納品を保証するために、現実的な納期設定とスケジュール管理が必要です。
• 🧩 リスク管理はプロジェクト計画の重要な部分で、潜在的なリスクを早期に認識し、対処策を立てることが求められます。
• 💡 クリエイティブなアイデアはプロジェクトを成功に導く鍵であり、アイデアを発展させるために自由自在な発想を大切にしましょう。
• 🌟 顧客満足度を高めるためには、顧客のニーズを理解し、プロジェクトの成果物がそれらの期待に応えられるように努めます。
• 🔗 プロジェクトの成果物を他のプロジェクトやプロセスと連携させることで、組織全体の効率性と連携を向上させることができます。

Q & A

サイボーフロントエンドマンスとはどのようなイベントですか？

サイボーフロントエンドマンスは、フロントエンドのエキスパートチームが毎月気になった情報を共有するイベントです。参加者は感想をハッシュタグを使って共有することができます。

最近のウェブサイトやウェブアプリケーションのトレンドとしてどのようなものが見られますか？

最近のウェブサイトやウェブアプリケーションでは、ユーザー操作が多く、画面でのインタラクションが重要視されています。これにより、ユーザー体験をより詳細に計測することが求められています。

Core Web Vitalsの指標として、FIDからINPへの変更は何を意味しますか？

FIDからINPへの変更は、ユーザーが最初にクリックしてからイベントハンドラが実行されるまでの時間を計測するFIDから、画面上で行われたインタラクション全てを計測するINPへと変更されることを意味します。これにより、ユーザー体験をより正確に計測できるようになります。

null

null

Chromeのユーザーエクスペリエンスレポートやページスピードインサイトなどのツールは今後どうなりますか？

これらのツールはFIDからINPへの変更に伴い、最終的にはINPに全て置き換わる方向で進化する予定です。ただし、6ヶ月間のサポート終了期間が設けられています。

Interlopの2024年度の取り組む重点分野は何ですか？

Interlopは2024年度に、レイアウト、スクロールバーのスタイリング、URLの扱い方、ウェブコンポーネントのサポートなど、様々な分野で取り組む予定です。

TypeScript 7のリリースで何が変わりましたか？

TypeScript 7のリリースでは、ESLintのサポートバージョンが上げられ、フラットコンフィグのサポートが追加されました。これにより、設定ファイルがより簡素化され、柔軟性が向上します。

React Server Componentsが導入されることで、どのような影響が予想されますか？

React Server Componentsの導入により、よりパフォーマンスの高いアプリケーションが構築でき、サーバーサイドレンダリングの活用が期待されます。一方で、既存のReactアプリケーションとの互換性に関する課題も予想されます。

Remix.runのSPAモードが注目される理由は何ですか？

Remix.runのSPAモードは、ファイルベースのルーティングを活用し、シングルページアプリケーション(SPA)を簡単に構築できる利便性があるためです。また、オープンソース化されたことで、より多くの開発者が活用し始めることが期待されています。

iOSでSafari以外でウェブブラウジングが可能になる可能性とはどのような影響を与えますか？

iOSでSafari以外のブラウザが利用可能になることで、ユーザーはより選択肢が広がり、ウェブブラウジングの体験が向上する可能性があります。また、開発者にとっては、様々なブラウザでの互換性を考慮する必要が生じることになります。

TSカンファレンスとはどのようなイベントですか？

TSカンファレンスは、TypeScriptに関するカンファレンスで、言語の最新情報や活用方法、コミュニティの動向などが議論されます。また、Reactやウェブ開発に関する話題も扱われることがあります。

タップしやすいリンクやボタンの大きさについて分析するサービスとして「タッピー」とは何ですか？

タッピーは、ウェブサイトのリンクやボタンのタップしやすさを分析し、押し間違えの少ないデザインを提案するサービスです。実機でのテストを軽視しがちな問題を数值化し、改善ポイントを明確にすることができます。

Outlines

00:00

📈 インタラクションの指標変更とウェブパフォーマンスの詳細計測

第1段落では、ウェブのユーザー体験を計測する指標がFIDからINPへと変更されたことを紹介。これにより、ウェブアプリケーションでの全てのインタラクションを計測できるようになり、ユーザー体験の詳細な計測が可能になる。また、Chromeのユーザーエクスペリエンスレポートやページスピードインサイトなどのツールも影響を受ける。ただし、インタラクションが多いページでは正確な値を得られない可能性があるため、注意が必要とのこと。

05:01

🌐 ウェブ標準の進捗とレイアウトの改善

第2段落では、ウェブ標準の進捗とレイアウトに関する話題が語られる。インタロップ2024年度の取り組みが公開されており、ブラウザの総合運用性の向上が目指されている。レイアウトに関しては、フレックスボックスとグリッドの組み合わせによる挙動がまだ整っておらず、2023年からの引き続きの取り組みが期待されている。また、スクロールバーのスタイリングについても触れられており、Safari以外は比較的高いスコアが記録されている。

10:03

🔍 URLリビングスタンダードとWebコンポーネントの注目

第3段落では、URLリビングスタンダードの存在や、Webコンポーネントの注目を集めていることが述べられている。URLの標準が存在しなかった時代から、ブラウザの実装依存ではなくなるよう進化している。また、React 19のリリースが近づいているとの話もあり、Webコンポーネントのサポートが含まれる可能性がある。

15:04

🛠️ TypeScriptとESLintのアップデート

第4段落では、TypeScriptとESLintのアップデートが紹介されている。TypeScriptはフラットコンフィグに対応し、設定ファイルの簡素化が行われた。ESLintも同様に、設定の簡素化とフラットコンフィグへの対応が行われ、将来的には旧来の設定ファイルはサポートされなくなる可能性がある。また、ESLintのバージョンアップと、TypeScriptのパーサーのサポートが触れられている。

20:06

🚀 フロントエンドの動向とReactの進化

第5段落では、フロントエンドの動向やReactの進化について語られている。React Server Componentsの対応が含まれるReact 18のリリースが期待されており、パフォーマンス向上や依存性の排除が行われた。また、Next.jsの話題も触れられており、SPAモードが注目され、ファイルベースのルーティングが組み込まれたり、SSR対応など、選択肢として有力になりつつある。

25:06

🧩 Remixの注目とフレームワークの多様性

第6段落では、Remixの注目とフレームワークの多様性が語られている。RemixのSPUモードが話題され、SPAではない場合にもフィットする可能性がある。また、フレームワークやライブラリの進化と、ユーザーのニーズに応じた選択肢の多様性が述べられている。Remixのオープンソース化や、ビットのビルドに使われていることも触れられており、事例が増えることが予想される。

30:06

📱 スマフォ最適化とブラウザの進化

第7段落では、スマフォ最適化とブラウザの進化について語られている。スイッチ属性の導入や、iOSでウェブキット以外のブラウザエンジンがサポートされる可能性が触れられている。また、PWAのサポートがなくなる可能性があることも述べられており、開発者にとっては大きな影響を与える可能性がある。

35:10

🎓 フロントエンドの学習とコミュニティ

第8段落では、フロントエンドの学習とコミュニティについて語られている。TSカンファレンスやReactの話題がCFP募集中であり、Reactのテストフレームワークの話題もされる可能性がある。また、タッピーというサービスが紹介されており、ウェブサイトのリンクやボタンのタップしやすさを分析し、最適化を提案している。

Keywords

💡フロントエンド

フロントエンドとは、ウェブサイトやアプリケーションのユーザーが直接操作する部分を指します。このビデオでは、フロントエンドの専門家が注目するトピックや技術動向について議論しており、ウェブ開発におけるフロントエンドの重要性が強調されています。

💡ユーザー体験

ユーザー体験とは、ウェブサイトやアプリケーションを利用する際のユーザーの満足度や使いやすさを指します。ビデオでは、Core Web Vitalsという指標に代表されるユーザー体験の測定方法が説明されており、それがウェブサイトのパフォーマンス改善にどのように役割を果たすかが語られています。

💡Core Web Vitals

Core Web Vitalsは、Googleが導入したウェブパフォーマンスの指標群です。このビデオでは、First Input Delay (FID)からFirst Input Time (FIP)への変更が説明されており、これによりユーザーの操作に対するウェブサイトの応答時間をより正確に計測できるようになると触れられています。

💡

💡React 19

React 19は、Facebookが開発した人気フレームワークReactのバージョンアップです。ビデオでは、React 19がリリースされるという話題があり、それがウェブ開発のコミュニティにどのような影響を与えるかが議論されています。また、React Server Componentsなどの新機能が期待されています。

💡Remix

Remixは、最近注目を集めているウェブ開発フレームワークです。ビデオでは、RemixのSPUモードが紹介されており、これはシングルページアプリケーション（SPA）を作成する際の選択肢として、ファイルベースのルーティングを提供するという利点があります。Remixのオープンソース化が話題になり、それがウェブ開発者にとっての意味が説明されています。

💡TypeScript

TypeScriptは、JavaScriptのスーパーセットで型システムを導入しています。ビデオでは、TypeScriptのアップデートや、ESLintとの統合方法が説明されています。特に、TypeScriptとESLintのフラットコンフィグの導入が触れられており、これは設定ファイルの簡素化と、より柔軟な設定が可能になるという利点があります。

💡ESLint

ESLintは、JavaScriptコードのLintツールです。ビデオでは、ESLintのバージョンアップと、そのフラットコンフィグのサポートが説明されています。これにより、設定ファイルが簡素化され、より直感的にコードのLintを行えるようになると触れられています。

💡ウェブ標準

ウェブ標準とは、ウェブ技術の互換性や一貫性を確保するために設けられた規格です。ビデオでは、URLの標準化や、ブラウザ間の互換性の問題が触れられており、これらがウェブ開発において非常に重要な役割を果たしていることが説明されています。

💡iOS Safari

iOS Safariは、Apple社が開発したiOSデバイスで標準で搭載されているウェブブラウザです。ビデオでは、iOS Safariの独自のスクロールバースタイルに関する問題や、ウェブキット以外のブラウザエンジンがサポートされる可能性が議論されています。これらは、ウェブサイトのデザインやパフォーマンスに影響を与える可能性があります。

💡Web Components

Web Componentsは、ウェブページを構成するカスタム要素を作成するウェブ標準技術です。ビデオでは、React 19と呼ばれるアップデートでWeb Componentsのサポートが行われるという期待が述べられており、これはウェブ開発の柔軟性や再利用性を高める可能性があります。

Highlights

サイボーフロントエンドマンスリーは、フロントエンドの情報を共有するイベント

ハッシュタグ #シャープサイボフロントエ マンスリー を使って感想を共有するよう呼びかけ

第44回のイベントで、2022年2月のフロントエンドのトピックについて話し合う

ジグさん、サージさん、ナスさんの3人のメンバーが話題を紹介

Core Web Vitalsの指標が変更され、First Input DelayからInput to Next Paintへ移行

inpはページ上の全てのインタラクションを計測し、ユーザー体験をより詳細に把握できる

ChromeのUser Experience ReportやPageSpeed Insightsなどのツールもinpに置き換えられる

inpの導入で、ウェブサイトやアプリケーションのボトルネックがより明確に

Interlopの2024年度の取り組む重点分野が公開、レイアウトやスクロールバーのスタイル変更が注目

URL Living Standardの策定が進む、ブラウザの実装依存性の問題が解消される見通し

React 19がリリースされ、Web Componentsのサポートが含まれる

TypeScript 7がリリース、ESLintのサポートが更新され、フラットコンフィグが導入

RemixランタイムのSPAモードが注目、ファイルベースのルーティングでシングルページアプリケーションが構築可能

Next.jsの進化とユースケースの合わない状況が生まれ、Remixがそのニーズにフィットする

アトラシアンが開発中の新しいドラッグ＆ドロップライブラリーに期待感

ES5.45.4でノーインファデフォルトカラーの機能が導入、型推論の柔軟性が向上

ブラウザのディクショナリー属性がiOSでサポート、スイッチ属性が実験的に導入

EUリジンのiOSでブラウザエンジンがWebKitから変更、PWAのサポートがなくなる

TSカンファレンス2024が5月に中野で開催、CFPが募集中

ReactのテストフレームワークであるBテストが注目、Reactコンポーネントのテストが容易になる

タッピーというサービスでスマホのウェブサイトのタップリンクやボタンの押しやすさが分析される

Transcripts

サボボーズフロントエンド

マンスリーサイボーフロントエンド

マンスリーはサイボーのフロントエンド

エキスパートチームのメンバーがその月に

気になったフロントエンドの情報を共有

するイベントですこのイベントのハッシュ

タグはシャープサイボフロントエ

マンスリーです是非ハッシュタグを使って

感想などをついて

くださいはいそれではサイボフロント

エンドマンス44回やってきます

え今回はま今月2月ですね2月に気になっ

たフロントエンドのトピックをワワこの

メンバーで話せたらなと思っていますまず

メンバーなんですけどもえフロントエンド

エキスパートチームのジグさんサージさん

そして自分のナスさんの3人で今回は話し

ていこうと思いますよろしくお願いします

よろしお願いしはいよろしくお願いします

じゃあ早速ですけどまそれぞれ気になっ

てる記事を見ていきましょうかねはい

ノータプラティクルズということでまず

自分からですねえっと自分は

インタラクション

ああ英語じゃなくなってる日本語に自動

翻訳してくれてるんですけどはい3月12

日にえインタラクションtonext

ペイントがえコアウブバイタルの表になる

よっていう記事

です

でまこれまでなんですけどもcorWeb

バイルズそのユーザー体験を計測する指標

ですねの指標ってはえファースト

インプットでfidだったりCLSだっ

たりlcpでそのこの3つで計測されてた

んですけどもこれが3月12日から

インタラクションtonextPinpに

えfidがinpに変わりますよっていう

形ですでこの元記事にもそのステータス

2022年のにまエクスペリメンタルで

このinpってのが発表されてで去年にも

去年にこのcorウブパイルズの指標に

inpがなるよっていう発表があってで

今年3月12日にfidからinpに

置き換わるという形でどんどんと進んで

いったいきましたとうんで個人的には

やっぱり最近のウブサイトだったりウェブ

アプリケーションってあのユーザー操作が

多いかなと思っていて画面の中でで今まで

でfid置き換わる前のfidだと最初の

インタラクションの計測しかできなかった

んですねユーザーが何かしら最初に

クリックしてからそのイベントハンドラが

実行されるまでの時間イベントハンドラ

だったりクリックしてからのそのペイント

秒化されるまでの時間しか計測できなかっ

たのがinpによってその画面で行われた

インタラクション全てが計測されるように

なってで最も丸いものが数値として表せる

ようになったと最も時間がかかってるもの

ですね

うんなのでえっとより今のウブ

アプリケーションとかにあった計測だっ

たりそのなんて言うんでしょうねユーザー

体験を

より詳細に計測できるとか分かるケッチ

アップできるようになったのかなとinp

になることで思っててとてもいいなと良さ

そうだなと思って見てました

ねでまさっきも言ったんですけどもその

完全にそのfidからに置き換わるのでま

関連するツールですねここだと例えば

Chromeのユザーエクスペンス

レポートとかページスピードインセスとか

もそうなんですけどま平行期間というか

非水晶でもfidが表示される時間は期間

はあるんですけどま最終的にはinpに

全部置き変わるようになるよっていうのが

6ヶ月のサポート終了期間とかもあるん

です

けどうん紹介されているやつですねはい

えええ

うんあれですねあの今まではあれですね

途中にあるやたら重たい処理が1個ある

みたいな時にfidだと捉えきれなかった

けどinpだと捉えられることですよね

ここがやたら遅いぞみたいなそのせいで

数値が悪くなるみたいなことが取れ

るってことですねそうはいまただなんだっ

けなあ

元inpとはていうしてるのがWebデブ

にも他にもあるんですがま注意事項もあっ

てそのインタラクションがその画面で発生

するインタラクション全部をウォッチし

てるんですねinpだとうんうんなので

どっかに注意書きがあったんですがなん

やろめちゃめちゃインタラクションが多い

画面だと50回に1回はちょっと

そのハズレみたいなのを外しましょうね

みたいな注意事項がはいはいはいはいはい

あるんですあったはずなんです

よあったはずなんですけどちょっと今パと

出てこないあこれだ注意事項だうんうん

うん正しいインタラクションの数が多い

ページはランダムの中のにオ

です異常にそのインタラクションinpと

して計測される時間がインタラクションが

多くなるとちょっとなんかはず正確な数値

じゃなくなる可能性もあるんで50回の

インタラクションごとに最も高い

インタラクションちょっと無視して

くださいねみたいなのはあるうんうんうん

うんーっていうなんか注意事項とかもある

んですけどただやっぱそれでもWe

アプリケーション今のようなウェブサイト

とかだと結構これまで見つけられなかった

ユーザー体験の計測ができようになって

良さそうだなと思って思いましたねうん

うんうんいいですね良さそうだ勝が変わっ

て点数というかスコアが落ちるサイト

もうんことは想定されますけどうん

うんまその場合そのサイト内とかにそう

いうなんか見つけきれなかったうん

パフォーマンスをなんか悪くしてるところ

を見つけられるっていう意味でが

うんよくいいいい変更になりそうですね

うんうんうんうん浮き彫りになるというか

ねうん潜在的な部分今まで見つけられて

なかった部分が見つけられて良さそうだな

とうんボトルネックになってるとこは

分かりそうよりうんうんでしかもこの

inpで計測される時間だけじゃなくて深

ボって取ろうと思えばどの要素のに対する

インタラクションではいはいはい

えが遅かったのかとかも確か取れたはずな

のでまもしそのinpの値が悪くなった

なってのが見つかったらそっから深掘って

どこのインタラクションが悪いのかとかも

確認できたりしてよりそのパフォーマンス

改善うんにもしやすいかなとは思って出

ました

ねじゃあ次えノータブル注目記事え地目

さんお願いしてもらってもいいでしょうか

はいえインタロップの2024年度のえ

取り組む重点分野が公開されてますはい

インタロップは2023年にもやっていて

色々こうブラウザの総合運用性を高め

ましょうっていう取り組みなですけどえ

2020年はこの17の分野去年から継続

してるのも何個かあるんですけどこれに

取り組みますとしておりますで進捗は

ダッシュボードから見れますって感じでえ

下の方に下のとこですねリンクあるです

けどはいここでまどれくらいこのインタ

ロップっていう数字がね上げられるかって

いうところで

うん

注目とし注目していきたいやつですねはい

うんうんうん今だとステーブルのやつだと

本当に結構エクスペリメンタルで実装が

進んでるものだ

と通知上がってますけどスイブルの方は

結構そうですよねうんうんというかインタ

ロップ2224の取り組み始まって徐々に

こうままだステーブルじゃない方で色々

実装

どんどん進めてっ

ていう状況なん

で面白いのがねどれかな注目はい

レイアウトこっちかなはいレイアウトで

あるんですけどこれが確かフレックスとか

グリッドと

かそっち系のやつなんですけどその単体の

項目とかはうんもう前回の2023で

グリッドサブグリッドかなにうんうん集中

してやってスコアもかなり上がったんす

けどその組み合わせた時の動きとか

が色々まだまだ

ちょっとそんなに総合の性高くないみたい

な

はい各ブラウザ感で挙動が揃ってないはい

そう揃ってないそのここの真ん中ら辺に

あるコンプレックスエッケース

はいはいはいていう感じでまそのだから

フレックスの中のグリッドとかグリッドの

中のフレックスとか多分そういう感じの

その

組み合わせした時の挙動みたいなのが

まだもうちょいって感じらしいのでその辺

はこう2023から

引き続き取り組んでるっていう

感じですねはいあとはねスクロールバー

スタイリング

っていうのがあってこれはスコアの方見て

もらえると

おいですけど

えサファリだけめちゃめちゃ低いみたいな

状況でうんうんまスクロールバ

スタイリングはなの通りスクロールバーの

スタイルをしましょうっていうできるよう

にするっていうやつなんですけどうんうん

はいあ触りだけ

かなりが低いうんでこの理由も書かれてて

サファリってなんか独自で最結構昔に

スクロールバーのえスタイリングをできる

ようにしようっていうその3段楽目ぐらい

に書いて

あるサリモスワクtoコンプリートうん

はいなChromeFFXはこうちゃんと

なんでしょうねスクロールバーのその辺の

使用決まった後に実装

ちゃんとウェブスタンダードになったやつ

を実装するみたいな動きだったんですけど

うんうん割の場合はそのま魚ボルことで

2009年ぐらいにウブキットスクロール

バーって

いうやつでやってたのでちょっとその辺の

仕様に

新しく策定された仕様に沿ってない実装

だったのでこうスコアが低くてうんみいな

状況になっておりますっていうの

て昨日はあるのにはい昨日としては

ちゃんと結構先に作ってたんですけど

やっぱり仕様うんうん様に合わせるって

ところがまだちょっと大なやれてない状況

なのでうんうんやはり頑張りますって感じ

でした

はいま他もね色々

かなり大事なところURLとかもね意外

意外や意外URLって確かねその標準が

なかったのかなああ前にできたちょっと前

にできたみ前できたみいましたね感じで

これだURLリビングスタンダードこれ

までそのちゃんとURLという

ものの標準が存在してなかったけど標準

作ってそれに合わせましょうって

いうところ

で今まではねブラウザの実装依存なので

うんうんはいその辺統一しましょうって

いうところで進んでおりますって感じでま

22024年も注目うんしていきたいです

ねはいなんか個人的にはま全然まだ

キャッチアップできてない部分もあるん

ですけどディクレシャドウドムがこの中に

入ってるのもんそうですま文脈が違うん

ですけどリアクト19がリリースされる

みたいな話が最近出てたと思うんですけど

その中でもウェブコンポーネントの

サポートが含まれてるうんうんうんのも

あってなんかWeb

コンポーネンツ来るか来るかと言われてい

た毎年新のウブコンポーネンツ概念コン

概念が今年かもしれませんなんか注目着目

注目されてんのかなみたいなも感じました

ねこの

重点領域というかフォーカスされる領域に

入ってるのも見る

とそうすね

うんおいありがとうございますほな次行き

ますね次はじさんアングタイスクリプト

ESV7どっちとしましょうかまずこっち

かなあそうですねえっとタイプスプリトの

V7がリリースされたっていうえものなん

ですけどえっと

まプラグイン自体のリリースはそんなに

大きな変更はなくてV6はえっとまあの

思い覚えてる人はあるかもしれないです

けど結構ルールセットが変わったりとかし

たんですけど7は特にそんなくてま

サポートするノートとかえタイプスクES

Lのバージョン引き上げみたいなとこは

メインです特にえっとESリントの

サポートをえっと今えっと最新かな

そろそろアルファがV9に出るんですけど

最新のV8まで引き上げるってことやって

てNリントのえっとVQで削除される

APIの影響を抑えたいみたいなことを

書いてありましたまなんで大きい変更は

ないんですけどえっとそこに書いてある

通りむしろ今回のリリースで多分利用者側

的に知っておきたいというか注目したいの

はフラットコンフィグサポートうんかなと

思ってますでESリントは次のVQで

フラットコンフィグをデフォルトにすると

いう風に言っててVからも完全に今までの

設定ファイルはサポートしないっていう風

に言ってるですねでまそういう風に

フラットコンフィグ対応は迫ってたんです

けどつい最近までタイプスフEリントが

対応してないっていうので結構まあのES

自体はあるけどまちょっとまだ意向を

見送ってるみたいなユーザーも多かったの

かなという風に思っている中で最後の取で

はいやっとタイプスクリトもフラット

コンフィグ対応をしてくれたっていう感じ

ですでやり方がちょっと面白くてえっと

新しくタイプスクリプトESlintトっ

ていうパッケージを公開しています今まで

多分使う時ってアTypescptUS

lintパーサーとアtyptUS

lintリンプラグインをインストールし

てまエンズとかでえっとリコメンドとかあ

パーサーでそのタイプスクリプトみたな

パーサー指定してみたいな感じだったと

思うんですけどこれがいらなくなって

代わりにフラットコンフィグではこの

タイプスクトESリントってパッケージ1

個で設定が済むようになりますでこの中に

フラットコンフィグに対応したま

コンフィグリコメンドとかまえっとあり

ますよねああいうののえっとオブジェクト

とかえっとパーサーとかあとそういう

コンフィグオブジェクトをいい感じに作る

言ってる関数みたいなのが全部入ってい

ますなんでそこからインポートしてきてえ

フラットコンフィグで使うみたいな使い方

になるって感じですねで下にコード書いた

んですけどまあ波のコードレみたいな感じ

でtseスントにコンフィグって関数が

いるのでえっとうまい感じにましてあげる

とえっとフラットコンフィグ対応のルール

を作ってくれるっていう感じになりますで

そうですねサイトの方を多分見てもらえる

とはい多分もうちょっと詳しい下の方の話

もうちょっと下の方かなえっと

あそうですねそのニューフィーチャーズの

とこに書いてあるでもうちょっと下の方に

行ってもらうとあそうその例があってで

ただこういう風に細かくねあのコンフィグ

の中でプラグインズとかラングインジ

オプションズとかを指定することもでき

ますしあとフォーマインフォメーションの

ところのえっとです

ねザタイプスクリプトUSパッケージ

ドキュメンテーションかなはいを見て

もらえるとその中にはあの下の方行くと

えっと別にそのコンフィグを使わなくても

書けるよみたいな話もしていいてもう

ちょっとしたですかね

えっと

あともうちょい下かな割とあそうそう

イセアLightティングて書いてあると

思うんですけどこれかはいはいそうですね

別にあのコンフィグ使わなくてもあの

フラットコンフィグってあの今までの

コンフィグと違って完全にJSとして評価

できるというかJSとして評価できる

オブジェクトになったのが大きなメリット

なのであのこのタイプスクトUS3とで

エクスポートしてるコンフィグとかを使っ

てこういう風に書いていくことも全然

できるいう感じですまなんでコンフィグ

あくまでもいい感じにフラットコンフィグ

のま配列というかオブジェクトを作って

くれるやつというだけで別にそれぞれの

構成部品もちゃんとあのコンフィグの中に

エクスポートされてるのでその部分的に

使うあとそのパーサーも部分的に使う

みたいな書き方はもちろんできますはいま

あの難しいこと考えたくなかったらあの

コンフィグっていう便利関成使ってね

ぐらいな感じという風なのでま基本的に

はんそれ使うことが多いとは思うんです

けどすごい細かくカスタマイズしたい人と

かはこういう風な書き方もできるよって

いうことは言っているのではいあのうまい

ことエクスポートされてるあの部品を使っ

て設定していってくれればなっていう感じ

のことが書いてありますうんはいなんか

想像だけどタイプスクリプトESリント側

もこれに移行するのが既存プロジェクトで

行くその大変やからヘルパーとしてよ

えっとシンプルにちょっと中小化してうん

あの記述しやすい形の関数というか昨日

提供APA提供したよみたいなのがうん

うん背景にはありそうなんかなと思って

聞いてた確かに今の既存のプロジェクトを

パっとこれに変えるうんうんて言われると

本当どこでスプレッドで展開して頭の中で

やんなきゃいけないんでうんそうそうです

ねまとパーサの姿勢とかもしなきゃいけ

ないしっていうのでそうこんな感じになっ

てるっていうとこですね

えにサンプルコード見る感じは分かり

やすくマイグレとできそうで良い印象を

持ちましたね僕これ見てってるそうすね

なんであの今までのとちょっと使い方と

いうか新しいパッケージになっていくので

そこだけていう感じでなんかま割とあの

まだまだフラッドコンフィグ対応してない

他のプラグインもあるんですけど結構

タイプスクリプトリントの出方を待って

それと同じ方式採用しようかなみたいな声

もあるみたいでどうやらなんでもしかし

たらこれに続く感じでじゃあうちも同じ

感じでやりますみたいなのがもしかしたら

増えてくるかもしれないなとかもはいあの

想像追加でよでなんかよく違うプラグイン

とかがこうコンフィグレコメンドでこう

スプレッドでてんてんてんみたいな宣言の

やり方になるかもだしそうそうそんな感じ

ですねまあとその複数あるコンフィグを

今度はあの配列の中にスプレッド

オペレーターで入れてくとかそういう風な

もしかしたら書き方になってくのかもしれ

ないて意味ではい

今後こういう風にやるのがもしかしたら

触れるかもなって感じですねはいなんで

そろそろ思いこし上げられそうって感じ

ですうんはい重い

な相当重いよななんかまただ悠長なことは

も言ってられないですもんねVからは

デフォルトフラットコンフィックなるし

エスリンとかはもうあVQからなってて

VGからは旧来のサポートされなくなっ

ちゃうからでVQがもうアルファが出てん

のかななんでそろそろ迫ってる式リース

迫ってるくらいのタイミングなのでま悠な

ことは言ってらんないて感じではあるん

ですけどはいおいありがとうござい

ますそうしたらここからは間月に他にも

フロントトピック色々あったのでまそれを

さらっと見つつ気になるものがあれば

ちょっとより詳細というか見ていければな

と思うんですけどもお2方的にはまず

フレームワークライブラリーからですね

なんか気になるやつありますか自分もあっ

たら止めてって言うんですがホーリー

ブック系が何個かあったなっていう感じ

ですね上の方にもありましたけどあこれか

はいはいはい8が出るの

とサーバーコンポンツ

うん太陽みたいな

ねま確かに関連してますもんね8の中には

リアサーバーコンポーネンツの対応も

含めるはいのも入ってますもんね感じで

あ色々と本当にあもベータ自分もリリース

内容をさらっと見たんですけどもま依存に

リアクトなくすよとかだったりうん

パフォーマンスより良くしてくよだったり

まおそらく

今後困るであろうというかNEXJSえ

多くのプロダクトでま再されかわかんない

ですけどもリアクタサーバー

コンポーネンツがでのコンポーネント実装

とかが入ってくる中でそれの対応どう

しようかとか対応をする想定で8が進んで

いくのもそうだ

しあとベースのなるエコシステムですね

ノジェスとかビトとかもあのバージョン

上げてったりとか古いバージョンさ

サポートドロップしてったりと

か健全にというあれですけどもしっかり

しっかりこう現実にねユーザーの欲しい

ものというかをしっかり

更新しててくれて感謝っって感じうんうん

ありがてえ

ありがとうございますありがとうござい

ますはい自分もそうですねバイオームとか

も結構やっぱ去年の年末から今年にかけて

こう自分個人プロジェクトか自分の

プロジェクトで使うみたいなの話がうん

うんうんうんちょくちょく聞くようになっ

てきたなってのもそうだしこのままだ

リリースされてないですけどもその中でも

その中でもっていうかこうニーズが高そう

なテンCSSの相当とかユーティリティ

クラスを相当するためのフォーマットとか

もうん実装を進めてたりでより

なんか使われるような機能の実装が進ん

でるなってのは印象としてあります

ね

ミックスの話題もなかなか

何回か見かけましたね

リミッ何話か

な

リミックス何個かねあああざに入ってるん

だそうですね上の方にも上の方にも何個か

ある気がするはいあ本当だはいはいはい

はいはい確かにあリミックスランのサイト

の話とかうんうんっ

今月特に話題話題になったって意味では

そのえスライドSPAモードのうんうん

うん

話は結構みんな

うんこれですねい良さそうっ

ててました

ねなんかこの記このスライトに書かれてた

やつで良かったなて自分も思うのがあの

このスライドかもちょっと怪しいですけど

もあのクリエイトリアクトアップ以降の何

でしょうSPAを簡単にルーティングあり

のFPを作る時の選択肢としてこれSPA

モードがステイブルになったんだったら

選択肢として結構ありじゃないみたいな話

ですね

あのファイルベースのルーティング

もそうすね組み込みつつ使利用できつつ

そのそうす

そのルーティングがありでのSP

アプリケーションとしてSPAとして

すごく選択肢の1個に良さそうだなと思っ

て見てましたねNEXTJSがこう進化し

てった結果そのなんだろうなそのNEXT

JSの方向性

とちょっとユースケースが合わない状況

みたいなのが生まれてきててうん

うんいうところでこう貸しながらのSPA

じゃないんですけど

うんっていうところの

にちょうどフィットするよう

なユースケースを満たすものとして

リミックスのSPUモードいけんじゃない

かうんころで

ねまその自分が作るプロダクトで何を重視

するかとかによって使い分ければなと思う

んですけどもそのの選択肢が増えれば

増える分その細かなニーズに合うやつが

選択できそうでうん良いなって自分は決め

てきてと思いましたし

このリミックスのサイトがオープンソース

化されたとかも面白いなと思ってて記事

読んでたんですけどあのこれもビトを

ビルドに使うまだビトステイブルにはなら

ないんです後の記事に2.7とかでなると

か書かれてはいるんですけどならないでも

ドッグフドでやってるよとでもしビート

使った

プロダクトリミックスでビート使った参考

とかは実装の参考をこのオープンソースに

なったやつで見てくれてもいいよとか書か

れたりして

てよりなんか使ってもらい

やすくもそうだし事例としてもねうんはい

いや今年多分利用事例増えるなっていう

うんうんうんうん

推測もちろんネジスもねあのスタティック

エクスポートなる機能はあってSPAに

対応する機能もあるっちゃあるんですけど

ね

確か若干多分使い道がねうん違うみたいな

うんうんエースが出てきて

てSSRをしたいわけではないんだよな

みたいなとかね多分主に分うんいうところ

で利用シが出てくるの

で今今年注目ですね

うんま去年の年末からもそうですし色々と

事例は出てきそうですよねうん私に

うんはいありがとうございます他なんか

ありますかさじさんと

かそうです

ねあんまり紹介他で言うとあの個人的には

トラックカンドロップのあの新しいのを

あのアトラシアンが作ってるっていうのは

ちょっとだけ気になってシンのますねま

直近ちょこちょこ去年あたりドラッカン

ドロップの色々選定とかもしてて結構あの

新さんが元々使ってたリアクト

ビューティフルdndってやつがあの

デリケートになっちゃってメンテナンス

モードになっちゃってるんですけど今使っ

てるやつを公開するよみたいなこと言って

て結構ねアトラシアンあのトレロとかあの

ドラクドロップ多いもの多いのでなんか

どんなものが出てくるんだろうみたいなと

がすごい結構期待感はあるなという感じ

ですねうん最近ちょっと少ないんでその辺

のライブラリーがうんしかもこれカミング

スンの予定のこのライブラリー自体は

アトラシアン内部のツルでは使ってるん

ですもんねもにトとかでは使ってるやつ

うんです

ねはい

ま次ランゲージ

あっ

たりES5.45.4

ベね玉は何ですかさじさんノインファです

かノーインファじゃ

ないはい

あのインファの材料として買わないよって

ことを明治的に言えるっていうやつね引数

の水論の時にこの方の肩引き数は論として

使わないでくれみたいことが言え

るってやつえやごめんちょっと隠しすぎ

たえーさっきのここだよね宣言でいうこれ

かこれねノーインファデフォルトカラー

ノーインフィあそうですねうはい人は賢い

ので複数片引き数とか使ってると両方

満たす方をなるべく推論しようとしちゃう

んですけどいやこっちの方のやつは水論

するけどこっちは材料でして使わないで

くれみたいなことを言いたいことがたまに

あるですけどそれが実現できるっていう

やつですね

はいあと面白いですねございます

ありがとうござい

ますあどんどん行きましょうか

ブラウザーあさっきのあのテロップ

2024でも話してたディクティシャド

ダムがファックス120てシアブラでサポ

されるようになったと

かありますねロ

のあれですかねスイッチ属性とか面白かっ

たですねちょっとああ確かにスイッチ属性

どれだあリリースのサファリ

テクノロジーはいはいはいはいありがとう

ござい

ます新しくインプットにあのよく

iPhoneで見るこれこれだうん

はい属性がねそう属性がつくみたい

なまだ確かさらっと調べただけですけど

仕様としては上がってない

なんかスタスもない本当に

エクスペリメンタルなやつだと思います

けどですよね

うんさきの話に繋がるんですけどあの

スクロールバーの話番くしてくれたじゃ

ないですかす大丈夫かな早すぎたこれも早

すぎたならへんかな確ちゃんとちゃんと

その使用策定とかの文脈で話し合いつつ

この実装で試してみたいな話なのでうん

じゃあ大丈夫そうだ別案としたらタイプ

スッチとかもありえたはいはいはいあここ

のねチェックボックスのところがそう

タイプがスイッチとかもあり得たんです

けどまでもでいろんな

こう互換性とかね後方互換性なくなるんで

そうするとうんうんとか

色々結局スイッチって

そのオンかオフかの日だからもうチェック

ボックスと一緒じゃないみたいなうん

話し合いを経てスイッチっていう属性うん

属性で多分見た目だけ変えるみたいな実装

うんを取ってるのかなとはい

はいそんな感じでしただから大丈夫ですと

大丈夫です大丈夫

ですいずれそのどのブラウザでもスイッ

チってつけたらあのUIが出るよになるか

もしれないそうす

ねああとこれもそうだEUリジンて確か

あのEUリジンのiOSでブラザー

エンジンがえウブキットじゃなくても良く

なるみたいな話にしてpwのウブキットの

PW機能がサポートがなくなる削除される

うんそううっすねうんPW使えないみたい

なこに来てって感じ最近ねノティス来たと

か言ってたのに今度は逆

にまそのPWもですけどま結構iOSで

ウェブキットなブラザー使えるってのは

うんインパクトが大きいのかなブラウザ

作る上

でうん大きそう私て影響もなかなか

うんま現状EUだけだ

けど日本もそれになう可能性があるみたい

なうん

うん有識者な意見もございますので結構ね

国も検討してるみたいな話ははい出るらし

もかし

たら

開発者の日本の開発者の人にも影響が直接

来るかもしれないうんうんうんですね

はいありがとうございますま最後あざずま

一部先に触れた部分もあるんですがTS

会議202ああそっか今年カンファレンス

TS会議中野であるんだ5月にでっかい

やつがうん今月末まででしたっけCFPは

CFP募集中うんうんうんのはずです

リクトコフも5月にあるとあ確かさっき

触れてなかったかもしれないけどリアクト

19の話とかも多分こん中で入ってきそう

だよねって話してましたもんねリアクトカ

ガであるぞみたいな話ですね確か久しぶり

のオフラインか

ないいなウブデブのね学習コンテンツに

テストが増えたりもあったなそうですね

これも良さ

そうかね例題がBテストを使ってたそうだ

BテストテストフレームワークのBテスト

使ってリアクトまたはリッのウェブ

コンポーネントリアクトとかリッの

コンポーネントuuiコンポーネントの

テストをうん題材にうんしてたしてる

コンポーネントのテストのとことかは多分

やってるのかなすごく今使われてるテスト

の内容がコンテンツに入っていって良さ

そうですよね

ああそう

ねJSも仕様が

ない標準化されるか

もなると嬉しいな

[音楽]

うんよしな各

トランスパランと標準しようとし

て実装される未来良さ

そうはい他どうですかなんかあります

かそうですねタッピーはいタッピーていう

サービスあるんですけどこれねこれ

ちょっとマスリのサイトではい試してみ

ましょうか

ねでえデバイスiPhone待機時間で

JS実行分析

まスマホ

のウェブサイトの出てきたこう分析をして

くれるで何を分析してくれるかって言うと

そのタップできるリンクとかボタンがの

押しやすさというかねうん

うん大きさとか大きさを元にその子

ちゃんとタップできるかうんっていうのを

表示してくれるサイトですマンスのサイト

は多分リンクねめちゃめちゃでかいんでま

確かほどのことがない限りは押し間違え

ない押し間違いはないみたいな結果ですね

これは100%押し間違いないやろしこれ

ちょっとちっちゃいかもちっちゃいでね

うん99%るとうん可能性がありますとえ

面白なんかねちゃボタンいっぱいある

みたいなサイトだと多分大変なことになる

んでしょう

ね意外と

そのスマホ用の画面を実装PCとかでし

てる時にマウスでクリックできるからや

思って実機のテストをおろそかにした場合

にこういうの見逃しがちというか漏れがち

になるです

ねでデプロイされてスマホで見てみたらあ

このボタン押しづらみたいなリンクうん

うんリンクの文字ちっちゃいとかもそう

です

しボタンちっちゃみたいなうんちっちゃい

ボタン3つ並んでますみたいなですね

アイコンでハブとかもうイライラするあれ

なんその辺りをこう数値として演出できん

のはチェックできくるんでなかなかお面白

いっすねうんうんま全然その成功率の計算

式は私には何も分かってはいないんです

けどうんちょっと分からないですけどもま

そういう論文があるみたいですね

うんはいはいありがとうございますこれ

けどいいですね面白いうん面白かった

ですはいありがとうございますじゃあざっ

見たんで今月のフロントエンドマンスは

これで終わりにしようかなと思いますはい

最後に宣伝なんですがえサイボのフロント

エンドエキスパートチームではえサイボの

フロントエンドを最高にするメンバーを

募集しています興味がありましたら募集横

とか採用採用ページとかもしくはこの

サイトにもスライドフロントエンド

スパートチーム何やってんのかっていう

スライドが載ってるんでこちら見て

いただければなと思っていますはいで今回

は今月もまたご視聴いただきありがとう

ございました来月も是非見ていただければ

なと思っていますそれでは皆さん

ありがとうございましたありがとうござい

ましたありがとうございましたまたまた

また

JA