Application)の開発に力を発揮します。6.0.0がリリースされました。Angularのアプリケーションをつくろうとすると、まず環境をつくらなければならず、TypeScriptなど学んでおくべき技術もあります。JavaScriptの基礎を身につけただけでは足りず、力尽きてしまいそうになるかもしれません。CLIは、アプリケーションの開発を手助けするツールです。本稿ではこのツールで、とりあえず動きが確かめられるAngularアプリケーションのひな形をつくってみます。(npm)でインストールします。そのため、npmを備えるNode.jsを先にインストールしておきます。5.0以上)でなければなりません。Support)は8.11.1ですので、少なくとも8.11以降のバージョンを使えばよいでしょう(図001)。interface」の略です。CLIは、コマンドラインツールで動かします。promptがインストールされますし、Macにはターミナルが入っているでしょう。npmやCLIのコマンドをキーボードから入力して操作することになります。AngularはTypeScriptでコードを書くことが勧められています。CLIがつくるプロジェクトのプログラムも、TypeScript(TS)ファイルです。JavaScriptファイルをビルドしてみる」01「TypeScriptをインストールする」参照)。TypeScriptがサポートされたエディタを使います。エディタによっては設定が要るかもしれません。Codeをインストールする」参照)。CLIは、コマンドラインツールでnpmのinstallコマンドを使ってインストールします。@angular/cliMacで管理者権限を求めるエラーが出たときは、頭にsudoコマンドを添えてインストールし直してください。CLIをインストールすると、ngコマンドを使ってひな形となるAngularのアプリケーションのプロジェクトがつくれます。コマンドラインツールで、プロジェクトをつくるディレクトリに移ります(cdコマンドを使う)。つぎのngコマンドを打ち込めぱ、新たな「my-app」というディレクトリにアプリケーションのひな形のプロジェクトができ上がるのです。npmのパッケージをインストールするので、少し時間がかかります。ローカルサーバーでアプリケーションを開くプロジェクトができたら、アプリケーションをローカルサーバーで開きます。つぎのように、新たにつくられたプロジェクトのディレクトリに切り替えて、ngコマンドのserveでローカルサーバーを起ち上げてください。--openを加えることにより、ブラウザでアプリケーションが開きます(図002)。ローカルサーバーのURLはhttp://localhost:4200/です。serveコマンドは、アプリケーションのファイルを監視して、修正が加わるとページは描き替わります。Cのキーを入力してください。コンポーネントに手を加えるアプリケーションのファイルは、プロジェクトのディレクトリの「src」フォルダに納められています。その中の「app」フォルダに入っているのが、アプリケーション(app.module)とコンポーネント(app.component)のTypeScript(TS)ファイル、およびコンポーネントのHTMLとCSSファイルです(図003)。図003■プロジェクトのディレクトリの中身ページに表示されるタイトルのテキストは、TypeScriptファイルsrc/app/app.component.tsに定められています。つぎのように、コンポーネントのクラス(AppComponent)に定められたタイトルのプロパティ(title)を書き替えれば、ページの表示も変わります。'app';}また、コンポーネントのCSSファイルははじめは空っぽです。アプリケーションの組み立てアプリケーションがどのように組み立てられているのか、おもにappフォルダのファイルについて簡単に触れておきましょう。index.htmlの<body>要素には、Angularのアプリケーションがつぎの抜書きのようにタグとして加えられています。src/index.html<app-root></app-root>アプリケーションのタグを定めるのは、コンポーネントのTypeScriptファイル(app.component.ts)です。コンポーネントのクラス(AppComponent)に加えられたデコレータ関数(codeComponent())の引数オブジェクトが、タグ(selector)のほか、HTMLテンプレート(templateUrl)やCSS(styleUrls)のファイルも決めています。{}もっとも、コンポーネント(app.component)は、みずから起ち上がるわけではありません。アプリケーションのモジュール(app.module)がデコレータ関数(NgModule())の引数オブジェクトでコンポーネントを宣言(declarations)して起動(bootstrap)するのです。