月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! 今は農作業中のため東京にいるよ! ギランバレー症候群に関する情報を集めています

AngularJSの使い方を超簡単に解説!初心者入門編!

             
  • 2018.10.28
  • IT
AngularJSの使い方を超簡単に解説!初心者入門編!
Advertisement

 

Angularという言葉を聞いたことがありますか?

・JavaScriptは分かるけど。。

・クライアント側のフレームワークは使ったことないな~。

このように感じた方に、Angularは非常におススメです。

何がそんなにいいのか、またAngularの使い方など、初心者の方向けに色々とまとめてみました!

 

 

AngularJSとは

AngularJSとは、オープンソースのフロントエンドWebアプリケーションフレームワークです。

 

Googleが開発したフレームワークなので、信頼性の高さが特徴です。

 

 

なぜAngularなのか

現在、フロントエンドのフレームワークは数多く存在します。最近では、「Vue.js」「React.js」なども良く耳にしますよね。

このように数多くのフレームワークが存在する中で、Angularを選ぶ理由は以下の通りです。

・Googleが開発しているという信頼性

・HTMLベースのテンプレート機能

・豊富なディレクティブ

・多彩な表現を実現するフィルター機能

・双方向データバインディング

・DI(Dependency Injection)コンテナの仕組みを持つモジュール管理機能

・厳格なスコープ

・シングルページアプリケーションに最適なルーティング

・Ajax通信のサポート

・テスト重視

・セキュリティ対策

・モバイル対応

 

このように、Angularには使用する上でのメリットがたくさんあります。

また、機能が豊富なのもAngularの良さと言えるでしょう。

 

 

とりあえずAngularを使ってみよう!

まずは、Angularをダウンロードします。以下にアクセスしてください。

■AngularJS公式サイト

AngularJS公式サイト

 

 

Angular公式サイト

「DOWNLOAD ANGULARJS」をクリックします。

 

 

AngularJSダウンロード

今回は、「Branch」で「1.7.x」、「Build」で「Uncompressed」を選択して「Download」ボタンをクリックします。

※ダウンロードしたファイルを「angular.js」として任意のフォルダに保存します。

 

 

次に、「angular.js」と同じ場所に「index.html」を作成します。

※CDNを利用する場合は、headタグ内に「<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js”></script>」を記述します。

 

 

画面表示

index.htmlをブラウザで開き、「Hello, World!」と表示されればOKです。

 

 

Advertisement

 

基本機能

1.エクスプレッション内での変数の利用

エクスプレッション({{}})の出力はセキュリティが考慮されているため、どのような式も実行できるとは限りません。

 

2.ng-repeatディレクティブの利用例

ng-repeatディレクティブは、複数の値を表示する際に重宝します。for文をAngular風に書いたものですね。

 

3.双方向データバインディング

ng-modelディレクティブを使用することで、双方向データバインディングが可能となります。

今回であれば、テキストボックスに任意の値を入力すると、その値が即時に画面表示されます。

従来のDOM操作が不要で、フレームワークがよろしくやってくれるイメージですね。

 

 

ビルトインディレクティブ一覧

AngularJSには標準で用意されているディレクティブが数多くあります。

ここでは良く使用するものを一覧でご紹介します。

 

DOM操作

ディレクティブ 説明
ng-bind モデルをビューにデータバインディングする。
※エクスプレッション({{}})の場合、一瞬エクスプレッションがそのまま表示されるケースがあるが、ng-bindを使うことで解消される。
ng-bind-html HTML要素をバインドするために使用する。
※XSSの観点から、ngSanitizeを読み込む必要がある。
ng-bind-template テンプレートをビューにバインドする。
ng-non-bindable バインドを望まない場合に使用する。
ng-cloak エクスプレッションを使用した際のちらつきをなくす。
ng-style style属性を動的に操作する。
ng-class CSSを動的に操作する。
ng-class-even 偶数行の時にclassが適用される。
※ng-repeatと組み合わせて使用する。
ng-class-odd 奇数行の時にclassが適用される。
※ng-repeatと組み合わせて使用する。
ng-show 値の評価がtrueであれば内包するDOMを表示する。
ng-hide 値の評価がtrueであれば内包するDOMを表示する。
ng-open 定義した要素をクリックすると、内包するDOMの表示・非表示を切り替える。
※details要素のみ使用可能。
ng-pluralize 数値によって表示を切り替える。
ng-if 値がfalseと評価された場合に、定義したDOMをDOMツリーから削除する。
ng-hideはDOM自体は存在している。
ng-switch JavaScriptのswitch文と同様の働きをする。
ng-repeat ループ処理を行う。
ng-message メッセージを扱う。

 

イベント

ディレクティブ 説明
ng-click JavaScriptにおけるclickイベントをリスナー登録する。
ng-dblclick JavaScriptにおけるdblclickイベントのリスナーを登録する。
ng-mousedown JavaScriptにおけるmousedownイベントのリスナーを登録する。
ng-mouseup JavaScriptにおけるmouseupイベントのリスナーを登録する。
ng-mouseenter JavaScriptにおけるmouseenterイベントのリスナーを登録する。
※イベントのバブリングを行わない。
ng-mouseover JavaScriptにおけるmouseoverイベントのリスナーを登録する。
ng-mousemove JavaScriptにおけるmousemoveイベントのリスナーを登録する。
ng-mouseleave JavaScriptにおけるmouseleaveイベントのリスナーを登録する。
ng-focus JavaScriptにおけるfocusイベントのリスナーを登録する。
ng-blur JavaScriptにおけるblurイベントのリスナーを登録する。
ng-keydown JavaScriptにおけるkeydownイベントのリスナーを登録する。
ng-keypress JavaScriptにおけるkeypressイベントのリスナーを登録する。
※カーソルキーやコントロールキーのイベントは取得できない。
ng-keyup JavaScriptにおけるkeyupイベントのリスナーを登録する。
※キーが離れた時にイベント発生。
ng-change JavaScriptにおけるchangeイベントのリスナーを登録する。
ng-checked 値の評価がtrueであればチェックボックスなどがチェックされた状態になる。
ng-copy JavaScriptにおけるcopyイベントのリスナーを登録する。
ng-cut JavaScriptにおけるcutイベントのリスナーを登録する。
ng-paste JavaScriptにおけるpasteイベントのリスナーを登録する。
ng-submit action属性の有無によりデフォルト動作を実行するかどうかを判定する。
ng-paste JavaScriptにおけるpasteイベントのリスナーを登録する。

 

 

おすすめ書籍

僕は以下の本で学習しました。この本を一通りこなせばAngularJSは大体理解できます!

 

 

 

まとめ

エンジニアである以上、常に最新の技術に触れる必要があります。

AngularJSは最新の技術ではありませんが、まだまだ人気のあるフロントエンドのフレームワークなので学習するメリットは大いにあります。

あなたも是非フロントエンドマスターになりましょう!

Travelerを知らないの?