トーク

本発表では、フロントエンド開発におけるブラウザ互換を意識することの重要性に焦点を当てます。

過去の歴史的なブラウザ戦争から現代に至るまでを振り返りつつ、開発者やユーザーが直面するブラウザの課題と互換性の重要性を語ります。

• IEサポートという歴史を振り返りつつどのようにして現在の主要なブラウザたちが残ったのかを詳しく見ていきます
• Web標準に準拠した互換性がなぜ重要であるか、それが損なわれたWebはどのように影響を与えるかを掘り下げていきます
• ブラウザ互換性を維持するための各種取り組みを紹介し、エコシステム全体の健全性に貢献する方法を模索していきます

ブラウザ互換を意識したフロントエンド開発は、単なる開発者だけの問題を超えるWebの未来を守るための責務です。
このセッションで、ブラウザ互換の理解を深め、日々の開発において適切な意思決定ができるようになることを目指します。

このセッションでは、OpenAPIを用いてフロントエンド開発におけるバックエンド依存の最小化する開発手法を紹介します。

OpenAPIはREST APIを記述する標準的なフォーマットであり、yamlまたはjsonファイルを用いてAPI仕様を定義します。

OpenAPIに基づき、バックエンドの実装を待たずにモックサーバを立ち上げます。これにより、フロントエンドの開発者は実際のバックエンド完成前にAPIにアクセスし、開発を進めることが可能です。バックエンドの実装とフロントエンドの開発を分離し明確にAPIを定義することで、迅速かつAPIの齟齬なく開発を進めることができます。

本セッションでは、上記で述べたOpenAPIをフロントエンド開発に利用する方法の詳細を紹介します。また、OpenAPIを効率的に共有し運用していく方法についても紹介します。

フロントエンド開発において、レスポンシブ対応はとても重要です。

レスポンシブデザインを実現する方法として、メディアクエリが使われると思います。
Reactでメディアクエリの真偽値を受け取れるhook（useMediaQuery）を、useSyncExternalStoreを使って実装したことについてお話しします。

新卒の初学者である私がuseMediaQueryを実装していく中で、Hydration Errorや画面のチラつきなどに遭遇し、つまづいた過去があります。
つまずきを解消していき、辿り着いたuseSyncExternalStoreを用いてどのように実装したのかを紹介します。

初学者だからこそ気づけたつまずきポイントなども、お話しできればと思います。

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

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

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

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

TinaCMSというヘッドレスCMSの概要やその特徴、利点についての話をします。
TinaCMSはGitベースのヘッドレスCMSで、Gitのバージョン管理がそのままコンテンツ管理に活かせたり、実際の画面をプレビューしながら、リアルタイムでコンテンツが編集できたりと、面白い特徴があります。

最近私の関わる周りではヘッドレスCMSを導入するプロジェクトも増えてきており、日本ではもっぱらmicroCMSの話をよく聞きます。この流れにのって、他の面白い特徴を持つヘッドレスCMSについても紹介できればと思います。

みなさんJavaScriptの創始者、ブレンダンアイク氏を知っていますか？
20年以上前, Netscapeによって生まれた「JavaScript」.
その創始者たるブレンダンアイク氏が書いたJavaScriptが生まれた経緯や今までどのような進化を遂げてきたか.
彼自身が書いているからこそわかる「JavaScript誕生から標準化、現在までの歴史」について書かれた全189ページのPDF「JavaScript: The First 20 Years」を読んだ感想を皆さんにシェアします。

昨今において、フロント・バックエンドに限らずテストコードは必須のものとなりつつあります。
しかし、このように思ったことがある方は多いのではないのでしょうか？

『プロダクションコードの品質はテストコードが高めてくれるけど、テストコードの品質はどうやって高めればいいの？』

この疑問を解決し、定量的にテストコード品質を測定するための手法がMutation Testです。

このセッションではJestに対して、Mutation TestライブラリであるStrykerを用いて計測を行い、どのようにテストコードの品質を高めていったか？を実際の導入事例を踏まえながらお話ししたいと思います。

環境構築の容易さ、開発速度、ランニングコスト等々、個人でWebサービスをやっていく上で「ユーザーへの価値提供」以外の様々な要素があり、個人開発者にこんな悩みを与えがちです。

