Why?
Angular とは？
Angular とは、公式によると下記のように定義されているようです。
Angular は TypeScript 上に作られた開発プラットフォームです。プラットフォームとして Angular には次のことが含まれます
- スケーラブルなウェブアプリケーションを構築するためのコンポーネントベースのフレームワーク
- ルーティング、フォーム管理、クライアントとサーバー間の通信など、さまざまな機能をカバーする、十分に統合されたライブラリのコレクション
- コードの開発、ビルド、テスト、更新を支援する一連の開発者ツール
簡単にいうと、
- Angular を用いて作られるアプリケーションは TypeSctipt を利用して作られる環境のこと。
- その環境では、コンポーネントという細かい単位で部品を開発できる方式で開発を行うことができます（開発規模の大小に対応できるため）。
- Web アプリを開発する上で必要な部品がある程度準備されています（ルーティング、フォーム、通信機能）。
- 開発者にとって便利な一連の仕組みを備えているツール群を持っている（コードの開発はもちろん、そのコードを本番・テストなどの環境に反映させる仕組み、テストする仕組み、変更があった場合に更新する仕組みなど、）。
読みにくかったらコメントください笑。
記事の項目
この記事では下記のことについて紹介しようと思います。
- Angular の特徴
- Angular 入門
Who?
誰向けの記事かというと、下記の項目に該当する方々におすすめです。
- Angular に興味がある方
- Angular を選定しようとしている方
How?
Angular の特徴
| 項目 | |
|---|---|
| 開発元 | Google ＋コミュニティ |
| 初期リリース | 2010/10(AngularJS) |
| 最新版の安定版 | v12.2.1 |
| ファーストパーティライブラリ | ルーティング、フォームズ、Http Client、Anmation、PWA、Schematics |
| 文献 | 困らない |
| 構文 | Typescript |
また、こちらのサイト様では、React,Vue,Angular を比較しており大変参考になります。上記の特徴は比較結果を参考に加筆したものになります。
Angular 入門
- Web サイト
- 環境構築
- 勉強法
- 書籍
Web サイト
Angular を利用するのであれば、この上記の公式サイトは MUST でブックマークしておくと良いです。 特に初期にはお世話になります。
環境構築
前提条件
- 筆者の環境では、Mac OS を利用しています。
npmがインストールされていること- コマンドラインで操作できること（VSCode を利用）。
- エディタを用意していること（VSCode を利用）。
ローカル環境で Web アプリケーションが閲覧できるまで
下記の手順で、ローカル環境で Web アプリケーションが立つ様子を確認できます。
Angulalr CLI をインストールし、アプリケーションを新規作成します。
$ npm install -g @angular/cli
$ ng new my-app
大体、現在のディレクトリがある場所に、新規でmy-appというフォルダが作成されていると思います。
作成したアプリケーションを実行します。
ターミナルで、作成されたアプリケーションがある場所にカレンとディレクトリを変更します。
その場所に、angualr.jsonがあることを確認し、サービスを起動します。
$ cd my-app
$ ng serve --open
ブラウザでhttp://localhost:4200/にアクセスします。
--openを指定しているため、自動的にデフォルトブラウザが開きます。
--openを指定しなかった場合には、自分でブラウザを開きhttp://localhost:4200/をアドレスバーに入力してください。
Web サイトが表示されたら成功です。おめでとうございます。
テスト環境
次はテスト環境を構築します。 ブラウザで、テスト結果を確認するため
GETTING STARTED | Jasminseに記載されている JASMINE FOR BROWSERS をインストールします。
package.jsonを Jasmine がブラウザで動く環境を動作できるように追記します。
カレントディレクトリに、package.jsonがある状態で、下記のコマンドを入力してください。
npm install --save-dev jasmine-browser-runner
npx コマンドは、npm をローカル環境で利用するためのコマンドです。 パッケージ内でテストを初期化しましょう。
npx jasmine-browser-runner init
jasmine を利用するため、package.jsonファイルに下記の記載を追記しましょう。
"scripts": { "test": "jasmine-browser-runner runSpecs" }
ng testを実行してください。
ブラウザが新規で立ち上がり、テスト結果が出力されます。
- Karma + Jasmine
- ng test
これにてテスト環境の構築は終了です。
文書管理環境
次に Angular の文書管理環境を構築します。今回紹介するパッケージは、compodoc と言って、Angular のドキュメンテーションを自動で生成してくれるものです。
このパッケージより、コードと詳細設計書を別々に書き上げる必要がなくなるため、ドキュメントの二重管理を防ぐことができます。
この仕組みでは、コンポーネント感のつながりや、サービスとコンポーネントの関連度合いなどが図で確認できます。
また JSDOC でコメントしておくことで、ドキュメントにコードに記載したコメントの内容を表示することができます。
詳しくは、公式 compodoc Installationを参照ください。
ローカルインストールの方法です。
npm install --save-dev @compodoc/compodoc
次に、package.jsonタスクを記載します。
"scripts": {
"compodoc": "npx compodoc -p tsconfig.doc.json"
}
実行は、下記のコマンドを入力します。
npm run compodoc
本コマンドの実行により、http://localhost:8080/にドキュメント管理サーバが立ち上がりました。
下記のようにコメント入力することが、ドキュメントとして認識される要件なので、「JSDoc」で調べて記法を参考にしてみてください。
/**
* This is my class
* @deprecated This class is deprecated
*/
class MyClass {}
コードフォーマッターPrettierの導入
こちらは記載したコードを成形するツールです。 これは Angular（TypeScript,HTML,CSS,Json）だけでなく、Markdown など様々な拡張子に対応しているため、これを機に入れてみてください。 自分できれいにコードの体裁を整えなくても、拡張子ごとに整形してくれます。 最初に設定さえしてしまえば、スペースやタブの個数を揃えられるのも良い点ですし、チームメンバー間でのコードの差異を気にする必要がなくなります。
VSCode を利用している場合には、GUI でダウンロードできます。 【VSCode】Prettier – Code formatter
VScode を利用していない場合には、ご自身お環境に合わせた方法でインストールください。
保存時にコードをフォーマットすると楽にフォーマットできるため、下記の設定もおすすめです。 VSCode の Settings（設定）を開き、「Editor: Format On Save」と検索し、チェックボックスにチェックしてください。
勉強法【手を動かす編】
ここまで来れば、開発環境自体は既にできている状況です。 あとは、Angular をマスターするだけです。 なんと公式から Angular を学ぶ為の学習兼実践コンテンツが用意されています。
上記のコンテンツを使って学ぶだけでも十分効果はあると思います。
1.Angular 入門では、主に GUI を変更するための開発を行います。
2.ツアーオブヒーローズでは、UI コンポーネント、サービス周辺の開発について学ぶことができます。
この 2 つのコンテンツを実施できれば、Angular のことを最低限学んだ状態になります。 あとは業務や、自分の好きなサービスを作ったりして実践してみてください。
また上記の教材だけでは足りない方は、下記のオンラインサイトでも学ぶことができます。
<a href="https://px.a8.net/svt/ejp?a8mat=3HKO06+7HPDTE+3L4M+6LP3M" rel="nofollow">Udemy</a> <img border="0" width="1" height="1" src="https://www19.a8.net/0.gif?a8mat=3HKO06+7HPDTE+3L4M+6LP3M" alt=""> サイトにアクセスしてみれば、どんなことを学べば実践で利用できるのかを把握することもできるので参考にしてみてください。
書籍
私が横に置いてコーディングする書籍を紹介します。
- Angular アプリケーションプログラミング | 山田祥寛 著
少し古い書籍になりますが、大部分の基本的なところは現在のバージョンでも通じるところがあります。体系的に Angular を学ぶことができ、参考になる一冊です。 書籍で確認したい方は是非お求めください。
まとめ
いかがだったでしょうか？ 今回は Angular 入門について紹介しました。
Angular 単体の開発環境だけでなく、周辺のテスト・ドキュメント・コードフォーマッター環境についても記載しました。
Angularは実装方法などググれば出てくるため、実装しやすいフレームワークだと認識しています。
本件についてよかったことや、ご指摘などありましたらコメントをお待ちしております。 コメントがブログを執筆の糧になっております！ 今後ともぜひぜひよろしくお願いします。
コメント