STUDIO KINGDOM

JavaScript/WEBフロントエンド寄りなブログ

© 2017. All rights reserved.

WEBフロントエンドエンジニア向け勉強会 – Frontrend vol.4に参加してきました

Sun, Feb 10, 2013

サイバーエージェントさんが主催するフロントエンド向けの勉強会「Frontrend vol.4」に参加してきました。

前回のvol.3に引き続きの参加で、今回のテーマは「javaScript」でした。

この記事では個人的にピックアップしたい内容だけを紹介しています。全体を通した内容は下記リンク先が非常に参考になります。

「JavaScript Development Tools – JavaScript開発の効率アップ」

登壇者：Layzieさん

Crhrome Developer Tools

まずはChromeのデベロッパーツールですが、同じくサイバーエージェントの吉川さんが既に発表(下記スライド)されていたので、それをふまえつつ、おさらい＋追加情報的な感じ。

Chrome DevTools.next from yoshikawa_t

 

おさらいの中での個人的なメモ

ChromeのProfileは下記の画像のように関数のボトルネックなんかを調べることが出来る。Profileは全然使ってなかったのでこの情報は大変ありがたかったです。自分のローカル開発のスクリーンショットを撮ってみました。
Chrome profile
Chromeの隠し機能一覧URLの紹介。隠しURLがあることは知ってましたが隠し機能一覧を表示するURLがあるとは知りませんでした。
chrome://chrome-urls/

Charles

http://www.charlesproxy.com/

Charles

デバッグ用Proxyで有償$50(試用期間30日)

多機能で全部紹介しきれないので、厳選して2つの機能だけ紹介してくれました。

個人的に調べてみたら、Charlesを紹介している記事を見つけました。

フロントエンドの開発効率が3倍に…！？デバッギングプロキシCharlesの使い方 :: 5509

DocHub

http://dochub.io/#css/

DocHub

フロントエンダー向けなCSS、HTML、javaScript、jQuery等のAPIリファレンスを一箇所にまとめてくれているサイトで、オートコンプリート的な入力欄から検索することが出来るので便利です。

jsPref

http://jsperf.com

javaScriptのパフォーマンス測定をしてくれるサイト。この情報は超ありがたかったです。

特徴として以下のとおり。

勉強会では配列のfor文においてlengthを先にキャッシュした場合と、ループ内で都度lengthが実行されるケースの例を紹介してくれました。せっかくなので、ここではjQuery高速化で割と有名なループ内で都度appendする場合と、1回だけまとめてappendする場合の比較を紹介します。

Test jQuery append performance jsPerf

Test jQuery append performance jsPerf 2

20倍以上違いがあるというの計測結果が出ていますね。

また、ahomuさんが勉強会終了後にこんな情報を呟いてくれていました。jsPerfを自分専用の環境にクローンしてみる ::ハブろぐ

./jq

http://stedolan.github.com/jq/

「jQuery Performance Tips – jQueryにおける高速化 -」

登壇者：@Pocotan001さん

早くするには、「マシンの仕事を少なくしろ」

ファイルサイズを減らす

セレクタのチューニング

findを使ってjavaScriptネイティブの処理を通す方が高速というのは有名な話ですが、更に進んでCSSネイティブの擬似セレクタまで意識するということを紹介してくれました。

更に更に進んで擬似セレクタではなく.first()メソッド、.eq(0)を使用する。

下記のリストは下に行くほど高速になります。

ただし、first()メソッドが速いからといって、.filter()メソッドも速いかというとそんな事はなく逆にパフォーマンスが低下するので注意とのこと。jsPrefなどを使ってしっかり計測することが大事。

リフローの影響を考える

個人的に再レンダリングとか再描画と呼んでいました。リフローというワードがあったんですね。(他のブラウザではレイアウト?)

ちなみに寸法の大きさが変わらずリフローは起こらないが、色や透明度だけが変化するような処理は”リペイント”と呼ばれるそうです。

このリフローの内容も目から鱗の情報でした。

リフローの無駄な発生を抑えることが高速化に繋がるとのこと。jQueryの高速化で必ず言及される「ループ内でappendするな」は、この話と繋がりますね。

Chromeでのデバッガツールでリフローやリペイントの発生状況を観測する方法を説明してくれました。

  1. デバッガツールのTimelineを選択。紫がリフローで、緑がリペイント。これらの発生回数をなるべく減らす。
  2. 左下の●ボタンを押すと赤くなって測定開始。もう一度押せば停止。
  3. 右下にLoading、Scripting、Rendering(リフロー)、Painting(リペイント)があるので、測定に不要なものはチェックを外すと良い。
  4. Events、Frames、Memoryで、真ん中のFramesを選択。縦の棒グラフが表示されるので、この山がなるべく低くなるようにすべき。
  5. Chromeは賢すぎてSafariで複数回発生するリフローを1回に抑えてくれるケースがある。Safariでも同じ機能があるので、こちらもチェックした方が良いかも。

Chrome reflow

その他、メモした情報。

Firefoxによるリフロー動画

発表の中でFirefoxによるリフローの様子を分かりやすくした動画を紹介してくれました。

http://cssreflow.com/

「Testable Javascript – テストしやすいJavaScriptとテストについて -」

登壇者：@cssradarさん

みんな、テストを書こう的なお話

ユニットテストについて

javaScriptのユニットテストツールの紹介

Introduction js

http://pivotal.github.com/jasmine/

http://mitsuruog.github.com/jasmine/（日本語訳）

QUnit

http://qunitjs.com/

  • jQueryのユニットテストで使用されている

