第4回ブラウザー勉強会

第４回「ブラウザー勉強会」 on Zusaar に参加してきたので、その時のメモです。

午前の部 : コミュニティ セッション

オフラインキャッシュについて – hebikuzure

Content.IE5

  • IEのキャシュデータ構造はIE5から変わってなかった
  • Window2000 の頃と同じ

IE10のキャシュのシステム変更

  • IE10ではキャッシュのシステムを変更されてる

Content.IE5の中身

  • index.dat
    • インデックスファイル
  • 英数8文字のキャッシュフォルダ
    • 実際のファイルが並んでる
  • 4個つづキャッシュフォルダを作ってキャッシュを書き込む

キャッシュの情報はどこ?

  • 最終更新日時とかのメタデータはどこ?
  • index.datに含まれている
    • バイナリファイル
    • データ構造は非公開

index.dat

  • キャッシュフォルダ名はそのままアスキーコードで入ってたり
  • HTTPのレスポンスヘッダも大体そのまま入ってる
  • index.dat フォーマット(非公式)公開されてる

IE10のキャッシュシステム

  • index.datはなくなった
  • container.datという0バイトになってある
  • キャシュされた実ファイルはそのまま

プロセスモニター

  • WebChaceV01.data
  • Jet BlueというMSの内蔵データベース
  • IE10のキャッシュはJet Blueのデータベースで管理してる
  • WebCache01.datというファイルがある

ログ

  • V01.log
    • バイナリとレスポンスヘッダーとかがアスキーコードでそのまま入ってる

まとめ

  • IE10で一時ファイルの管理方法が変更される
  • IE自体もタブとかでマルチプロセスなので、古い方法はキャッシュが壊れる原因になってあ
  • インデックス管理はindex.datのバイナリファイルからExtensible Storage EngineのISAMデータベースに変更
  • インデックスが堅牢になった

Office365 – もくだい

午後の部

アンケート結果

  • Chrome > Firefox > IE > Safari > Opera
    • 重複解答有り
  • 1ブラウザ主義はChromeだけ突出
  • マルチブラウザ主義の場合はFirefoxとChromeが均衡

JavaScript

領域の拡大

  • サーバーサイド
  • ローカルアプリケーション

JavaScriptのトランスコンパイル

JavaScriptへ変換する変換言語

  • シンタックスシュガー
  • 静的型付き言語
    • Haxe
    • JSX
    • TypeScript

「モテる、JavaScript-」- 物江修さん

目的

  • 他人に見られて恥ずかしくないコードを書く
  • カコイイJavaScriptコードを書いてモテる

知っておきたい慣例的な命名規則

  • 変数名はキャメルケース
  • コンストラクタ関数は大文字から始める CalendarCtrl
  • this

    • vat that = this;

  • 定数は大文字
  • プライベート
    • _private

変数/関数

  • 関数: 動詞を先頭に入れる
  • 変数をあえて_で区切ることでわかりやすくする

変数を宣言する場所

  • var で変数を宣言する
  • 変数宣言を関数の先頭にまとめる
  • JavaScriptの変数スコープは関数単位でhositingが起きるので先頭に書く

中括弧の書き方

暗黙的セミコロンの挿入による意図と反する動作を避けるため

function main (){
    return {
        // returnの後に暗黙的にセミコロン挿入があるので気をつける
    }
}

中括弧の省略は避ける

  • 他の人が書き換えるときに間違える元となったりする

DOMアクセスについて

  • 複数回同じにDOMにアクセスするときは変数に入れておきましょう
  • jQueryとかはDOMにアクセスする周りで色々やるので効果的

かっこいい書き方

  • 曖昧評価の利用
    • if(hoge){}
  • 短絡評価の利用
    • hoge || "default
  • 厳密等価演算子
    • === !===
  • 即時実行関数

クロージャー

  • 部分適応を使った例

メソッドチェーン

  • thisを返す関数を書いてメソッドチェーン

最近の書き方

  • オブジェクトで分けていく
  • init で初期化処理を行う

JavaScriptはページ表示時かイベントから呼ばれることが殆どなので、
初期化処理をまとめておくのが重要

JavaScriptがもっと好きになる。JavaScriptを知るために – kyo_ago

「JavaScriptを知るために」

=> 「作ってみる」

=> 「静的解析しましょうか」

静的解析とは

コードを文字列として分割してどういった内容が書かれてるかを解釈すること

を 正規表現 で

エスケープのエンコード

文字列の中に " のようなエスケープ文字列があると、
対応をちゃんと見ないと行けないので、最初に 別の 記号的なものに変換しておく

使い道

  • 簡易プリプロセッサ
  • console.logの除去等
  • 言語の仕様の理解
  • 文字列処理のノウハウ

難しい所

  • /**/
  • var hoge = 5 / 1; /* comment */
  • /[/]]/

結論

Esprima を使ったほうがいい

いつソースを読むのか – kyo_ago

ブラウザの特性で公開されてるプロダクトのソースを読むことができる

  • 新規プロダクトごとに少しずつコードがよくなってる
  • ライセンスを圧縮時に消してしまってること等

