雑な感想とメモ【Meguro.es #10 @ ラクスル】@20170615

TODO

  • リンクを適切にはる
  • 感想を書く
  • 体裁を整える

Meguro.es #10に参加してきたので感想とメモを雑に共有する。

感想

  • vueの盛り上がり
  • Reactは難しい？

まとめ

meguroes

10回目らしい

Raksul

  • 仕組みを変えれば世界はもっと良くなる
  • ただの印刷会社じゃない
  • Rubyを中心としたmicroservice化
  • 業界を変えていきたい
  • 60人のメンバー
  • 速い安い

ServiceWorkerを使ったtypescript開発考察@brn0227

ブルーノさん

what is ServiceWorker

es6 Modulesを使うには

typescript Compiler(この発表では、以下、僕には難しすぎてあまりまとまっていない。)

コンパイルの流れ

ServiceWorkerとMain threadの流れを追う（スライド中に図が有り）

Problem

ES6 Modulesに対応していないModuleは動作しない

GitHub

https://github.com/brn/swts.git npm moduleも公開済み

まとめ

ServiceWorkerでbabel、typescriptはめんどい

Contextual ThisType and Vue.js@katashin

vueの中の人？

*スライド中のコードは全てTypeScript

メソッド中のthisの型は"any"担っている Vueのコンポーネントの中のメソッドなどでthisを対応するため

ThisType

Contextual ThisType vuejs/vue #5887 今までは型を導入し易いラッパーを用意するのが一般的だったがThisTypeを使うと楽になった

react-boilerplate@さっちゃんさん

  • 普段はサーバサイド
  • Reactの入れ方 → めんどくさい

react boilerplate

git clone https://github.com/react-boilerplate/react-boilerplate

npm run generate

色々作ってくれる

reselect

Control.Lens(Haskellのもの?) Haskell勉強しようよ

react-boilerplateは趣味でやるにはちょうどいい！

Source Map Revision 3の仕様概要@rchaser53

SORABITO ※独自調査なので指摘をしてほしい

規格(リンク)

  • 7ページなのですぐ読める

interfaceと概要

sourceRootとsources

  • sourcesContent
    • 変換前のソース
    • ts=>JSであればTS
  • name
    • 変換後のファイルに単語がはいれつとして保存される
  • mappings

inline sourcemap

ファイルに直接sourcemapの情報を書き込む ファイルが重くなる

X-Sourcemap

sourcemapのイチをヘッダーで指定する ソースに不要な情報が表示されなくなる

便利なライブラリ集

  • mozilla/source-map
    • sourcemapの作成やsourcemapの関連付け
    • babel,webpack,ugilifyなどが使用可能
  • azu/malti-statge-sourcemap
    • サンプル・コードして優秀

Sentryで始めるJavaScriptエラーのトラッキング@endam

Sentryって？

  • アプリケーションのエラーをリアルタイムで教えてくれるサービス
  • どんな環境で何のエラーがおこったかがわかる
  • OSSとしても公開されている

なぜSentry?

検討したサービス

  • Google Analytics
    • カスタマイズ性に書ける
  • TrackJS
  • Sentry
  • New Relic
    • JSも実はできる

選定基準は3つ

  • コンパイル前のコードの場所がわかる
    • コンパイル後は見てもしょうがない
    • sourcemapに対応
    • new relicは今年の3月に対応
  • 料金
    • Sentryはただ！
  • バージョンを管理したい
    • デグレなども確認したい
    • リリースバージョンの管理

全てを満たすのはSentry

外部連携できるサービスも豊富

まとめ

  • リリースバージョンを含めたエラー管理

vue.js 2系でサービスリニューアル@tsukasa_murashige

Raksulの中の人 デザインテンプレートに関連する機能をVueJSで実装

使用したフレームワーク、ライブラリ

  • vuejs2.2.2

vueJS2系は良くなった

  • 単一ファイルコンポーネントで見通しが良くなった
  • データオブジェクトのネストされた子のプロパティもwatchできる
  • vue-routerのscrollBehaviorで、スクロールイチの管理がしやすくなった
  • axios(VueJSで推奨されている)でAPIのモックデータの開発がしやすくなった

Cloud Functions for Firebaseを始めよう@ovrmrw

ちきさん(Angularのハンズオンでチューターしていたのを見たことが有る！) ng-japanのスタッフ 5月からwebエンジニアになった

firebase/functions-samples

公式で様々な使い方が紹介されているので一部を紹介 firebaseはホスティングができるが、それを克服するためにfunctionsを公式で用意してある https://github.com/firebase/functions-samples

色々できる

  • firebaseにExpressアプリを組み込める？
  • 外部サービスの認証を用いていろいろする
  • SSRを行って返す
  • 不適切な画像を判定してモザイクをかける
  • 外部のサービスで文字列検索してfirebaseで使える
  • firebase認証したら、tripe(決済サービス)のユーザーを自動生成し、紐付ける
  • firebase/friendlychat

デモ

  • Googleの基準でchatで挙げられた不適切な画像にモザイクをかける
  • 入力されたテキストからgoogle cloud languageAPIでpositiveやnegativeを認識し大きさを変える

まとめ

Firebaseともっと遊ぼう。