はじめに
前回は、AngularがGoogleによって開発されているJavaScriptフレームワークの一つであることを学んだ。
今回はAngularで開発する環境構築について必要なものをまとめていく。
Angularアプリ開発の流れ
Angular はTypescriptというプログラミング言語をソースを記述して、それをビルドにより変換作業され、ブラウザで実行可能なHTMLファイルやJavaScriptファイルで構成されたAngularアプリを作るという流れである。
必要なソフトは下記4つをダウンロードすれば、Angularでの開発が可能である。
- テキストエディタ
- Node.js
- TypeScript
- Angular CLI
ソースコードを記述するためのエディタ
基本的にはどのようなテキストエディタを使用しても構わないが、今回はMicrosoft社製のVisual Studio Codeというソフトウェアを使用する。
↓Visual Studio Code ダウンロードリンク
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
ビルド実行に必要なNode.js
記述したソースコードをブラウザで実行できるようにするには、ビルドと呼ばれる変換作業が必要である。
Angularアプリ開発に下記2つのソフトが必要である。
- Typescript実行環境
- 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.ｊsの機能を使って、自分のパソコンを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アプリを開発するための必要なソフトをインストールした。開発環境が整ったので、次回から簡易的なアプリを作っていく。
コメント