Angular6でアプリ開発①「環境構築とチュートリアル」

先週からAngularを触っているのですが、Angularは比較的新しい言語だからか、まだまだ記事が少なくてエラー解決などで困ることが多かったので、Angular初心者がゼロからAngularでアプリケーション開発するための方法をまとめておきます。

今回は環境構築からチュートリアルをするところまでを見ていきます。

そもそもAngularとは？

Angularは、HTMLとTypeScriptでクライアントアプリケーションを開発するためのプラットフォームであり、フレームワークです。

もともとはAngularJSとして2012年6月にバージョン1.0.0がリリースされた。それから様々な問題を解決するために互換性のないAngular2が2016年にリリースされました。半年に1回バージョンアップすることを標榜しており、2018年6月現在の最新バージョンは（2018年5月にリリースされた）Angular6です。

AngularはTypeScriptで書かれていることもあり、TypeScriptやJavaを書いたことがある人なら理解しやすいです。コア部分と、アプリケーションにインポートするオプショナルな機能をTypeScriptライブラリのセットとして実装しています。

プログラミング初心者にとっては、新しい概念が多すぎて学習が大変かもしれないので、まずはJavaScriptやTypeScriptで変数の扱いや処理の流れ、メソッドの役割などを学んでからAngularの学習を進めることをオススメします。

↓プログラミング初心者であれば、Progateなどの学習サイトで基本的な文法や仕組みを学習してからチュートリアルを開始すると学習効果が高いと思います。

Angular6の環境構築

まずはAngular6で開発を進められるように環境構築していきます。Angularのチュートリアルサイトがとても親切なので、その説明に従ってコマンドを打っていけば、Localで画面表示できるところまではいけます。

Angular CLI をインストール

$ npm install -g @angular/cli

まだAngular CLIをインストールしていない場合にインストールします。

アプリケーションを作成

$ ng new sample-app

アプリケーションを作りたいディレクトリに移動して、「$ ng new」コマンドで新規アプリケーションを作成します。

アプリケーションをビルドし起動

$ cd sample-app
$ ng serve --open

アプリケーションのディレクトリに移動し、「$ ng serve」コマンドでアプリケーションのビルドと開発用サーバーの起動を行います。「--open」をつけることで、ブラウザを立ち上げてくれます。

f:id:virtual-surfer:20180603083451p:plain

ここまででアプリケーションの開発準備は完了です。

Angular6のチュートリアル

環境構築ができたら、開発を進めていきましょう。

Angularチュートリアルの開始

チュートリアルに沿って実装していけば、Componentの役割やServiceに切り出す処理、双方向バインディングとは、HTTPリクエストとレスポンスの扱い方、ルーティングの設定方法など、基本的なことは網羅的に学べるので面倒くさがらずにチュートリアルはやっておくべきだと思います。

ちなみに、チュートリアルの説明だけで背景や、なんでその書き方するのか分からないみたいな疑問が出てくるのですが、↓の本がとても参考になるので、オススメです。ちょっと高いし、Angular2や4を中心に書かれているので当初は敬遠していましたが、チュートリアルをしながら気になる箇所はKindle版のこの本で詳しく学ぶスタイルが学習効果をあげてくれました。