トーク

開発において「適切なコンポーネント設計」とは何でしょうか？

DRY原則に従って重複した実装を避けること？
単一責任の原則に基づいてコンポーネントを厳密に分離すること？
それともコロケーションに倣って関心毎に実装をまとめること？

どれも正しいようで必ずしも絶対的な正解とは言えません。

日々の開発の中で「銀の弾丸」は存在せず、適切な設計は決して簡単ではありません。
一般的に効果的とされる設計思想であっても、何かしらの「トレードオフ」が伴います。

だからこそ、チーム体制やプロダクトの要件、スケジュールなど、様々な要素を踏まえてプロジェクトに適した設計方針を模索する必要があります。

このプロポーザルでは私が直面した設計上の課題や葛藤にどのように向き合ってきたかをケース化し、Vue.jsの実装例とともにお話しします。

事例を通じて、コンポーネント設計に悩む皆さまのヒントになれば幸いです。

フロントエンド開発では、コンポーネント粒度や、ディレクトリ設計について必ず考慮する必要があります。しかしながら、 Vue.js や Nuxt に関連して言及される機会は少なく、困っている開発者の方も多いのではないでしょうか？
このセッションでは、コンポーネントの粒度からディレクトリ管理まで一貫したディレクトリ管理の手法を Nuxt を例に取り上げます。
また、実際に、ディレクトリ用リンタの活用事例などを踏まえた運用手法を含め、今すぐ開発に取り入れられる、ディレクトリ戦略としてお伝えできれば幸いです。

名刺忘れた？名刺切れた？——あるあるですよね！
でももう大丈夫。そんなときは、スマホをサッと出して「これが私のWeb名刺です！」ってドヤ顔キメちゃいましょう！

今回のLTでは、できるだけ簡単に！でもちゃんとカッコよく！ をモットーに、リアルなWeb名刺をVanillaで爆速制作しちゃいます！
フレームワーク？ナニソレおいしいの？今回はVanillaのHTML・CSS・JavaScriptだけで作っちゃいます！

「Webは好きだけど、ちょっと作るのめんどくさそう…」という方も大丈夫！
超簡単に、自分だけのオレオレ名刺を爆誕させましょう！

「CSSって地味？古い技術？」そのイメージ、もう過去のものです！
実はCSSはここ数年で驚異的な進化を遂げ、かつてないほど便利で強力なツールになっています！
これまでJavaScriptやSassの助けが必要だった複雑なレスポンシブレイアウト、ユーザーの動きに合わせた動的なスタイル変化、そして目を引くリッチなアニメーションなど、多くのことがCSSだけで、直感的かつシンプルに実現できるようになりました。
本トークでは、そんなモダンCSSの持つ真の力を凝縮してお届けします。

「リリックビデオ」とは楽曲をバックグラウンドミュージックとし、その歌詞やモーショングラフィックで視聴者に対し楽曲を訴求する映像メディアです。
一方で筆者は、インパクトを優先するあまり歌詞が過度に断片化され、過剰な背景処理が加えられた映像を見るにつけ

『私は何を見せられているんだ...。あなた達が想いを込めて書き上げた、その歌詞で勝負しろよ！』

という想いを抱かざるをえません。筆者はこれをリリックビデオにおける「リリック至上主義思想」と称します。

その思想のもと筆者は、楽曲と歌詞を同期再生するTauri製の楽曲再生アプリケーションを制作しました。
筆者の音楽とCSSへの愛によって実装されたフルスクラッチのCSS Animationによるリリックビデオとともに、ここに「リリック至上主義思想」を宣言します。

生成AIの台頭で、AI駆動開発によるアウトプットは飛躍的に増加しています。しかし、その裏側で品質への懸念が高まっているのではないでしょうか？

私たちのチームでも、同様にAIのアウトプットに対する品質の課題に直面しました。
特に、人命にも関わる可能性もある医療系業務サービスでは、品質の懸念は徹底的に排除しなければなりません。

本セッションでは、これらの課題を乗り越えるために私たちのチームが4月から実践している、「品質を担保しながらAIと共存し、確実なリリース・運用を実現する」具体的なプラクティスを共有します！

AIを用いたフロントエンド実装と仕様書の整合性チェック事例などを交え、AI時代の品質担保における次の一手を提示します！

参考: https://kakehashi-dev.hatenablog.com/entry/2025/05/09/104354

とあるプロジェクトにアサインされたときのこと。

巨大なAPIをフロントエンドで受け取り、フロントエンドでいい感じに描画するため、APIのデータを整形する様々な整形処理がされていました。
APIにはクエリパラメータもない。APIを改修するのは、諸般の事情で何故かできない...

