< TOPに戻る <

Sessions

フロントエンドのエンジニアリングや、マークアップ、デザインなど、
Webに関わる全ての人に是非届けたい珠玉のセッション構成でお送りしております。

A-1 11:00 〜

# モダンJavaScript再入門

Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。
特にこの約5年間で、JavaScriptはモダンなプログラミング言語へと大きな進化を遂げ、開発効率は劇的に高まりました。
一方で、古いままの情報も多く、最新技術をキャッチアップするのは大変な面もあります。
本セッションでは、新しくJavaScriptを学びたい人や昔に勉強した人、なんとなく書いている人が入門・再入門できるように、JavaScriptのモダンな書き方をなるべく実用的な例をまじえてご紹介します。
また、将来のWebの変化についていけるように、これから先のJavaScriptがどのように進化していくのかの展望についてもお話しします。

尾上 洋介
日本大学

日本大学 文理学部情報科学科 准教授。Web技術が好きです。


B-1 11:00 〜

# デザイン・設計の体幹とスキル

フロントエンドエンジニアの方から、デザインの基礎や設計スキルを身につけたいという話しをよく聞きます。ただ、いわゆるノンデザイナーズ向けのコンテンツを紹介するだけでは、身につくどころかデザイナーの頭の中にある思考や設計プロセスを汲むのは難しいでしょう。UI デザインの仕事に携わって15年、UX, UI を専門とした事業を始めて7年、この経験で得られたデザイン・設計の体幹と呼んでいるスキルについて、お話できればと思います。

山下 一樹
株式会社インパス

Panasonic の情報システム部門にてエンジニア・企画を経て、UX と UI デザインを専門とする株式会社インパスを設立。デザイナー/インフォメーションアーキテクトとして、アプリや web に関する情報設計、UI・インタラクションデザイン、UX デザインのコンサルティングを仕事にしています。


C-1 11:00 〜

# PWAとCache API

PWAにおけるキャッシュを実現する機能はSWと勘違いされがちですが、実はCache APIがキャッシュ機能を提供しています。本セッションでは、PWAにおけるキャッシュ機能をSWとCache APIに分解し、Cache APIの紹介、利用方法を解説します。

田口 航
株式会社GameWith

PWAやWeb Componentsが好きなエンジニア。


A-2 11:45 〜 angular

# ディレクトリ構成ベストプラクティス 〜 Angularアプリを作り続けてわかったこと

開発の規模が大きくなるほどファイルも増えていきます。膨大なファイルが一カ所に集まっていると、検索できたとしてもエディタ上での視認性はとても悪いものになってしまいます。冗長さなく、かつ論理的にディレクトリを分けていくにはどうすればよいでしょうか。アプリケーションの設計段階から考えるべき、特定のフレームワークに限らない抽象的な整理の哲学に関して、その経験談をご紹介します。

okunokentaro
クレスウェア代表

TypeScriptフロントエンド・バックエンドエンジニア。Angular日本ユーザー会、ng-kyotoオーガナイザ。大規模ウェブアプリケーション開発をいくつも手掛け、DDDをベースとした設計、開発チーム運営を得意とする。


B-2 11:45 〜 Ionic

# 事例からみるアプリデザインの成長戦略とWeb Native Platform

女性専用ソーシャルサービス「tipsys」は、登録ユーザ数5万人、週間アクティブユーザ8千人と、プライベートプロダクトとしては中堅として成長しました。開発はひとりで行っています。デザインからリリースまでひとりで行えた背景には、デザインシステムと近年のフロントエンド技術の発展があります。本セッションでは、プロダクトの成長戦略に焦点をあて、アプリ開発の裏側をご紹介します。

榊原 昌彦
一般社団法人リレーションデザイン研究所

大学院卒業後、一般社団法人リレーションデザイン研究所立ち上げ。その後、まちづくりの産業化を目指す一般社団法人エリア・イノベーション・アライアンスにも参画し、全国の様々なまちづくりの現場に携わる。 事業で用いるアプリやシステムの開発を行っている他、様々なコミュニティ活動に関わる。Ionic Japan User Group代表。著書「Ionicで作るモバイルアプリ制作入門」。


C-2 11:45 〜

# JavaScript も jQuery も未経験の新人エンジニアが 1 年間 Vue.js を学習して感じた話

