ウェブパ[web制作・ホームページ制作]

Angularを利用しよう
〜魅力と導入まで〜|ウェブパは神戸・大阪をはじめ全国対応のWebサイト(ホームページ)制作パックプランです。

電話番号 078-333-9333

に関する画像

線画像
トップ > インフォメーション > BLOG > Angularを利用しよう
〜魅力と導入まで〜

に関するタイトル画像

線画像

2017.05.15

BLOG

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!」と出力できればインストール完了です。

 

スライドとしてまとめているのでこちらもご覧下さい。

edited by:afiru

トップに戻る