Inside Frontend

Inside Frontend #2にご来場いただきありがとうございました！

本イベントのセッション（AMAを除く）は、FRESH!のTech Conferenceチャンネルにてアーカイブ配信されています。当日見逃してしまったセッションのチェックや、残念ながら来場できなかった皆さまもぜひご覧ください。

Web フロントエンドの現場と
これからをつなぐカンファレンス

Web 技術の可能性が広がると共に、Web フロントエンドと呼ばれる領域は多様化しています。さまざまな現場が今どうのような個別の問題に取り組んでいるのか、同時に Web が今後どのように発展していく可能性があるのか、これらを一緒に考えていく場です。

本イベントでは、各社の現場で得られたノウハウや、これからの Web 技術について見る、聞く、話すなどして参加者同士の濃いコミュニケーションが生まれることを期待しています。

2つのセッション形式と企業ブース

セミナー・座学形式で聴講するセッションだけでなく、AMAブースにも是非参加していただき、スピーカーと他の参加者と交流を深めてもらえればとおもいます。また共催企業によるブースもありますので、セッションの待ち時間等にこちらもお楽しみください。

セミナー

各社のケーススタディの紹介やある分野のスペシャリストによる講演を行う、一般的なプレゼンテーションです。30 分のセッションを 2 トラック並行で 5 コマ、計 10 セッションを行う予定です。

※ 各セッション部屋には十分な席数を用意しますが、混雑時はご協力ください

AMA

特定のテーマについてブースのオーナーと自由に話ができるセッションです。今回は AMA ブースをひとつの大部屋をゆるく区切って開催します。同じ部屋にドリンク、お菓子などを用意した交流スペースも用意していますのでインターバル時間などにぜひご利用ください。

AMAブースでは皆さまからの質問を募集しています。

当日はいただいた質問への回答、あるいはそれをテーマにした議論を展開できればと思いますので、ぜひご質問ください。

Ask Me Anything

12:00: 開場
13:00: 開会、会場案内
13:20: セミナー: A1

@triblondon

Varyヘッダとキャッシュバリエーションの将来

Varyヘッダを正しく利用することでより効率的にコンテンツをキャッシュすることが可能になる。今回、Andrew Betts氏がVaryの正しい使い方と新しい仕様であるkeyとの両方について詳しく解説。
※本セッションは英語によるセッションとなります。（日本語字幕スライドつき）

講演資料

セミナー: B1

@magi1125

freeeのアクセシビリティ、いまとこれから

FinTech・HRTechの分野で快進撃を続けるfreeeのプロダクト、アクセシビリティ観点では今どうなっているのか？社員自らがアクセシビリティチェックした結果と、考えうる解決策について考察します。

講演資料
14:00: AMA: C1-1

@toshiaizawa

Fastly のエッジクラウドについて何でも訊いて下さい

次世代 CDN の Fastly エッジクラウドについて何でも訊いて下さい。特徴、使い方、「あれはできるの？」といった機能面はもちろん、社風や体制まで。話せる限り何でもお伝えします。

AMA: C1-2

@magi1125

freeeのアクセシビリティ、いまとこれから

FinTech・HRTechの分野で快進撃を続けるfreeeのプロダクト、アクセシビリティ観点では今どうなっているのか？社員自らがアクセシビリティチェックした結果と、考えうる解決策について考察します。

AMA: C1-3

@agektmr

Web Payments / Payment Request API について何でも訊いて下さい

Payment Request API, Payment Handler API などの Web Payments にまつわるフロントエンド仕様についての質問を受け付けます。その他決済システムにまつわる疑問についても、可能な範囲でお答えできればと思っています。
14:30: セミナー: A2

@mizchi

現場の ES201x とアーキテクチャの変遷と未来

フロントエンド激動の時代を経て、キャッチアップに苦しむ現場や、経年劣化に苦しむプロダクトなどが散見されるようになりました。ここ10年のアーキテクチャの変遷を振り返り、次の世代に何を見定めるべきか明確にします。

講演資料

セミナー: B2

@pika_shi

「規約に同意」のUX -ストレスフリーな同意UIとその実現方法-

FOLIOをはじめとする金融機関では、口座開設の際、膨大な書類に目を通し、同意をしてもらわなければなりません。たかが「規約に同意」という1ページの話ですが、いかにユーザに「面倒そう」と思わせないようなUIを実現したのか、その変遷についてお話します。

講演資料
15:10: AMA: C2-1

@mizchi

現場の ES201x とアーキテクチャの変遷と未来

フロントエンド激動の時代を経て、キャッチアップに苦しむ現場や、経年劣化に苦しむプロダクトなどが散見されるようになりました。ここ10年のアーキテクチャの変遷を振り返り、次の世代に何を見定めるべきか明確にします。

