Angularチュートリアルその0 環境構築〜アプリの起動まで

2017年11月16日

Angularをチュートリアルを使って勉強する機会があったので、その時の内容について説明していきます。

Angular4を勉強してみようと思ったのは、最近いろんなプロジェクトでサーバサイドでAPIを開発して、クライアントサイドでjQueryAPIを呼び出すことが多くなってきたので、せっかくならきちんと勉強してみようと思ったのがきっかけです。

ReactAngularのどっちを勉強するか迷いましたが、設計思想とかが理解しやすそうなAngularから勉強することにしました。

Reactについても、機会があれば勉強してみたいと思います。

Angularについては、本家サイトの方で詳細を確認してもらえればと思います。

サーバサイドはDjangoでクライアントサイドはAngularでゴリゴリ開発していくのが最終目標です!!

開発環境

  • macOS Sierra 10.12.6
  • node 8.4.0
  • npm 5.3.0
  • Angular 4.3.6

まぁ、今時点での最新の環境になります。今回利用するAngular4ですが、node 6.9以上、npm 3以上でないと利用できませんので注意してください。

また、今回はNode.jsとかnpmの設定はすでに終わってる前提で作業を進めていきます。

Node.jsとかnpmのインストールや設定方法を知りたい方は、こちらを参考にしてください。

Angular4の環境構築手順まとめ

では、早速環境構築していきたいと思います。

開発環境セットアップ

npmを利用してAngular CLIをインストールします。

$ npm install -g @angular/cli

プロジェクト新規作成

下記コマンドを実行してプロジェクトを新規作成します。

$ ng new my-app

my-app」はプロジェクト名なので、好きな名前に変更できます。

アプリケーションを起動する

プロジェクトを新規作成するとnpmで必要なパッケージがインストールされ、アプリケーションの雛形も作成されるので、この状態でアプリケーションを実行することが可能になります。

プロジェクトのディレクトリに移動してアプリを起動します。

$ cd my-app
$ ng serve --open

ちなみに、「--open」(もしくは -o)をserveコマンドのオプションに追加すると、実行時にhttp://localhost:4200/URLでブラウザが自動で開きます。

この画面が表示されれば起動成功です!!

AngularのComponentを編集する

AngularComponentを編集して、タイトル名とタイトルのスタイルを変更します。

src/app/app.component.ts

export class AppComponent {
  title = 'My First Angular App';
}

src/app/app.component.css

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

この状態でもう一度先ほどのserveコマンドを実行すると・・・。

タイトルが変更できました!!

最後に

Angularで環境構築からアプリの起動までができるようになりました!

プロジェクト作成時に雛形も一緒に作成してくれるので、ほとんど何もしなくても、アプリを起動させることができました。

ただ、今回はAngularのチュートリアルを実施する前の下準備みたいなものなので、次回以降はもうちょっと本格的なコーディングが必要になってくるかと思います。

一つ一つ確実にAngularの知識を深めていきたいと思います!!