【簡単】AngularでWebアプリケーションの作成・実行手順について解説

2020.12.06 (更新日: 2020.12.11)
Angular ITノウハウ
プログラミング

どうもこんにちはコウヘイです。

本シリーズは、Angularについて完全初心者の私がAngularをある程度使えるようになるまで頑張るをテーマに日々の作業ログを記録する内容になります。

以下のような疑問を持ちました。

・Angular開発が初めてなので、まずは開発環境構築をしりたい
・Angularでプロジェクト作成からアプリケーション起動までの流れを知りたい

今回はこういった疑問に答えます。

著者情報

この記事を書いている僕ですが、Javaをメインにバックサイド開発を7年ほど経験しています。
最近フロントサイドにAngular、バックサイドにSpringBootを使用したSPA（シングルページアプリケーション）を作成する案件で働き始めたので、Angular学習を開始しました。

こんな僕が解説していきます。

AngularでWebアプリケーションの作成・実行手順について解説

今回解説するAngularでWebアプリケーション実行するまでの手順は以下です。

その①：Node.jsのインストール

その②：npmのインストール

その③：Angular CLIのインストール

その④：プロジェクト作成

その⑤：プロジェクト構成の確認

その⑥：アプリケーション起動

順に説明します。

その①：Node.jsのインストール

Node.jsはJavascript実行環境として必要です。

こちらのサイトからご自身の環境にあったNode.jsをインストールしてください。

その②：npmのインストール

Node.jsのパッケージ管理システムであるnpmをインストールします。

Node.jsをインストールすると自動でnpmもインストールされているはずです。

コマンドを打って確認してみましょう。

$ npm --version
6.14.4

※コマンドが存在しない場合は別途npmのインつトールが必要になります。

その③：Angular CLIのインストール

Angular CLIとはAngularのコマンドラインインターフェースです。

プロジェクトを作成したり、アプリケーションの起動などが簡単にできるようになります。

Angularを使用する場合は必須だと思ってインストールしてください。

以下のコマンドを実行します。

npm install -g @angular/cli

$ npm install -g @angular/cli
npm WARN deprecated debug@4.2.0: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\kohei\AppData\Roaming\npm\ng -> C:\Users\kohei\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng       

> @angular/cli@11.0.3 postinstall C:\Users\kohei\AppData\Roaming\npm\node_modules\@angular\cli
> node ./bin/postinstall/script.js

? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No
+ @angular/cli@11.0.3
added 253 packages from 201 contributors in 75.594s

その④：プロジェクト作成

Angular CLIでAngularのプロジェクトを作成します。

プロジェクト作成コマンド

ng new <プロジェクト名>

実際の実行結果は以下です。

$ ng new angular-app
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?　・・・①
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? Yes　・・・②
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss　・・・③
      ]
CREATE angular-app/angular.json (3745 bytes)
CREATE angular-app/package.json (1201 bytes)
CREATE angular-app/README.md (1019 bytes)   
CREATE angular-app/tsconfig.json (737 bytes)
CREATE angular-app/tslint.json (3185 bytes)
CREATE angular-app/.editorconfig (274 bytes)
CREATE angular-app/.gitignore (631 bytes)
CREATE angular-app/.browserslistrc (703 bytes)
CREATE angular-app/karma.conf.js (1428 bytes)
CREATE angular-app/tsconfig.app.json (287 bytes)
CREATE angular-app/tsconfig.spec.json (333 bytes)
CREATE angular-app/src/favicon.ico (948 bytes)
CREATE angular-app/src/index.html (296 bytes)
CREATE angular-app/src/main.ts (372 bytes)
CREATE angular-app/src/polyfills.ts (2826 bytes)
CREATE angular-app/src/styles.scss (80 bytes)
CREATE angular-app/src/test.ts (753 bytes)
CREATE angular-app/src/assets/.gitkeep (0 bytes)
CREATE angular-app/src/environments/environment.prod.ts (51 bytes)
CREATE angular-app/src/environments/environment.ts (662 bytes)
CREATE angular-app/src/app/app-routing.module.ts (245 bytes)
CREATE angular-app/src/app/app.module.ts (393 bytes)
CREATE angular-app/src/app/app.component.html (25757 bytes)
CREATE angular-app/src/app/app.component.spec.ts (1072 bytes)
CREATE angular-app/src/app/app.component.ts (216 bytes)
CREATE angular-app/src/app/app.component.scss (0 bytes)
CREATE angular-app/e2e/protractor.conf.js (904 bytes)
CREATE angular-app/e2e/tsconfig.json (274 bytes)
CREATE angular-app/e2e/src/app.e2e-spec.ts (662 bytes)
CREATE angular-app/e2e/src/app.po.ts (274 bytes)
✔ Packages installed successfully.　・・・④
    Successfully initialized git.

