-1024x559.jpg)
Angular とは?
Angular(アンギュラー) とは
「 Googleによって開発されているJavaScriptフレームワーク 」で、「サーバーと連携」出来て、「 WEBアプリ開発で幅広く使われている」そうである。
いろいろ調べてみると、ちょっと敷居は高い(つまり難しい?)けれど、生産性は高いとか動作環境を選ばないとか、概ね良さそうな記事がちらほらと。
じゃあ、さっそくどっかのサイトをみて、サンプルを打ち込んで、動かしてみながら勉強だぁ!、という前にそもそも、Angularって、どういうふうに動くのか?、なにかブラウザにアドオンを入れとくようなものなのか?(そこから知らないレベルなので)、そのへんをまずはすっきりさせておきたい。
最初のIndex.html
以下が、Angularを利用する際の Index.html 。

上記htmlの <app-root></app-root> のところが、Angular のコードに置き換わるところになるようだが、この指定、いったいどういうことなのだろう?
コンポーネント単位での開発
まずは、どういう作り方をするものなのか構造を調べてみると、Angularプログラミングでは、たとえば下記のような階層で配置して、諸々作成するようだ。

全体をまとめる部分が1つあって、あとは画面(というか機能、というか部品?)ごとに、分けて作っていく感じ。
ネーミングに “component” が入っている通り、その単位を「コンポーネント」と称してやっていくようである。
生成された Index.html
そして、上記のような構成のコードをコンパイルして本番動作可能な状態にすると、Index.htmlは以下のようになる。

Angularフレームワークベースで書いた、TypeScript、html、css 、すべて JavaScript に変換されるということですね。なるほど♪
まとめ
「最初のリクエストからどう動いていくのだろう?」というところが疑問だったのだが、Angularフレームワークベースのコードが JavaScript になって、それが最初にブラウザにロードされて処理が始まる、ということで、なんとなく納得。
「じゃあ、画面がたくさんある(Htmlがたくさんある)ようなシステムでは、生成されたJavaScriptも大きくなるのでは?、ロードに時間がかかるということ?」とか、「部分的にロードする仕組みがあるのか?」とか、まだ引っ掛かりはあるけれど、今後の課題として認識しておくことにして、まずは「仕組みに従って書いていけば、いい感じにJavaScriptを生成してくれるフレームワーク」という理解でいこうと思います。
コメント