プロポーザル

振る舞い駆動開発（BDD：Behaviour-Driven Development）は、ソフトウェアの振る舞いを軸に仕様を記述し、それをそのまま自動テストとして活用する開発アプローチです。テストコードが仕様書の役割も果たすため、認識のズレを防ぎやすくなります。

本セッションでは、TypeScriptでBDDを始めるための基本的な考え方と実践方法を紹介します。Cucumber.jsなどのツールを用いることで、自然言語に近い形式で振る舞いを定義し、テストの読みやすさや保守性を高めることが可能です。また、BDDを導入することで、開発者とQAのあいだで仕様の意図や期待される挙動を共有しやすくなるといったメリットにも触れます。

TypeScriptでテストを書いて、これからBDDを始めたい方に向けてわかりやすく解説します。

LINEのミニアプリやLIFFを活用すると、スマートフォン向けのアプリを手早く構築できます。
この仕組みをつかった、イベントむけ謎解きゲームアプリのご紹介です。

Vite+React のSPAに@line/liff SDKを組み込んでいます。

• 基盤がLINEだからターゲット層が広い
• 認証つきなので、オンボーディング、正誤判定やランキングなどのゲーム要素と相性がいい
• QRコードリーダーでチェックインやクーポンのもぎり
• LINE公式アカウントのトークタイムラインやMessaging APIとも連携した仕掛け
• ヘッドレスCMSとも連携させれば運用効率も◎

エンジニアアサインを、「1人1案件の専任制」から「全員で全案件担当」の体制にしたら
成長を楽しむタイニーチームに育ちました。

コミュニケーションし、同じことに取り組む。
そのシンプルな積み重ねが
プロンプトを構造化するように、思考をI/Oする力を鍛えます。

• いつでも言語化・情報整理・メタ認知の訓練。
• 暗黙知が暗黙知のままで伝わり、形式知ナレッジも自然に充実。
• 余白のコミュニケーションも侮れない。「人の考え方に触れる」成長。

1年半つづけてみたリアルな手応えを語ります。
ひとりで何でも作れてしまう時代に、チームで戦って成長する楽しさ。ぜひ聞いていただきたいです。

HTML属性のcontenteditableは要素内のテキストを編集可能にします。主にリッチテキストエディターの実装で使われますが、テキストが編集可能になるという点以外は通常の要素と変わらないため、文字装飾だけではないさまざまなUI表現の可能性があります。

その例として、画像を自由な場所にドラッグアンドドロップで配置できるスクラップ帳エディターを実装しました。その実装をもとに、エディターの挙動に影響させずにVueを使う方法などの役立つ話や、ブラウザーごとの挙動の違いや日本語入力時のつらみなどの泥臭い話をします。

contenteditableを使ってちょっとおもしろいUIを作ってみたい方にはもちろん、アプリ開発の泥臭い話が好きな方にも楽しんでいただけるセッションになると思います。

AI活用により開発速度が劇的に向上する現代。GitHub CopilotやCursor等のAIツールで、コード生成は驚くほど高速化しました。しかし、速度重視で品質管理を疎かにすると、技術的負債は加速度的に蓄積し、いずれプロジェクトは破綻します。

本セッションでは、「ESLintが十分に活用されていなかった」プロダクトを、段階的に改善してきた実践事例を共有します。

AI時代の開発において、適切なガードレールを設置することは、持続可能な開発の必須条件です。本セッションが、技術的負債と向き合う勇気と具体的な方法を提供できれば幸いです。

フロントエンド開発では様々なライブラリやツールがあります。
例えば、UIフレームワーク、メタフレームワーク、ランタイム、CSS、UIフレームワーク、パッケージマネージャ、モバイル＆デスクトップアプリ、ビルド・バンドルツール、モノレポツール、バックエンドフレームワーク、テストツール、リンター・フォーマッターツール、型ツール…

そんな数多のエコシステム周辺の今年のアップデートを振り返り、どのようなもの生まれてきたか・変わってきたかを振り返ってみようと思います。
その中から来年以降はどのような変化があるのかを考察してみます。

フロントエンドカンファレンス関西の開催日時点で2025年も残すところ1ヶ月です。
このセッションを聴きながら皆で振り返ってみませんか？

皆さんはフロントエンドテストを書いていますか？
バックエンドテストがあるのに、フロントエンドは手つかず。そんな現場は珍しくありません。

私たちのプロダクトも、テストがあったものの重要な部分はカバーされていない状態からスタートしました。
「何を、どこまでテストすべきか」 が曖昧なままでは、導入は前進しません。

そこで私たちはクリティカルユーザージャーニーに絞った「必要十分」なテスト戦略を策定し、
限られた工数で最小の投資から最大の品質向上を実現し、壊れにくいテスト基盤を構築しました。

