はじめに
本記事では、わかりやすさを担保するために、チュートリアル形式で進めていきたいと思っています。
開発に必要な環境の用意からAngularの（簡単な）構造の紹介を含めて、簡単なアプリケーションを完成するまでの手順を紹介していきます。
本記事が対象としている方
- HTML・Javascript・CSS について簡単な知識はあるけども本格的なアプリケーションを作成した事のない方
- jQuery を使った簡単なアプリケーションからステップアップしたい方
- SPA を作成した事のない方
Angular とは
Angular とは、Googleが提供しているWebアプリケーション向けのフレームワーク（部品集、ひな形集）です。
Angular だけでWebアプリケーションに必要な殆どの機能を作り上げることができますが、独特の書き方やルールが存在しているので、
これについても少しずつ紹介していきます。
開発環境の用意
Visual Studio Code のインストール
Angular のコードを書くために必要な機能を持ったエディタ（IDE:統合開発環境）を用意します。
ここではマイクロソフトが提供しているVisual Studio Code というエディタを利用します。
以下のURLにアクセスしてお使いのOSに合わせてインストーラをダウンロードしてください。
[Visual Studio Code]
https://code.visualstudio.com/
Node.jsのインストール
Angular を動かすために必要な Nodejsをインストールします。
Nodejsについての詳しい説明は本記事では省略することとします。
[NodeJS]
https://nodejs.org/
※Angular 6 からはNodeのバージョンが8以上でないといけないので、ダウンロードするバージョンには注意してください。
Angular CLI のインストール
Angular CLI を利用することで、Angularプロジェクトの作成や実行が簡単に行えます。
また Angular CLI は npm コマンドを利用してインストールすることができますので、Visual Studio Code を開いて下記のコマンドを実行してください。
npm install -g @angular/cli
初めてのAngularプロジェクトの作成
Angular CLIのインストールが完了したらいよいよAngularアプリを作成していきます。
Visual Studio Code を開いて、画面下のTerminalから以下のコマンドを実行してください。Angularプロジェクトに必要なライブラリのインストールが自動的に始まります。
ng new myApp
ngコマンドはAngular CLIを利用するときに先頭に記述します。
半角スペースを空けて new {プロジェクト名} と続きますが、プロジェクト作成の他の使い方は、必要に応じて説明していきます。
またコマンドを実行すると、いくつかの質問をされますが、それぞれに yes と答えてプロジェクトの作成を進めてください。
ちなみに1つ目の質問「Would you like to add Angular routing? (y/N)」はページ遷移のために必要なモジュールの要不要を、
2つ目の質問「Which stylesheet format would you like to use? (Use arrow keys)」は利用するスタイルシートの形式を問っています。
特にこだわりがないようであれば、ここでは CSS を選択しておきましょう。
しばらく待つと myApp というフォルダが出来上がっているかと思います。
これでプロジェクトの作成は完了です。
ここで作成されたプロジェクトはひな形ですので、これをベースにアプリケーションの作成をスタートしていきます。
e2eやnode_modules等のフォルダが自動的に作成されていますが、アプリケーションを作成していく中で実際に触れていくのはsrcフォルダの中身です。
今は気にしないようにしましょう。
次回
次回はサンプルページの中身について触れていきたいと思います。