タグ

ブックマーク / qiita.com/zoetro (10)

  • Protractor: AngularJSの次世代E2Eテストフレームワーク - Qiita

    AngularJSはテストを重視しているフレームワークだと言われています。 それは、DIが標準搭載されているのでサーバーとの通信などのテストしにくい部分を簡単にモックに差し替えることが出来たり、ユニットテストやEnd to End(E2E)テストのためのフレームワークを持っていたりするからでしょう。 そして、現在標準で含まれているE2Eテストのための機能は、今後ProtractorというSelenium WebDriverJSベースのフレームワークに移行すると発表されています。(AngularJS 1.2 & Beyond) これまでのE2Eテストフレームワークを捨てて新しいものに乗り替えるのには理由があります。 それは、Seleniumをベースにすることで次のような恩恵を受けられるからです。 ブラウザを操作するためのAPIが充実 複数ブラウザでの実行が可能 リモートページのテストが可能

    Protractor: AngularJSの次世代E2Eテストフレームワーク - Qiita
  • Kibana 4のプラグインをつくってみよう - Qiita

    この投稿は、AngularJS Advent Calendar 2014 (Adventarの方)の7日目の記事です。 はじめに Kibanaって便利ですよね。 Kibana 4ではElasticsearchのAggregationsに対応したので、より柔軟な表現ができるようになりました。 とは言え、標準で用意されているグラフだけでは表現できないケースがあるのも事実です。 ところで、KibanaはAngularJSでつくられています。 幸いなことにぼくはAngularJSチョットデキルので、Kibanaを拡張することもできるんじゃないだろうか考えていたところ、Kibana 4のソースコードの中にpluginsというディレクトリがあるのを発見しました。 喜び勇んでpluginsディレクトリを開いてみたわけですが、README.txtにはPLEASE DON'T WRITE CUSTOM PL

    Kibana 4のプラグインをつくってみよう - Qiita
  • AngularJSの非同期処理をRxJSにつなげてみる - Qiita

    AngularJSでは非同期処理のAPIとしてPromise API($q Service)が用意されています。 このPromise APIですがAngularJS v1.2でPromise/A+に準拠した形になりました。 Promise/A+の詳細については下記を参照してください。 Promise/A+ AngularJSのPromise APIは非同期処理としては最小限の機能しか用意されておらず、複雑な非同期処理を書く場合は何かしらのライブラリが利用したくなります。 非同期処理のライブラリとしてはJSDeferredやjQuery.Deferredなどが有名ですが、今回はRxJSを使ってみます。 Reactive Extensions for JavaScript (RxJS) RxJSもv2.2でPromise/A+に準拠したObservable.fromPromiseが追加されたの

    AngularJSの非同期処理をRxJSにつなげてみる - Qiita
  • AngularJSのベストプラクティスに従っていますか? -- angular-hintの使い方 - Qiita

    最近、AngularJSリファレンスという書籍を書いていたのですが、紙面や時間の都合上書けなかったこともたくさんありました。 というわけで、書籍に書ききれなかった内容を落ち穂拾い的に紹介していきたいと思います。 今回はangular-hintというツールを紹介します。 https://github.com/angular/angular-hint これは、Angularチームの1人が開発しているツールで、AngularJSを使って開発したアプリケーションに組み込んで実行すると、エラーを検出してくれたり、ベストプラクティスに従っているかどうかをチェックしてくれたりします。 ただし、説明文にWIP(Work In Progressの略)と書いてあるので、まだ開発中のようです。 angular-hintを組み込むとアプリケーションが動かなくなることもあるのでご注意ください。 angular-hi

    AngularJSのベストプラクティスに従っていますか? -- angular-hintの使い方 - Qiita
  • JavaScriptの非同期処理には何を使うべきか

    各方式は対立するのか? ところでこれらの方式って、必ずしも対立するってわけじゃないんですよね。 JavaScriptのgeneratorはまだ使えるところが限られるけど、コールバックが不要で同期処理のように簡単に書けるのはやはり魅力的です。 一方で、ちょっとした非同期処理をReactive Programmingで処理するのはおおげさですが、ストリーム的に流れてくる複数のイベントを合成したり、時間的な操作をしたりする場合には圧倒的に便利です。 なので、適材適所で使い分けるのがよさそうです。(なんの解決にもなってない!) promise, co, RxJS さて、使い分けると言っても、方式が異なるものを混ぜて使うことは可能でしょうか? 実は、それぞれの方式は対立しないどころか、連携することも可能です。 各方式の代表的な実装であるpromise, co, RxJSを例にみてみましょう。 まず、

    JavaScriptの非同期処理には何を使うべきか
  • AngularJSを使ったWebアプリのアーキテクチャ設計 - Qiita

    AngularJSは公式で分かりやすいチュートリアルが用意されているし、日語の記事も増えてきたし、けっこう簡単に使い始めることができるんじゃないかと思います。 でも、チュートリアルやサンプルはクライアントサイドオンリーなことが多くて、サーバーサイドも含めたWebアプリを作ろうと思うと、どういう構成にすればいいのか迷うのではないでしょうか?(僕がそうでした) 最初は試行錯誤していたのですが、書籍やネットの記事を読んだりGitHubで見つけたアプリを真似たりしているうちに、どういう構成にすればいいのかだんだん見えてきたので、解説してみたいと思います。 SPA 最近、SPA(Single Page Applicationまたは Single Page Web Application)という言葉をよく耳にするようになりました。 SPAとは、最初のページだけ通常のWebアプリと同じようにサーバーか

    AngularJSを使ったWebアプリのアーキテクチャ設計 - Qiita
  • AngularJSのパフォーマンス改善入門 - Qiita

    これまでAngularJSでアプリを作ってきた中で、いくつかパフォーマンスの問題に遭遇しました。 それらの問題は、AngularJSの仕組みを十分に理解できていないために、よくないコードを書いてしまって発生しているものでした。 というわけで、AngularJSの内部構造を解説しつつ、パフォーマンスを改善するコードの書き方を紹介したいと思います。 計測できないものは改善できない パフォーマンス問題に取り組むには、ソースコード修正の前後でパフォーマンスを計測し、改善の効果を計測することが重要になります。 というわけでまずはツールの紹介です。 AngularJSでは、Batarangという便利なツール(Chrome Developer Toolsの拡張機能)が用意されています。 利用方法はとても簡単で、下記のChromeウェブストアからインストールして、Chrome Developer Tool

    AngularJSのパフォーマンス改善入門 - Qiita
  • AngularJSのMVWパターンを理解する - Qiita

    12/4の記事(AngularJSを使ったWebアプリのアーキテクチャ設計)で書くと言ったまま放置していたので、AngularJSのMVCパターンについて書いてみたいと思います。 AngularJSのMVCについては、12/19のお前のAngular.jsはもうMVCではない。と言われないためのTutorialというすばらしい記事がありますが、記事ではもう少し抽象的な内容を扱ってみようかと思います。 MVW(Model-View-Whatever)パターンとは MVCパターンには、MVC2、MVP、MVVMなど数多くの派生パターンがあります。 目的は同じなのに派生パターンがたくさんあるのは、それぞれのプラットフォーム固有の問題(フレームワークの違いや、サーバサイドかクライアントサイドかの違いなど)によってMV*の*の役割が異なるからです。 AngularJSは公式ページで"Superhe

    AngularJSのMVWパターンを理解する - Qiita
  • AngularJSとTwitter Bootstrapを組み合わせて使う - Qiita

    まず、AnuglarJSとBootstrapを組み合わせて使う最も簡単な方法は、yeomanでプロジェクトのひな形を生成することです。 yeomanを使ったAngularJSプロジェクトの始め方 yoコマンドを実行した時に、以下のように質問されます。 [?] Would you like to include Twitter Bootstrap? (Y/n) [?] Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? (Y/n) 1つ目の質問にYesと答えるとひな形にBootstrapが組み込まれます。 2つ目の質問にYesと答えるとsass-bootstrapというフレームワークがbowerでインストールされ、scssファイルからcss

    AngularJSとTwitter Bootstrapを組み合わせて使う - Qiita
  • AngularJSをTypeScriptで書くときのあれこれ - Qiita

    AngularJSのようなクライアントMVCフレームワークを採用すると、クライアントサイドの規模が大きくなってくるので、できればJavaScriptじゃなくて型のあるプログラミング言語で開発したいですよね。 AngularJSは独自のクラスシステムを持っていないし、モデルやコントローラを実装するためにベースクラスを継承したりする必要もないので、altJSとの相性がよくて組み合わせやすいです。 altJSと言ってもたくさん種類がありますが、今回はTypeScriptを使ってAngularJSアプリを書くときのTipsやコツなどを紹介したいと思います。 ベースとなるプロジェクトを作る AngularJSのコードを書くとき、JavaScriptであればおもむろに書き始めることも可能ですが、altJSを使う場合はコンパイルなどの手順が必要になるので、Gruntを使ったプロジェクトを作る必要がありま

    AngularJSをTypeScriptで書くときのあれこれ - Qiita
  • 1