フロントエンドチーム 情報共有会【11月号】
はじめまして！ラクス フロントエンドチーム新卒の持永です！
今月もチームメンバーが最近気になった記事などを共有する情報共有会が開催されました！
共有された記事を、メンバーのコメント付きで紹介いたします！
ログインフォームのアクセシビリティについて
メンバーのコメント
改めて見るとできてないことだらけ。どこまでやるか、今後やっていくかは考えないといけない
できてないことも、知らないこともまだ多いので気をつけていきたい。
onChangeじゃなくてonBlurでバリデーション出したほうがいい件、感動しました。
個人的な感想
１つ目の記事の、9つ目に紹介されていた「Prevent validation in the middle of user input(入力中にバリデーションを行わない)」というベストプラクティスは非常に考えさせられました。
↑記事の中で紹介されていた、上記の「A Complete Guide To Live Validation UX(ライブ検証UXの完全ガイド)」では、様々な入力中のバリデーションパターンでのユーザーへのインタラクションの必要性とフラストレーションが生まれる可能性のジレンマに対するベストプラクティスがまとめられており、大変興味深い内容でした。
結論「ほとんどの場合、後から検証する方が良い」とのことでしたが、「パスワード強度メーター」等ではライブ検証が優れている点なども踏まえ、
「なぜこのフォームでは、このタイミングで検証する必要があるのか」を説明できる状態で開発すべきだと再認識しました。デザイナーともぜひ議論してみたいです。
正規表現ってある程度覚えていますか？
メンバーのコメント
ReDoSという脆弱性もあるらしい↓
覚えようとしたことありますが苦手です>< copilot頼りです。
正規表現は永遠に苦手です...
個人的な感想
コメントで紹介されていた、ReDos攻撃(正規表現のパターン処理の脆弱性を利用した攻撃)は初めて知りました。
正規表現にも脆弱性が存在することに留意して、「独自の正規表現を使用しない」「*や+など，繰り返し表現はなるべく使わない」といった対策は怠らないよう注意したいです。
コードのセルフレビューについて
メンバーのコメント
相手がレビューしやすいように、fyiやスクショを貼ったりとかしてます。
セルフチェックの側面が強いかなと。まずDraftで見られる状態にするのは大事だね、と思う。
AさんはきれいなPR作ってくれるよね...(Aさんのコメント)
PRに変更点を端的に書く、差分多くなりそうな場合細かくPR分ける。
コード全体見て綺麗にできそうな所があれば修正する。
個人的な感想
レビュワー任せになってしまい、たまに不要なログが残ったままで指摘を受けることもありました…
Draft PRを活用して「意図しない変更がないか」「自信のない箇所はないか」といった観点からレビュワーへの負担を軽減するためにも、最低限のセルフレビューはしなければなと再認識しました。
JSConf JP 2024公開資料まとめ
メンバーのコメント
参考になりそうな資料が多そうなので、あとで時間取って見ておきたい。
良記事たくさん。それぞれ目を通しておきます。
来年行ってみたい。
個人的な感想
ヘッドレスUIライブラリとデザインシステムとについての資料が印象的でした。従来のスタイリングされた状態で提供されるUIライブラリと違い、機能面(振る舞い)のみを提供するヘッドレスUIライブラリでは、アクセシビリティも担保された状態で提供される点までは、あまり理解していなかったため勉強になりました。資料にあった、「ライブラリではなく、デザインシステムの利用者が主導権を持てることが重要」というフレーズも、非常に考えさせられました。まさにこのフレーズを叶えるのがヘッドレスUIライブラリであるというのは納得が行く一方、１からスタイリングを実装するコストがついてくることも忘れてはならないなと思いました。
少なくともデザインシステムなどを考える上で、ヘッドレスUIライブラリは必ず考慮しなければならない選択肢であることに間違いはなさそうです。今後も導入事例などに注視していきたいです。
ダイアログとモーダルの違い
メンバーのコメント
UIについて話すとき、ちゃんと共通言語使えるようにしたいですよね。
共通認識としてきちんともっておきたいですね。
個人的な感想
私自身もなんとなくの理解で、それぞれの言葉を使用しており反省しました。モーダルは、「モードがある」。即ちユーザが特定のタスクを完了するまで他のタスクに切り替えることができない中断性を持つというのは分かり易いですね！
ダイアログは言葉通りシステムとの「対話」を表し、ダイアログにモーダルは含まれる概念であることも理解しておけば、今後曖昧になることを防ぐことができそうです。デザイナーとの共有言語となり得る言葉への姿勢がまだ未熟なことを痛感しました。
スタイルをカスタマイズ可能な新しい<select>要素
メンバーのコメント
UIコンポーネントライブラリ使うのが導入は早いのでしょうが追従大変だし自作中。
UIコンポーネントの自作は知見の宝庫な気がするので共有助かります！
個人的な感想
これまで<select>要素にスタイルを当てるために無理やりJSで独自実装をして、パフォーマンスやアクセシビリティに問題を抱えていた方にとって朗報ですね！普段UIライブラリばかり触れていても、独自のスタイルを当てる必要が出てきた際にはこのような情報が役に立ちますね。目先の技術以外の知見も幅広く取り入れていきたいです。
【MUI】Divider をpropsで渡す場合、子要素がReact.Fragmentでラップされていると区切り線が表示されないみたいです。
メンバーのコメント
4時間くらいなんで表示されないのかわからなくて悩んでました。
Stack系のやつってReact.Children.toArrayで要素を挟み込んでた気がするから、それはそうという感じもする。
git Hubのissueページが表示された瞬間、うわぁ...と思いました。
個人的な感想
私もこれで表示されない場面に遭遇したら、手が止まってしまいそうです。。
いくら有名なライブラリを使っているとしても、絶対的に信頼するのではなく、このようなライブラリ側の問題の可能性も疑う視点は持っておくことも大切ですね！
終わりに
11月号は持永が執筆いたしました。
来月はまた別のメンバーが担当しますので、ぜひご期待ください！
「ラクス フロントエンドチーム」のアカウントをフォローしていただくと記事が見つけやすくなりますので、ぜひご検討ください！
１つでも興味を持ってくださった記事があれば幸いです。
最後までお読みいただき、ありがとうございました！
よろしければ、「スキ」をお願いいたします！