Mocha the fun simple flexible JavaScript test framework
http://visionmedia.github.com/mocha/

  • 中級者向け
  • 上記2つに比べ、より高機能?

PhantomJS Headless WebKit with JavaScript API

http://phantomjs.org/ 
<div>
  <ul>
    <li>
      上記のテストツール等と組み合せて、ブラウザ上ではなくCUI上で動作する
    </li>
    <li>
      その分、高速。
    </li>
    <li>
      自動テストも組みやすい。
    </li>
  </ul>
</div>

テストの自動化

https://github.com/studiomohawk/js-testing-boilerplates/wiki

gruntのwatchでユニットテストも自動化。

ユニットテストに触れてみる

https://github.com/studiomohawk/javascript-koans

ユニットテストを使ってjavaScriptを学ぶ。

インテグレーションテストについて（質問）

A.エレメントが正しく移動したかどうかについては、ユニットテストで行うなら処理後に何ピクセル移動したはずとして、移動後の座標を取得・比較するといったテストが考えられる。どちらもいわゆるインテグレーションテストに該当する。最近javaScriptでようやくユニットテストの環境が整ってきた段階で、インテグレーションテストのツールはCasper.js、Cucumber.jsと既に出てきているものの、現段階では納得できる出来では無い。今後に期待したい、とのこと。

CasperJS a navigation scripting and testing utility for PhantomJS | CasperJS 1 0 2

http://casperjs.org/index.html (Casper.js)

Cucumber Making BDD fun 1

https://github.com/cucumber/cucumber-js (Cucumber.js)

Cucumberの事を個人的に調べてみましたが他の言語で使わているテストツールで、これのjavaScript版がCucumber.jsのようです。

「jQuery to Backbone – アーキテクチャを意識したJavaScript入門」

登壇者:@ahomuさん

Webサイト制作者のための HTML5+JavaScriptスマートフォンサイト実践講座

Webサイト制作者のための HTML5+JavaScriptスマートフォンサイト実践講座

  <div class="amazlet-powered-date" style="font-size: 80%; margin-top: 5px; line-height: 120%;">
    posted with <a title="amazlet" href="http://www.amazlet.com/" target="_blank">amazlet</a> at 13.02.11
  </div>
</div>

<div class="amazlet-detail">
  佐藤 歩 杉本 吉章 安藤 建一<br /> 技術評論社<br /> 売り上げランキング: 131,004
</div>

<div class="amazlet-sub-info" style="float: left;">
  <div class="amazlet-link" style="margin-top: 5px;">
    <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774154113/studiokingdom-22/ref=nosim/" target="_blank" name="amazletlink">Amazon.co.jpで詳細を見る</a>
  </div>
</div>

 jQueryの振り返り

jQueryのステキなところ
  • 煩雑なDOM APIを簡単にしてくれる
    1. あるノードを削除したい場合、elemNode.prentNode.removeChild(elemNode);
    2. 自分の親を参照して、その親に自分を消してもらうために、自分を参照させて削除メソッドを実行。
    3. jQueryなら、$(elemNode).remove()　と短くて直感的。
  • クロスブラウザ対応の諸問題を解決してくれる
  • プラグインが豊富！

jQueryでも解決できないフロントエンド大規模開発での問題

  • コードの肥大化
  • スパゲティコードが量産される

MV*の話

TodoMVC
http://addyosmani.github.com/todomvc/ (jsの様々なフレームワークを使用して、同じTODOアプリを作成、紹介してくれている)
と、ここまでMV*の話をされて、今回は「このMVCが正しい」「新しいパターンを作る」といった議論は一旦忘れましょう、とのことでした。

自分も前回の記事でその手の話を書いてしまいましたが、確かにこういった議論をしているのであれば、手を動かして動くものを作るほうが生産的ですよね。

また、Backbone.jsは、Railsのようなフルスタックフレームワークというよりは、1500行と軽量でやさしいライブラリなので、MVCを意識せずに触ってみるのが良いのではとのことでした。

javaScriptのデザインパターンの話

それぞれいくつかパターンをピックアップし、丁寧な解説をしてくれました。ここでは、TL上でリンクされていた海外のjavaScriptのデザインパターンのリンクを貼り付けておきます。

Github APIを使ったGistビューアーのアプリケーションをBackbone.jsで作る

jQueryだけで書かれたソースコードをBackbone.jsに書き換えていくデモを動画を使いつつ説明してくれました。

流石に資料のソースコードをここに貼り付けるわけにはいかないので、後日資料が公開してくださるとのことなのでそれを待ちましょう。

Backbone.jsのすすめ

Backbone js

  • Backbone.js has made me a better programmer
  • 「◯◯を使ったら、背が伸びました」的なノリで、「Backbone.jsを使ったら、構造化された綺麗なコードを意識して書けるようになりました」といった効果が期待できる。

Backbone.jsの参考リソース

まとめ

  • 登壇者の方自身が海外の情報や技術を調べあげ、実戦で取り入れた事を紹介してくださるので、非常に内容が濃かったです。
  • 最新の技術を追っかけているだけでなく、自分達で実際に試して試行錯誤を繰り返している様子が伝わって来ました。
  • ピザ…(´；ω；｀)
  • ahomuさんは愛知のエンジニアみんなのアイドル的存在(隣の席の愛知のエンジニアさん談)

以下、どうでもいいこと。

  • 渋谷マークシティはダンジョン
  • 渋谷道玄坂近辺で美味しいと噂のラーメン屋「はやし」で昼食をすまそうと思ったけど10人ぐらい行列ができてて断念

登壇者の皆さん、スタッフの皆さん、ありがとうございました！