Web技術系中心に割と何でも更新中

【超初心者向け】AngularJSに触れてJSフレームワークを知ろう

Programming Web

疑問に思う人

JavaScriptフレームワーク超初心者
「JavaScriptフレームワークって何?フレームワーク使うと何かメリットあるの?どんなふうに使うの?全然わからない。」

こういった疑問にお答えします。

本記事の内容

  • AngularJSに触れて、JavaScriptフレームワークのメリットや使い方を知る

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。現在はmineblogを一人で運営しています。
Web制作歴は7年になります。

JavaScriptでの開発で、JavaScriptフレームワークを使用した開発は未経験という方も中にはいるのでは?

当記事では、フレームワークの便利さや使い勝手を知るために、実際にJavaScriptフレームワークを導入して触ってみることにします。

JavaScriptフレームワークのメリット

JavaScriptフレームワークのメリットとしては必要な機能(よく使われるであろう機能)をフレームワークに持たせることで、開発効率を上げて余計なバグなどを発生を抑えられる点です。

もう少し詳しく書くと、例えばJavaScriptで値の取得やバリデーションなどの処理を必要な場合を考えます。

こういった場合に、逐一ソースコードを書いていると、コードが繁雑になる、メンテナンスが面倒といった問題が発生しがちです。JavaScriptフレームワークを導入することで、コードを簡略化し、メンテナンスにかかる労力を削減できます。

ここでは「とりあえず開発が楽になるんだな」程度で理解しておきます。

JavaScriptフレームワークの選定

JavaScriptフレームワークといっても様々な種類があります。
以下、代表的なJavaScriptフレームワークを挙げています。

代表的なJavaScriptフレームワーク

  • AngularJS
  • Node.js
  • React.js
  • Vue.js

この中から今回使用するフレームワークを選定します。

選定条件

  • 「試しにフレームワークに触れてみよう」程度の想定
  • 導入が容易(面倒なインストールが不要)
  • 使い方がシンプルでわかりやすい

上記の選定条件から、今回はGoogleが提供しているAngularJsというフレームワークを使います。

実際には、AngularjsとAngularがありますが、Angularは初心者には少しハードルが高いので今回はAngularJSを採用します

AngularJsの特徴

AngularJsの特徴を紹介します。

MVW(Model View Whatever)フレームワーク

MVWフレームワークと呼ばれています。

MVWフレームワーク

  • Model:Whatever(コントローラ)からの命令を受けてデータを処理する
  • View:Modelで処理したデータをViewに渡してブラウザなどを通してユーザーに表示する
  • Whatever:Model、Viewに処理を命令する
言葉だけ並べてもわかりづらいですが、上記のように大きく3つに処理を分けた仕組みになっていると考えておいていいと思います。

双方向バインディング機能

またよくわからない言葉が出てきましたね。

双方向バインディング機能により、ModelからVeiwへ、またViewからModelへ双方が監視し合ってデータを渡して同期を行ってくれます。

フレームワークなしで実現しようとすると、Veiwからデータを取得してModelで処理して再度Viewに返すといった手順を踏まなければいけないといった意味合いです。

AngularJSを導入する

概要だけ見ても、JavaScriptフレームワークを使うとどう便利なのかは実感しにくいので、実際に導入してみます。

AngularJSのファイルを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>

Googleが提供しているフレームワークなので、オンラインなら上の記述でOK。オフラインなら、AngularJSをダウンロードしてファイルのパスを読み込むようにします。

入力した値をリアルタイムでテキストで表示させる

入力欄にテキストを入力した時に、その下に同じテキストをリアルタイムで表示させます。

HTML

<html ng-app>
<!-- 中略 -->
<div id="angular_demo">
	<div>
		<label>Text:</label><input type="text" ng-model="Text" placeholder="テキストを入力">
		<p>{{Text}}</p>
	</div>
</div>
<!-- 中略 -->
</html>

AngularJsを起動させるために、<html>タグへng-appを記述します。

ng-model="Text"のようにng-modelで変数を指定すると、入力した値を同期してくれます。{{Text}}と記述すると、ng-modelで入力した値を表示することができます。

HTML上で変数を紐づけておくだけで入力されるたびに、わざわざ「入力した値を取得して、取得した値を表示させる」という処理をJavaScripで記述しなくてもこういったことが実現できます。

まとめ

かなり導入の中の導入という感じでしたが、余分なコードがすっきりと簡略化できることがわかりました。

動作の速さは申し分無くて、開発者側だけでなくユーザー側にとっても使いやすいのかなという印象です。

覚えることが多くて、学習コストは大きそうですが開発コスト・保守コスト面から見るとメリット大きそうです。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果