1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Angularプロジェクト作成

Last updated at Posted at 2021-09-13

はじめに

最近仕事でAngularを触り始めました。
まずは環境構築から、自分の備忘録用に残していこうと思います。

Angularとは

AngularとはGoogleによって開発されたJavaScriptフレームワークです。
元々は「AngularJS」という名前でしたが、バージョン2.0から「Angular」という名前に変更されています。

バージョンについてはこちらを参照

環境構築

とりあえずプロジェクトを作成してみましょう。

Node.jsのインストール

Node.jsとはJavaScript実行環境のこと

参考記事:Node.jsとはなにか?なぜみんな使っているのか?

ReactだろうがVueだろうが、Node.jsのインストールは必要。

インストール後は以下コマンドでバージョン確認が出来ます。

$node -v

Angular CLIのインストール

Node.jsをインストールしたことで、Node Package Manager(npm)が使えるようになりました。
次にAngular CLIをインストールします。

$npm install -g @angular/cli

CLIとはCommand Line Interfaceのことで、これをインストールすることで、プロジェクト作成がコマンド一つで簡単に出来るようになります。

インストール後は以下コマンドでバージョン確認が出来ます。

$ng version または ng --version

プロジェクト作成

Angular CLIをインストール出来たので、早速プロジェクトを作成します。
プロジェクトは以下コマンドで作成できます。(途中に色々と聞かれるので選択していく)

$ng new プロジェクト名

プロジェクト起動

プロジェクトが作成できたので、一度起動して見ましょう。プロジェクトのディレクトリに移動して以下のコマンドを実行します。

$ng serve または npm start

ローカルサーバが立ち上がるのでhttp://localhost:4200/でページが表示されることを確認しましょう。

ところで ng servenpm startですが、どっちもサーバを起動させるコマンドです。npm startpackage.jsonに記載されたstartスクリプトを実行しています。package.jsonscripts部分を確認してみると、プロジェクト作成直後は以下のようになっています。

package.json
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

結局どちらもng serveを実行しているようです。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?