気になった箇所の説明をしておきます。

①：Strict Modeを有効化

? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
This setting helps improve maintainability and catch bugs ahead of time.
For more information, see https://angular.io/strict Yes

②：ルーティング機能の有無

? Would you like to add Angular routing? Yes

③：スタイルシートのフォーマット指定

? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss

④：自動でGit管理

Successfully initialized git.

プロジェクトディレクトリ直下に.gitディレクトリが作成されます。

プロジェクトを作成すると、Gitでソース管理がされるみたいです。

個人的には毎回git initコマンドを打つのも手間ですし、Gitでソース管理し忘れる場合もたまにあるのでソース管理がデフォルト仕様なのはいいなと思いました。

その⑤：プロジェクト構成の確認

プロジェクトが作成されると、プロジェクト名で指定した名前のディレクトリが作成されて、Angularのデフォルトアプリケーションのソースコード一式が作成されていれます。

プロジェクト構成は以下です。

$ ls -la angular-app/ | sort
drwxr-xr-x 1 kohei 197121      0 12月  6 08:39 ..
drwxr-xr-x 1 kohei 197121      0 12月  6 08:39 e2e
drwxr-xr-x 1 kohei 197121      0 12月  6 08:39 src
drwxr-xr-x 1 kohei 197121      0 12月  6 08:41 .
drwxr-xr-x 1 kohei 197121      0 12月  6 08:41 .git
drwxr-xr-x 1 kohei 197121      0 12月  6 08:41 node_modules
-rw-r--r-- 1 kohei 197121    274 12月  6 08:39 .editorconfig
-rw-r--r-- 1 kohei 197121    287 12月  6 08:39 tsconfig.app.json
-rw-r--r-- 1 kohei 197121    333 12月  6 08:39 tsconfig.spec.json
-rw-r--r-- 1 kohei 197121    631 12月  6 08:39 .gitignore
-rw-r--r-- 1 kohei 197121    703 12月  6 08:39 .browserslistrc
-rw-r--r-- 1 kohei 197121    737 12月  6 08:39 tsconfig.json
-rw-r--r-- 1 kohei 197121   1019 12月  6 08:39 README.md
-rw-r--r-- 1 kohei 197121   1201 12月  6 08:39 package.json
-rw-r--r-- 1 kohei 197121   1428 12月  6 08:39 karma.conf.js
-rw-r--r-- 1 kohei 197121   3185 12月  6 08:39 tslint.json
-rw-r--r-- 1 kohei 197121   3745 12月  6 08:39 angular.json
-rw-r--r-- 1 kohei 197121 525696 12月  6 08:41 package-lock.json
total 531

ざっくりですが、各ディレクトリとファイルの説明は以下です。

src：ソースコードを置くディレクトリ

package.json：nodeのパケージを管理するファイル

angular.json：Angularの設定ファイル

その⑥：アプリケーション起動

プロジェクトのディレクトリ（今回だとangular-app）が作成されるので、そのディレクトリに移動してアプリケーションを実際に起動します。

アプリケーション作成コマンド

ng serve
または
ng serve –open

オプションに–openをつけるとアプリケーション起動後にブラウザが起動してアプリケーション画面が表示されます。

実際にアプリケーションを実行した結果が以下になります。

$ cd angular-app/
$ ng serve --open
Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   2.65 MB
polyfills.js          | polyfills     | 481.18 kB
styles.css, styles.js | styles        | 340.75 kB
main.js               | main          |  59.60 kB
runtime.js            | runtime       |   6.15 kB

                      | Initial Total |   3.52 MB

Build at: 2020-12-05T09:50:37.108Z - Hash: 1986d78155a87e40a5ef - Time: 13895ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **  


√ Compiled successfully.
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names  |      Size
styles.css, styles.js | styles | 340.75 kB

4 unchanged chunks

Build at: 2020-12-05T09:50:40.611Z - Hash: 157d97753bba7b86f887 - Time: 2736ms

√ Compiled successfully.

今回の例だと「ng serve –open」で起動していますが、「ng serve」の場合は「http://localhost:4200/」にアクセスすることで同じ画面が表示されます。