私が配属された部署では jQuery や Vue.js を用いてフロントエンドの開発を行っています。
配属されるまで JavaScript や jQuery の経験がほとんどありませんでした。
研修で Vue.js を学習し始めて、Vue.js は機能が豊富で、シンプルな記述法がわかりやすいと感じました。
Vue.js を触って、どんな機能が便利だったか、どういう点でわかりやすい記述法だと感じたかお話しします。
また、フロントエンドフレームワーク未経験者がjQuery とVue.js を同時に1年間学習して感じたこと、得られたこと、Vue.js と jQuery を比較してそれぞれの機能や記述法で感じたことをお話しします。

Vue.js の学習として技術書や公式のドキュメントを参照したり、サンプルプログラムを参照しながら実際にコードを書いたりしました。
やってきた学習法で良かったこと、悪かったこと、学習でこうすればよかったと思ったこと、学習で何につまづいてどう克服したかについてお話しします。

川又由雅
株式会社ラクス

大学卒業後、株式会社ラクスに入社。
開発エンジニアとして自社の製品の開発を行っています。
フロントエンド系の実装が好きです。


A-3 13:00 〜 Adobe XD

# Adobe XDで作るマイクロインタラクション

Adobe XDは、ワイヤーフレーム・デザイン・プロトタイプを効率よく制作し共有することで、プロジェクトのコミュニケーションを円滑にするUI/UXツールです。
XDで作る「動くプロトタイプ」を用いることで、画面遷移やマイクロインタラクションをチーム内で共有し、コンセンサスを取ることができます。
XDの自動アニメーション機能を中心に、現場ですぐに使えるテクニックやノウハウ、モーションを実際にコーディングする時のコツについて、デモを交えながらお伝えします。

松下 絵梨
ツキアカリ

ウェブ/DTPデザイナー、京都造形芸術大学 非常勤講師、デジタルハリウッド大阪校 主幹講師、コンピュータ専門学校HAL 非常勤講師。
ウェブデザイン、ウェブディレクション、ロゴや印刷物のデザインのほか、コミュニティ活動・登壇にも力を入れている。「CSS Nite in Osaka」、「Adobe XD ユーザーグループ大阪」、「ツキアカリ Meet-up」主宰。
Adobe XDとお酒が好きです。


B-3 13:00 〜

# UIデザイナが実装できる良さ

Webデザイナはコーディングできる「べき」なのかという話題は幾度と出てきました。私自身は実装もできるデザイナであり、自分が実装できることで得た評価やスキルなどがどういったものなのか、実装できるデザイナのワークフローなどをご紹介します。

コンチ
ベルフェイス株式会社

フルリモートで働くUIデザイナです(名古屋在住)。プロトタイプの開発を得意にしており、作っては壊すを繰り返して正解にたどり着くような改善を前提した開発をしています。
過去に「俺の嫁が可愛い」というサイトを3時間で作ってバズりました。


C-3 13:00 〜

# レガシーなフロントエンドをリプレイスする

フロントエンドはレガシーとは無縁? いいえ、そんなことはありません。数年前に作られたアプリケーションは、フレームワークの進化、開発環境の進化とともにどうしてもレガシーとなり、さらには負債となってしまいます。
本セッションでは、そのような負債と戦うべく行った、設計、実装や、作業の進め方などをお話します。

小島大基

現役の大学院生。
大学院生ではタスク並列言語に関する研究を行っています。
現在、インターンとして、主にWebサービス系の会社でVueを使ったフロントエンドの開発を行っています。
プライベートではフロントエンドやWeb技術だけでなく、iOS・Androidアプリの開発なども行っております。


A-4 13:45 〜

# 2019年のUIパフォーマンス

ネットワークの通信速度や端末とブラウザーの性能が上がっていく一方で、WEBアプリケーションに求められることも多くなってきています。
世界中のユーザーに、快適にサービスを使ってもらうために必要な工夫はどんなものか、そういった工夫がビジネスにどんな効果をもたらすのか、について説明します。
また、「フロントエンドエンジニア」の定義が曖昧な中で、パフォーマンスは一体誰の担当領域なのか、なども見解をお伝え致します。

キリル ワシルツォフ
株式会社ゆめみ

京都大学大学院への入学のために、ロシアから京都に移住。2018年からゆめみでインターンをはじめ、2019年の卒業後にそのまま入社。業務では、フロントエンド開発を中心に活躍しています。


C-4 13:45 〜 Vue.js

