@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

トップ > javascript

すべての人に知っておいてほしい JavaScriptの基本原則

book javascript

を読みました。さらっと、本当にさらっとね。
すべての人にとはいうものの、主にデザイナ向けに書かれた本なのかな。このシリーズ全般がそうなのかな？
パフォーマンスについて書かれているところは参考になりました。オブジェクト指向でってところもそれなりに良かったんじゃないかなと思います。

すべての人に知っておいてほしい JavaScriptの基本原則

すべての人に知っておいてほしい JavaScriptの基本原則

目次

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

event javascript

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

以下メモった内容を。

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

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

  • フロントエンド開発の課題
    • 色々な新しい技術が次々と出てくること
    • それによってビルドプロセスが複雑になってしまうこと
  • yeomanとは
  • インストール
    • curl -L get.yeoman.io | bash
    • 依存関係をチェックしてくれる。けれども自動でインストールはしてくれないので、手動でインストールする。
    • Windowsではちょっと厳しいかも。
  • プロジェクト作成
    • yeoman init
    • オススメライブラリを自動で入れてくれる。
  • サーバ起動
    • yeoman server
    • サーバを起動してくれて、自動でブラウザも起動してくれる。
    • リソースを変更すると、自動でブラウザをリロードしてくれたりする。
  • ビルド
    • yeoman build
    • CSS等のリソースは、ブラウザキャッシュ対策した名前が自動でつく。
    • JavaScriptとかは、まとめるように記述しておけば纏めてくれて、圧縮もしてくれる。
  • パッケージ管理
    • yeoman install jquery など
    • 内部では、bowerを使っている。
    • component.jsonに依存関係を記述しなければならないが、yeomanでは今のところやってくれない
      • バグかも？
    • なので、現在はbowerのコマンドを直接叩く方が良いかもしれない。
      • component.jsonに自動で追加してくれたりする
  • 拡張する
    • gruntが使われている
    • リソースを変更して保存すると自動でテストしてくれたりとかを記述出来る
    • watchのところに記述する
      • サーバ起動時にwatchに書かれている内容を監視するようになる
  • イマイチなところ
    • まだまだ不具合がある
    • ビルドタスクをカスタマイズ出来ない
      • まだまだ新しいものなので、今後に期待
  • setapp
  • 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
  • 他のライブラリとの連携
    • TypeScript
      • 静的型付け言語なので、定義ファイル（Interfaceファイル）を書く必要がある。
      • jquery等の主要なライブラリのものは提供されるので、そのまま使えば良い。
    • CoffeeScript
      • HTMLに読み込ませておけば良いだけで、そのまま使える。
  • 継続性
    • TypeScript
      • MSだし・・・。
    • CoffeeScript
      • Railsに組み込まれているなどの実績があるので、なくなることはないと思われる。
    • 実際にどうなるかはどちらもわかりません。
  • 感想

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

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

tmlib.jsについて

資料→tmlibjs by phi

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

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

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

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

第2回.js系勉強会 #techbuzz に行って来ました

event javascript

メモを投下。

MVCフレームワークの選択基準と主要フレームワークの特徴

資料→MVCフレームワークの選択基準と主要フレームワークの特徴

  • MVCフレームワーク
    • 流行ってて沢山ある
    • どうやって選んでいいのでしょうか？
    • アプリの要件が大事
    • TodoMVCを実際に写経して選んでみよう
  • Backbone.js
    • コミュニティが大きいのが特徴
    • 実績があるので安心感がある
    • シンプルなので拡張性に優れている
    • しかし、アプリで実装しなければならないところも多い
  • ExtJS
    • UIまわりが充実している
    • UIのHTMLを動的に生成するので、重い。ファイルサイズも大きい。
    • デザインの変更が難しく、SEO対策などもしにくい
    • 業務アプリに向いている
  • Ember.js
    • モデルとビューの依存関係を定義する
    • 双方向バインドが特徴
  • Knockout.js
    • チュートリアルが充実している
    • ディペンデンシートラッキング機能が特徴
      • Ember.jsはコードで依存関係を定義する必要があるのに対して、Knockout.jsでは依存関係を自動的に検出してくれる
  • Anguler.js
    • テストを簡単にする仕組みがある
    • ViewModelとDOMが疎結合である
    • pause関数を使うと実行途中で止められるので、途中のキャプチャ等を取得することも可能
  • その他
    • 沢山あるので資料を参照
  • まとめ
  • QA
    • パフォーマンスは？
      • ExtJSは明らかに重い
      • Backbone.js、Knockout.js、Anguler.jsを比較しているサイトがあった
      • Anguler.jsが重く、他２つは同じような程度であった

