登壇者・セッション紹介

HTML Optimization for Web Performance

ルームA 13:00 〜

様々な UI ライブラリの普及が進み、動的な Web アプリケーションも増えてきたことで、HTML そのものを気にかけるシーンも少なくなりつつあるように思います。どんな Web ページにおいても、表示の起点になるのは HTML です。HTML は Web ページの表示における起点であり、ブラウザの処理と密接に関わっています。

このセッションでは、Web ページをロードするときのブラウザ処理を解説するとともに、高速化に向けた HTML の最適化の手法を紹介していきます。

SIer でのプログラマーを経て Web 業界に転職して以来、Web 技術に没頭する日々を送っています。Web 標準の動向やアーキテクチャの流行を追いかけつつ、技術啓蒙や OSS 活動にも取り組んでいます。

株式会社メルペイでは Frontend Team の Engineering Manager として、採用や育成といったチーム組成に取り組んでいます。

また、兼 Tech Lead として担当プロジェクトの事業推進と技術面の責任を担っています。

世界を変えるためのデザインシステム

ルームA 14:00 〜

世界を変えるWebサービスを作るためには、誰よりも早く高いクオリティのサービスをリリースし、そのサービスが誰にでも使えるものでなければなりません。そのためには、開発効率が高くなければなりませんし、高いアクセシビリティの確保が必要となります。

このセッションでは、freee株式会社でのデザインシステム “Vibes” の開発を通して、単なるエンドユーザー向けのデザインにとどまらず、エンジニア・デザイナー・プロダクトマネージャーといった開発者の体験をデザインし、世界を変えるムーブメントを起こすための取り組みをご紹介します。

2014年からfreeeでフロントエンドを中心になんでもやってきたエンジニア。

freeeのUIを良くするためにデザインシステム “Vibes” を勝手に作りはじめ、これを本気でやりとげるためにUXチームに異動してしまった。現在はUIエンジニアを自称している。

チームラボのフロントエンドアーキテクチャ

ルームA 15:00 〜

デジタルアートの色が強いチームラボですが、実はWebサイトやアプリの受託開発も行っています。

チームラボのフロントエンドチームではLPサイトから大規模ECサイトまで多様なWebサイトの開発に携わってきました。

本セッションでは、現在、チームラボで用いられているフロントエンドのアーキテクチャをサンプルコードを交えながらご紹介します。

山口県出身。宇部高専 制御情報工学科を卒業後、2018年にチームラボへ入社。

入社後はデジタルアートやアプリWebView、ECサイトなど様々な分野のフロントエンド開発を担当。

デザイナーにエンジニアから10の質問

ルームA 15:30 〜

「デザイナーは、いつも、なにを思って、制作や開発に取り組んでいるのか?」

来年20期目を迎える福岡のウェブ制作会社のデザイナー新津に、エンジニアの平尾が、根掘り葉掘り聞いていきます。

クライアントワークのデザイナーはウェブをどう捉えているのか?エンジニアに文句もひとつもあるんじゃないの?デザイナーとエンジニアって仲良くやっていけてるの?など、わたしたちの働き方をちょっとだけ共有します。

ウェブデザイナー、クライアントと制作チームの間に入りデザインを円滑に進めている。ウォーターフォールの図式で、初期段階から様々な制作者を巻き込んでいける仕組みを考える日々。

マークアップ出身のWebアクセシビリティエンジニア/フロントエンドエンジニア。最近はクライアントワークよりも、社内の教育や、効率化・デジタル化そして開発者体験の向上に取り組む。

ウェブにインクルーシブな夢を見てアクセシビリティを啓蒙したり、OSSをいろいろと開発している。

Visual Regression Testing in Action

ルームA 16:00 〜

VRT(Visual Regression Testing; 画像回帰テスト)をご存知でしょうか。

実際にアプリケーション開発の現場にVRTを導入してきた3年間の実績に即して、「なぜVRTが重要なのか」「どのようにプロジェクトに導入すればよいのか」をお届けします。

倉見 洋輔

人生の夏休みを満喫中の自称Webフロントエンドエンジニア。無職ともいう。

音楽、数学、タイポグラフィ

ルームA 17:00 〜

