仕事でJavaScriptのMVCフレームワークであるAngular.jsというものに少しばかり触れさせて頂くことができたので紹介してみたいと思います。 Google製のJavaSriptのフレームワークです。 ・Backbone.js ・Knockout.js と並んで三大JavaScriptフレームワークの一角らしいです。 ちなみに上記の２つは私はよく知りません。 当時の私は、JavaScriptのMVCフレームワークって「なんすかそれ？おいしいの？」という状態で、JQueryって十分すごしそれでいいじゃん？という感じでJavaScriptのMVCフレームワークそのものに懐疑的でした。 しかし、とあるWebアプリの仕事を通じてangular.jsに触れてみると、「や、これはいいかも。というかすごくいい」と改心せざるを得なくなりました。 旧来の普通のJavaのWebAPの作り方でJSPや
13. 開始処理 1. ブラウザがHTMLからDOMを作る 2. AngularJSがDOMを読み込む 3. ng-appで指定されたタグ以下を スコープにセットする 4. コンパイル 5. 動的にDOMを生成する 6. イベント監視して即時でDOMを更新 http://docs.angularjs.org/guide/concepts 詳しくはここ(英語) AngularJS 16. http://angularjs.org/公式サイト: Todoアプリ HTML 1.<div ng-controller="TodoCtrl"> 2. <ul> 3. <li ng-repeat="todo in todos"> 4. <input type="checkbox" ng-model="todo.done"> 5. <span class="done-{{todo.done}}">{{tod
■ [javascript] JS MVCフレームワークについてちょっと調べた (2013夏) JS MVC戦国時代ってそういえばどうなったんだろう、と思いつついくつかのライブラリを調べてみたところ、意外とそれぞれキャラが違うことが分かった。 Backbone.js 1.0.0 いまのところ一番人気らしい 意外と小さい。ソースが1ファイルしかない。 Model、Collection、Viewという、自作してもこういう感じになりそうだなぁという構成。(Router/HistoryはURLいじらないなら使う必要はないので、実質この3つだけ) 薄いフレームワークなので、他のライブラリと組み合わせるのは簡単そう。 デメリット：以下のフレームワークが持っているdata bindingのような高度な機能はないので、相対的にコード量が増える。これは小さなアプリでもそこそこ行数を書かないといけないというこ
2. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM, INC. 自己紹介 @tan_go238 PLUGRAM, Inc. 仕事：PHP、JavaScript 趣味：JVM、Curry 215年1月26日月曜日
JavaScriptフレームワークに興味あるし、Angular.jsを使ってみようかな・・・ そんな純真無垢なあなたを混沌の世紀末に引きずり込むのが、ほかでもないTutorialなのです。 TutorialではほぼControllerしか出てこないので、素直にこの通り書いているとまず間違いなく３カウントでControllerにコードが集中するいわゆるFat Controllerになり、せっかくMVCフレームワークも地獄の荒野になります。 実は、Angular.jsでまず目を通すべきなのはDeveloper GuideのConceptual Overviewです。これを読めばどう処理を分割するかがきちんと書かれていますが、以下ではそれ＋経験をもとにAngular.jsで正しくMVCを使用するためのポイントをまとめました。 Angular.jsの３原則 1.Controllerはイベントハンド
Todoリストの機能 1.テキストボックスから、Enterで追加できる 2.登録したTodoはダブルクリックで編集可能になり、Enterで編集確定できる 3.登録されているTodoの総件数がフッターに表示される 4.完了したTodoがある場合、それらをリストから消すボタンが表示される 5.全選択/解除を行うチェックボックスがある 個人的な結論 趣味開発で使うならAngular.js・仕事で使うならKnockout.jsをお勧めしたい。 まず、フレームワークを選択する際は、以下3つの選択基準を持つとよいと思う。 1.開発の規模 大規模ならBackbone.jsはお勧めできる。 書き方が決まっていて、チュートリアルに目を通せば(面倒なのは置いておいて)何を作らなければならないかは簡単に理解できる。そこそこの人数で長い時間の開発を行うなら、UIチームはアプリケーションとView、サーバーサイドは
※この記事は社内勉強会向けの資料の下書きです。書きなぐりの下書きで見直すと最後の方の文書がヤバいので、いつか書き直します。読み辛い所は申し訳ないです。 概要 TDD テスト自動化とTDDを整理 TDDとBDDの違い Test Framework in javascript QUnit/jasmine/mochaについて、違いやメリデメを知る mocha 基本的な書き方 アサーションライブラリのメリデメを整理する chai 記述形式の違い整理 基本文法 sinonjs spy stubs mock TDD Test Driven Development テスト駆動開発 by ケントベック 特徴 xUnit系/BDD系のテストフレームワーク使う テストするコードも実装 テストファースト 実装の後にテストするのではなく、テストを先に書いて実装する サイクル Red(失敗) => Green(通過
普通のrailsのwebアプリにbackboneを埋め込んでみて思った事等を書く。 賛否あるかもだが、あくまで個人的な意見。 １）ウチの現場でBackboneを使うべきか否か？ どこも初めに考える事。 大規模になったら使えとか、Single Page Applicationなら使えとか、色々意見あると思うが、 今時の普通のwebアプリならjsガリガリ動くので、迷わずBackbone使っていいと思う。 ※単調なB向けの基幹システム作ってるとかは例外として。 どこで使う？ 別に全てのpageでBackbone使う必要は無いけど、 フォーム送信系で色々js動かす所とか、検索条件指定、絞り込みとか、 画像/詳細表示、LightBoxとか、 こういう所でjsガリガリ書かないと行けなくなったら Backboneでモジュールを整理していけばいいと思う。 実際使ってみてどうだったか？ before 元々、
原文: DailyJS | JavaScript Developer Survey 2014: Results 著者： Alex Young | 2014/12/16 | 翻訳：h.sakai The JavaScript Developer Survey（ JavaScript 開発者アンケート）を締め切った。例年通り、調査結果については開発者コミュニティでさらなる分析等、自由に利用していただいて構わない。 要約（pdfファイル） 元データ（ZIP化CSVファイル） 昨年（2013年）の結果（和訳版） 一昨年（2012年）の結果（和訳版） クライアントサイドのコードを書いている読者が 97% に達する一方、56% はサーバサイドのコードも書いている。昨年はサーバサイドは 28% だった（※）。Node のようなテクノロジーに関心を持ったりそれを採用することが、ECMAScript の発
クライアントサイドJavaScriptのフレームワークとして人気のBackbone.jsが採用している Model–View–Presenter (MVP) というアーキテクチャパターン(以下MPVパターン)について考察してみます。 Model-View-Controllerなら聞いたことあるけど？ 僕もそうでした。初めて知ったのはRuby on Railsを触った時です。 Modelはデータと手続きを担当し、ViewはUIを、Controllerは入力イベントを受付けてModelとView操作する…とまぁざっくり言うとこんな感じですよね。 MVPパターンも凄く似ていて、どうもMVCパターンから派生したものみたいです。以下が各パターンの図です。 Model-View-Controller Model-View-Presenter PresenterがModelとViewを操作しているところ
自分の頭の中の整理のために。 はじめに Backbone.jsガイドブックを読んでいたら、このような事が書いてあった。 Backbone流MVCでは、ビューとコントローラは両方ともViewが担当します。（略）これらはそれぞれViewのメソッドとして実装しますが、本書では区別のために前者をビューメソッド、後者をコントローラメソッドと呼ぶことにします。（略）重要な点は、DOMイベントに応じてコントローラメソッドが実行されることで処理が始まり、その中でmodelやcollectionを操作し、その結果生じるイベントがビューメソッドを呼ぶ、という流れを意識することです。そのためにも、コントローラメソッドには処理の起点になる以上の仕事を与えず、DOM操作はすべてビューメソッドに集めるよう明確に区別しましょう。 図にするとこんな感じになる（点線がイベントで実線が直操作） しかし、なぜこのような書き方に
Backbone.js を勉強した時のメモ。 #Backbone.js とは CoffeeScript, Underscore.js などの作者である Jeremy Ashkenas が作っている JavaScript フレームワーク（jashkenas/backbone | Github）。 クライアントサイドで MVC を実装するための下地（骨組み）を提供する。 Angular.js がフルスタックで様々な機能が用意されているのに対して、 Backbone.js はあくまで Backbone（背骨）であり、骨組みを用意するのみ。 双方向のデータバインディングなどの機能はない。 肉付けをするのは、プログラマのお仕事。 機能が少ない分、覚えることは Angular.js に比べれば少ない、と思う。 #Hello World ##用意するファイル ###Backbone.js http://
『るびま』は、Ruby に関する技術記事はもちろんのこと、Rubyist へのインタビューやエッセイ、その他をお届けするウェブ雑誌です。 Rubyist Magazine について 『Rubyist Magazine』、略して『るびま』は、Rubyist の Rubyist による、Rubyist とそうでない人のためのウェブ雑誌です。 最新号 Rubyist Magazine 0064 号 バックナンバー Rubyist Magazine 0064 号 Rubyist Magazine 0063 号 Rubyist Magazine 0062 号 Kaigi on Rails 特集号 RubyKaigi Takeout 2020 特集号 Rubyist Magazine 0061 号 Rubyist Magazine 0060 号 RubyKaigi 2019 直前特集号 Rubyist
フロントエンドとJavaScript JavaScriptのMV*向けライブラリ BACKBONE.JSによるWebアプリケーション開発について 「オープンソースカンファレンス 2013 福岡」の HTML5と最近のフロントエンド事情で発表した資料です。 Read less
MVC と言えば Apache Struts をはじめとするサーバサイド・フレームワークを想像しますが、 今回は JavaScript による大規模開発の際に採用されるクライアントサイド MVC フレームワーク「Backbone.js」の使い方についてまとめてみました。 (厳密にはクライアントサイドの場合、MVC とは呼ばず MVVM とか MV* とか呼ばれてるようです。) 前提 Backbone.js の構成を簡単に言ってしまうと 単一データの管理を行うモデル 複数件のモデルの管理を行うコレクション 画面の管理を行うビュー の３つの主要モジュールを軸に構成されており、Underscore.js、jQuery(Zepto）に依存するかたちで動作するようになっています。 利用の際は、underscore.js、jquery.js、backbone.js の順で読み込みます。 //cdnjs
object.once(events, callback, [context]) object.listenTo(other, event, callback) object.stopListening([other], [event], [callback]) Backbone.Model Backbone.Model.extend([properties], [classProperties]) Backbone.Model を継承した新しいモデルを作ります。 properties インスタンスメンバを定義します。 var User = Backbone.Model.extend({ say: function () { console.log("Hello."); } }); var user = new User(); user.say(); //-> Hello. classPr
皆さん、こんにちは。id:KenichiroMurataです。 今回はKnowledge Noteにて連載させて頂いていた 「試して学ぶBackbone.js入門」が全５回分公開されたため、そのまとめをしたいと思います。 記事のコンセプト タイトルに含めた通り、実際にコードを書いて試してみることでBackbone.jsの理解を深めることを一番の目的としています。 なので、ぜひ実際に記事の中に出てくるコードを書いて、動かして、コンソールのログや動作を確認することをおススメします。 各記事の概要 第１回 試して学ぶBackbone.js入門 Backbone.jsの概要から、インストール方法、Model、Collectionの基本を説明しています。 目次 はじめに セットアップ Modelの基本 Collectionの基本 Collectionの便利な関数 第２回 試して学ぶBackbone.
Backbone.jsの最終回の今回は、Backbone.Router（以降、Router）について説明します。 はじめに 前回の「試して学ぶ Backbone.js入門4」 では実際に動くアプリケーションを作成しながらBackbone.Viewについて説明しました。 今回は本連載も最終回となり、Backbone.Router（以降、Router）について説明します。 今回のソースの全体はこちらで確認することができます。 Backbone.Router Backbone.jsが提供するRouterコンポーネントは、クライアント側でのページ遷移のイベントとその後の処理（コールバック関数）をマッピングするルーティング機能を提供します。 ViewがDOMイベントの発生を監視して、対応するメソッドに関連付けるように、Rounterはrouteイベントを監視して、対応するメソッドに関連付けます。 W
CPU： Core i5 以上、もしくは Apple Silicon M1チップ メモリ： 8GB以上 画面解像度： FullHD以上 ネットワーク回線： 20Mbps以上 ※有線の方がより安定した速度で利用いただけます クライアントソフトウェア版 Windows 10,11（64bit） macOS Big Sur, Monterey, Ventura ※ OS言語は日本語または英語 ※ Windows10タブレットのタッチパネルに対応しています ※ VM環境での利用は動作保証対象外となります Web版 Google Chrome,Firefox, Edge, Safari の最新バージョン ※ 最新以外のバージョンとIEは動作保証対象外となります
それでは、インスタンスを生成し、永続化処理を試してみましょう。 var memo = new Memo(); console.log("Before save: " + JSON.stringify(memo)); console.log("isNew(): " + memo.isNew()); memo.save({content: "Acroquest"}, { success: function() { console.log("After save(post) memo: " + JSON.stringify(memo)); console.log("After save(post) memo.isNew(): " + memo.isNew()); } }); console.log("After save: " + JSON.stringify(memo)); console.l
Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsの概要から、インストール方法、Modelの基本を説明していきます。 はじめに Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsはその名が示す通り、Webアプリケーションにアーキテクチャという背骨を提供することを目的としたライブラリです。直ぐに複雑なスパゲッティコードになりがちなWebアプリケーションに、Backbone.jsが提供するEvent, Model, Collection, View, Routerというコンポーネントを使うことで、Webアプリケーションに一定の構造を与えることが可能になります。 例：Backbone.jsによるアーキテクチャイメージ Backbone.jsによるWebアプリケーションの一例 様々なJavaScri
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
先日めでたく 1.0.0 をリリースした Backbone.js ですが、よくも悪くも「どう作るか」について、作成者側の思いで自由にできるため、始めの取っ掛かりとして、どう作ればよいかと言うことで結構悩む方も多いかと思います。 そこで、同じように悩んでいる人になんらかのヒントを与えられればと思い、シングルページアプリケーションを題材にチュートリアルを作成して公開してみました。 また、私が Backbone.js でアプリケーションを作成する上で、特に View について注意するポイントを幾つか紹介します。 何かの参考になれば幸いです。 このエントリでお伝えしたいこと。 Backbone.js のチュートリアル作りました。 Backbone.View を扱う際に注意するポイントについていくつか紹介します。 チュートリアル 早速ですが、Backbone.js でシングルページアプリケーションを
果敢にもMVCフレームワークの図解を試みたので、どうぞ！ MVCの動機 MVCという言葉が初めて登場してから30年以上たった今、最早なんだったのか分からないほどMVCの定義は混迷をきたしているわけだが、どれがMVCでMVVMでMVPであるという定義についてあれこれ考察するのは個人的には好きでなくて、「結局何がしたいのか」という動機がぶれていなければ何でも良いと思っている。 じゃあそれは一体何なのかということを自分なりに考えてみたところ、次の一言に落ち着いた。 「ModelはViewに依存したくない」 世間的には（？）ModelとViewを単に「分ける」と説明されることが多いが、私はそれだけでは納得していなくて、依存の方向こそが重要だと思っている。たとえ分かれているように見えてもModelがViewを参照していたら、情報の取得先や表現方法は固定化されてしまう。 ModelはViewの事情から
最近、JavaScriptを多用するWebアプリケーションの開発に携わる機会が増えてきました。 jQueryのイベントハンドラをベタに書いていくのは、規模が小さいうちは良いのですが、機能追加・仕様変更等が多発すると少々面倒なことになります。このまま大きくなっていくと破綻が目に見えているので、構造化されたアプリケーションを作りたいと思いBackbone.jsを学び始めました。 Backbone.js 公式サイト 7月上旬から学び始めたので、まだ20日程度ですが、その中で学んだこと等を紹介します。これから勉強を始めてみようと思う人の参考になれば、幸いです。 以下の内容は、Backbone.jsの熟練者が指南しているわけではないことを予めご了承ください。ちなみに、平日の夜と、時間が取れるときの週末を使って勉強して、イベントサービスのWebAPIを串刺し検索するアプリ等を作るくらいには、Backb
Backbone.jsガイドブックposted with amazlet at 13.05.07高橋 侑久 ラトルズ 売り上げランキング: 2,459 Amazon.co.jpで詳細を見る Backbone.js ガイドブックを一通り読みました。言及するか少し迷ったけど、まだあまり話題になっていないようなので書いておこうと思います。 Backbone.js あるいはこれによく似たようなフレームワークは今後、Webアプリケーション開発でよく使う道具になっていくと思う。というか、すでになっているでしょう。 Backbone.js は「クライアントサイドMVCフレームワーク」と呼ぶと良くわからない。クライアントサイドMVCフレームワークが注目される以前から、ある程度以上の規模の JavaScript アプリケーションになるとちゃんとしてるものは構造化が行われていた。イベントを集約するオブジェクト
ソフトウェアのリリース作業は時間が経つとともに複雑化する傾向があります。どんなに作業の自動化を推し進めても、リリース後の確認やドキュメントの更新などの手作業は残ってしまいます。また、一部の担当者しかリリース作業を知らないと、人がボトルネックになってしまいます。 そこで、リリース作業の内容や状況を見える化しておくことで、誰でも素早くリリースを行えるようになります。たとえ一人ぼっちの開発であっても、一ヶ月後の自分が作業手順を完璧に覚えているとは限らないため、見える化しておく価値はあります。 リリースタスクをIssueに書く もしGitHubでタスクを管理している場合は、リリースタスクをIssueに書くやり方があります。 私がオープンソースで開発しているGradle SSH PluginやGroovy SSHでは、リリースの度に以下のようなIssueを作成しています。 リリースのワークフローは以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く