「FRONTEND CONFERENCE 2019」に参加してきました

勉強会メモ
  • FRONTEND CONFERENCE 2019に参加してきました。

2019.kfug.jp

タイムテーブル

11:00〜

タイトル 発表者
モダンJavaScript再入門 尾上 洋介
デザイン・設計の体幹とスキル 山下 一樹
PWAとCache API 田口 航

11:45〜

タイトル 発表者
ディレクトリ構成ベストプラクティス 〜 Angularアプリを作り続けてわかったこと okunokentaro
事例からみるアプリデザインの成長戦略とWeb Native Platform 榊原 昌彦
JavaScript も jQuery も未経験の新人エンジニアが 1 年間 Vue.js を学習して感じた話 川又由雅

13:00〜

タイトル 発表者
Adobe XDで作るマイクロインタラクション 松下 絵梨
UIデザイナが実装できる良さ コンチ
レガシーなフロントエンドをリプレイスする 小島大基

13:45〜

タイトル 発表者
2019年のUIパフォーマンス キリル ワシルツォフ
Nuxt.js + Firebaseでの開発と高速化に挑んだ話 カンボ@沖縄(鈴木孝之)

14:30〜

タイトル 発表者
AWSを活用したフロントエンド開発 前田 圭介
高齢者でも使えるプロダクトUIの挑戦 神保嘉秀

15:15〜

タイトル 発表者
私たちはなぜ SPA で開発するのか 花谷拓磨(@potato4d)
プロダクト開発とFigmaのより良い関係を求めて 大木尊紀
React Hooksで<video>を乗りこなす 浜田 真成

16:00〜

タイトル 発表者
フロントエンドエンジニアのためのセキュリティ対策 平野 昌士
Flutter For Webを用いて居酒屋で使えそうなゲームを作ってみた備忘録 大西 優司
Web 制作現場のディレクションを支える GitHub 後藤知宏

モダンJavaScript再入門

  • 尾上 洋介さん

なぜJS

  • 本格的なSPAが作れる
  • モダンなツールやフレームワークを学ぶのにJSの知識が必要なものが多い
  • ツールが移り変わっても通用する技術

基本的なオブジェクト

  • 数値/文字列/配列/オブジェクト

変数の宣言

  • const/let
    • 基本はconst
    • 再代入必要な時だけlet
    • varは使わない

アロー関数

  • 関数は第一級オブジェクト
    • 変数に入れたり関数へ渡したりできる

非同期処理

  • asyncをつけた関数内ではawaitが使える
  • awaitつけるとPromiseが解決されるまで待ってくれる

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

  • 小島大基さん

レガシーとは

  • 古い
  • 代替すべき新しいシステムがある
  • フロントエンドにおいて
    • 新しい技術がすぐに入ってくる

アーキテクチャ

  • UIとロジックのディレクトリ(ファイル)を分ける
    • UIライブラリが変わっても使い回せる状態に
  • コンポーネントはなるべくステートレスに

テスト

苦労したところ

  • ライブラリのバージョン上げたらテストが通らなくなった
    • BootstrapVue 1.5 -> 2
  • class style apiが非推奨になってしまった

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

  • カンボ@沖縄(鈴木孝之)さん

なぜFirebase

  • RDSも使ってる
    • FirebaseはChatの部分だけ
  • 使っているサービス
    • Firebase Authentication
    • Cloud Firestore
    • CloudFunction

チャット機能をFirebaseで

  • 候補
    • WebSocket
    • ロングポーリング
    • Firebase
      • Firebaseに決定
      • 導入コスト低くてメンテコストも低い
      • 採用のウリになりそう
  • 導入前の懸念
    • DBの無料枠1GB
    • 検索条件に制限

Firebase導入してどうだったか

  • Firestoreの構成
    • usersコレクション
    • roomsコレクション
    • usersのサブコレクションにrooms
      • 深い層への検索がやりづらそうだったから
  • CloudFunctionの初期起動遅い
    • 一定時間アクセスがないとスリープモードになる

ビルド高速化

  • Webpack Bundle Analyzer
    • webpackの処理で遅いloaderやpluginが分かる
    • bundleしたファイルがどのライブラリがどれくらい占めてるか分かる
  • バンドルサイズ
    • Chart.jsが重い
    • memoment.jsが重い
      • 不要なlocaleも入ってて重い
    • lodashが重い
      • ほとんど使ってないから消そうとした
      • 関数単位でimportするやり方があったからそれにした

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

  • 前田 圭介さん

AWS

  • 使ってるサービス
    • S3
      • ストレージ
    • Cognito
      • 認証サービス
  • 今後よさそう
    • AppSync
      • GraphQLでやりとりする
      • リアルタイムデータアクセス
      • オフラインのデータ同期

導入編

  • AWS Amplify
  • amplify initで雛形生成できる
    • Auth.signin()でCognito Signin
    • GraphQLのqueryを生成したりもできる
  • amplify pushでデプロイできる

まとめ

  • Amplifyで簡単に認証からAPI作成・実行Storage利用ができる

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

  • 花谷拓磨(@potato4d)さん

なぜSPAを選定するのか

  • User Experiences(UX)
    • 要件を満たすための選ぶ場面
  • Developer Experiences(DX)
    • 開発効率を上げて生産性を上げる
    • エンジニアを確保するために新しい技術を使う

UX要件の強い事例

  • InstagramがPWA/SPAで提供している
    • 新興国での利用など考慮してWebで提供
    • twitterも同じようなことしてる
  • ページ遷移にアニメーションをつけたりリッチにしたいけど各ページでURLは持ちたい

DX要件の強い事例

  • コーポレートサイトをSPAで作成
    • コンテンツのアップデートを簡単にやりたいからSPAを選択

SPAの技術をどこまで使うか

  • SPAに付随してくる技術はすべて必要？
    • たとえばReduxとか
  • 要件ごとに検討していく必要がある
    • 常にバランスが大事

間違った技術選定

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

  • 平野 昌士さん

Webのセキュリティ動向

  • IPAが出している脆弱性届出受付数
    • Webがソフトウェアの倍以上
    • XSSが半分を占めている
  • 脆弱性の多くはWebサイトでXSSが多い

脆弱性(XSS)の仕組みと対策

XSS

被害例
XSSの種類
主な対策
  • 特殊文字のエスケープ
    • & -> &amp;とか
  • 危険な文字列の削除
    • javascript:alert()とか入ってたら消すとか
    • 自前でやれなくもないけど大変
      • OSSなどを活用しましょう
      • 例えばReactはデフォルトでいろいろやってくれる
      • DOMPurify
  • ブラウザの機能を使う
    • Content Security Policy
      • HTTPレスポンスヘッダーに入れる
      • <meta>でも指定できる
    • Content-Security-Policy-Report-Only
      • レポートをとれるから本番適用前に確認すると良い
    • nonce
      • metaタグで設定したnonce値と同じ値が設定されたscriptタグしか実行できないようにする
      • nonceはリクエストの都度変える必要があり推測困難なランダムな値にする
    • Trusted Types
      • URLの文字列を安全な型に検証して扱う
      • まだexperimentalな機能
        • chromeはflag立てれば動く
        • Polyfillもある

セキュリティへの意識

  • 脆弱性とは悪用できるバグ by 徳丸先生
  • セキュリティに関しても
    • 要件定義でfixする
    • セキュリティテストする
  • どうやってチェックする?