トーク

【概要】
このセッションでは、ブラウザ拡張機能の開発フレームワーク「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について時間いっぱいお話しいたします。

より多くの売り上げを上げるため、多くの企業はマーケティング施策や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

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

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

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

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

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