本セッションでは、

• クリティカルパスをどう特定し、優先順位を付けたか
• Playwright／Vitest などを用いた実装手順
• CIへの組み込みとメンテナンスコストの抑え方

これらを具体的なコード例とともに紹介し、堅牢なフロントエンドテスト基盤を構築する方法を共有します。

国内外であまり知られていないAstroのContainer API。主にコンポーネントテストのために使われますが、実はバックエンドフレームワークとの組み合わせも可能にするAPIです。
本発表では、Astro Container APIの紹介、バックエンドフレームワーク組み込みのための使い方、APIを使うときの落とし穴について語りたいと思います。HonoやLaravelなどを利用し、実例を紹介しながら発表します。
「Astroを使ってるけどバックエンドを追加したい！」　「既存のバックエンド知識を活かしながらモダンなUI開発をしたい！」　という方に向けたトークです。

フロントエンドをTypeScript(以下TS)以外の言語で記述したことはありますか？多くの方は非TSと聞くと、テンプレートエンジンを思い浮かべるかもしれません。

本セッションでは、Python製のライブラリ「Streamlit」に焦点を当て、非TS言語における動的なUIライブラリの実装手法と構造を紐解きます。TS以外の言語でモダンなフロントエンドを書いてみたい方が対象です。

StreamlitはPythonコードのみで動的なUIを提供できるという特徴があります。さらに、実行形式が.pyなので、LLMライブラリとの親和性が高いです。この特性によってStreamlitはLLMアプリのPoC用途で存在感を高めています。しかし、その通信方式や描画ロジックを深く理解している方は少ないのではないでしょうか。

本セッションを通じて、聴講者は動的なUIを自由な言語で作れるようになるでしょう。

フロントエンドステート管理の大きな潮流に細粒度リアクティブステート管理 (fine-grained reactivitiy) が挙げられます。Solid.js や Svelte, Angular, Vue, Preact など様々なフレームワークで採用されている考え方で、Signals として TC39 で標準化の議論もはじまっています。

本セッションでは、React を題材にフロントエンドステート管理の歴史を紐解きながら、各時代が解決した課題と限界を振り返りつつ、なぜ細粒度リアクティブという考え方が必要になったのか、また、新しく見えてきたスコープ管理という設計課題を考えていきたいと思います。

その上で、Jotai / Bunshi を導入した実プロダクトでの事例をもとに、細粒度リアクティブステート管理における実践的なスコープ設計の解決策を紹介します。

Nimは、CやJavaScriptへのトランスパイルが可能な静的型付きのプログラミング言語です。本セッションでは、Nimを用いてフロントエンド開発を行う方法に焦点を当てます。
特に、Nim製のSPA（Single Page Application）フレームワークである Karax を使って、実際にどのようにフロントエンドを書くのかを具体的なコード例とともに紹介します。
また、NimからJavaScriptへのトランスパイルにおける注意点や、型安全性・パフォーマンスとのトレードオフなど、実際に書く際に気を付けるべき箇所の知見も共有します。
JavaScriptやTypeScript以外の選択肢に関心がある方、型安全なフロントエンド開発を模索している方にとって、Nimでどのようにフロントエンドを書くのか知れるセッションです。

中規模Astroサイトのビルド時間を約2倍短縮したRust製MDXコンパイラーのPoC開発で得た知見を共有します。

高速化を実現しても、OSS本流への採用には多くの壁があります。技術的には、Rust実装でFrontmatterやHeading抽出の互換性を保証する必要があり、軽量な照合テストでの差分を検証する仕組みを構築しなければなりません。さらに重要なのは、既存のプラグインエコシステムとどう共存するかという戦略です。

コミュニティとの対話を通じて、単純な高速化よりも安定性や移行の容易さが重視されることも明らかになりました。

本セッションでは、提案をいかにOSSコミュニティに受け入れてもらうかという視点から、段階的な実装計画、そしてPoC段階でもコミュニティを巻き込んで持続可能な貢献につなげる具体的な方法を、失敗談も交えてお話しします。​​​​​​​​​​​​​​​​

マイクロフロントエンドというアーキテクチャスタイルは注目されて久しいですが、実際にどのような判断のもと採用され、どのような課題に直面するのかは、なかなか表に出てきません。
弊社プロダクトでは垂直分割のアプローチでマイクロフロントエンドを採用しました。
本セッションでは、その背景や、実際に運用する中で見えてきた課題と対策についてお話しします。

HTML/CSSで作れるのはWebサイトだけではありません！
Vivliostyleというツールを使えば、Web技術を使って紙の本を組版・デザインすることができます。
最近ではドキュメントも整備されており、数ページの本なら簡単に作れるようになってきました。

