1. JS開発における TDDと自動テスト ツール利用の勘所 2012.12.06 株式会社マピオン 中村 浩士 12年12月5日水曜日 2. 自己紹介 中村 浩士 ( @kozy4324 ) 株式会社マピオン所属 主にWebアプリのフロントエンド開発 JavaScript, ActionScript 12年12月5日水曜日
1. JS開発における TDDと自動テスト ツール利用の勘所 2012.12.06 株式会社マピオン 中村 浩士 12年12月5日水曜日 2. 自己紹介 中村 浩士 ( @kozy4324 ) 株式会社マピオン所属 主にWebアプリのフロントエンド開発 JavaScript, ActionScript 12年12月5日水曜日
こんにちわ。深澤です。 今回はボタンを押したらJSONデータを取得してページの内容を書き換える簡単でAjaxなサンプルからSpineを知っていこうと思います。SpineにはContactsやTodos等のサンプルアプリもありますが、わりと量が多く、理解するのに自分も時間がかかったため、簡単なところから始めてみます。 動作するサンプル まずは動くものを見てください。ボタンを押すと通信してHTMLを書き換えます。 処理の流れのイメージ 1.Controllerがイベントを受け取る 2.ControllerがModelにデータを取得させる 3.ControllerがViewにModelで処理した結果を反映させる Controllerが主体となってデータ担当のModelと描画担当のViewに仕事をさせる。といったイメージです。 サーバーサイドのMVCフレームワークと概念は一緒です。データをDBから
むらたです。 若手ではないのですが、こちらに出張投稿します。 AcroquestではHTML5+CSS3+JavaScriptによるグラフィカルなWebUIを開発するためのOSSであるWGPを開発しています。このWGPを利用する上で、JavaScriptMVCフレームワークを活用したいと考えており、私はJavaScriptMVCフレームワークを調査しています。そんなわけで「ステートフルJavaScript」を読んでおり、Spine.jsを調査しています。 Spine.jsはbackbone.jsにインスパイアされて開発されたCoffeeScriptと親和性が高いフレームワークであり、CoffeeScript好きな私としてはbackbone.jsの前にこちらを調べています。今回はSpine.jsのTodoアプリケーションを作ってみたので、その内容をまとめました。 Spine.jsのTodoア
多分コードも説明もおかしいのであんま参考にしないで下さい。あくまでも初心者である自分の勉強用なので。 ステートフルJavaScriptを写経しながら何となくMVC(MVVCとかMVPとかまだなんのこっちゃ分からん)っぽい概念は分かったけどいざ自分でコード書くとなるといまいちフローが分かないので、汚コードだろうがなんだろうがとにかく自分で考えながらコード書いてみた。徐々に機能を追加、リファクタリングしていく。 ちなみにどうしても自分で考えても分からなくなった時には下記ソースを見ながら進めた。 Todos 1. HTMLを用意する JavaScriptありきのHTMLってのはないと思うのでまずは兎にも角にもHTMLを用意。これを元に作っていく。 最新のSpine.jsも読み込んでおく。 また、jQueryも最新版を使用する。 <div id="mod-app"> <header> <h1>To
2012/07/11 第31回 HTML5とか勉強会 JavaScriptMVCフレームワーク「Spine入門」 (2012/07/12改版)ファイルサイズの比較について、比較条件が同じではないとのコメントを頂き、条件をmin+gzip時に統一して該当箇所を改版しました。Read less
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
いささか時期を逃した感がありますが、サーバサイドJavaScriptであるnode.jsを試してみた。 node.jsはGoogleのJavascriptエンジンのV8を利用し、Non Blocking I/O環境を実装したもので、速度も速く言語的にもイベントドリブンなど実装しやすいのが特徴。 早速インストールから。 インストール 例のごとくMac環境でhomebrewを利用しているので簡単です。 homebrewは新しいソフトウェアの対応も早く、MacPortsと違い自分でのパッケージ追加も楽なのでおすすめです。 (homebrewのインストールの仕方はこちら) まずはnode.jsとnpmのインストール。 npmはperlのcpan、phpのpear、rubyのgemにあたります。 依存関係を含めライブラリをインストールするユーティリティです。 以下のコマンドを入力して、コンパイル・イ
Spine.js て何だ? RIA界でもHTML5/CSS3/JavaScript でよりリッチなUIを比較的大きなプロジェクトでも実現しようとする動きが前にも増して強くなっているようです。またPhoneGap等のスマートフォン向けネイティブ(風)アプリにおいてもより複雑な実装が求められると思います。その結果、複雑化しがちなJavaScript界にMVCフレームワークが乱立してきています。 その中でもRails3.1でも採用されたCofeeScriptと親和性の高い(Spine.js自体もCoffeeScriptで書かれていますし、公式ドキュメントもCoffeeScript/JavaScript両方で書かれています)、今後注目されるであろうフレームワークがSpine.jsという訳です。人気のフレームワークであるBackBone.jsを尻目に作られたかは知りませんが、似ているところがあるよう
この記事は賞味期限切れです。(更新から1年が経過しています) JavaScriptユニットテスト一年生の私が、Nettuts+ のチュートリアルで知ったテストツール 「testem」のお陰で大変捗ったので是非お勧めしたく、ここで紹介してみます。 testem ってなに testem via GitHub : airportyh/testem Unit testing in Javascript can be tedious and painful, but Testem makes it so easy that you will actually want to write tests. 要するに、面倒なJSのユニットテストをより快適にしてみんなでハッピーにテスト書こうよ!というツールです。 testem自体はnode.jsベースで動作し、Jasmine/QUnit/Mochaに対応して
配布元:Modernizr ライセンス:MIT & BSD licenses. ModernizrはTwitterなどの大手サイトでも採用されているブラウザの機能の実装状況を調査するためのJavaScriptライブラリです。 たとえばModernizrを読み込んだサイトではhtml要素が次のように書き換えられます。 <html lang="ja" class="no-js"> ↓ <html lang="ja" class="js flexbox flexbox-legacy rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms c
東京Node学園祭2012 アドベントカレンダー 14日目の記事です。イベントの告知の意味も含めて、毎日だれかが1つづつ node.js についてブログで書く、という企画だそうです。 そこで本題ですが、github に ajmax という node.js モジュールを公開しました。npm にも登録してあるので、"npm install ajmax" でインストールが可能です。 詳しくは readme ファイルに書いてありますが、英語なので簡単に解説すると、AJAX(eye candy 的な AJAX ではなくて、実際に非同期にデータをサーバーから取得してページの一部をアップデートするタイプの AJAX) を活用した one-page web application を作るための micro MVC framework です。 これまでいくつか AJAX を駆使したアプリを作って来ましたが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く