Posted at

初夏のJavaScript祭2017 参加メモ

More than 1 year has passed since last update.

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

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対応優先する気ないという話を漏れ聞いて(´・ω・`)