初夏のJavaScript祭2017 参加メモ

  • 5
    いいね
  • 0
    コメント

行ってきました。殴り書きメモですが公開するよ!

hikarutさんのQiita記事のほうがリンク等しっかりしてるかと。

訂正点あったらよろしくお願いします。

JSのエラーチェックツールを作ろうとした話

  • Rails製のウェブページ解析サービスWWCheckerを作った
  • サイトのスクショ撮影 + 実行時JSエラー解析しようとして苦戦
    • headless chrome使ったらメモリ食いすぎ
  • 実行時エラー解析機能を削って、より需要のあるパフォーマンス分析機能をPageSpeed InsightsのAPI使って作ることにした
  • PageSpeed Insightsでスクショも撮れて満足

Draft.jsによる統制のとれたテキスト編集の世界

  • Draft.js
    • WYSIWIGエディタを作るやつ
    • 内部でcontentEditable使ってる
    • Facebook謹製のReactベース
  • Good
    • 一度中間表現に変換するのでmarkdownやhtmlへの対応が楽
  • Bad
    • バージョンアップ激しくてプラグイン同士の干渉つらい
      • マイナーバージョンアップでも死ぬ 
      • package.jsonでチルダ使うな
      • 覚悟が必要
    • React依存なので他のViewライブラリで使うと厳しい

flow-typeでjavascriptに型をつけよう

  • 型はいいよ
  • 既存コードからの移行はTypeScriptより楽

Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話

  • もともとgolangでバックエンド作ってた
  • golang用JSエンジン使ってもSSRできるけど、素直にExpressを間に置いて作った
  • 共通処理
    • view componentはサーバ、PC、スマホで分けたい
    • けど共通部分は共通化したい
    • vue-class-component使って共通部分をdecoratorで注入して解決
      • (react-reduxのconnect的なもの?)
  • メタタグはvue-mata
  • AdSenceはSPA非対応
    • ページリフレッシュなしのAdSenceの更新は禁止されてる
    • AdSence使いたい人はSPAよくないかも
  • APIキャッシュ周りでメモリリークしてた
    • そもそもミドルでキャッシュすべきなのか問題
  • SSR化は割と楽、まあまあ安定
  • KPI
    • PV/セッション上がった
    • 滞在時間変わらない
    • つまり、回遊しやすくなったのでは
  • まとめ
    • SSR+SPAはアリ
    • SEOのため(だけ)にSSRやる、というほどではない
    • メタタグをサーバで作れてさえいればOK

スマホとセンサーWeb Bluetooth APIでさらにセンサーを盛るおはなし

  • ブラウザのサポート
    • GPS、ジャイロ、加速度、照度、近接
  • Web Bluetooth APIで任意デバイス接続できるのでセンサ盛れる
    • お酒センサ
    • Androidの標準ブラウザ/ChromeとMacのChromeで使える
  • まとめ
    • 数行のJSで使えて簡単でいいよ
    • 趣味程度なら

JavascriptとUnityでWebGL試した話

  • Unity5.xからWebGLビルド可能になった
    • 今までブラウザ動作にはUnityWebPlayer(Flash, Silverlight)が必要だった
  • 対応状況
    • Android4.4がネック、他は大体OK
  • asm.jsで高速動作
    • Safari系が対応していないのつらい
    • 対応してなくても動くことは動く
  • JavaScriptとUnityScriptは違う
    • 別の型を代入できない
    • deleteがない
    • 正規表現リテラルがない
    • 詳しくはUnityScript vs JavaScript記事を見よう
  • WebGLとJSの連携
    • Application.ExternalCall()でWebGLからJSコール
    • gameInstance.sendMessageでJSからWebGLをコール
  • LeamMotionのUnitySDKはあるがWebGL書き出し非対応
    • JS側でLeapMotionにつないでWebGLに渡してる
  • Unityについて
    • Tips
      • Unity 5.5 beta-3からPersonalライセンスでも任意スプラッシュスクリーン使えるように
      • JavaScriptからC#に変換できるようになった
    • Bad
      • UnityのUI慣れない
      • UnityScriptはJSと結構違う
      • 結局C#で書いたほうがリッチ
      • ビルドやロード長い
    • Good
      • 3D演算楽
      • 豊富なアセットストア

感想

  • さすがのMac率
  • Viewライブラリ派閥はVue > React > Angulerな印象
  • FirefoxはあんまりShadow DOM対応優先する気ないという話を漏れ聞いて(´・ω・`)