AMA: C2-2

@magi1125

freeeのアクセシビリティ、いまとこれから

FinTech・HRTechの分野で快進撃を続けるfreeeのプロダクト、アクセシビリティ観点では今どうなっているのか？社員自らがアクセシビリティチェックした結果と、考えうる解決策について考察します。

AMA: C2-3

@agektmr

Web Payments / Payment Request API について何でも訊いて下さい

Payment Request API, Payment Handler API などの Web Payments にまつわるフロントエンド仕様についての質問を受け付けます。その他決済システムにまつわる疑問についても、可能な範囲でお答えできればと思っています。
15:40: セミナー: A3

@pirosikick

コンポーネントTDDの実践から見えたもの

React・VueのプロジェクトにおけるコンポーネントのTDDの実践方法とコツ、実践して見えたメリットや課題感について話します。

講演資料

セミナー: B3

@sutiwo

攻めつづける FRESH! の Web ver.新春

FRESH! では昨年にService Workerを用いたユーザビリティ、パフォーマンスの改善を進めました。今回は新たにPayment Request APIを使った機能実装や、React v16対応、E2Eテストなどの話をします。

講演資料
16:20: AMA: C3-1

@mizchi

現場の ES201x とアーキテクチャの変遷と未来

フロントエンド激動の時代を経て、キャッチアップに苦しむ現場や、経年劣化に苦しむプロダクトなどが散見されるようになりました。ここ10年のアーキテクチャの変遷を振り返り、次の世代に何を見定めるべきか明確にします。

AMA: C3-2

@pirosikick, @koh110, @ikasumiwt

コンポーネント座談会

コンポーネントに関する質問をY!のReact・Vue・Angular勢のそれぞれの視点でお答えします。また「うちはこうしてる」も大歓迎なので、一緒に議論しましょう。

AMA: C3-3

@ahomu, @1000ch

Web パフォーマンスについて何でも訊いて下さい

超速 AMA です。Web パフォーマンスについて何でも訊いてください。処理分野（ネットワーク、レンダリング、スクリプト）ごとの最適化、フェーズ（ページロード、ランタイム）毎のパフォーマンスの捉え方、超速本についてなど、可能な限りお答えします。
16:50: セミナー: A4

@sisidovski

日経電子版を速くするためにやっていること

日経電子版を速くするために何をしているかについて話します。Fastlyの活用やキャッシュ制御、Service Workerなどがトピックになりますが、主に現場でどうがんばったかについて一歩突っ込んで話せたらと思います。

講演資料

セミナー: B4

@narirou

動的デザインガイドのつくり方

サービスとして一貫したデザインを保ち、継続的にアップデートしていくためには、意図を簡単に実現するシステムが必要不可欠です。 AtomicDesignを念頭に、ReactStoryBook等で実践されている動的にデザインガイドラインを生成する仕組みと、実際にサービスに導入して実践するまで(と説得方法)を、GYAO!のWeb刷新の実例を交えて示します。

講演資料
17:30: AMA: C4-1

@sisidovski, @cssradar

日経電子版の高速化について何でも訊いて下さい

日経電子版について何でも訊いて下さい。Fastly、Service WorkerやPWA、その他フロントエンドやサーバサイドで気になる部分や、開発体制などについてでも可能な限りお答えします。

AMA: C4-2

@narirou, @ooDEMi, @deytack

デザインとエンジニアリングのワークフローについて語りましょう

高度なプロトタイピングツール、デザインシステムといった、様々な手法が台頭している現在、そのあり方は再び変わりつつあります。協業する上での悩み、ノウハウ、Yahoo/GYAO/リッチラボで実践されているワークフローについて、なんでもお答えします。

AMA: C4-3

@ktknest, @saneyuki, @kubosho

AbemaTVだけど質問ある？

AbemaTVに関する質問に答えます。AbemaTV関係なく, 登壇者（とその発表）に関する質問でも大丈夫です。
18:00: セミナー: A5

@saneyuki, ゲスト

micro-benchmarking is hard

ベンチマークはアプリケーションの評価を行う上で最も根幹となるものであり、そのため、ベンチマーク自身の有用性は常に議論されるところである。このセッションではマイクロベンチマークが容易に本来の意味を見失うということをJS VMの実例をもって示す。

講演資料

セミナー: B5

oligin020

デザインシステムとコードを密結合するワークフロー

デザインと開発実装を同時並行で進めつつ、いかに統制がとれた状態を維持していく為に行った事の紹介と運用のデモを行いたいと思います。UIの作り込みに工数を注ぎやすくする方法論の一つになります。
18:30: 閉会