タイポグラフィというとグラフィックデザイナーの専門領域のような印象があるかもしれませんが、そんなことはありません。タイポグラフィはウェブサイトやアプリケーションのデザインにおけるもっとも重要な要素のひとつであり、デザイナーだけでなくフロントエンド開発者にも積極的に参加してほしい領域です。

本セッションでは、読みやすく調和のとれたタイポグラフィをロジカルに実現すべく、そこに音楽と数学の視点を取り入れる手法を紹介します。

ウェブデザイナー、フロントエンド開発者。2006年よりウェブサイト作りを生業としている。とくにウェブタイポグラフィに強い関心を持つ。

株式会社シフトブレイン/スタンダードデザインユニットの開発マネジャー。

歴史から学ぶ現代のフロントエンド

ルームB 13:00 〜

私が2017年に初めたフロントエンドはReactによる宣言的UIやBabel、webpack、CSS-in-JS、Prettierなどが当たり前のように使われていて、それらを「なぜ使うのか」を当時は分からず、ドキュメントにも書かれていませんでした。これらが「なぜ必要なのか」は歴史を学ぶことで分かります。

私はこれまで、レガシーなフロントエンドからモダンなフロントエンドまで広く関わり、それらを通じて歴史を学び、「いま」を理解してきました。

本セッションでは、歴史から学ぶというアプローチで現代のフロントエンドを構成している技術について深堀りしてお話します。これまでなんとなく使っていた技術に対する理解を深めて、歴史という新しい視点に触れて頂けると幸いです。

新卒でサイボウズ株式会社に入社後、kintoneの開発を担当したのち、現在はフロントエンドエキスパートチームとして活動している。

社内ではプロダクト横断でフロントエンドの開発や支援を行っている。

チームが快適に開発できる環境を整えるのが好き。

フロントエンドにおけるアーキテクチャとの向きあい方

ルームB 14:00 〜

TypeScriptをベースにしたReact, Vue.jsがデファクトスタンダードなものへと確立してきました。jQueryからReact, Vue.jsに移行するプロジェクトも増えてきた中、新たな技術的負債も徐々に産声をあげてきました。なぜ技術的負債が生まれてきたのか、それを解決するためにどう向き合っていけばいいのかを私の経験からお話します。

福岡県福岡市出身。

日本事務器株式会社でフロントエンドエンジニアとデザイナーを兼任。

2019年の4月まではTypeScriptを使ってReactを書いており、今はUI/UXデザイナーを務めている。社外ではBtoBデザイナーというtoB向けサービスのデザイナーコミュニティに所属している。

フロントエンドエンジニア/デザイナー双方の立場にいる身として、何かと接点の多い二者間でよりより関係性を築けないかもがいている。

1番好きなラーメンは屋さんはShinShin。

明日からはじめるテストのあるフロントエンド開発

ルームB 14:30 〜

Webアプリケーションの開発スタイルは現場によって様々ですが、テストを書くということは共通して必要なことです。

本セッションではReactを使ったアプリケーションを例にとり、TypeScriptやJestを用いて、Custom HooksのUnit TestからCypressを使用したEnd to End Testまで解説します。

このセッションを聞いた方が次の日からテストが書ける助けになれば幸いです。

サイボウズ株式会社 フロントエンドエキスパートチーム所属。社内プロジェクトのフロントエンドを横断的に支えている。

Reactを使用した開発に携わることが多く、東京で勉強会も行なっている。

webpack,Babel,Storybook,Gatsby.jsなどのOSSが好き。

SPAについてとVSCodeの実装について

ルームB 15:00 〜

VSCodeの実装を読みつつ、なぜVSCodeは高速なのか?をコードから読み解いていく。また、コードリーディングのやり方やコツもお伝えできればと思っている。また、その実装から、SPAをどのように実装していくか?まで紹介する。

株式会社Groovenauts。九州大学芸術工学部出身。現在はTECH PARKでの子どもへ向けテクノロジーを利用した教育を実践しつつ、グラフィカルやテキスト問わずプログラミング言語を開発している。

主にDirect Manipulationを中心としたGUI開発について研究している。グラフィカルプログラミング言語やゲームエンジン等を趣味で開発している。プログラミング言語マニアでLispやSmalltalkが主に好き。

ボードゲームは500以上所持。

JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜

ルームB 16:00 〜