コードを読む文化

  • 動いてるプロダクトコードを直接読める世界は今まで殆どなかっtあ
  • フレームワークなどが標準で圧縮されてるようになって読みにくくなってる
  • 圧縮する前に1ファイル化 + gzipで十分な場合もある。
  • 圧縮前のソースをコメントに入れておく
  • SourceMapを使う

テンプレートエンジンを作ろう – kyo_ago

テンプレートエンジンとは何か

テンプレートエンジンとはデータとテンプレートをあわせて表示する

mustache.js、

テンプレートエンジンを作る

簡単な言語実装ができる

  • テンプレートエンジンはロジックが入るならある種のプログラムになる。

TDDと相性がいい

  • ロジックのみに集中しやすい
  • 処理が基本的に同期処理なのでテストしやすい
  • どういう機能が必要なのか、input / outputがわかりやすい

文字列処理の練習

  • 文字列処理の練習に鳴る

テンプレートの仕様

仕様によってテンプレートエンジン作成の難易度が変わる

テンプレートエンジンとテスト

  • テンプレートエンジンはテストがそのままドキュメントになりやすい
  • input -> outputがわかりやすいため

白石の異常な愛情 または私は如何にして心配するのを止めてNodeを愛するようになったか – 白石 俊平

  • 敵役がいたほうがプレゼンが盛り上がる
  • Node vs Java

Node

  • JavaScriptコードはツギハギだらけになる
  • 逆に考えるんだ
  • ラピッドスタートをそのままにコードに持ってこれてぐちゃぐちゃだけど動くコードを書ける

ラピッドスタート

  • npmで便利なモジュールを取ってこれる

変更容易性

  • クライアント/サーバで言語脳の切り替えが不要
  • JSONで直接データベースに格納できる
    • インビーダンスミスマッチが起こらない

その他の良いところ

  • 日本語のリソースが豊富
  • 対応してるクラウドサービスが豊富
    • Windows Azure/Node Ninja…
    • 決定を遅延できる

JavaScriptでもWindowsアプリ作りたい! – mayuki

JavaScriptでアプリを作りたい

  • JavaScriptが色々な所で動かせる
  • パッケージで配布、ウェブではなくてネイティブでしか出来ないことをしたい
  • 他のものと共通したコードが使えるかもしれない

アプリケーションの種類

  • コンソールアプリケーション
  • Windowsアプリケーション
    • GUIアプリケーション
  • その他(ガジェット、ウィジェット)

コンソールアプリケーション

GUIが必要なCLIのアプリ

  • Node.js
  • JScript/JScript.NET

Node.js

  • 特徴と利点
    • npmで豊富なライブラリ
    • エンジンがV8なので高速、新しい文法が使える
  • *nix系っぽい色がある

JScript

  • Windowsには必ず入ってる
  • COMとの親和性がよい

欠点

  • JScript 5.7相当なので色々ショボイ
  • ネイティブに干渉にはCOM経由になる

JScript.NET

  • NETFrameworkのパワーがある程度利用できる
  • JScript 5.7より文法が強化されてる

欠点

  • MSのやる気がない

HTMLアプリケーション (HTA)

IEのエンジンを使った枠を提供するもの

  • Windowsなら必ず入ってる
  • htmlがそのまま動く

欠点

  • 環境のIEのバージョンに依存
  • exeにはならない
  • IE10だと機能制限がある

Windowsストアアプリ

  • Windows8向けの配布・販売できる
  • 枠となるアプリが不要
  • Windows Runtime(WinRT)でネイティブで動かせる

欠点

  • 要 Windows8

Chromium Embedded Framework

  • アプリにChromiumを組み込むライブラリ
  • Chrome相当でリッチなUIが作れる

欠点

  • 枠のアプリケーションを自分で用意する必要

利用点

  • ネイティブの機能を使いたい
  • ロード機能を使いたい

AppJS

  • Chromium Embedded Framework + Node
  • マルチプラットフォーム
  • アプリケーションの枠をJavaScriptで作れる

欠点

  • 動作が不安定

XULRunner

  • マルチプラットフォーム
  • HTMLとXULで作れる
  • アプリケーションの枠は用意されてる

欠点

  • 使うまでのハードルが若干ある
  • XPCOMと仲良くなる必要がある

Adobe AIR

  • マルチプラットフォーム
  • Webkitを持ってるのHTMLとJSで作れる
  • ランタイムを含む実行ファイルを含めたファイルを作れる
  • アプリケーションの枠は用意されている

欠点

  • Adobe AIR

LT

新しいOfficeはJavaScriptで動くんです！ – 野呂清二

  • Officeストア
  • Office 内でHTML+JavaScriptで動くアプリが動いて

Office + JavaScript

  • JavaScriptでExcel内で動くアプリ
  • Eventを使って色々連動

Offfice JSライブラリ

お前は今まで入力したselfの数を覚えているのか – hokaccha

var self = this;

thisが代入されてる変数名を調査するツールをesprimaを使って書いた

私の愛するfor文たち – 川田寛

私の愛するFor文たち

  • モテるfor文

  • 線形探索

  • iterator

  • ポインター

おわり