有言実行しなきゃね...
ちょっと来月の頭くらいまでに、「本当にAngularは学習コストが高いのか？」っていう内容のブログを書くので、書いてなかったら怒ってください
— lacolaco / Suguru Inatomi (@laco2net) 2019年1月24日
この記事では、「学習コストが高い」と評されがちなAngularについて、本当にその学習コストは高いのかということについて紐解いていきます。
先に言っておきますが、ReactやVueをはじめとする他のフレームワークとの比較はしません。また、なかなか本題に入らない回りくどい文章になる予定なので、予めご了承ください。そして筆者はAngularが大好きです。Angularが好きな人間が書いたポジショントークであることは前提として読んでください。
そもそも学習コストとは何だ？
まずはじめに、「学習コスト」って何だ？っていうところから始めましょう。名前からして、学習に関するコストであることは予想できます。しかし明確な定義はGoogleで1時間ほど検索した限りでは見つからなかったので、自力で考えていくことにします。
コスト(=費用)と呼ばれる以上、そこには経済活動の概念との共通点があるのでしょう。Wikipediaで "費用" について調べてみました。
費用（ひよう、英: cost, expense）とは、生産や取引などの経済活動に伴って支払う金銭である。
なるほど、コストとは、何かをおこなうために支払う金銭のことでした。であれば「学習コスト」とは学習をおこなうために支払う金銭ということになります。しかし私たちがプログラミングに関することを学習するときに金銭を払うことはあまり多くありません。代わりに私たちは時間を費やして新しい技術を学習しています。この時間を私たちは「学習コスト」と呼んでいるのでしょう。（プログラミングスクールや有料の教材も増えてきたので、今後は本当に金銭が学習コストになるかもしれません。）
コストを減らしたいのは誰か？
コストといえば「削減」されるものです。限りある予算のなかでやりくりするために、かかる費用はできるだけ抑えたいものです。では「学習コスト」における予算とは何でしょうか。なぜ学習コストは低いほうがよいのでしょうか。
ここには、日本のソフトウェア開発のメインストリームが労働集約型のシステム開発であったことに起因するものがありそうです。このモデルで利益を大きくするには、人件費は安ければ安いほうがよく、開発期間が短いほうが収益マシーンをたくさん回すことができます。毎回システムの要件も変わりますので、従業員が必要なスキルを習得済みとは限りません。そうなれば従業員に教育を施す必要があります。当然、この教育も短期間で完了することが望ましいです。つまり、学ばせる側には学習コストが低い技術を選択するインセンティブが発生しています。
一方で、学ぶ側にとってはどうでしょうか。ここではプログラマーは自身のスキルを伸ばすこと、ひいては開発者としての市場価値を高め収入を上げることを目的としていると仮定します。ある技術の学習コストが低いということは、誰でもすぐに学べるということです。学習コストが低い技術では、市場価値は上がりにくいでしょう。かといって、学習コストの高い技術を習得したところで、仕事がなければこれも市場価値が上がりません。どの技術が金になるか、というのは時間とともに変わっていき、ある種の賭けのような側面もあります。ここで重要なのは一度学んだ技術を次に転用できるか、という観点です。新しい技術が出るたびにゼロから学び直していては時間が足りません。一度払った学習コストを再利用して新しい技術を学ぶことで、複利的にスキルアップしていくのです。つまり、学習コストの単なる高低ではなく、「何を学んだのか」という内訳に意味があるのです。
コストの資産化
コストには2種類あります。費用の発生と資産の購入です。支払った資本が、将来の収益の獲得に貢献するならば、それは費用ではなく資産となります。「一度払った学習コストを再利用して新しい技術を学ぶ」というのは、学習コストを資産計上するということです。学習コストが高くても、それが将来に渡って利益を生む資産となるのなら、長期的な観点からその高いコストを払うことが好ましい場面もあります。
ある技術の学習コスト考えるときには、その内訳を考えてみましょう。そのコストの中で資産になる部分、費用になる部分があるはずです。その技術が時代遅れとなり市場で価値がなくなったとき、そのまま無駄になってしまうならそれは費用です。そうでなく、パラダイムシフトを越えて通用する根幹的な技術や概念を学べたなら、それは資産になるでしょう。これはコストの高低には関係ありません。多くが資産になる高コストな技術もあれば、ほとんどが費用になる低コストな技術もあるでしょう。安物買いの銭失いにならないように、資産化しやすい技術を選ぶことがひとつの指針になるかと思います。
さて、ようやく本題にはいる準備ができました。この記事で述べたいのは、Angularの学習コストです。ここまでの話を踏まえて、Angularの学習コストと、その内訳を考えていきましょう。
Angularの学習コスト（〜入門）
まずはAngularに入門するまでに必要なコストについて見ていきましょう。Angularをはじめるにあたって習得する必要がある技術は、HTML/CSS・TypeScript・Observable（RxJS）です。これに加えて、npmを中心としたエコシステムのWeb開発について基本を理解しておく必要もあるでしょう。
さて、これらは費用でしょうか。それとも資産になるでしょうか？
HTML / CSS
これは言うまでもなく資産でしょう。世界中のWebページを支えるWebの基本技術です。Angularを学ぶ以前から資産として持っている人も多いでしょう。AngularではじめてWebを学ぶという人にとっても、学んでおいて損はない技術です。
npmエコシステム
npmコマンド無しにWeb開発することは、いまとなってはほぼ皆無に近いでしょう。それほどにnpmを中心としたエコシステムは発展し、成熟し、定着しています。資産として計上されて当然でしょう。
TypeScript
これも大きな資産となるはずです。ここ2,3年でTypeScriptは広く普及しました。Angularに限らずReactやVue、その他のフレームワークやライブラリでも採用されるケースが増えています。Angularのために学んだTypeScriptの基礎は、別の場所でも活用できるでしょう。
Observable (RxJS)
RxJSそのものは、Angularの他で使うことはないかもしれません。その場合は費用として捉えることになるでしょう。しかしObservableあるいはObserverパターンという概念は様々な場面で応用可能です。また、AndroidやiOSといったモバイルアプリの開発においては RxJavaやRxSwiftといったRxファミリーを取り入れている場合もあります。マルチプラットフォームのFlutterで採用されているDartにも、Observableに似たStreamという仕組みが言語標準で組み込まれています。リアクティブなプログラミングパラダイムにおいて頻出するパターンなので、リアクティブプログラミングの入門としてAngularのRxJSを捉えてみれば、資産と見なすこともできるでしょう。
RxJSを除いて、Angularの入門に必要な学習はほぼすべて資産となることがわかりました。はじめてのWeb開発というケースでも、Angularを通じて学んだ技術は将来の利益になるでしょう。無駄にはならないので、悩む時間があったらぜひ入門してみましょう。
Angularの学習コスト（入門〜中級）
入門してからもまだまだ学ぶことはあります。確かにAngularの学習コストは高いのです。Angular特有の要素で言えば、Component/Directive・依存性の注入・Routingなどを学ぶ必要があるでしょう。それに加えて、モダンWeb開発につきものの要素として、状態管理・ユニットテスト・コンポーネント設計・パフォーマンスなどがあります。
当然モダンWeb開発をおこなう上で必要な技術は汎用的な資産になると考えてよいでしょう。ここではAngular特有の要素について詳しく見ていきます。
Component / Directive
AngularのComponentやDirective、Templateの仕組みは他に転用できるものではなく、残念ながらほとんどは費用となるでしょう。ただし、すべてがそうなるわけではありません。ここで注目すべきが Web Componentsです。
AngularのComponentは、Web Components技術をモデルに設計されています。ComponentはCustom Elementのように独自タグをもち、内部のCSSはShadow DOMのようにカプセル化されます。デフォルトではエミュレートされたScoped CSSですが、実際にネイティブのShadow DOMを使うように命令することもできます。
さらに、Angular v7から導入されたAngular Elementsでは、AngularのComponentをCustom Elementsに変換することすら可能になりました。一度Custom Elementsとしてエクスポートされれば、フレームワークを問わずどこででも利用できるプログラムになります。
AngularのComponentはWeb Components技術を学ぶきっかけになりますし、実際にWeb Componentsを活用したアプリケーションを構築するためのツールとして利用することもできる。この点を資産と見なしてAngularに投資するのも間違いではないでしょう。
依存性の注入
Webフロントエンドではマイナーですが、サーバーサイド言語では依存性の注入は一般的に行われている技術です。これはAngularで学んだ依存性の注入が資産になるというよりは、すでに依存性の注入を学んでいる人にとってのハードルを下げることに繋がる面が大きいでしょう。
また、TypeScriptの型情報を利用した宣言的なDIシステムは高く評価されており、Angular以外の場所で使うために模倣した仕組みが作られるケースもでてきました。InversifyJSやNestJSはその一例です。このような面から見ても、まったくの費用であるとは言えません。
Routing
AngularのRoutingはフレームワークと強く紐づく部分なので、Angular以外への転用は難しいでしょう。素直に費用と見なして学習します。
入門から中級へスキルアップするにつれて、Angularの学習コストは高くなります。ですが中級まで到達したあとにはアプリケーションについて考える時間が増えることでしょう。コンポーネント設計やテスト設計について思いを巡らせ、スケーラビリティと生産性を向上させる手段としてComponent/Directiveや依存性の注入を活用するフェーズに突入します。Angularが手足のように動き始め、アプリケーションに集中できるようになってきたら、中級者の壁を越えた証です。
Q. 結論: Angularの学習コストは高いのか？
- 低くはありません。
アプリケーションを開発するための最短距離だけをたどるならもっと学習コストの低いフレームワークになったでしょう。しかしAngularが選んだのはWeb標準やエコシステムと協調し、未来を見据えたスタックです。そのためには今は寄り道と思えるような学習が必要になりますが、その多くは資産となります。得た資産を元に学習することで更に大きな資産となり、複利的にスキルアップできるようになります。
極論、払ったコストよりも大きなリターンがあるのがわかっていればどれだけ高くてもコストは払えます。ですが現実にはリターンがあるかどうか、不確実性があるから尻込みしてしまいますが、そんなときにはリスクヘッジを考えるべきです。失敗してもある程度の資産が残っていれば全損よりはマシです。そしてAngularは多くの資産を残し、リスクヘッジできる技術です。
また、コミュニティが学習コストを下げることができます。誰かが通った道を、後に続く人は楽に歩けるように知見を残していくことができます。そして自分が学んだ知見を残せば、また未来の誰かを助けられます。オープンなコミュニティの存在は学習コストを評価する上で勘定に含めるべきでしょう。Angular日本ユーザー会はそうした互助の精神でこれまでも、これからも運営されています。Angularを学ぶときにはぜひ参加してみてください。
長々とお付き合いいただきありがとうございました。学習コストの高低だけじゃない観点でAngularを評価してくれる人が一人でも増えたら嬉しいです。
