Angularを利用しよう
〜魅力と導入まで〜
この記事をシェアする
———————————————————————-
■JavaScript開発が変わっている！
———————————————————————-
JavaScriptのフレームワークが登場して以降、新技術を積極的に取り入れて
今までの手作業が自動が出来て来ています。これを使用すると開発スピードが
劇的に向上することが可能です。
●パッケージ開発について
今までのJavaScriptのプログラムというのは、パッケージとしての管理が難しく
クラスなどのライブラリが存在してませんでした。
つまり、どこかのGithub等のコードを組み合わせてアプリ開発をするこの1択
しかアリませんでした。
バージョン変更に伴い、組み合わせたプログラムの動作検証や、開発をする前の
準備段階にすることが多く、疲れるのが多かったのです。
今回ご紹介する「Angular」はその悩みを解消し、開発を楽にします。
そう、これを使えば快適JavaScrioptアプリ開発が実現できるようになります。
是非おつきあい下さいませ。
●クラスライブラリとしての利用開発
Angularは、単体でクラスライブラリのように多くの機能が提供されています。
何を使うべきなのかを探す手間を省くことが可能です。
そういっても、自分がしたいことが100％とあるいうわけではありません。
ですが、Angularはユーザー開発のコミュニティが追加のライブラリを多く
公開してくれています。
不足している機能を補ってくれるのです。
なぜならば、この「Angular」は
Googleが推し進めるプロジェクとの一つだからです。
バックにgoogle。これが多くの人をひきつけているわけです。
●更に進化したパッケージ管理
・HTML/CSS/TypeScriptを分割して使用可能。
1画面で形成される物を部品化（コンポーネント）することが可能です。
CSSも含みで部品化し、別画面での流用が可能！
●パッケージ管理ツール（npm）
Angularは多くのライブラリに依存しています。この依存しているライブラリ
をまとめて間rにしているのがパッケージ管理ツールといいます。
有名所としては「Github」「bower」などがあります。
Angularでは「npm」というパッケージ管理ツールの元開発を行っていきます。
npmによって依存するライブラリをコマンド一つで取り入れるのです。
では、実際にnpmを使用してみましょう。
●npmの利用方法
npmを利用する場合、Node.jsというものが必要になります。
・Node.jsのインストール
https://nodejs.org/ja/
次にコマンドラインという黒い画面が必要になりますので、Gitというツールを
インストールしましょう。
・Gitのインストール
https://git-scm.com/
上記2つのソフトのインストールが完了したら、Git bashというソフトを起動
しましょう。
今回はサンプルとして下記のコマンドを実行してみましょう。
（Cドライブ直下に[node_test]というフォルダを作成し、インストールします）
$ cd C:
$ mkdir node_test
$ cd node_test
$ cd npm install -g bootstarp
これでインストールすることができます。
●依存管理について
Angularではpackage.jsonに、依存するライブラリーが記載されています。
つまりここでどのライブラリーをインストールしているのかが
分かるようになっています。
●module管理でアプリ開発
Angularでは先程のnpmよりインストールすると、node_modulesというフォルダ
にデータが入っていきます。そして、何をインストールしたのかも依存管理と
同様にpackage.jsonに予め入れておきたい物事を入れることが出来るのです。
複数人で作業をするときには便利かもしれません。
●CLIでビルド処理
JavaScriptはビルド不要で、ソースコードを作成するとその場で実行出来る
利点が有ります。しかし、プロジェクトの規模が大きくなってくると実行前で
ビルドという処理を行い、エラーを検出する事が必須になってきます。
特にTypeScript等を使用している場合では、型チェックなどの強力な検証を
行いエラーを回避することが出来ます。
Angularでは、TypeScriptを採用しており、CLIでビルド処理をする際に
TypeScriptの文法チェックもしてくれるのです。
つまり、CLIを使うと開発開始前・プログラム実行中・テスト時・リリース時等
の作業を軽減します。
●AngularCLIとは？
Angularでは独自のビルド処理を行える機能として「AngularCLI」があります。
この機能を使用することで、アプリ実行時に必要なmoduleの依存関係解決から
先程上げたTypeScriptの文法チェックも行ってくれます。その他にこのような
利点もあります。
・Angular開発プロジェクトの基盤となるひながたの作成
・開発用のWEBサーバーを作成
・TypeScriptの文法チェック
・TypeScriptからJavaScriptへの変換
・重複・不要コードの圧縮
・ディバック用マップファイルの作成
尚、ビルド処理を行うとdistファイルが生成し、プロジェクトファイルを
作成してくれます。ですので、テストを行った後、ビルド処理をすると、
納品データが作成できるようになります。
———————————————————————-
●Angularを使おう
———————————————————————-
●関連ソフトウェアのインストール
これほどJavaScript開発を加速化させるAngularを実際に使用してみましょう。
まずは、下記のソフトウェアをインストールして下さい。
・NetBense
こちらはコーディングソフトになります。
https://netbeans.org/downloads/
・Node.js
インストールをされていない方はこちらで再度インストールをして下さい。
https://nodejs.org/ja/
・Gitのインストール
インストールをされていない方はこちらで再度インストールをして下さい。
https://git-scm.com/
インストールが完了しましたら、実際に動くか検証してみましょう。
「Git bash」を起動し、下記コマンドを入力して下さい。
$ node –version
$ npm –version
どちらも下にバージョン情報が出力されればインストール完了です。
●AngularCLIのインストール
先程のスライドで紹介したソフトのインストールが完了したら
「Git bash」の画面内で、下記のコマンドを入力して下さい。
$ npm install -g @angular/cli
これで、AngularCLIをインストールすることが出来ます。
●プロジェクトファイルの作成
「Git bash」を起動し、cdコマンド（ファイル移動）にて開発を行うフォルダ
へ移動して下さい。
移動が完了しましたら、下記コマンドを入力して下さい。
$ ng new 作成するフォルダ名（プロジェクト名）
処理が完了しましたら、NetBenseを起動し、
【ファイル】→【新規プロジェクトの作成】をクリックして下さい。
プロジェクト内で、「既存のソースを使用するNode.jsアプリケーション」を
選択肢、【次へ】をクリックして下さい。
プロジェクト名 ：プロジェクト名
プロジェクトの場所：「ng new 作成するフォルダ名（プロジェクト名）」を
実行したフォルダ名を選択。
以上でインストールが完了します。
「Git bash」に戻り、一度下記コマンドラインを実行して下さい。
$ ng serve
「webpack: Compiled successfully.」と出たら、下記URLをクリック。
http://localhost:4200/
画面上に「app works!」と出力できればインストール完了です。
スライドとしてまとめているのでこちらもご覧下さい。