# Nuxt.js + Firebaseでの開発と高速化に挑んだ話

Nuxt.js + FirebaseでWebアプリにチャット機能の導入する際に工夫した点、感じたメリット・デメリットについてお話します。
例えば、リアルタイムで更新されるチャットを実現する際にロングポーリング、Websocket、Firebaseで検討した点。実際にFirebaseを導入して、FirebaseとNuxt.jsでの全体のアーキテクチャをどうしたか。導入してから出てきた問題でCloud Functionsによる処理の遅延の話などをします。
その他には、フロント周りでボトルネックになっていた処理を調査し、高速化した話をします。

カンボ@沖縄(鈴木孝之)
株式会社Re:Build

1990年神奈川県生まれ。多摩大学経営情報学部卒。
文系の学部を卒業後、2013年に東京のITベンチャー企業にシステムエンジニアとして入社し、プログラミングを習得。
その後、株式会社フルスピードにwebエンジニアとして入社。フルスピードでは、大規模な広告配信サービスの管理画面開発を担当し、サーバサイド(php)からフロントエンド(JavaScript)まで幅広い開発に従事。また、社内では新卒研修も担当し、新人育成や指導に携わる。2017年11月に沖縄で起業し、株式会社Re:Buildを設立。東京の企業様からの開発案件を請けつつ、自社Webサービスを開発中。
開発で使用する技術はPHP(Symfony2・Laravel5・CakePHP3)、JavaScript(AngularJS、Angular2~4、Vue.js、TypeScript、Nuxt.js)など。


A-5 14:30 〜

# AWSを活用したフロントエンド開発

WEBアプリケーション開発において必要なユーザ認証やデータベース、そのほかバックエンドな箇所をAWSをフル活用する事でフロントエンドファーストに開発できる方法を紹介します。

前田 圭介
株式会社CI

Web Engineerとしてフロントエンドとバックエンド、インフラ(AWS)を葛藤しています。


B-5 14:30 〜

# 高齢者でも使えるプロダクトUIの挑戦

Ubie株式会社では、病院やクリニック向けに、タブレットを利用した問診システムを提供しています。「一度もタブレットやスマホに触れたことがない」という高齢の患者様にも利用してもらえるよう、ユニバーサルデザインの採用や様々な UI の見直しをこれまで繰り返してきました。これらの取り組みについていくつかご紹介します。ますます高齢化社会が進んでいく中、より幅広いユーザーに対してサービスを提供するにはどういった工夫が必要なのか、そのヒントになれば幸いです。

神保嘉秀
Ubie株式会社

大阪在住のフロントエンドエンジニア。7年ほどリモートワークを続けながらスタートアップ企業でプロダクト開発を行っています。


A-6 15:15 〜

# 私たちはなぜ SPA で開発するのか

Vue.jsやReact.js、最近ではNuxt.jsを利用したSPA開発は現在では当たり前のものとなっています。
初回ロードが完了すればその後の動作が軽快であるなどの理由で採用され、最近ではPWAによるネイティブに近い体験の実現などが目的となることもしばしばあります。

しかし、本音を言えばSPAの機能面での優位性ではなく、Developer Experienceを目的に採用している場合も多いのではないでしょうか。
フロントエンド開発者には、モダンJavaScriptフレームワークも、モジュールバンドラも、HMRも今やなくてはならない存在ですし、当面SPAが優位な状況は続くでしょう。

一方で、自身が取り巻く技術のバックグラウンドと妥当性を常に意識するのは重要なことです。
アクセス頻度は多いが滞在時間は短いメディアのようなサイトで起動コストが重いSPAは妥当なのでしょうか。Universal
Applicationにに、複雑な状態管理は求められているのでしょうか。

なぜ私達がSPAで開発するのかを、今あらためて、一緒に考えてみませんか?

花谷拓磨(@potato4d)
ElevenBack LLC. / LINE株式会社

ユーザーエクスペリエンスとクラウドネイティブを愛するフロントエンドエンジニア。ある時は開発者、またある時は会社代表をしています。Vue.js / React.js 日本語公式ドキュメント管理者、Nuxt.js ビギナーズガイド著者。


B-6 15:15 〜

# プロダクト開発とFigmaのより良い関係を求めて