• モダンなSPAで作りたいけど知識と時間が足りない...
• 少し軌道に乗ってきたけどfrontとapiでサーバを二つ運用していてコストが高い...
• 開発速度を優先してテンプレートエンジンで作ったけど、流石にパフォーマンスが気になる...

これらの悩みへの解決策として 「Rails × Hotwire」の技術構成を提案する発表になります。

railsの開発効率、hotwireを使用することによるサイトのパフォーマンス & 開発速度の両立、AWS Pricing Calculatorを使用した予想コスト比較を通して、個人サービスの開発体験に求める要件をみんなで考えましょう🧐

【概要】
このセッションでは、ブラウザ拡張機能の開発フレームワーク「Plasmo」と、Cloudflareを活用してChrome拡張機能を作成する手法をご紹介します。
ブラウザ拡張はフロントエンド開発の重要な一部ですが、まだあまり知見が共有されていないと感じます。
今回は、初めての方でも理解できる基本的な使い方を中心に、PlasmoフレームワークとCloudflare Workersの使い方を解説します。

【セッション内容】

• Chrome拡張の基礎知識
• Plasmoフレームワークの基本操作
• Cloudflare Workersの基本的な使い方
• サンプルアプリケーションのデモを通じたポイントの説明

優れた生成AI・LLMアプリケーションを開発するには、生成AI・LLMアプリケーションならではのUI/UXが求められることを実感します。

変動的なインターフェースはその一例です。ライティングツールJasperのDynamic TemplateやCognosysのRefine prompt機能では、
ユーザーの入力に応じてより精度の高い出力を得るための動的なフォームを生成し、入力を求める体験が実装されており、ユーザーの意図に対して柔軟なUI/UXが提供されています。
この仕組みは、ユーザーの意図に柔軟なUI/UXというだけではなく、生成AI・LLMプロダクトとして出力のレベルを保つ上でも重要な要素です。

本セッションでは、生成AI・LLMアプリケーションならではの課題や特徴を元に、生成AI・LLMならではUI/UXについてお話します。

注意：Lighthouseをはじめとする検査ツールは、全てのアクセシビリティの問題を検査できるものではありません。また、アクセシビリティ改善の目的は「Ligthouseの点数を上げること」ではなく「より多くの状況から使えるようにすること」です。あくまでもアクセシビリティの伸びしろを見つけるための手段として使用してください。

あるコンシューマー向けのアクセシビリティが必須要件でないWebサイトを開発中、Webページの品質測定ツール「Ligthouse」のを初めて実行したときにほとんどのサイトでアクセシビリティ（使える状況の幅広さ）が90点以上になりました。この発表では、この開発において以下のことを紹介します。

• 使用していた技術（ツール、ライブラリなど）
• 気をつけていたこと
• Lighthouseで発見できた、できなかった「アクセシビリティの伸びしろ」

「Astro」は、ブログやマーケティング、eコマースなど比較的シンプルな構成のウェブサイトに向いたフレームワークです。
「Astroアイランド」という仕組みを持っており、JSによるクライアントサイドのレンダリングを最小限に抑えつつ、様々なUIライブラリ（React、Vueなど）を導入することができます。

今回は「Qwik」というUIライブラリをAstroと合わせて表示爆速なサイトを作ってみました、
Qwikも独自の手法で最適化を行っている注目の技術です。

今回は、なぜReactやVue.jsではなくQwikを採用したのか？実際に利用してみてどうだったのか？、このあたり着いてお話する予定です！

Webフロントエンド開発のレビューやテストにおいてUIをコンポーネント単位で表示、実行できるStorybookは大変便利です。

この発表では、 エディタで開いたファイルからブラウザ上のStorybookを素早く開くことができるVS Code拡張機能「Storybook Opener」について、以下の内容などを紹介します

• 「Storybook Opener」を開発した経緯
• 初めてVS Code拡張機能を開発した中でどのように実現方法を探り知見を得たか
• 開発してどうだったか
  • レビューや実装など、作業が効率的になった
  • 900以上インストールされた
  • Storybookの内部がちょっとわかるようになり、アップデートを追えるようになったり Storybookや他OSSのコントリビュートにも繋がったりした

簡単なWEBアプリケーションの画面を作るときにJavaScriptやCSSを書いて疲れていませんか？