JavaScriptはウェブページには欠かせない存在になっていますが、ページの表示のパフォーマンスを考える際に何かと問題をはらんでいる存在にもなっています。

そのため、パフォーマンス向上のために仕様が策定され、ブラウザ側も対応を進めています。

このセッションでは、パフォーマンス向上のための状況について整理し、小〜中規模のウェブサイト、ウェブアプリケーションを作成している人に、表示速度の最適化の一助としてJavaScriptの読み込みについて解説します。

岡山県在住。小売店、飲食業を経て2000年よりウェブ制作に従事し、2018年10月から婚活パーティー、お見合いパーティー検索サイト — オミカレに所属。

「出会いが0をZEROにする」という経営理念を婚活パーティー・お見合いパーティーを通して実現するべく、日々サービスを改善している。

業務外の活動として、セミナー・勉強会への登壇、書籍の執筆・寄稿など執筆活動、技術系ドキュメントの翻訳などを行う。

ウェブフォント今昔物語

ルームB 16:30 〜

フォントはWebサイトやアプリケーションに欠かせない存在です。

ウェブフォントは表現の幅を広げる便利な技術ですが、未だに正しく理解・導入されていない事例を見かけることも少なくありません。

このセッションでは、デザインや実装だけでなくユーザーからの視点も交えてウェブフォントを紐解き、正しく理解し導入するための手助けになる話をしたいと考えています。

また個人活動や業務の中でウェブフォントを使ってきた経験から、実際のプロダクション環境で注意しなければならないことや感じたメリットも話せればと思っています。

大木 尊紀

株式会社FOLIO

フロントエンドエンジニア。

「誰でもつかえる!ウェブフォント実践マニュアル」著者。

最近はエンジニアリングとデザインの境界に興味がある。

これからのフロントエンドセキュリティ

ルームB 17:00 〜

UIだけでなく機能も含めてフロントエンドへの比重がシフトしていく中で、フロントエンド側で考えなければいけないセキュリティってどんなことがあるでしょうか。セキュリティはバックエンドの仕事だと思っていませんか?

本セッションでは、Webをより安全にするためにフロントエンドでできることについてお話しします。

(株)セキュアスカイ・テクノロジー取締役CTO、千葉大学非常勤講師。OWASP Kansai、OWASP Japan ボードメンバー。

Internet Explorer、Mozilla FirefoxをはじめWebアプリケーションに関する多数の脆弱性を発見。 Black Hat Japan 2008、OWASP AppSec APAC 2014、CODE BLUE 2016他講演多数。

ワークショップ:はじめてのVue.js

ルームC 13:00 〜

今風なフロントエンドライブラリを触ったことがない人向けの「Vue.js」のワークショップ

「Vue.jsって何なの?」という話から「商品一覧っぽい画面」の製作を通じて「Vue.js」の基本を手を動かしながら学びます

井関 健人

フリーランス

フリーランスのサーバーサイドエンジニア

PHPとかJavaScriptとかRubyとか書きますが、最近はもっぱら技術講座のスライドばっかり書いてます

渋田 達也

フリーランス

福岡で活動するフリーランスのwebエンジニア。フロントエンドの技術顧問などを行っている。

v-fukuokaという福岡のVue.jsコミュニティの代表だが、夏に子どもが産まれてからイベントを開催できていなくて申し訳なく思っている。

ワークショップ:Webアクセシビリティ向上につながる実装を体験!

ルームC 16:00 〜

「Webアクセシビリティ」が低めな実装を例に、どう改善すれば向上するのか体験できるワークショップ

改善すべき理由や、ツールも紹介しつつ、実際に手を動かしてWebアクセシビリティへ一歩踏み込んでみましょう。

福岡県産フロントエンドエンジニア/UXデザイナー。

2019年4月より株式会社スタンスにて、フロントエンド開発やサービスのUX設計を担当しています。

「Accessibility Step」というアクセシビリティに一歩踏み出す・踏み込む勉強会の主催をしています。

マークアップ出身のWebアクセシビリティエンジニア/フロントエンドエンジニア。最近はクライアントワークよりも、社内の教育や、効率化・デジタル化そして開発者体験の向上に取り組む。

ウェブにインクルーシブな夢を見てアクセシビリティを啓蒙したり、OSSをいろいろと開発している。