近年プロダクト開発を取り巻く環境は複雑化してきており、開発フローを整備することはプロダクト開発の速度を上げるうえで非常に重要です。
Figmaは最近注目を集めるデザインツールで、オンラインの共同編集機能やなど今までのデザインツールにはない機能・特徴を持っています。
この発表では、Figmaの機能(Plugin、Web API、Live Embed)とその他周辺ツールを活用し開発速度を向上させる方法と、実際にプロジェクトで運用してみて気づいたことについてお話したいと思います。

大木尊紀
株式会社FOLIO

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


C-6 15:15 〜

# React Hooksで<video>を乗りこなす

「映像プレーヤー」を作成したことはあるでしょうか?
作成したことはなくても、おそらく日々様々なプレーヤーを利用していると思います。
HTML5で定義されるHTML Video elementからは、メディア状態・エラー・DRM複合処理・広告再生・読み込み、などブラウザごとに多種多様なイベントが発生します。プレーヤーはこのイベントに加え、ユーザーから入力される複雑な操作も併せて処理する必要があります。UIや内部要件を実装するには、このイベント制御を適切にハンドルし、のりこなすことが必要不可欠なのです。
今回のセッションでは、複雑な処理をReactHooksを用いてHTML Video elementを制御する手法を、現在映像サービス「GYAO!」でプロダクションで使用されているプレーヤーを事例に、フロントエンドの観点からご紹介します。

浜田 真成
ヤフー株式会社 / 株式会社GYAO

ヤフーでフロントエンド技術領域、デザイン領域を担当するエンジニア。映像事業領域のGYAOのWEBフロントエンドを統括し、プレーヤーやBFFなど幅広く開発を行う。WEB+DB PRESS の連載記事としてStorybook、HeadlessCMSの記事を執筆。


A-7 16:00 〜

# フロントエンドエンジニアのためのセキュリティ対策

安全なWebアプリケーションを開発するために、フロントエンドエンジニアがセキュリティについて考えなければいけないことはたくさんあります。
本セッションではXSSなどの脆弱性がどのように発生するのか、どう対策するのかについて紹介します。
入門的な話と最近の動向を交えながら話します。

平野 昌士
サイボウズ株式会社

WebやJavaScriptが好きでNode.jsのコミッターやコミュニティ活動をしています。


B-7 16:00 〜

# Flutter For Webを用いて居酒屋で使えそうなゲームを作ってみた備忘録

多プラットフォーム対応で何かとホットな話題を提供しているFlutterがウェブを対応し、更に拡大しようとしています。ただ、関東ではコミュニティ交流が盛んに行われているようですが、関西ではほとんどといっていいほど交流がありません。本セッションではFlutterという素晴らしい世界に簡単に嵌まれるように、デプロイまでのある程度の手順とサンプルアプリを作成するには困らない程度の情報をお伝えできればと思います。

大西 優司

新卒で就職した教育系の会社で、個別指導塾の教室長として生徒数100名弱の地域基幹教室で勤務し、34名の講師のマネジメントを行う。教室勤務の他に企画業務と講師採用業務を経験し、後にプログラマーに転職し、医療用パッケージアプリ開発を行う。
2018年4月に小中高向け個別指導塾を運営する会社を設立し、部下育成・組織開発を行う。担当業務は教務・教室管理・上級プログラミング教育カリキュラム策定・内製アプリケーション開発マネジメント。
現在は執行役員として勤務する傍ら、フリーランスとして講師業やエンジニアなど活動を広げている。


C-7 16:00 〜

# Web 制作現場のディレクションを支える GitHub

Web 制作現場で軽視されがちなディレションの価値を再確認するための、ディレクション入門。
ディレクションとはなにかを再考しながら、制作現場におけるディレクションの価値を考えてみましょう。

ディレクションの補助ツールとして GitHub を用いながら、非エンジニアでも使える GitHub のIssue / Pull Request 活用を紹介。
Webツールの活用が、ディレクションの要点をどの様にサポートするのか、についても紹介するので、
GitHub を用いていない現場でも、スムーズなディレクション進行に必要なツール活用が見つかるはずです。

後藤知宏
株式会社chatbox

株式会社chatbox 代表。技術顧問として様々な制作現場の業務改善をすすめる傍ら、
関西フロントエンド UG の立ち上げや v-kansai , 関西 PHP User Group の運営に携わるなど、
PHP / フロントエンドを中心に 関西での Web 制作にまつわるコミュニティ活動を行っている。


SHARE