JSオジサン #2に参加してきたメモ

Welcome LT（19:10〜20:00）kyo_ago

  • application cache と MitM
  • ApplicationCacheのgetterを潰す事で更新の妨害

君よ知るや JScript.NET – hebikuzure

  • MSのサーバーサイドJS

MSのクライアントJS

  • WSH
  • HTA
  • JScript.NET

JScript.NETの特徴

  • 変数の型宣言が出来る
  • 定数
  • classが作れる
  • Typed Array
  • コンパイルして実行ファイルを生成出来る

ダメだったところ

  • IDEがJScript.NETをサポートしてない

jSCript.NET

  • Visual Studio 2005をインストールすると実行出来る
  • exeファイルが作れる

JSRelを使って完全オフラインなブラウザアプリ – 西小倉宏信

JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2

  • オフラインで動いて欲しいウェブアプリの要件
  • JSRel というライブラリ
    • localstorage, node, titanium等で動く
  • 完全オフライン版
    • HTMLとかCSSとか画像とかを全部まとめたもの
    • オフラインで動いてエクスポート出来るようなアプリj

JavaScript関数コールの追跡 – kobayan_tokyo

Java script関数コールの追跡
Java script関数コールの追跡（改）

  • 関数コールの流れをざっくり見たい

手法

  • ブレークポイントを貼る
  • 関数をラップ
  • Function.prototype.callを書き換え

関数ラップ

  • windowからみえる関数に対してひらすらラップしていく
  • ブックマークレット的にtraceを動的に追加する
  • 関数がどこから呼ばれたのか – コールスタックがみえる

あの「note」はAngular.js – takamario

  • note
  • リリース時にXSSが話題になったサービス
  • Angular.jsを使った
  • OGP
    • botに対してはPhantomJSのレンダリングを返してる
    • [“note”がAngularJSでどうやってSEO, Open Graphの対応をしているか｜和田 晃一良｜note][8]

JSと仲良くなるための心得 – あみみみ

[ニーソニーソ素敵なニーソ][9]

  • JavaScript勉強したい人向け
  • ニーソ脱ぎゲーム
  • 仕様を考えてから実装した

Web Audio APIとGithub Contributionsをマッシュアップしてみた – kubosho_

  • Gitub Contributions Music
  • どれだけContributeしたかを耳で聴くサービス
  • Contributionするほど音が大きくなる
  • APIがないのでsuperagentで持ってきてJSON化してる
  • JSONを元にWeb Audio APIで鳴らしている

みんなが調べないJS調べてみた – can_i_do_web

  • 女子小学生(JS)というフレームワークについて
  • 日本語ドキュメントが豊富
  • MVC
    • Model – 命名規則が曖昧
    • View – UIは親の影響をウケる
    • Controller – 厳しく管理されてる
  • 実績は豊富にある

いまさらGruntの話 – 松本慶一郎

[Prott – Rapid Prototyping for Mobile Apps][10]

  • Gruntで使われてるライブラリの紹介
  • coffee-script
  • grunt-ngmin
  • coffee-lint
  • sass
  • grunt-autoprefixer
    • caniuseから自動的にprefixを使う
  • jade
  • usemin
    • js等を圧縮してくれる
  • imagemin
    • 画像のminfiy
  • svgmin
  • connect-proxy
    • railsと繋ぐところ

TIPS

  • 便利でーす
  • generator-anglar大体そのまま

便利

俺がほしいライブラリがない！ – mizchi

