2015年3月9日
マネージャのためのAngularJSの概要 Part 1
(2014-08-27)by Andrew Austin
本記事は、原著者の許諾のもとに翻訳・掲載しております。
私が空き時間にAngularJSを使って様々なものを作成し始めたのは2013年の終わりのことです。この頃から続く経験は実に有益で、今でも多くのことを学んでいます。私とJavaScriptとの関わりはIBMでDojoを使って単一ページアプリケーションを構築したところから始まります。その後バックエンドでNode.jsを、フロントエンドでAngular.jsのみを使う会社に移りました。
IBMでは、チームに対してAngular.jsに切り替えるよう言い続けていました。この記事の初稿を書いたのもAngularJSでエンタープライズ向け単一ページアプリケーションの構築が出来ることを客観的に主張するためです。特に私が伝えたかったのが、大企業がAngularJSに切り替えることにはメリットこそあれ、デメリットは何もないということです。それから数か月間Angular.jsだけを使い続けていますが、核となる考えは変わりません。そのうえ、Angular.jsの方が優れている点も見つけました。Angularの弱点の多くは、Dojoなど従来のJavaScriptフレームワークが得意とすることです。
この記事では私が知っていることを皆さんにお伝えしようと思います。
まずAngularの歴史について簡単に説明してから、次のようなエンタープライズ向けの重要な内容へと掘り下げていきます。
- AngularJSを推進しているのは誰か
- 開発者はどのように採用、教育すればいいか
- AngularJSはどのようなブラウザに対応しているか
- GoogleはAngularJSの知的財産をどのように保護しているか
- AngularJSではどのようなGUIツールキットが動作するか
- Angularが国際化とアクセシビリティにどのように対処しているか
- 作成したAngularJSアプリケーションをどのようにしてテストするか
- AngularJSの欠点は何か
AngularJSには多大な期待がこめられています。Dojo(と無償のUIウィジェットツールキットDijit)は Hacker News や /r/programming で話題にはなりませんが、本格的な単一ページアプリケーション開発向けの汎用性のあるプラットフォームであり続けています。JavaScriptの世界では”ベストプラクティス”の多くが他に採用される前に、まずDojoに採用されていました(これについては、Peter Higginsによる講演「 Dojo already did that 」<Dojoではもう始めてる>をご覧いただくと良いでしょう)。
しかし、JavaScriptの世界は移ろいやすいものです。技術は急速に変化しています。新しいフレームワークが毎日のように発表され、その多くは生まれたかと思うと消えていきます。 /r/javascript やHacker Newsをフォローしている方なら、”次に期待される”フレームワークが毎週4つも5つも紹介されているのをご存じでしょう。
本格的なソフトウェアを構築する会社がJavaScriptの技術スタックを変えようとしないのも不思議ではありません。今日流行っていたものが、明日には時代遅れになるかもしれないのですから。
しかし、JavaScriptの世界には希望があります。ここ1年で、DojoやjQueryの複雑なコードに代わる息の長いフレームワークとして、本格的なものがいくつか構築されています。例えばBackbone.jsやEmber.jsは、優れた単一ページアプリケーションを構築するのに最適なModel-View-Whateverフレームワークです。
しかし、私はエンタープライズ向けアプリケーションならAngular.jsの方がBackbone.jsよりも優れていると思っています。それにはいくつかの理由がありますし、業界関係者も私の考えに同意してくれるでしょう。Angular.jsは大きな可能性を秘めているように見えます。
「なぜAngularの方が優れているのか」については別の記事で書くことにします。今回はまず、大規模な単一ページアプリケーションを作成するうえでAngularがエンタープライズとしてDojoと同じくらい有望であることをお伝えしたいのです。
AngularJSの歴史
AngularJSは2009年にサイドプロジェクトとしてMisko HeveryとAdam Abronsという2人の開発者によって開発されました。2人は当初、GetAngularというプロジェクトをWebデザイナーがフロントエンドでもバックエンドでも相互作用できるend-to-endのツールにしようと考えていました。
Heveryはその後Googleで、Googleフィードバックというプロジェクトに携わるようになりました。Heveryとその他2人の開発者はGoogleフィードバックのために6か月にわたって1万7,000行ものコードを書きました。しかし、コードのサイズが増えるにつれて、Heveryはチームがこれまで書いたコードのテストや変更が煩雑であることに不満を感じ始めたのです。
そこで、Heveryはマネージャに対し、GetAngularのサイドプロジェクトを使って2週間でアプリケーション全体を書き直すことを約束しました。約束は果たせず、アプリケーション全体の書き直しに2週間ではなく3週間かかってしまいましたが、1万7,000行あったコードを1,500行にまで短縮することができました(詳しくはMisko Heveryが2014年1月までの経緯について語った ng-conf 2014基調講演 をご覧ください)。
Heveryのプロジェクトが成功したことで、Angular.jsがマネージャの目に留まり、ここから開発が急速に進み始めました。
AngularJSを推進しているのは誰か
Googleです。
創始者の1人であるAdam AbronsはAngularJSの開発から離れましたが、Misko Heveryと彼のマネージャ、Brad GreenはオリジナルのGetAngularプロジェクトを新たにAngularJSと名づけ、Google内で開発とメンテナンスを行うチームを立ち上げました。
AngularJSがGoogle内で思わぬ幸運にまず恵まれたのは、DoubleClick社がGoogleに買収され、AngularJSを使ってアプリケーションの一部を書き直すことになった時でした。DoubleClickが初期に成果を上げたことで、GoogleはAngularにさらなるリソースを注ぎ込んだようで、AngularJSを社内だけでなく社外の製品でも使用できるようにしたのです。
こうして、Google内のAngularチームはたちまち大規模なものになりました。
以下のリストは、2014年2月8日時点でのAngularJSのコントリビュータ、上位10人です(この記事を最初に書いた時のものです)。
コントリビュータ | 会社 | 最終コミット | コミット数 |
Igor Minar | 02/07/2014 | 1222 | |
Misko Hevery | 10/10/2013 | 703 | |
Vojta Jina | 01/31/2014 | 327 | |
Matias Niemela | 02/07/2014 | 177 | |
Pete Bacon Darwin | 01/23/2014 | 135 | |
Brian Ford | 02/07/2014 | 69 | |
Tobias Bosch | 02/16/2014 | 47 | |
Chirayu Krishnappa | 11/22/2013 | 40 | |
Ken Sheedlo | Google(インターン) | 09/27/2013 | 29 |
Caitlin Potter | 02/04/2014 | 23 |
そして以下のリストは、2014年8月25日時点での上位コミッタです。
コントリビュータ | 会社 | 最終コミット | コミット数 |
Igor Minar | 08/22/2014 | 1380 | |
Misko Hevery | 11/10/2013 | 703 | |
Vojta Jina | 07/14/2014 | 350 | |
Pete Bacon Darwin | 08/23/2014 | 323 | |
Matias Niemela | 08/05/2014 | 232 | |
Brian Ford | 08/22/2014 | 162 | |
Caitlin Potter | 08/22/2014 | 104 | |
Tobias Bosch | 08/22/2014 | 67 | |
Rodric Haddad | 08/15/2014 | 47 | |
Chirayu Krishnappa | 03/20/2014 | 42 |
最初に気づくのは、全員がGoogler(Googleで働く人)だということでしょう。これには不安を覚える方がいるかもしれませんし、確かに、ただ1つの組織によって完全にコントロールされているフレームワークに依存するということは、ビジネスの観点から考えると少々リスクを伴う可能性があるでしょう。
ですが、AngularJSチームがみんなGoogleに勤めているということには、プラスの側面も少なくありません。例えば、1企業がフレームワークをコントロールしていると派閥間でもめ事の起きる心配がないので、往々にして助かることもあるでしょう。オープンソースの世界では、そうしたもめ事が表に出て険悪な状況となり、便利なソフトウェアを構築するというチームの目的に悪影響を及ぼす可能性もあるのです。オープンソースソフトウェアにフォークが発生すると、とりわけ短期的な問題としては対立が明確になりコラボレーションが中止されるといった、ユーザにとって不都合な事態を招く場合も多いでしょう。
最近話題になりましたが、Node.jsを後援する Joyent社とStrongLoop社 の2人の間で起こった論争を考えてみてください。あなたの会社がエンタープライズ級のソフトウェアを構築しようという時に、こうした開発者のごたごたが持ち上がってくる心配をせずに済むのは確かなのです。
先ほどのリストの話に戻りましょう。
Googlerでないコントリビュータはどうしたのでしょうか? もちろん存在するんですよね?
存在します。Googler以外で最も活発に貢献しているAngularJSコントリビュータは、14位の、Wix社に勤めているShahar Talmiです(Ken SheedloはGoogleの元インターンで、現在はRackspace社で働いています。彼のコミットはほぼ全てインターン時代のものであるため、Googler以外とはみなしませんでした)。Shaharは、ドキュメンテーションから新機能に至るまで、27のコミットを行っています。
Shaharの他にも、このプロジェクトには正味 943人 のコントリビュータが貢献してきました。その中にはGooglerだった人も含まれているでしょうが、大多数は違うはずです。
ところで、上のリストからは分からない1つの重要な事実があります。上位コントリビュータの多くは、初めからGooglerだったわけではなく、AngularJSに活発に貢献するようになってからGoogleに雇われているということです。この点からも、GoogleがAngularJSに大きな力を入れていることがうかがわれます。
もう1つ、上のリストを見て不思議に思うかもしれないのは、共同創始者のMisko Heveryが、Angularチームの他のメンバーに比べて最近コミットを全く行っていないということです。なぜなのでしょうか?
その答えは、Googleが別の言語、Dartに力を注いでいることにあります。Dartは、JavaScriptの代替としてGoogleが開発した言語であり、GoogleはAngularJSをDart言語にポーティング(移植)することで、Dartを社内で”ドッグフーディング”しています。このポートは、AngularDartとして知られています。Heveryは最近これに多くの時間を費やしているのです。AngularJSチームの他のメンバーも、AngularJSのDartポートに対して活発に取り組んでいます。
これは、私たちAngularJS開発者にとってかなり興味深い動きです。Googleチームによれば、AngularをDartにポーティングすることで、Angularチームでは結果的にJavaScriptバージョンに関する新たなアイデアも出るようになり、AngularJS開発にも大変役立っているそうです。
開発者はどのように教育、採用すればいいか
jQuery開発者に比べると、AngularJS開発者を採用することは組織にとって難しいかもしれません。 Indeed のような従来型の求人サイトをざっと見ただけでも、AngularJSの優れた人材に対する需要は高いことが分かります。でも安心してください。日に日に、AngularJSを理解するJavaScript開発者は増えてきており、彼らは実際のアプリケーション構築にAngularJSを使っています。従来型の求人サイト以外でAngularJS開発者を探すには、 Stack Overflow Careersのような専門サイトでAngularJSのタグ で検索したり、 AngularJobs.com のようなAngularJS専用の求人掲示板を使ったりするのも良いかもしれません。
AngularJSの経験を持つ開発者を雇うよりも、既存のチームをトレーニングするか、JavaScript全般に通じていてAngularJSの習得にも関心のある人材を採用する方が容易かもしれません。AngularJSはこれまで、ドキュメンテーションが非常に乏しいとされていました。ですが、この状況は最近変わってきており、AngularJSの中心チームはドキュメンテーションの改善に向けて大きく前進したように思われます。公式ドキュメンテーションについては、 http://docs.angularjs.org/api をご参照ください。
それにしても、AngularJSで特に便利なのは、サードパーティ製のビデオチュートリアルやレッスンを活用できることです。トレーニングサイト、 egghead.io で提供されているJohn Lindquistのショートビデオ(多くは無料)を見れば、Angularについて非常にたくさんのことを学べるでしょう。このサイトには、3~5分程度でAngularJSのトピックを実際のコードを使って紹介するビデオが多数用意されています。もう1つ、Angularへの優れた入門ビデオとして、Dan Wahlinの「 AngularJS Fundamentals in 60-ish Minutes 」(60分ぐらいで学ぶAngularJSの基礎)もあります。読んで学びたいという方には、AngularJSの紹介記事として、Todd Mottoの「 Ultimate Guide to Learning AngularJS in One Day 」(1日でAngularJSを学ぶ究極ガイド)が役に立つでしょう。
さらに新しい動きとしては、AngularJSの最初の会議、ng-confが開催されました。大変素晴らしい会議でしたが、これがAngularJSの中心チームではなく、独立した開発者たちや企業によってユタ州で行われたことを考えるとなおさらです。この会議の最も良い点は、全ての映像がYouTubeに投稿されていることでしょう。 https://www.youtube.com/user/ngconfvideos からアクセス可能です。その中でも私が気に入っている2つの講演は、Dave Smithの「 Deep Dive into Custom Directives 」(カスタムディレクティブを掘り下げる)と、Vojta Jinaの「 Dependency Injection 」(依存性注入)です。
株式会社リクルート プロダクト統括本部 プロダクト開発統括室 グループマネジャー 株式会社ニジボックス デベロップメント室 室長 Node.js 日本ユーザーグループ代表
- Twitter: @yosuke_furukawa
- Github: yosuke-furukawa