Inside Frontend #1 に参加して

Inside Frontend #1にブログ絶対書く枠として参加した。この勉強会はただセッションを聞くだけではなく、AMA(Ask Me Anyting)といって参加者がその道に精通している人たちとコミュニケーションをとれる機会が設けられていることが良かった。またセッションは選択式になっており自分の好きなセッションを選択できた。自分が参加したセッションは以下の通り

  • Web over ServiceWorker
  • Polyfills are part of the web
  • フロントエンドの課題を啓蒙する方法
  • アメブロ2016: 実録、アメブロフロントリニューアル275日
  • React.js
  • karmaを使ったSPA向けのE2Eテスト技法
  • WebGL/WebVR for FrontEnd Engineer

Web over ServiceWorker

ServiceWorkerとはBackgroundで動くJavaScript。

この技術をつかうことで、ブラウザ上の変わらないコンテンツをキャッシュしておき、変わった部分だけを取得してきたりだとか、Offlineの時でもアプリのようにサイトを表示することができるらしい。ただ、仕様もまだ定まってないし、iOSでのサポート状況がよろしくないのでもう少し様子見。



Polyfills are part of the web

まだブラウザでサポートされていない技術を先行実装する技術がPolyfill。そのPolyfillはいつの段階で使うのがいいかという話。各ブラウザベンダーはいろんなサイトに迷惑をかけないようにいろんな機能を実装しているという話から入った。例えば、配列の中に該当する値があるかどうかを検索する、Array.prototype.includesは最初Array.prototype.containsというメソッドになる予定だったらしい。しかし、多くのサイトで少し文法違いのサードパーティ製のArray.prototype.containsメソッドが利用されていたため、Array.prototype.includesに名前が変更されたらしい。このようにPolyfillが時にBrowserの仕様を変えてしまうことがあるため余計なPolyfillは作らないようにしようということを言っていた。余計なPolyfillがあることでBrowserの発展を妨げてしまうことがあるから。Polyfillの実装タイミングは、仕様が転換期を迎えてからがベストとのこと。またPolyfillはnpmなどで定期的にupdateしておいたほうがいいという話も。CDNなどでPolyfillをキャッシュしておけばいいよということも話していた。そこでPolyfill.ioを紹介していた。Polyfill.ioは知らなかった。今後使っていきたい。

アメブロ2016: 実録、アメブロフロントリニューアル275日

これはもともとJavaで書かれていたアメブロのサイトをパフォーマンス向上のため、Node.jsと今のモダンなフロントエンドの技術を使って275日で作り直したという話。 今のマジョリティを得ている技術を使うことで実際に表示速度などのパフォーマンスの向上につながっていることを数字として示していた点が良かった。




フロントエンドの課題を啓蒙する方法

フロントエンドで新しい技術をいかに社内に導入するかという話。このセッションでは「デザインシステム」を例にとってどう社内で啓蒙活動をしていくかという話だった。



例えばデザインシステムを導入する場合、デザイナも巻き込むにはデザイナの視点に立って提案しなければいけないということをおっしゃっていて、その一つの手段としてCraftというSketchと連携できるWebサービスを紹介していた。

karmaを使ったSPA向けのE2Eテスト技法

karmaというテスト実行環境の話。Angularのテスト用のツールだと思われがちだけど違うよという話をしていた。テストには関心があり、以前自分のブログで Nightmareという Electron製のテスト実行ツールを紹介した。


ただ、NightmareはElectronでしか動作しないので、IEやFirefoxなど様々なブラウザでテストをするんだったら、karmaも試してみる必要があるなと感じた。


WebGL / WebVR?for FrontEnd Engineer


このセッションは WebGL でパフォーマンスを上げるにはどうしたらいいかというTipsの紹介だった。以下が小山田さんがおっしゃられていた高速化のためのテクニック

不必要なRenderingをしない

  • ChromeのDevToolでPaintの情報がみれる (Renderingタブから)
  • updateが必要な時だけ再描画

Reduce Drawcalls

  • Geometryのmerge

テクスチャの読み込み回数を制限する

  • Spriteの考え方で一枚の画像で読み込むようにする

GPUで計算する

  • ループが必要なくなる。

3Dモデルの圧縮

  • zipで圧縮する
  • JSで解凍

また、WebGLのモデルをVue.jsのコンポーネントとして作っているのはかなり興味深かった。


感想

とても刺激になった。特にアメブロリニューアルの話は、弊社で作っているCMSの開発フローやパフォーマンスの改善にも繋がる話なので実践できる環境づくりをしていきたいと感じた。
また参加者の人と話す機会があったことも大きな収穫だった。


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →