初めてのシステムと日記

システムも日記も初めてです。

Frontrend Vol.4 に参加してきた

jQuery Javascript

Frontrend Vol.4 powered by CyberAgent, Inc. : ATND
http://atnd.org/events/35720

今年初めて参加するセミナーということで、
サイバーエージェントさんが主催するフロントエンド系技術セミナーに行ってきました。


「JavaScript Development Tools – JavaScript開発の効率アップ」 平木 聡さん

「JavaScriptツール初心者から脱初心者へ」という目的で、
JavaScript開発の効率アップが図れるGUI•CUIツールを紹介になります。


JavaScript開発に役立つGUIツールの紹介

■Chrome Developer Tool

■Charles

  • http://www.charlesproxy.com/
  • デバッグ用Proxyサーバーをローカルに立てれる
  • MapLocal
    • URL先のファイルとローカルファイルを掏り替えれる
    • AutoResponderと同様の機能
  • Throttle
    • 回線速度のエミューレート
    • 3G相当の通信の遅さでサイトを見るなどが出来る

■DocHub

■jsFiddle

■jsPerf

■browserling

  • https://browserling.com/
  • 各ブラウザでのテストが可能
  • おそらく社内のみの環境とかではテスト無理な気がします


JavaScript開発に役立つCUIツールの紹介

■JSHint

% brew install node
% npm install -g jshint
% jshint -v
0.9.1
% jshint wrong_pattern.js
wrong_pattern.js: line 2, col 3, Expected 'WIN' to have an indentation at 5 instead at 3.
1 errors


■jq

  • http://stedolan.github.com/jq/
  • JSONプロセッサ
  • JSONの結果をクエリで操作
  • 色んなサービスのAPIからのレスポンスデータを解析するのに便利そうです
% brew install node
% jq --version
jq version 1.1
% cat twitter.json | jq '.' // 見やすく整形
% cat twitter.json | jq '.results[0]' // 1つ目のデータを整形
% cat twitter.json | jq '.results[0]  | {from_user, text}' // 1つ目のデータの指定項目を整形


■Doctor JS

% npm install -g jsctags
% jsctags demo/doctorjs


■Yeoman

  • http://yeoman.io/
  • Webアプリケーション作成支援ライブラリ
  • 既存ライブラリを組み合わせて開発されている
    • Web App (default)
    • AngularJS
    • Backbone
    • BBB (Backbone Boilerplate)
    • Chrome Apps Basic Boilerplate
    • Ember
    • Jasmine
    • Mocha
    • Testacular
% npm install -g jsctags
% curl -L get.yeoman.io | bash


最近のJavaScript開発には役立つツールがあるので、
そのツールを上手く使う事で効率化を図ることが大切。
そしてCUIツールは「黒い画面」だからといって
尻込みせず使うと幸せになれる、とのまとめでした。


「jQuery Performance Tips – jQueryにおける高速化 -」 水野 隼登さん

パフォーマンスチューニングには必ずトレードオフが発生する(可読性が低下する等)、
JavaScriptよりjQueryを使っている方が多い、
その前提を基にjQuery Likeを保ったままのパフォーマンスチューニングに関するお話です。


ファイルサイズを減らす

  • モバイルデバイスにおいて、1kbにつき1msのパース時間が発生
  • jQueryのバージョンによってファイルサイズが異なる
    • 1.9 → 33kb
    • 2.0 → 30kb
  • IE6-8対応用スニペットによるjQueryファイルの出し分け
    • ブラウザに適したファイルサイズの小さいjQueryファイルが呼び出せる
<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--[endif]-->

% grunt custom:-ajax,-css,-deprecated,-dimensions,-effects,-offset


セレクタのチューニング

  • 速いセレクタランキング
    • JavaScriptのネイティヴのメソッドを使ってるか、全検索するか、jQuery独自セレクタを使うかどうかでパフォーマンスが違ってくる
1. $('#id')
2. $('tag')
3. $('.class')
4. $(':first-child')
5. $(':first')

  • 例
$('#target p') → querySelectorAll が使われる
 ↓
$('#target').find('p') → getElementById+.find()+getElementsByTagName

  • キャッシュも活用する
var $target = $('#target'),
$p = $target.find('p');


リフローの影響を考える

  • CSS Reflow - jQuery.com http://www.youtube.com/watch?v=ILvF25ljaoM
  • 描画のフローは段階的に行われている
  • リフローが発生する可能性のあるトリガー
    • CSSの変更/取得 css().addClass(),show(),animate()...
    • DOM要素の操作 html(), text(), append(), focus()...
    • 特定のプロパティの取得 offset(), position()...
    • ユーザー操作 ウィンドウサイズの変更,スクロール,テキスト入力
  • 不要なリフローを避ける
    • CSS()は1回にまとめる
    • リフローが必要な取得系メソッドはキャッシュして使い回す
    • body閉じタグ直前ではなhead閉じタグ直前に記述
  • ボトルネックを解消する
    • 描画コストの高いCSSプロパティ
    • アニメーション
    • ループ処理


最後の戒めの言葉がとても印象的でした。

「小さな効率は忘れよう。
時間の97%について語ろう。
早まった最適化は諸悪の根源だ。 」TONY HOARE（？）


「Testable Javascript – テストしやすいJavaScriptとテストについて -」 斉藤 祐也さん

テストしやすいJavaScriptとは


ユニットテストツールとテスト


ユニットテストツールは色々ありますが、
どのツールにも得意不得意はあるのでとりあえず書いてみる事が重要であること、
テスト自動化という環境を整えれば言い訳しづらくなる等、
JavaScriptのテストはまだ日が浅いとは充実しつつありますね。

僕の感覚的には、リファクタリングしても動作が保証出来るテストを書く事が重要、という印象を受けました。


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

Backboneについて

  • http://backbonejs.org/
  • 構造化の手段を提供するライブラリ → MVC
  • 軽量さといじりやすい柔軟さが売り

jQueryの特徴と役割

  • DOM APIを簡潔に書ける
    • JavaScriptは書けないけどjQueryは書けるという人多そうですしね
  • クロスブラウザの諸問題を解決してくれる
  • プラグインの充実とエコシステム形成
  • 逆にjQueryでも解決してくれない問題もある
    • コードの肥大化
    • スパゲッティーコード
    • テスト
    • メンテナンスのしづらさ
    • →フロントエンド実装の比重が高まってきたため

JavaScriptにおけるMV*の現状

アーキテクチャとデザインパターン

  • Facade 複数の処理をまとめる
  • Singletion ただひとつのオブジェクト
  • Flyweight インスタンス生成
  • Observer イベントを監視
  • Mediator イベントを仲介
  • 急に取りかかるのは難しい → Backboneで実践してみる

Backboneにおけるコンポーネント

  • View
    • 見た目とUIにおける入出力
    • DOM要素の管理
    • イベント制御
  • Model
    • 取り扱うデータの最小単位
    • ストレージとの通信、同期
    • APIやレコードの情報を表現
  • Collection
    • Modelが集合したリスト
    • リスト操作(filter,where..)
  • Router
    • URLによるルーティング


実践踏まえBackboneを紹介してもらいましたが、かなり分かりやすい印象、
かつ既存のjQueryコードをbackboneへ移行というのもそこまでコストかからず出来そうでした。