簡単なアプリケーションを作るのに最適なStreamlitを紹介します。
Streamlitは、すべて Python で開発することができ、CSSやJavaScriptなどのフロントエンドの経験は必要ありません。そしてバックエンドで行う処理もPythonで書くことができます。
画像の処理やグラフの描画など Python でよく行う処理の結果を簡単に画面に表示することができます。

本セッションでは、データ処理や画像処理などの具体的な機能を実際にお見せしながらStreamlitについて時間いっぱいお話しいたします。

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

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

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

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

より多くの売り上げを上げるため、多くの企業はマーケティング施策やECサイトの滞在時間・回遊率などに予算とリソースを投入しています。
しかし顧客の購買行動をファネルで見た場合、最も重要なステップである「決済」への注目はあまり高くありません。
せっかく様々な取り組みによって、ユーザーが注文フォームまで到達しても、
システムのエラーやカード会社による意図しない支払い拒否などが発生すると、そこでユーザーは離脱してしまいます。

このセッションでは、Stripeが2022年に実施したオンライン決済フォームに関する調査レポート ( https://stripe.com/jp/newsroom/news/state-of-checkouts-2022 )などをもとに、
「決済フォーム・決済フローを改善することによる、コンバージョン率や売り上げを増やす方法」を紹介します。

JavaScriptと同じようなシンタックスで、型付けされた関数型言語ReScriptを紹介します
OCaml由来の信頼性の高いコンパイラーで高速に高効率なJavaScriptにトランスパイルされ、null、undefineが発生しない信頼性の高いプログラミングを実現できます

■シンタックス
・JavaScriptと同様なシンタックスでありながら強力な型推論
・高機能なパターンマッチなどの高度な関数型言語の実現
～
■コンパイラ
・読みやすいJavaScriptへとトランスパイル
・高効率なソースを生むコンパイラ
～
既存のJSライブラリと連携したReScriptの実例も交えて紹介します

「Webサイトを作りたいし、自分でも更新したい。では、CMSはどれをインストールしましょうか」というのは客先でありふれた光景です。納品物に、更新マニュアルも用意して、万全のサポート体勢！

けれど、一度、後ろを振り返ってみましょう。世間には、更新されなくなったWebサイトが溢れかえっています。場合によっては、CMSもインストールされたまま。PHPのバージョンが未だに5.6？！

私たちは、制作時にWebサイトの寿命を見誤っているのかもしれません。そう思い、2019年から、CMSのインストールをやめ、GitHubを中心にユーザの更新環境の工夫を行ってきました。本セッションでは、その工夫と、"ユーザの本当に欲しかったもの"について考えます。

[セッション内で触れる技術ワード]
GitHub/Angular/SSG/型安全性/継続的デプロイメント/Ionic/Capacitor

普段の開発でCSSを書く機会は多いかと思いますが、
その際にCSSが適用される優先順位はどのぐらい把握していますか？

詳細度・ !important・style attribute などは利用頻度が高いため広く理解されていますが、
昨今では Cascade Layer・Shadow DOM・Scoping Styles といった新しい概念が利用可能となり、
従来の知識では説明できない範囲が追加されており、
CSSの適用順序の学び直しが必要な時期が来ています。

このセッションでは、CSSの適用順序 = Cascade Sorting Order について、
新仕様も踏まえ整理すると共に、いままで何気なく利用していたものについても
深堀りした内容についてお話します。

様々な側面で課題のあるフロントエンドプロジェクトを引き継ぎました。
どのような過程・方針でそのコードベースを改善していったかを以下のトピックで共有します。

• 技術 (ライブラリ、アーキテクチャ) 選定
• TypeScript の型エラー、 Lint エラー修正
• チームメンバー間のナレッジ共有
• これらの改善をどのように行うかのチームマインド醸成
• 現時点で気づいたプロジェクト初期に必要なチェック項目

以下がプロジェクトの概略になります。

• 2年ほど継続中プロジェクト (現在も継続中
• 現時点におけるプロジェクトのファイル数: 500ほど
• Vue.js, Vue Router, Vite を用いた Single Page Application

※ 本アプリケーションが実現している具体的なビジネスモデルやバックエンドの構成などは伏せさせていただこうと思います。