Angular JSビルドステーション

　「Angular（アンギュラー）」にご来店中の皆様、こんばんぎゅらー！　「Angular JSビルドステーション」、ナビゲーターのDJアンです。
　この番組では、あなたの街のJSフレームワーク「Angular」の最新情報、お役立ち情報をお届けしていきます。
　それから、皆様からの質問メールも受け付けております。どんな内容の質問でも、NG無しでお答えしますよ。Angularだけにね。
　それでは、本日も最後までお付き合いください。

----

　ではさっそく、番組に届いたメールをご紹介します。福井県にお住まいの、ペンネーム「恋するusageちゃん」さん。ありがとうございます。

『アンさん、こんばんぎゅらー。』
　はい、こんばんぎゅらー。
『この業界は、赤・青・緑の三つ巴の争いと聞きますが、そもそもどんな業界なんですか？　また、三つの中でAngularが優れている点って何ですか？』

　というメールです。上手いこと言いますねー。赤・青・緑の三つ巴。うちが赤で、あと、青のお店があれですね。Rさんですよね。で、緑のお店がVさん。これらが三大JSフレームワークなんて言われてますけど、それぞれ営業方針と言いますか、得意分野があるんですよ。その辺りを、なるべく簡単に説明していきますね。

　さて、私たちのこの業界なんですけど……総称して「JavaScriptフレームワーク」なんて呼ばれてますが、ざっくり分けて二つのサービスを提供してます。