しかし、100ページを超える書籍ではそう簡単ではありません。秩序を保つのが困難になり、コンポーネントの一貫性担保や再利用もままなりません。

本セッションでは、この「規模の壁」を乗り越えるため、Vivliostyleに現代の大規模フロントエンド開発向けのエコシステムを組み合わせた事例を紹介します。

このセッションを聴けば、使い慣れたフロントエンドの知識を武器に、あなたのアイデアをかっこいいデザインの書籍で表現できるようになるかもしれません！

コンポーネント指向のモダンWeb開発において、Web ComponentsとTailwind CSSは非常に魅力的な技術として注目されています。
Web Componentsは標準仕様に基づく再利用可能なコンポーネントを提供し、Tailwind CSSはユーティリティファーストで高速なUIスタイリングを実現します。一見すると、「カプセル化されたコンポーネント」と「手軽なユーティリティクラス」の組み合わせは理想的に思えるでしょう。しかし実際に開発を進めると、予想外の問題に直面します。
今回のトークでは具体的なコード例を交えながら、なぜTailwindのクラスがWeb Componentsで効かないのか、回避策の限界はどこにあるのかを明らかにし、なぜ両者の併用を避けるべきなのかという結論に至る理由を掘り下げていきます。

「このコード、意味不明…」「リファクタリング、後でいっか…」なんて、日々の開発で萎えていませんか？その気持ち、ポジティブな「ギャルマインド」でアゲていきましょう！

本セッションで言うギャルマインドとは、「このコード、もっとイケてんじゃん？」と気づいた時にシュッと直す、前向きな姿勢のこと。大規模で重たい作業ではなく、毎日できる「軽快なリファクタリング」術に絞って紹介します。

例えば、dataのような変数名を誰でも分かる名前に「盛る」、深いネストは早期リターンで即サヨナラ、コンポーネントを意味のある単位で「ちょい分け」するなど、明日から使えるハッピーな小技が満載です。

難しい話は一切なし！軽快なリファクタリングで、コードもチームのバイブスも、そして開発効率も一緒にブチ上げていきましょう！

デザインシステムは、思想や原則といった「ルール」、再利用可能なUIコンポーネントである「実装」、それらの利用方法を示す「ドキュメント」の3要素で構成されます。
特に「ドキュメント」は、デザイナーとエンジニアとをつなぐ共通言語として極めて重要な役割を担います。
ドキュメントが参照しやすく、運用しやすいかたちになっていないデザインシステムは、その機能を発揮できないまま腐っていくことでしょう。

このトークではそんなデザインシステムの根幹をなすドキュメントサイトの技術選定について話します。
ドキュメントサイトに必要な要件を整理し、それらを満たすための最適な技術は何なのかについて考えます。
加えてドキュメントサイトのユーザビリティや生成AI活用のために注意したいポイントなどについても解説します。

私が2021年に公開して、現在もシェアが続いている「俺流レスポンシブコーディング」は、当時現役だったIEのためにほぼメディアクエリに依存した実装の紹介となっていました。

しかし、IEがサポート終了した現在では、grid, min(), max(), clamp(), コンテナクエリといったレスポンシブコーディングにおける「ゲームチェンジャー」的な機能が広く利用でき、メディアクエリへの依存度を大きく下げることが可能となりました。

このトークでは、これらのモダンなCSS機能を駆使し、「メディアクエリは適した場面でのみ使用する」ことを目指す、Intrinsicなレスポンシブコーディングの手法を紹介します。

また、progress(), スタイルクエリ, if(), Anchor Positioningなど、将来のレスポンシブコーディングをさらに進化させる機能についても予習として解説します。

「HTMLって単なるマークアップ言語？JavaScriptがないと動的なUIは作れない？」そんな固定観念は、もう捨ててください！
実はHTMLはここ数年で革命的な進化を遂げ、かつてないほど表現力豊かで強力な言語になっています！これまでJavaScriptの実装が必須だったポップアップやモーダル、複雑なインタラクション、パフォーマンス最適化など、多くのことがHTMLだけで、宣言的かつシンプルに実現できるようになりました。
本トークでは、そんなモダンHTMLの持つ真の力を凝縮してお届けします。

Reactなどのフロントエンドフレームワークを使いこなす中で、「もっと速く、もっと手軽にUIを作りたい」と感じたことはありませんか？本セッションでは、PythonからUIを構築できるStreamlitを、あえてフロントエンド実装の選択肢として検討した経緯と実践を共有します。フォームやチャートの高速構築、LLMとの連携、プロトタイプ開発などで活躍する一方で、カスタマイズ性の限界や制約についてもお話します。