Angular Webアプリ開発入門2

はじめに

前回は、AngularがGoogleによって開発されているJavaScriptフレームワークの一つであることを学んだ。

今回はAngularで開発する環境構築について必要なものをまとめていく。

Angularアプリ開発の流れ

Angular はTypescriptというプログラミング言語をソースを記述して、それをビルドにより変換作業され、ブラウザで実行可能なHTMLファイルやJavaScriptファイルで構成されたAngularアプリを作るという流れである。

必要なソフトは下記4つをダウンロードすれば、Angularでの開発が可能である。

  1. テキストエディタ
  2. Node.js
  3. TypeScript
  4. Angular CLI

ソースコードを記述するためのエディタ

基本的にはどのようなテキストエディタを使用しても構わないが、今回はMicrosoft社製のVisual Studio Codeというソフトウェアを使用する。

↓Visual Studio Code ダウンロードリンク
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ビルド実行に必要なNode.js

記述したソースコードをブラウザで実行できるようにするには、ビルドと呼ばれる変換作業が必要である。
Angularアプリ開発に下記2つのソフトが必要である。

  1. Typescript実行環境
  2. Angular CLI

どちらもJavaScriptをサーバー上で実行する環境である「Node.js」という環境で実行されるため、あらかじめNode.jsを開発環境にインストールしておく必要がある。

↓Node.js ダウンロードリンク
https://nodejs.org/ja/

Node.jsの簡易Webサーバー機能で動作テストする

Angular CLIに含まれているコマンドを使ってビルドすると、HTMLやJavaScriptなど、ブラウザで実行可能な最終成果物が出来上がる。これをWebサーバにアップロードして、ブラウザにアクセスすれば、Angularアプリが動作する。

しかし、Webサーバを用意したり、ビルドするたびにWebサーバにコピーするのは手間である。

そこで、Angular CLIには、Node.jsの機能を使って、自分のパソコンをWebサーバとして動かす機能を使用する。この機能を使って、http://localhost:XXXX/という特別なURLを入力するだけで、作ったアプリが実行できるようなる。

TypeScriptとAngular CLIをインストールする

Node.jsで動作するTypeScriptやAngular CLIなどのソフトウェアをインストールするにはNode.jsに付属しているパッケージマネージャーを使用する。

パッケージマネージャーというのは、具体的には、Node.jsに含まれている「npm」というコマンドであある。npmコマンドを実行するには、Windowsの場合はコマンドプロンプト、macの場合はターミナルを使用する。

インストールコマンドの基本は下記

npm install -g パッケージ名

※macの場合はsudoを付ける

sudo npm install -g パッケージ名

「g」はどこのフォルダからでも使えるようにする設定である。

TypeScriptのインストール

npm install -g typescript

Angular CLIのインストール

npm install -g @anguar/cli

※少し時間がかかります

まとめ

今回はAngularアプリを開発するための必要なソフトをインストールした。開発環境が整ったので、次回から簡易的なアプリを作っていく。

コメント