トーク

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

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

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

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

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

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

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

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

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

国内外であまり知られていない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を自由な言語で作れるようになるでしょう。

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

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

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