第3回.js系開発技術勉強会 #techbuzz に行ってきました

• 【増員】【TechBuzz】第3回.js系開発技術勉強会 〜先行事例紹介／交流会〜 yeomanでフロントエンド開発を効率化する方法 / CoffeeScriptとTypeScriptの比較 / tmlib.js at http://www.socialtoprunners.jp/ : ATND
• 【TechBuzz】第3回.js系開発技術勉強会 まとめ - Togetterまとめ

過去2回の内容はこちら。

• 第2回.js系勉強会 #techbuzz に行って来ました - @thorikiriのてょりっき
• 【TechBuzz】第1回.js系勉強会 #techbuzz に行ってきました - @thorikiriのてょりっき

以下メモった内容を。

yeomanでフロントエンド開発を効率化する方法

資料→yeomanでフロントエンド開発を効率化する方法

• フロントエンド開発の課題
  • 色々な新しい技術が次々と出てくること
  • それによってビルドプロセスが複雑になってしまうこと
    • SassやLESS、CoffeeScriptやTypeScriptなどなど
• yeomanとは
  • The web's scaffolding tool for modern webapps | Yeoman
  • フロントエンド開発で有用なツールをまとめてたものです。
  • 色々と有名所のツールをサポートしている
• インストール
  • curl -L get.yeoman.io | bash
  • 依存関係をチェックしてくれる。けれども自動でインストールはしてくれないので、手動でインストールする。
  • Windowsではちょっと厳しいかも。
• プロジェクト作成
  • yeoman init
  • オススメライブラリを自動で入れてくれる。
• サーバ起動
  • yeoman server
  • サーバを起動してくれて、自動でブラウザも起動してくれる。
  • リソースを変更すると、自動でブラウザをリロードしてくれたりする。
• ビルド
  • yeoman build
  • CSS等のリソースは、ブラウザキャッシュ対策した名前が自動でつく。
  • JavaScriptとかは、まとめるように記述しておけば纏めてくれて、圧縮もしてくれる。
• パッケージ管理
  • yeoman install jquery など
  • 内部では、bowerを使っている。
    • http://twitter.github.com/bower/
  • component.jsonに依存関係を記述しなければならないが、yeomanでは今のところやってくれない
    • バグかも？
  • なので、現在はbowerのコマンドを直接叩く方が良いかもしれない。
    • component.jsonに自動で追加してくれたりする
• 拡張する
  • gruntが使われている
    • Grunt: The JavaScript Task Runner
  • リソースを変更して保存すると自動でテストしてくれたりとかを記述出来る
  • watchのところに記述する
    • サーバ起動時にwatchに書かれている内容を監視するようになる
• イマイチなところ
  • まだまだ不具合がある
  • ビルドタスクをカスタマイズ出来ない
    • まだまだ新しいものなので、今後に期待
• setapp
  • Setapp | Techies, Apps, Tools
  • ツールの情報共有サイト
  • 便利ツールをここで探せる、是非利用しよう。
• Q&A
  • 実行アプリは何かに依存しますか？
    • 開発自体は色々なツールを組み合わせているので依存していますが、実行するアプリは特に依存しません。
    • パッケージを追加しなければ、普通のHTMLとCSSとJavaScriptです。
  • Rails等との連携は出来ますか？
    • Rails等のテンプレートを開発したもので差し替えれば可能です。
    • サーバ側はJSON APIを提供するだけのアプリのフロントエンドに向いているかもしれません。

CoffeeScriptとTypeScriptの比較 (仮)

資料→ まだアップされてなさそう？

• 前置き
  • あんまり比較するものでもないかも知れないので参考までに。
  • 開発するチームや組織によっても色々あるかと思います。
• 作者
  • TypeScript
    • C#とかDelphiとかの生みの親のMSのアンダース・ヘルスバーグさん。
  • CoffeeScript
    • Jeremy Ashkenasさん。
• 特徴
  • TypeScript
    • 静的型付け言語である。
    • クラス宣言、モジュールがある。
    • VisualStudioで開発出来る。
    • Flash ActionScriptに近いイメージ。フラッシャーさん、Flexの人は馴染みやすい。
  • CoffeeScript
    • SugerSyntaxなどを利用して、コード量を減らすようにしている。
    • RubyやPythonに近い感じ。
  • 簡単なコードをコンパイルして比較すると、改行やスペース等を除けばほぼ同じJavaScriptが出来上がる。
  • TypeScriptだと^Mが…、さすがMSさんですね。
• 習得しやすいか
  • TypeScript
    • 特に覚えなくても使える。
    • JavaScriptを書いてもそのまま動かすことが出来る。
    • しかし、型には注意する必要があり、同じ変数に数値と文字列などを入れてたりするとダメ。
    • 他のライブラリを組み込んだ時にもどうようの注意が必要で動かなかったりする。
    • 本家のサンプルが充実している
    • まだ日本語の情報があまりない
  • CoffeeScript
    • JavaScriptとの互換性は一切無い別物である。
    • 日本語の書籍がある。ただし、あまり評価は高くない。
    • 日本語の情報も多い
    • The Little Book on CoffeeScriptの日本語訳が無料で公開されている
    • The Little Book on CoffeeScript
• 開発環境
  • TypeScript
    • VisualStudioがメイン
    • Sublime Text、Vim、Emacsの拡張がリリースされているが、ハイライト機能くらいのもの。
  • CoffeeScript
    • Emacs、Vim、Eclipse、NetBeans、WebStormの拡張・プラグインがあって開発出来る。
    • 歴史がそれなりにあるので、開発環境は充実している
• 他のライブラリとの連携
  • TypeScript
    • 静的型付け言語なので、定義ファイル（Interfaceファイル）を書く必要がある。
    • jquery等の主要なライブラリのものは提供されるので、そのまま使えば良い。
  • CoffeeScript
    • HTMLに読み込ませておけば良いだけで、そのまま使える。
• 継続性
  • TypeScript
    • MSだし・・・。
  • CoffeeScript
    • Railsに組み込まれているなどの実績があるので、なくなることはないと思われる。
  • 実際にどうなるかはどちらもわかりません。
• 感想
  • CoffeeScriptに型が欲しいです。

CoffeeScriptファーストガイド モダンJavaScriptによるアプリケーション開発 (NEXT-ONE)

tmlib.jsについて

資料→tmlibjs by phi

• tmlib.jsとは
  • JavaScriptのライブラリです
    • グラフィックス関係
    • ゲーム開発
    • ツール開発
    • HTML5 Canvas関連とか、jQueryっぽい機能とか。
    • ベクトルとか。
• ライブコーディング
  • 音楽を流しながら！テンション上がるので。
  • 避けゲーを作る。
  • 70ステップくらいで簡単に実装してました。
    • ライブコーディング | tmlib.js プレゼン | 【TechBuzz】第3回.js勉強会 - jsdo.it - Share JavaScript, HTML5 and CSS
• 今後
  • ライブラリの高速化とか
  • 国民全員プログラマ化が目標
    • 誰でも簡単に作れるように！
• Q&A
  • enchant.jsとの比較は？
    • enchant.jsは最低限の事が出来るようになっていて、プラグイン等で拡張するように出来ている
    • tmlib.jsは結構ガッツリで、はじめから結構なことが出来る
  • スマートフォンでのパフォーマンスは？Galaxy S2では結構カクカクでした。
    • 最新の機種で問題なく動く程度を考えている

enchant.js開発のレシピ―115個のレシピで学ぶPC&スマホゲーム開発の極意

enchant.js スマートフォンゲーム開発講座 PRO対応 (SMART GAME DEVELOPER)