Angular

Angularのアプリケーションの作り方

「はじめてのAngularアプリケーション(Quick Start)」で、AngularのQuick Startを試しました。

そのときに、作られたアプリケーションとAngularの設定ファイルであるangular.jsonの中身をみると、アプリケーションの作り方(generate)って、どうすべきなのかな?と疑問に思ったので、調べてみたいと思います。

Quick Startの振り返りと疑問

Quick Startでアプリケーションを作ったコマンドを抜粋すると下記のようになります。

# 作業用ディレクトリ作って、npmの初期化する
[~/work] $ mkdir angular-quickstart
[~/work] $ cd angular-quickstart/
[~/work/angular-quickstart] $ npm init -y

# Angular CLIをインストールする
[~/work/angular-quickstart] $ npm install --save-dev @angular/cli

# my-appを作る
[~/work/angular-quickstart] $ npx ng new my-app

出来上がった my-app と angular.json を読んだときの疑問を挙げていきます。

  • my-appのrootが””で、my-app-e2eのrootが”e2e/”?
  • angular.jsonの位置がmy-appの下でよいの?

my-appのrootが””で、my-app-e2eのrootが”e2e/”?

「ng new」でオプションなしでアプリケーションを作成すると、作成したアプリケーション「my-app」とブラウザ自動テスト用のアプリケーション「my-app-e2e」の2つが生成されます。

そして、angularの設定ファイルであるangular.jsonは「my-app/angular.json」に生成されます。

Angularでは、アプリケーションの中に内部アプリケーションを作れるようです。

「my-app-e2e」はmy-appのテストアプリケーションなので、my-appの下にできるのはよいとしても、実際に別のアプリケーションやライブラリを作って一緒に管理しようとしたらどうなるの?
my-appの下ではなく、同階層の横の関係なんだけど。。。となりそうです。

angular.jsonの位置がmy-appの下でよいの?

アプリケーションの階層が気になり始めると、Angularの設定のangular.jsonの場所も、my-appの直下にあっていいんだっけ?と思い始めました。

これを知って、納得した

で、Angular CLIのリファレンスを読むと、Angularのアプリケーション管理には「ワークスペース」と「アプリケーション」という管理対象があるということがわかりました。

「ng new my-app」で作られるものは、

  • my-appというワークスペース
  • そのルート(top level)に位置するmy-appというアプリケーション

です。

きれいにワークスペースとアプリケーションを作る

振り返ると、「angular-quickstart」がAngularでのワークスペースで、その下にmy-appというアプリケーションを作ってるつもりでQuick Startを試してました。

でも実際は、my-appというワークスペースができ、そのルートにmy-appというアプリケーションができてしまってたようです。

ちょっと階層が深いですが、下記のようなディレクトリ階層で1つのワークスペースと1つのアプリケーションを作っていきます。

angular --(1)
  - quickstart --(2)
    - my-app --(3)

(1)angularディレクトリは、Angular CLIをローカルインストールするための階層です。この直下にAngularのワークスペースを作っていくことにします。

(2)quickstartディレクトリは、Quick Start用のワークスペースで、この直下に複数のアプリケーションを生成できるようにしていきます。

(3)my-appはQuick Startのアプリケーションを生成します。

(1)Angular関連を開発していく為のディレクトリangularを作る

angularディレクトリを作って、npmを初期化して、Angular CLIをインストールします。

[~/work] $ mkdir angular
[~/work] $ cd angular/
[~/work] $ npm init -y
[~/work] $ npm install --save-dev @angular/cli

(2)ワークスペースquickstartを作る

「ng new angular」だとアプリケーションまで作ってしまうので、「–create-application」をfalse指定して作ります。

[~/work/angular] $ npx ng new quickstart --create-application false

狙い通り、quickstartディレクトリ直下にangular.jsonが生成され、中身もまだシンプルなアプリケーションがない下記のようなものが生成されました。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {}
}

(3)アプリケーションmy-appを作る

作成したワーススペースquickstartへ移動し、アプリケーションmy-appを生成します。

[~/work/angular] $ cd quickstart
[~/work/angular/quickstart] $ npx ng generate application my-app

出来上がったディレクトリを見ると、

  • my-appは、projects/my-app
  • my-appのブラウザ自動テストアプリケーションmy-app-e2eも、projects/my-app-e2e

となってました。

projectsの下にアプリケーションができるのは、想定外でしたが、angular.jsonの設定にかかれていそうです。my-app-e2eがmy-appの同階層の横にできたのも想定外でしたが、2つともアプリケーションだと考えればわかりやすいですね。

今回のやり方で出来上がったmy-appは、Quick Startと同じようにして起動できました。

[~/work/angular/quickstart] $ npx ng serve --open

まとめ

Angularのワークスペースとアプリケーションについて理解して、きれいなディレクトリ構成でQuick Startをやりなおしました。

projectsフォルダや、そもそも「npx ng serve –open」ってアプリケーション指定してないのになんでmy-appが立ち上がるの?など疑問があり、それらはangular.jsonにかかれていそうなので、angular.jsonの中身を調べていきたいと思います。

ABOUT ME
crz33
アラフォーのシステムエンジニアです。 それなりの規模のSI会社でいろんなプロジェクトを渡り歩き、 立場もプログラマー、アーキテクト、プロジェクトリーダーと経験してきました。 今はプロジェクトマネージャーとして活躍?中です。 早期リタイアを目指し、アフィリエイトで稼げないかと奮闘中です。

COMMENT

メールアドレスが公開されることはありません。