初心者向けこの記事では、JavaScriptフレームワーク「Angular」について解説する。Angularは欧米のIT業界では知名度が高く、Webのフロントエンドフレームワークとして本命の存在であるが、日本での存在感はまだそれほど強くない。日本語で書かれたAngularに関する記事もそれほど多くない。著者はドイツでフロントエンドエンジニアとして働き、Angularをメインのフレームワークとして日頃から業務で使用している。Angularに触れたときのインパクトは大きくいまだに熱心なAngularファンである。今回の記事も非常にAngular推しの内容となっているので、その点はご了承いただきたい。MEANスタックAngularとは?AngularはGoogleにより開発されているフロントエンドのためのWebフレームワーク。高度な機能性を持ったWebアプリケーションの開発に使用できる。大規模な開発プロジェクトにも使用できる堅牢なアーキテクチャーを持つ。HTML・CSS部分を除き、JavaScriptの拡張版にあたる言語「TypeScript」を使用する。この記事を執筆している2021年8月現在では、バージョン12が最新である。注意!「AngularJS」はAngularの前身であるフレームワーク。AngularJSとAngularでは、とても大きな違いが存在するので、まったく別のフレームワークだと考えたほうがいいだろう。TypeScriptとは?TypeScriptはJavaScriptの拡張版にあたるプログラミング言語だ。その名前から予想できるように「タイプ」つまり型指定をおこなうタイプのプログラミング言語「静的型付け言語」だ。TypeScriptで書かれたコードは実行する前にJavaScriptのコードに変換される。Angularの特徴Angularのおもな特徴は以下の点だ。フルスタックフレームワークであり、Webアプリケーションの開発に必要な機能はあらかじめ備えている。シングルページアプリケーションである。ページの構成要素はコンポーネントに分けられる。それぞれについて簡単に説明しよう。今の時点でこれらの特徴を理解する必要はそれほど無い。フルスタックフレームワークAnuglarはフルスタック、つまり、Webアプリケーションの開発に必要な機能をあらかじめ備えたフレームワークだ。JavaScriptのフロントエンドフレームワークであるReactとはこの部分で大きく異なる。Angularのプロジェクトはプロジェクト設定やモデュール管理といった根幹の部分からAngularが受け持つ。シングルページアプリケーションAngularの仕組みを説明するうえで欠くことの出来ない特徴はAngularがシングルページアプリケーションであるという点だ。Angularプロジェクトのすべてはindex.htmlの一部に集約されて読み込まれている。ホーム画面は「/home」、問い合わせページは「/contact」といったように、ページごとにURLを割り当てる(ルーティング)ことは出来るので、この点は間違わないようにしよう。コンポーネント指向アーキテクチャAngularでは、ページを構成する各パーツはコンポーネントという単位に分割される。ヘッダー部分を「HeaderComponent」としてまとめて再利用できたりする訳だ。コンポーネントは標準では以下の4つのファイルから構成される。htmlページの構造を定義する。Angular特有の変数や制御構造を記述することもできる。css要素のスタイルを定義する。scss・sassを使用することもできる。tsビジネスロギックを定義する。tsはTypeScriptの拡張子。spec.tsユニットテストを定義する。Angularはユニットテストも標準でサポートしている。htmlやcssをtsファイル内に記述しファイルを削除してもいい。次に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。Webアプリケーションの需要は今度も伸びていくと考えられ、すでにWebのための言語として地位を確立したJavaScriptが落ち目になるとは考えにくい。ReactとVue.jsには負けないJavaScriptの需要は下がらないもののAngularのライバルであるReact・vue.jsといったフレームワークがシェアを伸ばしていき、Angularが使われなくなるということは考えられないだろうか?まず、Reactについて。ReactはAngularとはコンセプトが違いフルスタックフレームワークでは無い。フレームワークに求められる要求も異なるので、どちらか一方が生き残るといった競争相手として捉えるべきではないだろう。Vue.jsは軽量で習得のハードルは低いとされているJavaScriptフレームワーク。導入している会社はAngularよりも少ないものの、人気は上昇傾向にある。Angularとは違い大規模開発には向いていないという印象があり、Angularのシェアを脅かすほどの存在では無いだろう。Node.jsの頭文字)と呼ばれ、Angularはその中心的な役割を担っている。多くの企業がAngularをベースとした開発プロジェクトを進めており、Angularの開発者を求める求人も多い。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事NgRxでAngularの状態管理をする!NgRxの概要と使い方を解説。2022.07.30この記事では、Angularのための状態管理ライブラリNgRxについてその特徴やメリット、基本的な使い方について説明したい。Webアプリケーションの[...]【2023年】Angularのお勧めライブラリ12選!UIコンポーネント・グラフ・カレンダー。2021.12.11この記事では、UIコンポーネントをはじめとするAngularのサードパーティー製ライブラリを12個ピックアップして紹介する。業務でAngular[...]Angularのコンポーネントを極める!ライフサイクルと複数コンポーネントの連携。2021.11.18この記事では、Angularの核である「コンポーネント」についてまとめてみた。Angularアプリは数多くのコンポーネントが集まって構成される。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。