Backbone.js+Ruby On Rails + CoffeeScriptではじめるモダンWebアプリケーション

ライブコーディングには魔物が居るよね。
http://rokuro.net/など作っているらしい

  • 問題点
    • ある程度の規模になると色々と問題が出てくる
  • 解決策
  • backbone-railsを使って簡単にやってみるライブコーディング
    • プロジェクトを作成してbundleをインストール
    • backbone-railsを入れる
  • scafold機能が良い感じ
    • テンプレートには、jQueryTemplateが使われていて、自動生成してくれる
    • ただし、コードはCoffeeScriptになる
  • railsのasset-pipelineを使えば、リソースファイルをコンプレスしてくれる
    • また、開発中にキャッシュされてしまわないようにhoge.js?20121001のようにしてくれる
  • SCCS,Sass
    • CSSを作る上で、変数定義が出来る。モジュールも作ることが出来る
  • CoffeeScript
    • Backboneと相性が良い。
      • BackboneはBackbone.Viewとかをextend関数で継承して作るから。
      • CoffeeScriptでの継承に置き換えられる
    • イベント通知された関数から、クラスのメンバ変数を参照することが出来る
    • nullとundefinedのチェックが楽
  • Spine

Backbone.IOでつくるリアルタイムアプリ

資料 → http://hokaccha.github.com/slides/pxg_study_backboneio/
TodoMVCをBackbone.IOで書き換えたもの → hokaccha/todomvc · GitHub

  • リアルタイムWeb ＋ クライアントサイドMVC
  • socket.IO + Backbone.js
  • Socket.IO
    • node.jsで作られたリアルタイム通信モジュール
    • さまざまな環境をサポートしている、HTML5 Websocket、Adobe Flash、Ajax longpollingなどに対応
      • よって、対応ブラウザがすごい。IE5.5でも使えてしまう。検証環境ないのでわかんないけど。
    • 直感的
  • Backbone.js
    • Backbone.Syncを使う
    • CRUDをBackbone.Syncに委譲する
      • デフォルトであれば、RESTなURLにAjax通信を行う
    • Backbone.Syncはオーバーライドが可能
      • LocalStorage Pluginを使えば、localStorageにデータを永続化出来る
    • Backbone.IOに差し替えることで、リアルタイムWebがすぐに実現出来る
      • Ajaxであれば、1対1の送受信になる
      • Backbone.IOだと、接続しているクライアントにブロードキャストされる
  • 実装
    • TodoMVCのBackboneの実装をBackbone.IOで置き換える
    • 数行書き換えるだけで済んでしまう
  • まとめ
    • Backbone.jsで実装したコードはほとんど変更する必要がない
    • リアルタイム通信にsocket.IOで安心
    • ただし、痒いところに手が届かない
    • まだまだ発展途上なわりに、ここ2ヶ月位は更新されていない
  • 宣伝

ステートフルJavaScript

book javascript

を読み終えました。

ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理

ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理

JavaScriptでリッチなWebアプリケーションを開発するための本ですね。
今後ますます求められるところになるかと思います。
HTML5のAPIについても、必要なところは抑えられていますし、MVCフレームワークも3種類について触れられていますので、参考になるのではないでしょうか。
とりあえずは、Backbone.jsで作っていけるようにがんばろうと思いますよ。

目次

  • 1章 MVCとクラス
  • 2章 イベントと監視
  • 3章 モデルとデータ
  • 4章 コントローラと内部状態
  • 5章 ビューとテンプレート
  • 6章 依存性の管理
  • 7章 ファイルの操作
  • 8章 リアルタイムWeb
  • 9章 テストとデバッグ
  • 10章 アプリケーションのデプロイ
  • 11章 Spineライブラリ
  • 12章 Backboneライブラリ
  • 13章 JavaScript MVCライブラリ
  • 付録

東京Node学園 7時限目 #tng7 に行ってきました

event nodejs javascript

メモったことを書き残しておきます。

学園祭告知

  • 11/18に法政大学で東京Node学園 学園祭を行います。
  • 公式サイトはこちら→東京Node学園祭2012
    • 申し込み開始しています
    • 学園祭は無料、後夜祭は有料
    • セッションとLTの講演者も募集中
  • 盛り上げるためにAdventCalendar的なものも行います

lev

