はじめに
こんにちは！ LINEヤフー SWAT ユニットでフロントエンドエンジニアをしている柴坂浩行です。
2025年11月30日に開催された フロントエンドカンファレンス関西2025 に、LINEヤフーはスポンサーとして参加し、ブースを出展しました。
本記事では、イベントやブース出展の様子、主なセッションの感想を紹介します。
フロントエンドカンファレンス関西2025について
関西では久しぶりとなる、フロントエンド技術全般を対象とした大型カンファレンスということもあり、注目度が高かった本イベント。
「IGNITE KANSAI - 出会いが共鳴し、次の誰かを動かす」というコンセプトのもと、関西を中心に日本全国から多くのエンジニアが集結しました。参加者一人ひとりが刺激を受け、その心に新たな灯がともる場になっていたと思います。
学生からベテランエンジニアまで幅広い層が一堂に会し、技術や経験を共有し合うことで、さまざまな意欲をかき立てられる熱気に包まれていました。会場全体が活気に満ち、エンジニア同士の交流が活発に行われていたのが印象的でした。
まずは、展示ブースで行ったAIによるリアルタイム集計デモが好評だったため、その内容からご紹介します。
LINEヤフーのブース展示
スポンサーブースでは「AIツールをどんな目的で使っていますか？」というアンケートを企画。4つの選択肢の中から、来場者にシールを貼ってもらう形式で参加していただきました。
さらにこのアンケートボードをカメラで読み取り、リアルタイムでグラフを生成するアプリをデモ展示しました。
このアプリは、「Vibe Coding」 と呼ばれる、AIを使用して自然言語プロンプトでコード生成を行う手法で開発しました。大部分をAIにコードを書かせる中で、どれだけ品質の高いアプリケーションを実装できるかを探る実験的な側面も持っていました。
当初は生成されたグラフを大きく表示していましたが、自動集計であることに気づいてもらえない場面がありました。アンケート回答時に口頭で説明したり、アンケートボードを認識しているカメラ映像を大きく表示するように変更したことで、リアルタイム集計の仕組みに気づいてもらえるようになりました。
その結果、AIによるコード生成や実装に使用した技術について、ブースでお話しした多くの方が関心を示してくださいました。
アンケートの結果
このグラフは会場で表示していたアプリの画面で、シールを数え直して値を差し替えた最終結果です。左の青いバーがLINEヤフー社内、右のピンクのバーが会場のアンケート結果を示します。社内結果との比較のため、各項目の数値は回答者数に対する割合で表示しています（複数回答形式）。
会場の回答者数は計測がうまくいかず不明となりました。会場では「コーディング支援」を選ぶ方がほとんどだったため、その数におよそ10人弱を加えた値を、回答者数の「予測値」として扱っています。
- コーディング支援：会場 151人 （参考：社内 301人）
- ドキュメント作成・アイデア発想：会場 119人 （参考：社内 290人）
- データ分析：会場 21人 （参考：社内 66人）
- 画像・デザイン作成：会場 41人 （参考：社内 49人）
社内のアンケート結果に近い比率となりましたが、会場では「ドキュメント作成・アイデア発想」の比率が低く、「画像・デザイン作成」の利用が相対的に多い傾向が見られました。
ご回答いただいた皆様、ありがとうございました！
展示したアプリケーションの開発
アンケート結果をリアルタイムで表示するアプリケーションは、先述のとおりAIで作成しました。画像処理の知見が少なく、自力での実装は困難な分野でしたが、私が方針を立て、AIが具体的なコードを書くという分担は非常にフィットしました。ツールは ChatGPT と GitHub Copilot を使用し、AIモデルは GPT-5 と Claude Sonnet 4.5 を併用しました。モデルは使い分けたというより、両者を試しながら並行して利用しました。
チャットAIを使った初期実装
はじめは、ChatGPT でブースの出展内容についてディスカッションしていたチャットに、前提情報を持たせたうえで以下のプロンプトを渡し、初期実装を作成しました。
票集計のアプリをつくりたい。スマホのカメラで集計して画面に表示するだけのブラウザベースのアプリを作りたいです。Vue.js を使ってください。ボード上の四角く区切ったエリアに、市販の丸いシールを貼っていく形式でアンケートを募集します。アンケートの選択肢ごとに3つか4つ程度のエリアがボードに用意されます。アプリはステップバイステップで作っていきます。まずはカメラを起動して四角い複数の投票エリアを検出して、検出したエリアをカメラ画像に黄緑色の線で描画して示すものを作ってください。
その後、枠検出結果の固定機能の追加、シール検出機能の実装まで進め、生成コードを出力してエディタ上での開発に移行しました。
エディタ上での開発と工夫
エディタ上では GitHub Copilot を使用しました。はじめはプレーンなHTML＋JavaScriptの構成で生成されていたアプリを、コンポーネント整理のために Node.js 上でビルドする一般的な Vue.js の構成へ変換。その後、各種検出ロジックの精度向上、グラフ表示などの機能追加、リファクタリングを行い、当日を迎えました。
最も難しかったのは検出ロジックの精度向上です。特に、AIが書いたシール検出ロジックは、円形の図形としてシールを検出する方式で、形状に敏感で精度の限界がありました。そこで、形状に依存せず「塗りつぶされた領域の数」を検出する方式へ変更しました。ロジックを理解し、実装方針を決める判断力が求められた部分です。
スケジュールとしては、展示内容を決めた直後の2日間で検出ロジックをほぼ完成させて実用性を評価し、イベント直前の1週間は1日あたり数時間の開発時間を確保してグラフ画面の実装を仕上げました。実装を非常にスピーディに進められたこと、そして展示内容の技術的な可否判断を早期に行えたことは、AIコーディングの大きなメリットだと感じました。
なお、生成されたコードはすべてレビューし、品質を担保できる状態で開発しています。知見の少なさから画像処理の精度には限界がありましたが、AIが書いた低品質なコードがそのままコミットされることはありませんでした。今後もAIを活用し、より高度で効率的な開発を目指していきます。
セッションレポート
イベント本編では、LT（Lightning Talk）を含む全19のセッションがありました。フロントエンド固有の話題からAIの活用事例までテーマが幅広く、興味深い内容が多かったです。ブース担当メンバーもブース運営の傍ら、交代しつつセッションルームに足を運びました。ここではいくつかの感想をご紹介します。
なぜフロントエンド技術を追うのか？なぜカンファレンスに参加するのか？
基調講演はSakito氏が登壇しました。
フロントエンドとコミュニティがテーマでしたが、実態としては考え方・エッセンスが詰め込まれたセッションでした。
実例こそ Vite などが挙げられているものの、トークの本質はその一歩先であるという話が前半の中心テーマでした。「技術は生まれた背景や課題とともに理解するべき」といった各メッセージは技術領域を問わずどの開発者にとっても有益な考え方である印象です。
また個人的には、W3Cの年次会合であるTPAC（Technical Plenary and Advisory Committee）の参加報告パートが印象的でした。「Web標準に関わる会合」と聞くと、かなり堅く、標準寄りの議論がなされる印象がありまし たが、実態としてはエコシステムの開発者や利用者の視点も求められているというのは、かなり意外な事実でした。
全体を通して初学者には考え方の面で発見があり、熟練者でも個別のエピソードが興味深い内容になっており、基調講演としてすべての参加者に学びがあるセッションであったと感じます。
（potato4dが聴講）
デザインシステムドキュメントの技術選定2025
組織の中で共有するドキュメントを作っていく上で、デザインシステムという軸でどのような点を考慮するべきかについて語るセッションでした。ドキュメントサイトの技術選定についての話題がメインでしたが、デザインシステムを扱う上で特有の点について取り上げるトークはあまり例がなく新鮮でした。
個人的にも社内でデザインシステムの開発に取り組んでいることもあり、単にコンポーネントライブラリを作って終わり、ではうまく回らない点にはとても共感します。継続的インテグレーションならぬ継続的ドキュメンテーションを実現する上で、ドキュメントサイトにもデザインシステム本体と同様力を入れていくべき項目だと思います。
（spring-rainingが聴講）
ソースマップはどのように元コードへの参照を保持するか
ビルド後のJavaScriptにてエラー発生時に、ソースコード上のどこでエラーが起きたかを知ることは困難です。例えば、ビルド後のファイルとしてindex.jsがあった時に、そのファイルの1234行目の5678文字目でエラーが発生していると言われても、元のソースコードのどこに対応しているのか把握するのは難しく、時間も手間もかかります。
こういった問題を解決するためにソースマップがあります。ソースマップは、ビルド後のコードが元のソースコードのどこに対応しているかを表す情報です。この発表では、ソースマップがどのように作られているかについて説明されました。具体的には、シンボル単位でマッピング情報を保持し、その情報を圧縮してビルド結果の最後の行に含める方法が紹介されました。
図を用いてステップに分けて説明されていたため、まったく仕組みについて知らなかった私でも理解しやすく、ソースマップを作る過程でさまざまな最適化が行われていることを知ることができて、非常に興味深い発表でした。
（l1lhu1hu1が聴講）
自然なアニメーションの作り方
wattanxさ んのセッションでは、ユーザーが予測しやすい「自然なアニメーション」とは何かを、実装視点でシンプルかつ実践的に解説していました。アニメーションは装飾ではなく、UIの状態変化を伝えるための手段であるという前提が印象的でした。
特に参考になったのは、イージングを状況に応じて使い分ける具体的な指針です。
- Ease-out：画面外から要素が入る動きに向く
- Ease-in / Linear：できるだけ使わない
- Ease-in-out：画面上の既存要素が変化するときに最適（例：ライト⇄ダークモード切り替え）
- Ease：アイコンの変更など短いモーションに向く
また、Durationを0.4秒より短めにすると軽快に感じられるというアドバイスやSpringイージング（stiffness / damping / massを設定することにより物理的なものの動きに近い）の紹介もあり、より自然な動きの考え方が整理されました。
どのイージングがどんなUI変化に合うのかを明確に示してくれた点が特に役立ちました。アニメーションを「雰囲気で選ぶ」のではなく、UIの性質に応じて最適な動きを選ぶという意識を今後の開発にも生かせそうです。
（Theoが聴講）
おわりに
フロントエンドカンファレンス関西2025は、関西では久しぶりとなるフロントエンドを対象 とした大型カンファレンスで、参加者の期待値も非常に高いイベントでした。セッションでもAIを絡めたテーマが複数取り上げられており、技術トレンドの変化を肌で感じる場でもありました。
個人的には初めてのブース参加という貴重な経験を通して、多くの気づきと出会いがあり、AI×フロントエンドの可能性を改めて実感する一日となりました。今後も、こうしたコミュニティとともに成長していければと思っています。
LINEヤフー株式会社では、フロントエンドをはじめとするさまざまなカンファレンスにスポンサーとして協賛しています。
今後もカンファレンスに参加・協賛した際には、LINEヤフー Tech Blogでのカンファレンスレポートや、XのLINEヤフー TechアカウントやUIT INSIDEにて現地の情報をお届けしていきます。