[俺の望むライブラリがない！ // Speaker Deck][11]

  • CoffeeScript
  • brunch
  • cordova
  • snap.svg

最近のフロントエンド開発スタック

  • ビルド管理ツールなどが色々ありすぎる

試す時はsandboxリポジトリに突っ込んでる

  • 世の中に欲しいライブラリがない

momic

  • ActiveRecordっぽい

Warden

  • chapin.jsのルーターを持ってきた
  • Vue.jsと一緒に使うため
    • そのうちに公式でつく

libretto

  • 非同期コントール
  • ユーザーとのイベントをステートマシーン的に書く
  • 抽象度高い

TypedCoffeeScript

  • CoffeeScriptに型チェック
  • 静的に型チェックを行える
  • CoffeeScriptReduxの拡張として始めた
    • CS AST JS ASTいじり
  • TypeScript importer

他

  • [dts-parser][12]
    • d.tsをJSONにするツール

ライブラリを提供することについて

  • 相手の環境を制限しない(モジュール)
  • ランタイムが大きいaltJSが多い。
  • 提供する時はJavaScriptで
  • bower/npmパッケージ化

テスト用ライブラリ power-assert とその新機能(仮) – t_wada

[テスト用ライブラリ power-assert][13]

  • chaiのassertionの数が無駄に多い
  • ライブコーディング

chaiとassertとpower-assert

  • chai
    • テストコードが冗長
    • 失敗時の情報が豊富
  • assert
    • テストコードがシンプル
    • 失敗時の情報が少ない
  • power-assert
    • テストコードはassertそのままに
    • 失敗時の情報は多い

テストはただでさえ面倒なのに、テストコードが複雑だとより書かなくなってしまう。

power-assertの目的

  • 書く時は簡単
  • 落ちるとはうるさく

BDDフレームワークは語彙の繁栄と暴走を生んだ

トークセッション
JSにいさん〜最近生まれたWebサービスのエンジニアたち〜（21:00〜21:30）

その他

帰りにブラウザの内部実装はどこ見るのがいいのかという話をしてた。

前提として[ブラウザのしくみ: 最新ウェブブラウザの内部構造 – HTML5 Rocks][14]はちょっと古く、JavaScriptについては書いてないので他のが欲しい。

  • Mozillaの[servo Wiki][15]がドキュメント多い
  • Chromium [For Developers – The Chromium Projects][16] も
  • Webkitの話は[Surfin’ Safari – The WebKit Blog][17]にたまに書かれる
  • これぐらいしかない感じ
  • Webkit/Blink Weeklyが止まってしまったので追いにくい
    • [Peter Beverloo][18]
    • [Lastweek | DarKtears][19]
    • [Meta Weekly][20]
  • peterさんの所にコミットログをまとめてる[Latest interesting Chromium, Blink, v8 and Skia commits][21]というがひっそり動いてる
    • [Blink, Chromium, Skia and v8 statistics][22]
  • 最近は[blink-dev – Google グループ][23]に”Last week in Blink intents”というのが立つのが便利
  • [myakura][24]システム期待しましょう
  • [Planet Mozilla][25]とか

知見

  • [blink-dev – Google グループ][23]
  • [mozilla.dev.platform – Google グループ][26]

[8]: https://note.mu/wadako/n/n01733b19bc9c ““note”がAngularJSでどうやってSEO, Open Graphの対応をしているか｜和田 晃一良｜note” [9]: http://www55.atpages.jp/suisuiami/nisogame/menu.html “ニーソニーソ素敵なニーソ” [10]: https://prottapp.com/ “Prott - Rapid Prototyping for Mobile Apps” [11]: https://speakerdeck.com/mizchi/an-falsewang-muraiburariganai “俺の望むライブラリがない！ // Speaker Deck” [12]: https://github.com/mizchi/dts-parser “dts-parser” [13]: http://www.slideshare.net/t_wada/power-assert-jsojisan2 “テスト用ライブラリ power-assert” [14]: http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ “ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks” [15]: https://github.com/mozilla/servo/wiki “Home · mozilla/servo Wiki” [16]: http://www.chromium.org/developers “For Developers - The Chromium Projects” [17]: https://www.webkit.org/blog/ “Surfin’ Safari - The WebKit Blog” [18]: http://peter.sh/ “Peter Beverloo” [19]: http://darktears.wordpress.com/tag/lastweek/ “Lastweek | DarKtears” [20]: https://azu.github.io//Meta-Weekly/ “Meta Weekly” [21]: http://commits.peter.sh/ “Latest interesting Chromium, Blink, v8 and Skia commits” [22]: http://commits.peter.sh/stats/ “Blink, Chromium, Skia and v8 statistics” [23]: https://groups.google.com/a/chromium.org/forum/#!forum/blink-dev “（99+）blink-dev - Google グループ” [24]: https://github.com/myakura/matthiola “myakura/matthiola” [25]: http://planet.mozilla.org/ “Planet Mozilla” [26]: https://groups.google.com/forum/#!forum/mozilla.dev.platform “（99+）mozilla.dev.platform - Google グループ”