トーク

React Aria は、アクセシブルな UI コンポーネントを構築するのに役立つ Headless な React コンポーネントとフックを提供するライブラリです。コントリビューターとしての視点や React Aria を業務で使用した経験をもとに React Aria の魅力と今後の課題について5分間で紹介します。

テキストエディタ（WYSIWYG）をあなたのアプリに導入したいときに、技術選定で困ったことはありませんか？

私は散々探索した結果「BlockNote」というリッチテキストエディタのライブラリに辿り着きました！これは従来の古めかしい見た目ではなく、まさにNotionのようなシンプルな見た目でわかりやすい操作性を持ったリッチテキストエディタです。

これはさらに、リアルタイム同期が可能なyjsというライブラリを組み合わせることで、共同編集エディタにすることができます。
yjsはCRDTを利用し、競合が起こらないデータ同期を実現するフレームワークです。

あなたもこの2つのライブラリを使って、おしゃれで機能性のある共同編集エディタを作りませんか？

フロントエンド開発者であれば、JavaScriptに真剣に向き合わないといけないシーンが多々訪れると思います。

基本的にはMDNなどを参照するだけでよく、ECMAScript仕様本体を参照しないといけないケースはほぼありませんが、正確な挙動を理解したり、新機能の提案にキャッチアップするために読みたくなるシーンがあるでしょう。

本発表では、「ECMAScriptの仕様を読むには最低限これを知っていれば大丈夫！」という知識について、5分に収まる範囲でなるべく多く解説します。
具体的な仕様については取り上げず、仕様中に登場する概念と、その簡易的な説明を行っていきます。
例えば、仕様中に現れるOperationの種類と、そのアルゴリズムステップ内で現れる概念などについて紹介します。
ECMAScript仕様を完全に読めることを目的とせず、読み始めていくための足がかりを提供します。

近年、VueとTypeScriptの組み合わせがフロントエンド開発において注目されていますが、かつてはこの組み合わせに対して懐疑的な見方も存在しました。このセッションでは、初期の課題を乗り越え、現在VueでTypeScriptを効果的に活用する方法とそのメリットを深堀りします。特に、型安全性、開発効率、そしてプロジェクトのメンテナンス性の向上に焦点を当て、具体的な実装例と共にこれらの利点を発表したいと思います。

私は普段、開発物を実際にスクリーンリーダーを使って操作して、アクセシビリティ上の問題がないか確認することを習慣にしています。

その活動の中で、スクリーンリーダーを使って初めて気づいたアクセシビリティ上の課題や、コードレビューやブラウザの開発ツール、キーボード操作では見逃しがちなアクセシビリティ上の課題を紹介します。

アクセシビリティに詳しくない方でも理解しやすい内容で、スクリーンリーダーの利用者目線で検証することの価値に気づいていただけるようなお話をします。

フロントエンドカンファレンス北海道2024のLPをWebフロント初心者組で開発しました。

私は北海道在住の大学生です。現在Webエンジニアのインターンとして業務でWebバックエンドを主に触っています。Webフロントエンドも触ることもありますが、まだまだ初心者です。今回フロントエンドカンファレンス北海道2024のコアスタッフとしてLPを制作することになり、3人ほどの開発チームを組んで自分主導でLPの開発を行いました。今回は、メンバー構成や技術選定、実際に開発している中でWebフロント初心者の自分が得た気付きなどについてお話します。

【話すこと】

• メンバー構成
• 技術選定
• 開発の進め方
• 小規模なLP開発を通して感じたこと・困ったこと

皆さんも日頃からBasic認証を使っていると思います。
しかし実装がどうなっているかはご存知でしょうか。
大体のフレームワークのプラグインを使わずに自前で実装するとすると何が必要になるがご存知でしょうか。
Authorizationヘッダーの構成要素に名前や仕様が存在していることはご存知でしょうか。
Basic認証はHTTP Authenticationの枠組みの一つでしかないことはご存知でしょうか。
ブラウザにUsernameとPasswordの入力画面が表示されるのは、どの仕様のおかげでしょうか。
その仕様に準拠しないとどのようなバグを引き起こし、ユーザーにどのようなワークアラウンドを要するかご存知でしょうか。

このように一見簡単なBasic認証ですが、仕様を理解することで初めて見えてくる世界や、調査や解決できるバグもあります。
このトークでは上記の疑問に対する答えを速習します。

