Angular2 | Angularの設定
AngularJSとAngular2
AngularはGoogleが中心となって開発しているJavaScriptフレームワークである。これはもともとAngularJSという名前で開発されていた。その後、内容を大幅に見直し、新しいAngular2として再登場した。このとき、名前も2を付けて「Angular」に変更された。
この新しいAngularはどのようなフレームワークなのか。その特徴を一言で表すなら「コンポーネント指向」といえるだろう。
以前のAngularJSは、いわゆるMVCアーキテクチャを前提に設計されていた。コントローラに処理を用意し、ビューに表示を用意するというスタイルである。
しかし、この方式はフロントエンドの表示を作る中心となるJavaScriptに最適とは言いにくい。もっとJavaScriptに合ったアーキテクチャがあるはずである。そこでAngularチームが考えたのがコンポーネントだった。
Webを構成する要素一つ一つを、独立した構成要素としてまとめ直す。ビューとコントローラを分けるのではなく、コンポーネントの中に表示から処理まですべてが備わっており、コンポーネントを配置すればそれで完了するというスタイルのほうが、Web作成にははるかに適している。そこでAngularは内容を完全に変え、新しいフレームワークとして生まれ変わったのである。
このAngularは現在、次のアドレスで公開されている。
なお、これまでのAngularJSもまだ存在している。アドレスは次のとおりである。
Angular CLIでインストール
Angularを利用する方法はいくつかある。ただ、すぐに思い浮かぶのは「ファイルをダウンロードしてプロジェクトにコピーする」という方法だろう。しかし残念ながら、現時点ではその方法は用意されていない。Angularのサイトからファイルをダウンロードするわけではない。
次に思い浮かぶのはnpmを使う方法である。コマンドプロンプトまたはターミナルでWebアプリケーションのディレクトリへ移動し、次のように実行するとインストールされる。
$ npm install angular2
実行結果は次のようになる。
npm WARN deprecated angular2@2.0.0-beta.21: This version of Angular has been
... 省略 ...
npm WARN Angular2 No license field.
+ angular2@2.0.0-beta.21
added 1 package in 6.706s
しかし現時点、つまり2017年12月時点では、npm install angular2でインストールされるのはベータ版であり、その後のRC版は用意されていないようである。npm install angularではどうかと思う人もいるかもしれないが、その場合は以前の1.xがインストールされてしまう。
ではどうするのがよいのか。おそらく最もよい方法はAngular CLIを利用することである。これはAngularを利用するための専用ツールで、次のURLで公開されている。
ただし、このサイトからファイルをダウンロードするわけではない。ここには使い方などのドキュメントがある。インストールにはnpmを使う。コマンドプロンプトまたはターミナルを起動し、次のように実行する。
$ npm install -g @angular/cli
これでAngular CLIがインストールされる。
もしインストール中に権限関連の問題が発生した場合は、次のリンクを参照して解決するとよい。
https://docs.npmjs.com/getting-started/fixing-npm-permissions
Angularのインストール
Angular CLIはコマンドラインで実行するツールである。Angularを使うには、まずコマンドプロンプトなどを起動し、プロジェクトを作成したい場所へcdコマンドで移動する。(cd {ディレクトリ名})
そして次のようにコマンドを実行する。
$ ng new プロジェクト名
これでAngularを利用するプロジェクトが作成される。たとえばmyappという名前で作成するなら、ng new myappと実行するとmyappフォルダが作られ、その中に必要なファイルが生成される。
$ ng new myapp
アプリケーションの実行
アプリケーションの実行もAngular CLIで行える。cdコマンドでプロジェクトディレクトリへ移動し、ng serveと実行する。
$ ng serve
これで内蔵サーバーが起動し、次のアドレスからアプリケーションにアクセスできる。ただし、初回はビルドのため起動に少し時間がかかる。
画面に「Welcome to app!」という文言とロゴが表示されれば、アプリケーションは正しく実行されている。下の画面は、この例で生成されるAngularアプリケーションのWebページ画面である。
Angularアプリケーションの構成
生成されたAngularアプリケーションの中には、多数のファイルやフォルダが入っている。これはAngular CLIが基本的にnpmを使ってパッケージをインストールしているため、Node.js関連のパッケージが多数含まれているからである。
アプリケーション内のファイルの多くはJSONファイルである。これらのファイルは各種ツールの設定情報を記述したもので、直接編集することはあまりないだろう。各フォルダの基本的な役割は次のとおりである。
- .gitフォルダ: Git関連ファイルが入っている。
- node_modulesフォルダ: Node関連モジュールのファイルが入っている。
- e2eフォルダ: エンドツーエンドテスト関連のファイルである。
- srcフォルダ: Webページ関連のファイルが入っている。
srcフォルダの内容
アプリケーションで表示するWebページのファイルはsrcフォルダにまとめられている。この部分が実質的なAngularアプリケーションの中心部分といえる。このsrcフォルダには次のようなファイルが用意されている。
- appフォルダ: Angularコンポーネントが入っている。
- favicon.ico: アイコンファイルである。
- index.html: デフォルトで表示されるWebページである。
- main.ts: 起動時に実行されるスクリプトである。
- tsconfig.json: TypeScriptの設定ファイルである。
- typings.d.ts: TypingsはTypeScript定義管理ツールの設定ファイルである。
ここで.ts拡張子のファイルが見えるはずである。これはTypeScriptのスクリプトファイルである。AngularはJavaScriptだけでなくTypeScriptも利用できる。Angular CLIで生成されたプロジェクトは、基本的にTypeScriptを使うようになっている。
appフォルダとコンポーネント
srcフォルダの中にはappフォルダがある。これがAngularの中心部分である。
ここにはAngularのコンポーネントに関するファイルがある。このコンポーネントを作ることがAngularの基本である。
コンポーネントとは、画面表示や内部処理などをパッケージ化し、どこでも使えるようにしたものである。これはHTMLファイル、スクリプトファイル、スタイルシートファイルなどの組み合わせで構成される。このコンポーネントは、HTMLのカスタムタグを使ってHTML内に記述して利用できる。
たとえばmy-componentというコンポーネントを作れば、HTMLに<my-component>というタグを書くだけで、そのコンポーネントによる表示や動作が行われる。
基本的に、フォルダには次のようなファイルが含まれている。
- index.ts: コンポーネント関連で基本的にロードされるスクリプトである。コンポーネント全体でロードされるライブラリなどがここに書かれている。
- environment.ts: 開発中や正式配布など、状況に応じた処理を記述したものである。
- app.component.html: サンプルコンポーネントのHTMLテンプレートである。
- app.component.ts: サンプルコンポーネントの処理を含むスクリプトである。
- app.component.css: サンプルコンポーネントで使うスタイルシートである。
- app.component.spec.ts: サンプルコンポーネントのテストスクリプトである。
index.tsとenvironment.tsはコンポーネント全体に関するもので、まずは編集しなくてもよい。ここで注目したいのは、サンプルに含まれているコンポーネントファイルである。app.componentというファイルが3つ用意されており、この3つがセットになってコンポーネントを構築している。app.component.spec.tsはテスト用なので、コンポーネント本体には含まれないと考えてよい。
コンポーネントは、このようにHTML、スクリプト、スタイルシートに同じ名前のファイルを作成して作る。これらのファイルを作ることがコンポーネントを作るということであり、Angularプログラミングの最も基本となる。
まずはプロジェクト全体の構成がだいたい分かったので、次はコンポーネント作成について説明する。