Angularとは何か？究極のJSフレームワークの魅力に迫る！

この記事では、JavaScriptフレームワーク「Angular」について解説する。

Angularは欧米のIT業界では知名度が高く、Webのフロントエンドフレームワークとして本命の存在であるが、日本での存在感はまだそれほど強くない。また、日本語で書かれたAngularに関する記事もそれほど多くない。

著者はドイツでフロントエンドエンジニアとして働き、Angularをメインのフレームワークとして日頃から業務で使用している。はじめてAngularに触れたときのインパクトは大きくいまだに熱心なAngularファンである。

今回の記事も非常にAngular推しの内容となっているので、その点はご了承いただきたい。

Angularとは？

AngularはGoogleにより開発されているフロントエンドのためのWebフレームワーク。

高度な機能性を持ったWebアプリケーションの開発に使用できる。また、大規模な開発プロジェクトにも使用できる堅牢なアーキテクチャーを持つ。

HTML・CSS部分を除き、JavaScriptの拡張版にあたる言語「TypeScript」を使用する。

この記事を執筆している2021年8月現在では、バージョン12が最新である。

TypeScriptとは？

TypeScriptはJavaScriptの拡張版にあたるプログラミング言語だ。

その名前から予想できるように「タイプ」つまり型指定をおこなうタイプのプログラミング言語「静的型付け言語」だ。

TypeScriptで書かれたコードは実行する前にJavaScriptのコードに変換される。

Angularの特徴

Angularのおもな特徴は以下の点だ。

1. フルスタックフレームワークであり、Webアプリケーションの開発に必要な機能はあらかじめ備えている。
2. シングルページアプリケーションである。
3. ページの構成要素はコンポーネントに分けられる。

それぞれについて簡単に説明しよう。今の時点でこれらの特徴を理解する必要はそれほど無い。

フルスタックフレームワーク

Anuglarはフルスタック、つまり、Webアプリケーションの開発に必要な機能をあらかじめ備えたフレームワークだ。

同じくJavaScriptのフロントエンドフレームワークであるReactとはこの部分で大きく異なる。

Angularのプロジェクトはプロジェクト設定やモデュール管理といった根幹の部分からAngularが受け持つ。

シングルページアプリケーション

Angularの仕組みを説明するうえで欠くことの出来ない特徴はAngularがシングルページアプリケーションであるという点だ。

Angularプロジェクトのすべてはindex.htmlの一部に集約されて読み込まれている。

コンポーネント指向アーキテクチャ

Angularでは、ページを構成する各パーツはコンポーネントという単位に分割される。

例えばヘッダー部分を「HeaderComponent」としてまとめて再利用できたりする訳だ。

コンポーネントは標準では以下の4つのファイルから構成される。

• html
  ページの構造を定義する。Angular特有の変数や制御構造を記述することもできる。
  
• css
  要素のスタイルを定義する。scss・sassを使用することもできる。
  
• ts
  ビジネスロギックを定義する。tsはTypeScriptの拡張子。
  
• spec.ts
  ユニットテストを定義する。Angularはユニットテストも標準でサポートしている。
  

なお、htmlやcssをtsファイル内に記述しファイルを削除してもいい。

Angularの長所

次にAngularを2年間業務で使用してきて感じた、Angularの長所を紹介したい。

自動で画面を更新してくれる

Angularのプロジェクトでは、開発の際にローカル環境にてコードを変更した際にそれを自動で検知して画面を更新してくれる。

Angularでの開発は非常にスムーズでスピーディーだ。

なお、オンラインエディタのStackblitzでは、オンライン上でAngularのプロジェクトを動作させることができる。

気になる人はコードを書き換えてみて実際に表示される文字列が変わるのを確かめてみてほしい。

Webサーバーを準備しなくていい

JavaServerFacesなどの旧型のWebフレームワークでは、ページをプレビューするためにはTomCatなどのWebサーバーを自分でインストールし、コンピュータを起動するたびにサーバをスタートする必要があった。

これは非常に面倒でフロントエンド開発者のストレスの元だった。

Angularでは、node.jsを手動でインストールする必要があるものの、それを除けば準備するものはほとんど無く、素早く開発を始めることができる。

双方向バインディングが強力

Angularの売りのひとつが双方向バインディングだ。

双方向バインディングを使えば、ビジネスロギックで受け取った値をビューに、また、ビューが受け取ったユーザのアクションをビジネスロギックに即座に反映させることができる。

Angularの欠点

Angularの欠点と感じる部分も挙げておこう。

学習コストは高く付く場合が多い

Angularの学習コストはReactなどのライバルフレームワークよりも一般的に高いと言われている。

AngularはReactと違いフルスタックフレームワークなので、覚えることが多いのは当然かもしれないが、新しい開発者がチームに入ってきた際に、Angularのために学習時間を割かれるのはやはりとマイナスであるだろう。

ただし、Javaといったオブジェクト指向や静的型付け言語に慣れしたんだ人にとって、Angularは違和感なくWeb開発に移行するためにうってつけのフレームワークとも考えている。

記述のバリエーションが多く混乱しやすい

AngularはHTMLの記述に独自の記述スタイルを使用する。

その書き方には多くのバリエーションがあり、それぞれに使う場面や制約が異なる場面がある。

これは開発におけるハマるポイントになりやすく、解決するのに数時間かかることもチラホラある。

Angularの将来性

この記事を読む読者の人が一番知りたいのは、「自分のキャリアを考えたうえでAngularは習得する価値のある技術なのか？」という事だろう。

著者はAngularの将来性は非常にいいと考えている。ここにその根拠を示したい。

JavaScriptは今後も伸びる言語

現在、世界でもっともよく使用されているプログラミング言語はJavaScript。

Webアプリケーションの需要は今度も伸びていくと考えられ、すでにWebのための言語として地位を確立したJavaScriptが落ち目になるとは考えにくい。

ReactとVue.jsには負けない

JavaScriptの需要は下がらないもののAngularのライバルであるReact・vue.jsといったフレームワークがシェアを伸ばしていき、Angularが使われなくなるということは考えられないだろうか？

まず、Reactについて。ReactはAngularとはコンセプトが違いフルスタックフレームワークでは無い。フレームワークに求められる要求も異なるので、どちらか一方が生き残るといった競争相手として捉えるべきではないだろう。

Vue.jsは軽量で習得のハードルは低いとされているJavaScriptフレームワーク。まだ、導入している会社はAngularよりも少ないものの、人気は上昇傾向にある。ただ、Angularとは違い大規模開発には向いていないという印象があり、Angularのシェアを脅かすほどの存在では無いだろう。

MEANスタック

Web開発でよく使われるテクノロジーは海外ではMEANスタック（MongoDB, Express.js, Angular, Node.jsの頭文字）と呼ばれ、Angularはその中心的な役割を担っている。

既に多くの企業がAngularをベースとした開発プロジェクトを進めており、Angularの開発者を求める求人も多い。