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

どうもこんにちはコウヘイです。
本シリーズは、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/」にアクセスすることで同じ画面が表示されます。

というわけで今回は以上です。
無事にAngularのデフォルトアプリケーションの起動をすることができました。
次回からは実際にソースコードをいじりながら、Angularの使い方について学んでいきたいと思います。
おすすめ記事:無料あり:Angular学習におすすめの本【AngularJSとの違いに注意】
