今回は、Angularの開発について書いていきます。

AngularでWebアプリを開発してみたいけど、どのように環境構築していいか分からない（または環境構築でつまづいている）という方にも役に立てれば幸いです。

で、Angularを学習しようと思った経緯としては、仕事でAngularとか双方向データバインディングやSPAなどの知識が必要になりそうだからです。

まだ、みっちり必要になるかどうかは分かりませんし、正確にはAngularJSなのですが、設計思想は同じため、両方学習しようと思っています（仕事で触るのは比較的古いシステムなのでAngularJSですが、将来性を考えると両方できた方がいいと思っています）。

で、Angularは一言で言えば、JavaScriptのフロントエンドフレームワークです（TypeScriptを使えること前提だったりするので、結構学習コストが高いと言われています）。

学習は基本的に公式サイトのチュートリアルを行おうと思っております（本格的に必要であれば書籍なども買おうと思います）。

まず、公式サイトを見ると、初めにプロジェクトのディレクトリでnpm installを行って・・と書いてありますが、これを行うと、pakage.jsonがないというエラーが出ます（npm install -g angular とかでいけたかもしれませんが今回は勉強のためpackage.jsonの作り方を述べていきます・・）。

pakage.jsonはプロジェクトのパッケージ情報やその依存性が書かれた設定ファイルです。

これが無い状態のディレクトリでnpm installをしても、package.jsonが無いので、パッケージ情報とかが分からずにエラーになるんです。

なので、初めはnpm initでpackage.jsonを作る所から始めないといけません（参考）。

npm initでpackage.jsonを作成しますが、とりあえず全てデフォルトで作成したい場合などは npm init -yなどのオプションをつければできます（参考）。

で、package.jsonを作成すれば、npm install -g angular(angularのパッケージ名)でangularのパッケージがインストールされて、プロジェクトの実行環境が整います（この際に、それらのパッケージの依存性が、作成したpackage.jsonに書き込まれます）。

ただ、nmp initをしてから、npm installを行うのめんどい・・っていう方には、npm init @angular@latestで、angularのプロジェクトの開発環境（実行に必要なパッケージやその依存性が書かれたpackage.json）が全て整うんですよね（私がこれでプロジェクト作成しました）。

で、とりあえずプロジェクトの実行環境が整ったら実行してみましょう。

ng serveで実行して、http://localhost:4200を開くと・・以下のように表示されるはずです。

で、ここからapp.componet.tsを編集して、templateの行を、template: `<h1>Hello world!</h1>`,のように編集しろと書いてありますが、angularのバージョンが新しいのか、私の場合はtemplateUrl:の行しかなく、templateUrl:に指定されている～.htmlにhtmlやスタイルのコードが書かれていました。

なので、templateUrl:に指定されている～.htmlを編集しました。

次に、新しいコンポーネントを追加するということですが、angularはコンポーネントという単位で、画面（とその機能とスタイルなど）を分けているんですよね。

で、先ほどのメインのコンポーネント（app.componet.ts）内で、新しいコンポーネント（HomeComponent）を追加し、templateUrl:に指定されている～.htmlを、新しいものに置き換えて（以下）、更にそのコンポーネント（HomeComponent）で検索ボックスとボタンを表示させたものが以下になります（なぜかHomeComponentのスタイルが上手く設定されませんが・・）。

以上、環境構築から公式サイトの触り辺りまででしたが、今後は公式サイトでちょくちょく学習を進めていきます。

で、また何か気付きや不明点等があれば当ブログにまとめていきます（もしAngular詳しい人いたら、ご意見などいただければ幸いです）。

はい。以上、ここまでお付き合いいただきありがとうございました。