最新のCSSの進化により、JavaScriptを使わなくても驚くほど多彩な表現ができるようになりました。
このトークでは、モダンCSSの機能を存分に活用して作った発表スライドを使って、CSSの可能性をご紹介します。
プレゼンテーションソフトの既成テンプレートでは実現が難しい表現も、Web技術を使えばデザインの自由度は無限大です。
本トークを通じて、モダンCSSがプレゼンテーションの表現力を大きく広げる可能性を感じていただければ幸いです。

Webサイトのスタイリングを修正後、どこがどのように変更されたか確認する作業は辛いものがあります。
修正箇所の一覧を眺めつつ、Figmaや変更前のサイトと比べて…
漏れなく人間がチェックするのはなかなか大変です。

加えて、意図しない箇所（同じコンポーネントを使うの箇所や全く別のページ）が変更されていた場合、気づくことなくリリースなんてことも…

そこで、Visual Regression Testing（画像比較テスト）

ということで、Visual Regression Testingを導入して安心感をもって開発してみませんか？
今回はPlaywrightを利用したシンプルな構成の運用についてお話します。

フロントエンドWeb開発には JavaScript を使うのが一般的ではあります。しかし、それ以外のプログラミング言語によるフロントエンドWeb開発も、実は既に実用レベルで使用が普及しています。今回は、スピーカーが特に詳しい C# によるフロントエンドWeb開発の現状を中心に、JavaScript 以外のプログラミング言語によるフロントエンドWeb開発について、現状やメリット・デメリットを解説。参加者に新しい視点を提供します。

Webアクセシビリティについて注目が集まる中で、幅広い知識が必要になることや本質的な目的が捉えにくい側面もあり、何からはじめるといいのか分からない人も多くいると感じています。

ここでは、Webアクセシビリティの概要についてお話しした後、Webアクセシビリティ向上のための第一歩としてeslint-plugin-jsx-a11yやmarkuplintなどのLinterの活用について紹介します。

また、これらのLinterを実際の既存プロダクトへと導入した際の体験談や、導入において考慮すべきポイントについてお話しします。

　p5.jsは、Processing言語をベースにした、クリエイティブコーディングのためのJavaScriptライブラリです。簡単にグラフィックやアニメーションを生成し、Web上で動作するインタラクティブな作品を創出できます。Webエディタを利用すれば、環境構築なしに利用することができます。Webカメラやマイク、Web Serial APIなどを通じた外部デバイスとの連携も可能です。さらに、Googleの機械学習ライブラリMediaPipeを使い、物体認識や骨格認識などの機能をWebサイトに簡単に実装できます。
　LTでは、p5.jsの基本機能や活用事例を、実際のコード例を交えて紹介します。例えば、外部デバイス（M5Stack、toio）との連携、オーディオスペクトラムアナライザ、骨格情報を使用したゲームなどを取り上げる予定です。LTを通じて、p5.jsの可能性をお伝えできればと思います。

現代におけるフロントエンド開発ではより良い体験を提供するため、様々なビルドツールを駆使するのが当たり前となっています。
しかしこれらは本当に必要なのでしょうか。「そもそもブラウザではビルド不要でJSが動くんだし、もうちょっとなんとかなってもいいんでない？」と思うことはないでしょうか。
本発表ではフロントエンドにおけるビルドの概要と必要性を検討した後、それを回避する方法を考えます。そしてビルドツールを不要とするフロントエンド開発としてDeno FreshとHotwireを取り上げ、全く異なる流れを汲む両者に共通する思想を検討します。

私の自社プロダクトではご利用ユーザーの特性上
2024年現在でもガラケー（フィーチャーフォン）やガラホ（ガラパゴス型Androidスマートフォン）をサポートしております。
このセッションでは、これらのレガシーデバイスに対してどのようにサポートを続けてきたかについて話します。

▼ こんな人が対象者

• 私と同じようにガラケー・ガラホのサポートを強いられている人
• ガラケー・ガラホのサポートについて興味がある人

▼ 内容

• レガシーデバイスのWebブラウザとの向き合い方
• 厳しい制約の中で実装するJavaScriptについて
• ガラケー・ガラホからのリクエスト識別方法について

外部ライブラリを利用する場合、腐敗防止層を設けることでライブラリ側の変更を吸収したり、今後の別ライブラリへの移行を大いに助けられる場合があります。

今適用している腐敗防止層の概要と、その存在によりアプリケーションコードに差分を出さずに以下のライブラリ移行をおこなえた実例、適用の際のおさえるべきポイントなどをご紹介します。

• SWR -> TanStack Query
• Recoil -> Jotai