0
0

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.

第2回:Angularの環境構築

Last updated at Posted at 2020-09-22

目次:Webアプリ開発ロードマップ

第2回:Angularの環境構築

今回からAngularアプリを作っていきます。
まず、Angularの元となるNode.jsをインストールします。

Node.jsをインストールする

紹介

Node.jsはChromeエンジンを利用したJavascriptランタイムです。
通常、JavaScriptはブラウザ内に読み込まれて動作しますが、Node.jsを利用することでコマンドラインからJavaScriptプログラムを動かすことができます。
また、Node.jsはnpm (Node Package Manager)を具備しており、GitHubからOSSなモジュールを取得し、利用することができます。

注意事項

Node.jsはNode.js公式サイトからインストールしたいところですが、一度インストールしてしまうとアンインストールが面倒な代物です。
開発プロジェクトによって利用するNode.jsのバージョン指定がありますので、簡単にバージョンを切り替えられるようにインストールしましょう。
Node.jsのバージョン管理を行えるNodebrew(mac)やNodist(win)など他にもあるようですが、ここではNodebrewを使ってインストールしていきます。

インストール

  1. 下記のコマンドを実行し、nodebrewをインストールしてください。
    brewコマンドが使えないmacユーザはHomebrew公式サイトからインストールしてください。
$ brew install nodebrew
  1. コマンドラインが使えるように、環境変数PATHを通します。
    ~/.zprofileに下記の一文を書き足します。
export PATH=$HOME/.nodebrew/current/bin:$PATH
  1. 下記のコマンドでnodebrewのインストールが正常に行われたか確認します。
$ nodebrew -v
nodebrew 1.0.1
  1. 次にnodebrewを使ってNode.jsをインストールしていきます。
    下記のコマンドで利用できるNode.jsのバージョン一覧を表示します。
$ nodebrew ls-remote
  1. バージョンを指定してNode.jsをインストールします。今回はv14.9.0を利用します。
$ nodebrew install-binary v14.9.0
Fetching: https://nodejs.org/dist/v14.9.0/node-v14.9.0-darwin-x64.tar.gz
######################################################################### 100.0%
Installed successfully
  1. Node.jsがインストールされたことを確認します。
    下記のコマンドでPCにインストールされているNode.jsのバージョンを確認できます。
$ nodebrew list
v14.9.0

current: v14.9.0

currentのところに表示されるのが現在利用しているNode.jsのバージョンです。

  1. 複数インストールされたバージョンのうち、利用するバージョンを切り替えるには下記のコマンドを実行します。
$ nodebrew use v14.9.0
  1. Node.jsが正常にインストールされたか確認する。
$ node -v
v14.9.0
$ npm -v
6.14.8

Angularをインストールする

紹介

AngularはNode.jsを利用して作られたWebアプリフレームワークです。
また、Angular用のソースコードを一般的なhtml/css/jsにビルドする機能や、動作確認用にサービングする機能を持っています。

インストール

Angularのパッケージである@angular/cliをインストールします。
cliはCommand Line Interfaceの意味です。

  1. まず下記のコマンドで公開されているバージョンを確認します。
$ npm info @angular/cli versions
  1. 下記のコマンドでインストールします。今回は10.0.8をインストールします。
    -gオプションはglobalの意味合いがあります。通常、npmでインストールされるモジュールは、ローカルで作業しているパッケージの中にインストールされますが、
    -gでインストールすることでシステム内にインストールことになり、パッケージの内外から利用できるようになります。
    cliは基本的に-gでインストールすると考えていてください。
$ npm install -g @angular/cli@10.0.8
  1. 下記のコマンドで@angular/cliが正常にインストールされたかを確認します。
    aNGularのNGコマンドです。
$ ng version

Angularプロジェクトを作成する

下記のコマンドでAngularのプロジェクトを作成します。
frontという名前のプロジェクトが作成されます。

$ ng new front
? Would you like to add Angular routing? (y/N) -> y
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com                                         ] 
  • 1つ目の問い:Angularのルーティングを生成するか。
    後で自作することもできますが、作ってもらいます「y」を選択
  • 2つ目の問い:cssのフォーマットに何を利用するか。
    scssを選択。css以外はcssを高度にしたもので、そのままではブラウザで読み込むことができないため、ビルドを通す必要があります。

しばらく待っているとプロジェクトの作成が完了します。
下記のファイルが生成されます。

ファイル・フォルダ 説明
README.md MarkDown形式で書かれたパッケージの説明ファイル、第三者に対して使い方などを記載します。
angular.json Angularの設定ファイル
e2e あまり気にしなくていいです
karma.conf.js 自動試験用の設定ファイル
node_modules/ npmでインストールされたモジュールがここに入ります
package-lock.json node_modulesを再現するための設定
package.json Node.jsのパッケージ設定
src これからAngularプロジェクトで作成するソースコード一式
tsconfig.app.json TypeScriptの設定ファイル
tsconfig.base.json TypeScriptの設定ファイル
tsconfig.json TypeScriptの設定ファイル
tsconfig.spec.json TypeScriptの設定ファイル
tslint.json TypeScriptのLint設定ファイル。静的コードチェックのためのもの

node_modules/

このフォルダはnpmによってインストールされたモジュールがインストールされます。
このフォルダを削除しても、$ npm installをパッケージ内で実行することで、再度node_modulesは作られますので、gitに登録するときはこのフォルダは除外します。

package.json, package-lock.json

pakage.jsonのdependenciesやdevDependenciesにパッケージに必要なモジュールがバージョン指定で記載されています。ただし、"^6.0.0"のような指定で、バージョン6以上など、範囲指定がされているため、利用していたモジュールを完全に再現するためにはpackage-lock.jsonが必要になります。

Angularでサービングする

  1. Angularが必要としているモジュールをインストールする
$ cd front
$ npm install
  1. サービングする
$ ng serve
  1. ブラウザでアクセスしてみる

ブラウザから http://localhost:4200 にアクセスしてみましょう
下記のように空のWebアプリが表示されれば成功です。

localhost_4200_.png

ちなみに下記のコマンドを実行することで、ビルドが行われ、distフォルダにビルド結果が出力されます。

$ ng build

今回はここまでです。次回はログインページを作っていきます。
今回開発したソースコードはGitHubに入っています。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?