　ひとつは、よく『JavaScriptライブラリ』と呼ばれるものですね。ブラウザ上で動作するJavaScriptに機能を追加して、もっと便利に、もっと簡単に開発できるようにしようというものです。老舗だと、DOM操作やAJAX処理の分野なら[jQuery](https://jquery.com/)さんや[Prototype](http://prototypejs.org/)さんが有名だったんですけど。この分野で近年業績を伸ばしてきたのが、青と緑のお店です。
　あと、もっと専門分野に特化したライブラリとしては、日付の処理が簡単になる[Moment.js](https://momentjs.com/)さんとか、グラフの描画が簡単になる[Chart.js](https://www.chartjs.org/)さんも人気ありますよね。
　と、ちょっとでもWeb系の開発を経験されている方なら、どういうものかイメージつきやすいんじゃないでしょうか。

　……で、我らがAngularはと言うとですね。……実は、もうやってないんですよ、これ。ごめんなさい！　初期の頃は、こっち専門でスタートしたんですけど、色々あってもうやめちゃったんですよねー。
　なので、これらと同じようなものをイメージして今のAngularに手を出すと、痛い目をみますよ、初心者の方。お気を付けください。

　あ、待ってください。帰らないでください。手に取った商品を戻さないでください。もうちょっと続きを聞いてくださいね。
　次に説明するもう一つの顔こそ、Angularの真骨頂、現在のWeb開発の真骨頂です。これを知らずにもはやWebアプリケーションは開発できない、というものなんですけど……

　ちょっと長くなったので、曲に行きましょうね。お聞きください。
　キャメルケースで、「アンダースコアが許せない」。

----

　はい、キャメルケースのナンバー、お聞きいただきました。ちなみに私はスネークケースも大好きですよー。

　さて、お待たせしました。Angularの真骨頂、今の主力商品についてご説明しますよ。
　これは、先ほどのJavaScriptライブラリの進化系ともいえるもので、単に「JavaScriptフレームワーク」と呼ぶ時は、通常は今から説明するものを指します。もっと広く、「Webアプリケーションフレームワーク」なんて呼ばれたりもしますね。

　で、どういうものかと言いますと。まず開発の手法として、基本的にはコマンドラインのツールを使います。当店だと、[Angular CLI](https://cli.angular.io/)というツールをご用意しております。要所要所で`new`だとか`build`だとか、そういうコマンドを入力しながら開発するので、CLI、コマンドラインインタフェースと呼んでます。

　で、そのツールでコードを書いていくわけなんですけど。JSフレームワークの特徴としては、それぞれのルール……たとえばAngularならAngular独自のルールで、コードを書いていくわけですね。で、最後にえいやっとビルドすることで、JavaScriptに変換されるというものです。ざっくり言うと。……伝わりましたかね。もうちょっとだけ具体的に言いましょうか。

　最初に、例えば`ng new my-dream-app`ってコマンドを入力します。すると、「my-dream-app」という名前のディレクトリと、たくさんのファイルが出来上がります。これが、アプリケーションのひな型になるんですね。
　そこに、必要な部品……「コンポーネント」や「モジュール」などを、`ng generate`コマンドで追加していきます。決められたルールに基づいていい具合に配置されるので、あとはそれを修正していくわけですね。
　で、最後に`ng build`って入力すると、Angularのルールで書いたコードが、JavaScriptとして最適化されたコードに変換されて、アプリケーションが完成するという。

　こんな風に、開発中はわかりやすい文法でコードを書ける。でも、最終的に出来上がるJavaScriptのコードは最適化されてるのでとっても早い。つまり、実行速度と開発の容易さ、両方の利点を兼ね備えたのがこの手法で、現在のWeb開発の主流なんです。

『ツールって本当に必要なの？　今までみたいにテキストエディタで直接JavaScriptを記述しちゃダメなの？』なんて思われる方もいらっしゃるでしょうけど。
　小さなWebページなら、まだそれでもいいんですけど。JavaScriptも進化してめちゃめちゃ高機能になってまして……今、ECMAScriptの最新って2019でしたっけ？　……その分開発も大変になってます。高度なコード……あ、ギャグじゃないですよ、これ。コードを直接書いていくのは、かなりの学習コストが必要になるんですよ。それを、より解りやすい書き方で開発できるというのが、AngularをはじめとするJSフレームワークのメリットなんです。とっかかりのハードルは高いんですけど、開発はとっても便利になりますよ。

　Angularは、かなり早い段階でこれ一本に絞ったんですよね。他のお店も参入してきて、特に緑のお店なんかはかなり力を入れてらっしゃるんですけど。まだまだAngularにもアドバンテージがありますよ。例えば、CLIの機能がとても充実してます。`generate`コマンドでテスト用のコードも同時に自動生成できたりとか。専門店としての意地ってもんがありますからね。

----

　Angular ほっとニュース！
　今年の2月に発表されたAngular 9では、次世代のレンダリングエンジン「Ivy」が正式採用されて、より高速で軽量になりました！
　他にも色々な改良を加え、より便利になったAngular、ぜひ一度お試しください！

----

　さて、続いてのメールです。福井県にお住まいの、ペンネーム「バージョン2から本気出す」さん。ありがとうございまーす。

『アンさん、こんばんぎゅらー。』
　はい、こんばんぎゅらー。
『Angularは、JSフレームワークなのにも関わらず、JavaScriptではなくTypeScriptというものが必要だと聞きました。本当だとすると、看板に偽りありだと思います。』

　というメールをいただきましたが……はい、本当です。Angularの開発に必要なのはTypeScriptという言語で、JavaScriptとは似てるけど別物です。初心者の方が安易に手を出すと、痛い目をみますよ。

　あ、あ、待ってください。帰らないでください。カゴに入れた商品はちゃんと買ってください。もうちょっと続きを聞いてくださいね。

　TypeScriptという言語はですね、簡単に言うと、ものすごく「型」に厳しいJavaScriptです。型って色々ありますよね？　数値とか文字列とか。あれです。
　本来JavaScriptって、型がゆるーい言語なんですよね。`var i = 1;` ってな感じで数値を代入してもですね、直後に`i = "Hello!";` とかできちゃうという。
　雑誌をおにぎりの棚に陳列しちゃうみたいなもんですね。ゆるーい経営方針。そして無駄に冷やされる雑誌。
　一方、うちの店は厳格ですから、いい加減に陳列しようもんなら、そりゃもう店長が飛んできて説教ですよ。赤色灯がガンガン回りますよ。それくらい型には厳しいです。

　この、型定義が厳密だとどんなメリットがあるんだ、ってことなんですけど。アプリケーションの規模が大きくなったり、多人数で開発する時に特に威力を発揮します。意図していない値を弾くことで、バグの早期発見が容易になったりとか。あと、JSONデータを扱ったりすることも多いですけど、型定義ファイルというものを用意することで、どういう形式のデータが渡ってくるのかを指定してあげることもできます。慣れると、とっても便利ですよ。
　また、最終的にJavaScriptに変換されるという点も、AngularのようなJSフレームワークと相性がいいんです。

----

　さて、Angular、そしてJSフレームワークについてご紹介してきましたが、いかがでしたでしょうか。気になったという方は、Qiitaを[`Angular`](https://qiita.com/tags/angular)タグで検索してみてくださいね。
　それから、メールも引き続き募集しています。「認識が間違っている」「説明不足」「悪ふざけが過ぎる」などなど、ご意見がございましたらメールでお寄せください。
　では、そろそろお時間となりました。この後もAngularで、Web開発ライフをお楽しみくださいね。
　「Angular JSビルドステーション」、お相手はDJアンでした。それでは皆様、さようならんぎゅらー！