Angularを使う理由 - Now loading...

JavaScriptフロントエンドフレームワークといえば、React、Angular、Vue.jsの3者。それぞれ使ってみたけど個人的にはAngularが好き。

Angularと言えば学習コストが高いからという理由で嫌厭されがち。でもAngularの書き方に慣れた後の生産性の高さはとても心地よいと思う。Angularと言えば大規模開発向けとも言われるけれど、個人開発者が使っていても十分に学習メリットがあると思う。

書き方が決まっていることの利点

これはAngularの良さというよりは、フレームワークの良さになるかもしれない。 AngularはAngular流にしか書けない。だからプロジェクトと頭の中がとてもすっきりする。

書き方が決まっているから、コーディングするときは黙々と進めることができる。
書き方が決まっているから、過去に書いた自分のコードも理解できる。
書き方が決まっているから、他人のコードも理解できる。

他人のコードが読みやすいというのは複数人で開発するときは好都合だろう。また過去や未来の自分は他人なので、個人開発者でもAngularの恩恵を受けられる。 Githubなどの他人のコードが読みやすいというのはそれだけ学習機会が増えることを意味する。書き方がさらに洗練される。

Angularは効率が高い、可読性が高い、学習性が高い。

Reactでも各種ライブラリの学習コストを考えるとAngularよりコストが小さいとは言い切れない。

Angularは開発に必要なものは全部セットで配布される。ルーターも状態管理ライブラリも同梱されている。ある機能を実装する方法は一度だけ学べばその後も使える。

一方、Reactはビューライブラリなのでほかの部品はついてこない。幸いコミュニティが活発なのでルーターや状態管理など必要なものはネットで見つかるだろう。けれどこれが辛い。各種ライブラリの流行り廃りは早いので、ライブラリを乗り換えるたびに学習コストが発生する。同じ機能を実装する方法を複数回学習するのは、研究目的を別にすれば、ちょっと辛い。

こう考えるとAngularの学習コストはReactのそれよりも小さいとは言い切れないと思う。

SFCの書式はAngularでも可能

Vue.jsのSFC（単一ファイルコンポーネント）はプロジェクトがすっきりしてとても良い。 AngularはCLIを用いてコンポーネントを生成する(ng generate component)と、処理、テンプレート、CSSの3つのファイルが生成されてしまう。これはこれで分かりやすいのだけど、Vue.jsのようなすっきり感を味わいたいのなら、以下のようにすれば良い。テンプレート部分はVScodeを使っていればハイライトも効いてくれる。これであれば気軽にコンポーネントを作れるのでは。

@Compnent({
    selector: "app-test",
    template: `
      <div>
          <p>
              Test!
          </p>
      </div>
  `,
    styles: [
        `
          p {
              font-size: 12px;
          }
      `
    ]
})
export class TestComponent implements NgOnInit {}

まとめ

Angularは学習コストが高いと言われているけれどその価値はある。生産性の高さ、保守性の高さなどがその理由。