資料→Lev

  • lev
    • connectFree/lev · GitHub
    • Lua向けのイベントベースIO
    • プラットフォームです
    • 特徴
      • 早い
      • 低メモリ
      • 簡単にCのライブラリと統合出来る
    • levはLuvitをForkしてるけど、ほぼフルスクラッチで書いています。
    • Apache2.0ライセンス
  • 開発者からのビデオメッセージ
    • NodeはV8エンジンで動いていてスゲー！楽しい！けどね。。。
    • でも、JavaScriptなんだよね、もっと男前の言語でやれたらいいね。
    • Cっぽくて、早いのがいいよね
    • Pythonみたいに、Rubyみたいに
    • マルチコアはこれから作っていくよ
  • ベンチマーク
    • Node 0.8.9, Levit 0.5.0 と比較しても速度、メモリ使用量ともに良好
  • cBuffer
    • コアになる部分
    • 完全にCで実装
  • MessagePack
    • kengonakajimaさんのライブラリをcBuffer用にカスタマイズしている
    • このライブラリはオリジナルのMessagePackより早かった
  • Multi-Core
  • APIの見直し
    • fsのsyncとasyncが分かれているものを見直している
  • Build System
    • 今はmakeファイル
    • 今後は、cmakeにしたい
  • 動作プラットフォーム
  • ロードマップ
    • Webアプリケーションのプラットフォームにしたい
    • npmのようなパッケージ管理の仕組み
    • 既存のLuaのパッケージシステムにも対応しあい
    • 正規表現

Stream Stream Stream!

資料→Node Academy 7 | "Stream Stream Stream !!!"
StriamHandbook→meso/stream-handbook · GitHub

  • Stream
    • インタフェースです
    • stdinとか、stdoutとか、httpなどなど。
    • Readable、Writableとその両方の特性をもつ2種類がある
    • onとemitが使える
    • Streamは継承することが出来る
  • Readable Stream
    • いくつかのAPIを実装していること
    • 例
      • process.stdin
      • fs.ReadStream
      • http.ServerRequest
  • Writable Stream
    • Readable Streamと対応するいくつかのAPIを実装していること
    • 例
      • process.stdout
      • fs.WriteStream
      • http.ServerResponse
  • パイプ
    • unixのパイプと同じイメージ
    • readable | writable のように使える
    • 読み書きでスピードが異なる場合に、そのギャップを埋める必要があるが
    • パイプを使わない場合には面倒な処理を入れないといけない
    • パイプを使うと、その実装をよろしくやってくれる
  • Filter Stream
    • readable かつ writable
    • 左から右へ流れていってしまう
    • その途中で、圧縮するとか、暗号化するとかの処理を挟むことが出来る
  • Duplex Stream
    • 入り口と出口が独立しているので、勝手に左から右へ流れていくことはない

LT

Node製のWebアプリをGraceful Restartする方法

資料→Graceful restartをnode.jsで試してみた。
qilin→atsuya/qilin · GitHub

  • 優雅な再起動
    • モジュールを書き換えた場合に、Warkerスレッドにdisconnectかけて、新しいスレッドをforkする
  • こちらのレジにお並びくださいなイメージ
  • qilinで実装される。Worker数が指定出来る。
  • upモジュールを使うとHotdeploy的な事が出来る
    • ただしパフォーマンスは良くない
ArduinoとNode.js(WebSocket)でつくったオシロスコープの自慢

資料→ArduinoとNodeでつくるオシロスコープ

  • オシロスコープ
    • 電圧の動きをグラフ化するもの
    • 結構イイお値段する
  • ArduinoとNode.jsで作ってみた
    • 振動を電圧に変えて送っている
    • AD変換して、シリアル通信で送り続けている
    • 遠隔でも大丈夫
  • ハードウェアとイベント駆動は相性が良い
node-webkit でデスクトップアプリを作ってみた

資料→tng7 LT // Speaker Deck

  • Write Once Run anywhere的な、でもまだそうでもない。
  • Chroniumからコードぶっこ抜いて、Nodeとくっつけた感じ
  • nodeを使ってGUIの構築が可能
  • Intelの中の人が開発しているらしい
pp.jsについて

資料→Introduction pp.js
Github→VoQn/pp.js · GitHub

  • async.jsを目指したものを作っている
    • async.js自体は非同期ではなくて、非同処理を楽にするもの？らしい。
    • 擬似並列？
node-mrubyの話
  • mrubyはrubyを軽くした実装
  • node.jsにmrubyを組み込んだ
  • すごい簡単
  • npmに上がっている
  • mrubyはまだまだ発展途上
node-canvas でクライアントサイドのライブラリを動かしてみた

資料→About node-canvas (#tng7) // Speaker Deck
github→nulltask/node-processing · GitHub
github→nulltask/node-three.js · GitHub

hooleganの宣伝

サイト→http://hoolegan.com/

  • イベントの盛り上がりを可視化するサービスでnode.jsを使っている
  • スマフォでアクセスして、良かったら上向きにして振る、いまいちだったら下向きにして振る