< TOPに戻る <
Sessions
フロントエンドのエンジニアリングや、マークアップ、デザインなど、
Webに関わる全ての人に是非届けたい珠玉のセッション構成でお送りしております。
A-1 11:00 〜
# モダンJavaScript再入門
Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。
特にこの約5年間で、JavaScriptはモダンなプログラミング言語へと大きな進化を遂げ、開発効率は劇的に高まりました。
一方で、古いままの情報も多く、最新技術をキャッチアップするのは大変な面もあります。
本セッションでは、新しくJavaScriptを学びたい人や昔に勉強した人、なんとなく書いている人が入門・再入門できるように、JavaScriptのモダンな書き方をなるべく実用的な例をまじえてご紹介します。
また、将来のWebの変化についていけるように、これから先のJavaScriptがどのように進化していくのかの展望についてもお話しします。
B-1 11:00 〜
# デザイン・設計の体幹とスキル
フロントエンドエンジニアの方から、デザインの基礎や設計スキルを身につけたいという話しをよく聞きます。ただ、いわゆるノンデザイナーズ向けのコンテンツを紹介するだけでは、身につくどころかデザイナーの頭の中にある思考や設計プロセスを汲むのは難しいでしょう。UI デザインの仕事に携わって15年、UX, UI を専門とした事業を始めて7年、この経験で得られたデザイン・設計の体幹と呼んでいるスキルについて、お話できればと思います。
C-1 11:00 〜
# PWAとCache API
PWAにおけるキャッシュを実現する機能はSWと勘違いされがちですが、実はCache APIがキャッシュ機能を提供しています。本セッションでは、PWAにおけるキャッシュ機能をSWとCache APIに分解し、Cache APIの紹介、利用方法を解説します。
# ディレクトリ構成ベストプラクティス 〜 Angularアプリを作り続けてわかったこと
開発の規模が大きくなるほどファイルも増えていきます。膨大なファイルが一カ所に集まっていると、検索できたとしてもエディタ上での視認性はとても悪いものになってしまいます。冗長さなく、かつ論理的にディレクトリを分けていくにはどうすればよいでしょうか。アプリケーションの設計段階から考えるべき、特定のフレームワークに限らない抽象的な整理の哲学に関して、その経験談をご紹介します。
# 事例からみるアプリデザインの成長戦略とWeb Native Platform
女性専用ソーシャルサービス「tipsys」は、登録ユーザ数5万人、週間アクティブユーザ8千人と、プライベートプロダクトとしては中堅として成長しました。開発はひとりで行っています。デザインからリリースまでひとりで行えた背景には、デザインシステムと近年のフロントエンド技術の発展があります。本セッションでは、プロダクトの成長戦略に焦点をあて、アプリ開発の裏側をご紹介します。
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 の学習として技術書や公式のドキュメントを参照したり、サンプルプログラムを参照しながら実際にコードを書いたりしました。
やってきた学習法で良かったこと、悪かったこと、学習でこうすればよかったと思ったこと、学習で何につまづいてどう克服したかについてお話しします。
川又由雅
株式会社ラクス
大学卒業後、株式会社ラクスに入社。
開発エンジニアとして自社の製品の開発を行っています。
フロントエンド系の実装が好きです。
# Adobe XDで作るマイクロインタラクション
Adobe XDは、ワイヤーフレーム・デザイン・プロトタイプを効率よく制作し共有することで、プロジェクトのコミュニケーションを円滑にするUI/UXツールです。
XDで作る「動くプロトタイプ」を用いることで、画面遷移やマイクロインタラクションをチーム内で共有し、コンセンサスを取ることができます。
XDの自動アニメーション機能を中心に、現場ですぐに使えるテクニックやノウハウ、モーションを実際にコーディングする時のコツについて、デモを交えながらお伝えします。
B-3 13:00 〜
# UIデザイナが実装できる良さ
Webデザイナはコーディングできる「べき」なのかという話題は幾度と出てきました。私自身は実装もできるデザイナであり、自分が実装できることで得た評価やスキルなどがどういったものなのか、実装できるデザイナのワークフローなどをご紹介します。
C-3 13:00 〜
# レガシーなフロントエンドをリプレイスする
フロントエンドはレガシーとは無縁? いいえ、そんなことはありません。数年前に作られたアプリケーションは、フレームワークの進化、開発環境の進化とともにどうしてもレガシーとなり、さらには負債となってしまいます。
本セッションでは、そのような負債と戦うべく行った、設計、実装や、作業の進め方などをお話します。
A-4 13:45 〜
# 2019年のUIパフォーマンス
ネットワークの通信速度や端末とブラウザーの性能が上がっていく一方で、WEBアプリケーションに求められることも多くなってきています。
世界中のユーザーに、快適にサービスを使ってもらうために必要な工夫はどんなものか、そういった工夫がビジネスにどんな効果をもたらすのか、について説明します。
また、「フロントエンドエンジニア」の定義が曖昧な中で、パフォーマンスは一体誰の担当領域なのか、なども見解をお伝え致します。
# 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をフル活用する事でフロントエンドファーストに開発できる方法を紹介します。
B-5 14:30 〜
# 高齢者でも使えるプロダクトUIの挑戦
Ubie株式会社では、病院やクリニック向けに、タブレットを利用した問診システムを提供しています。「一度もタブレットやスマホに触れたことがない」という高齢の患者様にも利用してもらえるよう、ユニバーサルデザインの採用や様々な UI の見直しをこれまで繰り返してきました。これらの取り組みについていくつかご紹介します。ますます高齢化社会が進んでいく中、より幅広いユーザーに対してサービスを提供するにはどういった工夫が必要なのか、そのヒントになれば幸いです。
A-6 15:15 〜
# 私たちはなぜ SPA で開発するのか
Vue.jsやReact.js、最近ではNuxt.jsを利用したSPA開発は現在では当たり前のものとなっています。
初回ロードが完了すればその後の動作が軽快であるなどの理由で採用され、最近ではPWAによるネイティブに近い体験の実現などが目的となることもしばしばあります。
しかし、本音を言えばSPAの機能面での優位性ではなく、Developer Experienceを目的に採用している場合も多いのではないでしょうか。
フロントエンド開発者には、モダンJavaScriptフレームワークも、モジュールバンドラも、HMRも今やなくてはならない存在ですし、当面SPAが優位な状況は続くでしょう。
一方で、自身が取り巻く技術のバックグラウンドと妥当性を常に意識するのは重要なことです。
アクセス頻度は多いが滞在時間は短いメディアのようなサイトで起動コストが重いSPAは妥当なのでしょうか。Universal
Applicationにに、複雑な状態管理は求められているのでしょうか。
なぜ私達がSPAで開発するのかを、今あらためて、一緒に考えてみませんか？
B-6 15:15 〜
# プロダクト開発とFigmaのより良い関係を求めて
近年プロダクト開発を取り巻く環境は複雑化してきており、開発フローを整備することはプロダクト開発の速度を上げるうえで非常に重要です。
Figmaは最近注目を集めるデザインツールで、オンラインの共同編集機能やなど今までのデザインツールにはない機能・特徴を持っています。
この発表では、Figmaの機能（Plugin、Web API、Live Embed）とその他周辺ツールを活用し開発速度を向上させる方法と、実際にプロジェクトで運用してみて気づいたことについてお話したいと思います。
C-6 15:15 〜
# React Hooksで<video>を乗りこなす
「映像プレーヤー」を作成したことはあるでしょうか？
作成したことはなくても、おそらく日々様々なプレーヤーを利用していると思います。
HTML5で定義されるHTML Video elementからは、メディア状態・エラー・DRM複合処理・広告再生・読み込み、などブラウザごとに多種多様なイベントが発生します。プレーヤーはこのイベントに加え、ユーザーから入力される複雑な操作も併せて処理する必要があります。UIや内部要件を実装するには、このイベント制御を適切にハンドルし、のりこなすことが必要不可欠なのです。
今回のセッションでは、複雑な処理をReactHooksを用いてHTML Video elementを制御する手法を、現在映像サービス「GYAO!」でプロダクションで使用されているプレーヤーを事例に、フロントエンドの観点からご紹介します。
A-7 16:00 〜
# フロントエンドエンジニアのためのセキュリティ対策
安全なWebアプリケーションを開発するために、フロントエンドエンジニアがセキュリティについて考えなければいけないことはたくさんあります。
本セッションではXSSなどの脆弱性がどのように発生するのか、どう対策するのかについて紹介します。
入門的な話と最近の動向を交えながら話します。
B-7 16:00 〜
# Flutter For Webを用いて居酒屋で使えそうなゲームを作ってみた備忘録
多プラットフォーム対応で何かとホットな話題を提供しているFlutterがウェブを対応し、更に拡大しようとしています。ただ、関東ではコミュニティ交流が盛んに行われているようですが、関西ではほとんどといっていいほど交流がありません。本セッションではFlutterという素晴らしい世界に簡単に嵌まれるように、デプロイまでのある程度の手順とサンプルアプリを作成するには困らない程度の情報をお伝えできればと思います。
C-7 16:00 〜
# Web 制作現場のディレクションを支える GitHub
Web 制作現場で軽視されがちなディレションの価値を再確認するための、ディレクション入門。
ディレクションとはなにかを再考しながら、制作現場におけるディレクションの価値を考えてみましょう。
ディレクションの補助ツールとして GitHub を用いながら、非エンジニアでも使える GitHub のIssue / Pull Request 活用を紹介。
Webツールの活用が、ディレクションの要点をどの様にサポートするのか、についても紹介するので、
GitHub を用いていない現場でも、スムーズなディレクション進行に必要なツール活用が見つかるはずです。