Cybozu Frontend Monthly #44
Summary
TLDR今回の動画スクリプトでは、フロントエンドの最新トレンドと注目話題が詳しく解説されています。コアウェブビジュアルの指標が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
📈 インタラクションの指標変更とウェブパフォーマンスの詳細計測
第1段落では、ウェブのユーザー体験を計測する指標がFIDからINPへと変更されたことを紹介。これにより、ウェブアプリケーションでの全てのインタラクションを計測できるようになり、ユーザー体験の詳細な計測が可能になる。また、Chromeのユーザーエクスペリエンスレポートやページスピードインサイトなどのツールも影響を受ける。ただし、インタラクションが多いページでは正確な値を得られない可能性があるため、注意が必要とのこと。
🌐 ウェブ標準の進捗とレイアウトの改善
第2段落では、ウェブ標準の進捗とレイアウトに関する話題が語られる。インタロップ2024年度の取り組みが公開されており、ブラウザの総合運用性の向上が目指されている。レイアウトに関しては、フレックスボックスとグリッドの組み合わせによる挙動がまだ整っておらず、2023年からの引き続きの取り組みが期待されている。また、スクロールバーのスタイリングについても触れられており、Safari以外は比較的高いスコアが記録されている。
🔍 URLリビングスタンダードとWebコンポーネントの注目
第3段落では、URLリビングスタンダードの存在や、Webコンポーネントの注目を集めていることが述べられている。URLの標準が存在しなかった時代から、ブラウザの実装依存ではなくなるよう進化している。また、React 19のリリースが近づいているとの話もあり、Webコンポーネントのサポートが含まれる可能性がある。
🛠️ TypeScriptとESLintのアップデート
第4段落では、TypeScriptとESLintのアップデートが紹介されている。TypeScriptはフラットコンフィグに対応し、設定ファイルの簡素化が行われた。ESLintも同様に、設定の簡素化とフラットコンフィグへの対応が行われ、将来的には旧来の設定ファイルはサポートされなくなる可能性がある。また、ESLintのバージョンアップと、TypeScriptのパーサーのサポートが触れられている。
🚀 フロントエンドの動向とReactの進化
第5段落では、フロントエンドの動向やReactの進化について語られている。React Server Componentsの対応が含まれるReact 18のリリースが期待されており、パフォーマンス向上や依存性の排除が行われた。また、Next.jsの話題も触れられており、SPAモードが注目され、ファイルベースのルーティングが組み込まれたり、SSR対応など、選択肢として有力になりつつある。
🧩 Remixの注目とフレームワークの多様性
第6段落では、Remixの注目とフレームワークの多様性が語られている。RemixのSPUモードが話題され、SPAではない場合にもフィットする可能性がある。また、フレームワークやライブラリの進化と、ユーザーのニーズに応じた選択肢の多様性が述べられている。Remixのオープンソース化や、ビットのビルドに使われていることも触れられており、事例が増えることが予想される。
📱 スマフォ最適化とブラウザの進化
第7段落では、スマフォ最適化とブラウザの進化について語られている。スイッチ属性の導入や、iOSでウェブキット以外のブラウザエンジンがサポートされる可能性が触れられている。また、PWAのサポートがなくなる可能性があることも述べられており、開発者にとっては大きな影響を与える可能性がある。
🎓 フロントエンドの学習とコミュニティ
第8段落では、フロントエンドの学習とコミュニティについて語られている。TSカンファレンスやReactの話題がCFP募集中であり、Reactのテストフレームワークの話題もされる可能性がある。また、タッピーというサービスが紹介されており、ウェブサイトのリンクやボタンのタップしやすさを分析し、最適化を提案している。
Mindmap
Keywords
💡フロントエンド
💡ユーザー体験
💡Core Web Vitals
💡
💡React 19
💡Remix
💡TypeScript
💡ESLint
💡ウェブ標準
💡iOS Safari
💡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
Voir Plus de Vidéos Connexes
![](https://i.ytimg.com/vi/99fS2bXmY6c/hq720.jpg)
これさえ押さえておけばOK! 生成AI時流を解説 〜3月後半の生成AIトレンドをご紹介〜(2024/04/03)
![](https://i.ytimg.com/vi/cWcl4De4bs8/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAckXaZGLc6zL09K9D_OcyNDTb96A)
【こんな書き換えも起こるの?!】Googleのタイトル書き換えで、興味深い事象を発見!
![](https://i.ytimg.com/vi/nCU02qPcupQ/hq720.jpg)
注目AIニュース20選~Copilotで作業自動化、Copilotノートブック、MetaのLlama3、Appleが生成AI集中、AIしまじろう
![](https://i.ytimg.com/vi/M-PBzUEWR70/hq720.jpg)
【徹底検証】Gemini1.5 Proの使い方と解説!性能が良過ぎて現状No.1のマルチモーダルAIだった
![](https://i.ytimg.com/vi/eHVWSy_BGVg/hq720.jpg)
これさえ押さえておけばOK! 生成AI時流を解説 〜4月前半の生成AIトレンドをご紹介〜(2024/04/17)
![](https://i.ytimg.com/vi/VEvHfVj2Xmg/hq720.jpg)
【完全攻略】2023年最新のアルゴリズムをインスタのプロ目線で完全網羅!
5.0 / 5 (0 votes)