「Angular（アンギュラー）」にご来店中の皆様、こんばんぎゅらー！ 「Angular JSビルドステーション」、ナビゲーターのDJアンです。
この番組では、あなたの街のJSフレームワーク「Angular」の最新情報、お役立ち情報をお届けしていきます。
それから、皆様からの質問メールも受け付けております。どんな内容の質問でも、NG無しでお答えしますよ。Angularだけにね。
それでは、本日も最後までお付き合いください。
ではさっそく、番組に届いたメールをご紹介します。福井県にお住まいの、ペンネーム「恋するusageちゃん」さん。ありがとうございます。
『アンさん、こんばんぎゅらー。』
はい、こんばんぎゅらー。
『この業界は、赤・青・緑の三つ巴の争いと聞きますが、そもそもどんな業界なんですか？ また、三つの中でAngularが優れている点って何ですか？』
というメールです。上手いこと言いますねー。赤・青・緑の三つ巴。うちが赤で、あと、青のお店があれですね。Rさんですよね。で、緑のお店がVさん。これらが三大JSフレームワークなんて言われてますけど、それぞれ営業方針と言いますか、得意分野があるんですよ。その辺りを、なるべく簡単に説明していきますね。
さて、私たちのこの業界なんですけど……総称して「JavaScriptフレームワーク」なんて呼ばれてますが、ざっくり分けて二つのサービスを提供してます。
ひとつは、よく『JavaScriptライブラリ』と呼ばれるものですね。ブラウザ上で動作するJavaScriptに機能を追加して、もっと便利に、もっと簡単に開発できるようにしようというものです。老舗だと、DOM操作やAJAX処理の分野ならjQueryさんやPrototypeさんが有名だったんですけど。この分野で近年業績を伸ばしてきたのが、青と緑のお店です。
あと、もっと専門分野に特化したライブラリとしては、日付の処理が簡単になるMoment.jsさんとか、グラフの描画が簡単になるChart.jsさんも人気ありますよね。
と、ちょっとでもWeb系の開発を経験されている方なら、どういうものかイメージつきやすいんじゃないでしょうか。
……で、我らがAngularはと言うとですね。……実は、もうやってないんですよ、これ。ごめんなさい！ 初期の頃は、こっち専門でスタートしたんですけど、色々あってもうやめちゃったんですよねー。
なので、これらと同じようなものをイメージして今のAngularに手を出すと、痛い目をみますよ、初心者の方。お気を付けください。
あ、待ってください。帰らないでください。手に取った商品を戻さないでください。もうちょっと続きを聞いてくださいね。
次に説明するもう一つの顔こそ、Angularの真骨頂、現在のWeb開発の真骨頂です。これを知らずにもはやWebアプリケーションは開発できない、というものなんですけど……
ちょっと長くなったので、曲に行きましょうね。お聞きください。
キャメルケースで、「アンダースコアが許せない」。
はい、キャメルケースのナンバー、お聞きいただきました。ちなみに私はスネークケースも大好きですよー。
さて、お待たせしました。Angularの真骨頂、今の主力商品についてご説明しますよ。
これは、先ほどのJavaScriptライブラリの進化系ともいえるもので、単に「JavaScriptフレームワーク」と呼ぶ時は、通常は今から説明するものを指します。もっと広く、「Webアプリケーションフレームワーク」なんて呼ばれたりもしますね。
で、どういうものかと言いますと。まず開発の手法として、基本的にはコマンドラインのツールを使います。当店だと、Angular CLIというツールをご用意しております。要所要所で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タグで検索してみてくださいね。
それから、メールも引き続き募集しています。「認識が間違っている」「説明不足」「悪ふざけが過ぎる」などなど、ご意見がございましたらメールでお寄せください。
では、そろそろお時間となりました。この後もAngularで、Web開発ライフをお楽しみくださいね。
「Angular JSビルドステーション」、お相手はDJアンでした。それでは皆様、さようならんぎゅらー！