Ugo

Webエンジニアのためのプログラミング情報サイト

Angularアプリの基本を学ぶ！プロジェクトの作成と基本構造。

Angularアプリの基本を学ぶ！プロジェクトの作成と基本構造。

この記事では、Angularの新しいプロジェクトの作成方法やプロジェクトの構造とおもなファイルについて紹介していく。

この記事で学習するポイントは以下の通りだ。

  • 新しいプロジェクトの作成
  • プロジェクトの構造
  • 重要な設定ファイル

なお、node.jsの準備がまだ出来てない人はこちらの記事を参考にして事前にインストールしてほしい。

目次

プロジェクトの作成

まずは新しいプロジェクトの作成方法を確認しよう。

Angular CLI コマンド

Angular CLIはAngularの開発に必要な機能をまとめたコマンドラインインターフェイスだ。

Angular CLIはwindosであればコマンドプロンプト、macであればターミナルといったコマンドツールから実行することができる。

なお、この記事ではVSCodeのターミナルを使ってコマンドを実行する。

ng newコマンド

では、新しいプロジェクトを作成しよう。

cdなどのコマンドでプロジェクトを作成したいフォルダに移動する。

移動したら以下のコマンドを実行する。[project-name]の部分にプロジェクトの名前を指定する。

ng new [project-name]

実行すると「ルーティングファイルは作成するか？」と「CSSファイルの種類はどれにするか？」を尋ねられる。

最初の質問は「y」か「n」で答え、CSSに関する質問はCSSのタイプを選びENTERで決定する。

プロジェクトの作成が完了すると、「Packages installed successfully.」と表示される。

作成したプロジェクトは、メニューから「ファイル > フォルダを開く」を選び、作成されたプロジェクトのフォルダを選択することによって開くことができる。

npm install

npm installはそのプロジェクトに必要なライブラリを自動でインストールしてくれる便利なコマンドだ。

npm install

既存のプロジェクトを始めて開く際は、そのプロジェクトに必要なライブラリはインストールされていないので「npm install」を実行しよう。

インストールされたライブラリは「node_modules」フォルダに保存される。

また、インストールされるライブラリやそのバージョンはpackage.jsonファイルにて確認できる。

プロジェクトの基本構造

Angularプロジェクトの構造を確認しよう。

フォルダの構成

プロジェクトに含まれるおもなフォルダを確認しよう。

node_modles

node_modulesはアプリで使用するライブラリがインストールされるフォルダ。

src/app

appはAngularプロジェクトのメインとなるファルダ。

アプリを構成する大部分のファイルはこのフォルダ内に作られる。

Angularではページを構成する部品はコンポーネントと呼ばれ、フォルダに分割されて納められる。

src/assets

assetsはアプリ内で使用するリソース（画像やビデオなど）を納めるフォルダ。

src/environments

environmentsはアプリで使われるグローバルな設定ファイルを納めるフォルダだ。

develop・releaseといった複数の環境を使用している場合はそれぞれに対して値を設定することができる。

メインのファイル

プロジェクトに含まれるおもなファイルを確認しよう。

app.module.ts

app.module.tsには、プロジェクト内で使用しているコンポーネントやディレクティブといった構成要素がまとめて記述されている。

新しいコンポーネントを追加する際はこのファイルにコンポーネント名を明記する。

ひとつのプロジェクト内に複数のmodule.tsファイルを設定することも可能であり、プロジェクトで使用されるコンポーネントを内容ごとにモジュールとしてまとめることができる。

app-routing.module.ts

app-routng.module.tsはページのルーティングを設定するファイル。

ルーティングをセットしたコンポーネントは「/login」といったURLによって直に呼び出すことができる。

ルーティングの設定をapp.module.tsに記述する場合はこのファイルは省略される。

また、このファイルではログインしていないユーザは他のページに移動するといった挙動も定義することができる。

index.html

index.htmlはウェブサイトを呼び込むと最初に呼び出されるファイルで、HTML・CSS・JavaScriptで構成されるようなシンプルなウェブサイトに含まれているものと基本的には同じだ。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestProject</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

index.htmlの中の<app-root></app-root>の部分にAngularアプリの全体が読み込まれる。

設定ファイル

最後にAngularプロジェクトの中で重要な設定ファイルを確認しよう。

angular.json

angular.jsonにはAngularアプリのビルドやデプロイに関する設定が納められている。

package.json

package.jsonはアプリの情報やプロジェクトで使われているライブラリの情報を納めたnpm（node package manager）のための設定ファイル。

ライブラリのインストールには「npm install」コマンドを使う。

tsconfig.json

TypeScriptのコードはビルドされる際にJavaScriptのコードへ変換される。

tsconfig.jsonはその際の挙動を設定するためのファイル。

MENU