同じような処理が様々なファイルに記述され、複雑に絡まったコードベースたち...　（これはメンテナンスができない！）
そんな複雑に絡み合った状況に、少しでも見通しを良くするためモデル層を設けて、データフローを一方通行にしてリファクタリングしました。
データフローを、一方通行にするために助けてくれたのが、Remedaのpipeというメソッドの力でした。

本セッションでは、Remedaのpipeを使ってリファクタリングを行った仮定を追いながらpipeの威力をご紹介します。

魔法のようなAIコードエディタ（Cursor、GitHub Copilot、Cline）は、一見すると謎めいたツールですが、その正体はElectronを基盤に、TypeScriptとReactを用いて構築されたWebフロントエンドです。

本セッションでは、AIコードエディタの内部動作を技術的に詳しく解説します。ユーザーが入力したプロンプトがどのようにLLMのAPIに送信されるのか、その際に必要な文脈や情報がどのように収集されるのか、レスポンスをどのように解析してUIに反映するのかを順序立てて説明します。

また、LLMからのツールコール（edit_file）を解析し、具体的なコード差分をVS Code APIを介してどのようにファイルへ反映するかについても触れます。実際のソースコードや具体的な動作フローの図解を交えて、「魔法」の中身を分解・理解できるようになることを目指します。

魔法のようなAIコードエディタ（Cursor、GitHub Copilot、Cline）は、一見すると謎めいたツールですが、その正体はElectronを基盤に、TypeScriptとReactを用いて構築されたWebフロントエンドです。

本セッションでは、AIコードエディタの内部動作を技術的に詳しく解説します。ユーザーが入力したプロンプトがどのようにLLMのAPIに送信されるのか、その際に必要な文脈や情報がどのように収集されるのか、レスポンスをどのように解析してUIに反映するのかを順序立てて説明します。

また、LLMからのツールコール（edit_file）を解析し、具体的なコード差分をVS Code APIを介してどのようにファイルへ反映するかについても触れます。実際のソースコードや具体的な動作フローの図解を交えて、「魔法」の中身を分解・理解できるようになることを目指します。

激動の2025年、クラウドで簡単に高性能なAIを呼び出せる時代となりました。
しかし、クラウドAIには以下の注意点があります。

・通信の遅延や切断
・プライバシーに関する懸念
・継続的な金銭コスト

LLMをクラウド経由ではなくローカルPC内で動作させることで、これらのリスクを回避できます。

2024年11月、Chromeブラウザ内部にGemini Nanoをダウンロードして利用できるBuilt-in AI APIのOrigin Trialがスタートしました。
本セッションでは、これらのAPIの概要から活用例までを、実際にAPIを利用して開発したChrome拡張機能のデモを交えて解説します。

※ AIのモデルとエコシステムの発展速度が非常に早いため、発表時（9月）の状況に応じて内容を調整する可能性があります。

フロントエンド開発で「なんでこの型設計がこんなに難しくなるんだろう？」と感じたことはありませんか？実は私も同じ悩みを抱えていました。
開発を進める中で気づいたのは、TypeScriptの型には「ユーザー視点の型」と「システム視点の型」という2つの異なる性質があるということ。

ユーザー視点の型は「検索フォームの状態」や「ページ遷移履歴」のようなUIと直結し、頻繁に更新される情報です。
一方、システム視点の型は「ユーザー情報」や「注文データ」のようなビジネスロジックやAPIに関わる構造で、整合性が重視されます。

この2つを混ぜると、UI変更がバックエンドまで影響することも。実プロジェクトから学んだ「型の境界線」の見つけ方を具体例とともにお話しします。

WebARとは、ブラウザ上で体験できるARコンテンツのことです。
ユーザーにとっては、アプリインストールなしでブラウザで体験できる利点があり、
フロントエンドエンジニアにとってはWeb制作と同じようにHTML / CSS / JavaScript（WebGL）で実装できる利点があります。

【話すこと】
フロントエンドカンファレンス北海道2025のために作成したWebARコンテンツを通して、以下をお話しします。
・そもそもARとは？
・WebARを支える技術
・WebARの始め方
・WebARの魅力

【トークへ込める想い】
私自身フロントエンドエンジニアとして働いてきて、通常のWeb制作から飛び出した新しいコンテンツを制作したいなと考えていました。
WebARはブラウザ空間で今までのスキルセットを活かしながら、新しい表現に挑戦できます。
そのワクワクを皆様と共有したいなと思ってます。

ウェブページの入力フォームでは、inputやselectなどの入力要素に適切なラベルをつけることが、アクセシビリティとユーザビリティの両面で非常に重要です。入力すべき内容を明確に示すラベルがあれば、ユーザーはスムーズに入力を完了できるでしょう。

しかし、ときには固有の可視ラベルなしに、入力要素を使用したいケースがあると思います。本LTでは、SmartHRの開発の中で実際に見つけた“ラベルのない入力要素”たちについて5分間でご紹介します。