読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

AngularJSを使ってタイムキーパーを作ってみよう 応用編まとめ【AngularJSとは】

去年の11月末から始まった本連載ですが、やっとそれっぽいアウトプットができました。
ということで、入門編に続き、応用編をまとめました。

応用には基礎「JavaScript」の理解が必要

入門編(AngularJSを使ってタイムキーパーを作ってみよう 入門編まとめ - Web Design Note)では、AngularJS APIを使い、大部分の機能を開発しましたが、UIがまだまだでした。
応用編では、AngularJS APIはほぼ使わず、JavaScriptの関数によってタイムキーパーらしく修正しました。

つまり、基礎の基礎、JavaScriptを理解してないと、機能の詰め合わせはできても、UIをイメージ通りに作るのは難しいのです。

成果物がこちら。

See the Pen XbRMqx by tnk-mitsuru (@tnk-mitsuru) on CodePen.

上記はスタイルがあたっていませんが、Bootstrapを使ってUIを整えたのがこちらです。
http://tnk-mitsuru.github.io/tools/timekeeper/index.html

AngularJSとは

今更なに言ってんだって感じですよね。
というのも、今回、様々なサイトや記事を見ながら、半ば勢いで、AngularJSでタイムキーパーを作ってきので、「AngularJSとは何か」ということについてちゃんと理解していませんでした。
ということで、その辺をまとめて本シリーズを完結したいと思います。

こういう時はたいてい、「◯◯ってなんですか?」と聞かれた時に、「箇条書きで特徴を3つ」言えれば、(自分の中では)軽く説明できるくらいに理解したってことにしてます。

結論から言うと、AngularJSとは、

  1. フルスタックなMVWフレームワーク
  2. 双方向データバインディング
  3. CRUD系アプリケーションに向いている

です。
それぞれを深掘りすれば、AngularJSの正体がわかると思います。少しだけ、深掘りしてみましょう。

フルスタックなMVWフレームワーク

Webアプリケーションの開発を円滑にする「MVCフレームワーク」の一種で、データや処理の記述をコンポーネント化することで、短くわかりやすいコードを書くことができます。

で、そういうフレームワークは世の中にはたくさんあるのですが、
AngularJSは、それ単独で多くの機能を備えているので(=フルスタックなので)、プラグインなどにほとんど頼らず開発することができます。
詳しくはこちらの記事で!

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

僕も最初はこの言葉の意味がわかりませんでした。
別のフレームワークが題材ですが、Webデザイナー向けの説明としては、こちらの記事がわかりやすかったです。

双方向データバインディングとは
・ブラウザの画面上での入力値がJavaScriptのデータとして格納される
JavaScript中のデータを更新すると画面上のDOM要素も更新される
という2つの方向のデータの関連付けのことです。

knockout.jsの双方向データバインディングのしくみ - Team Duet公式ブログ

旧来は、アプリケーション側でこの仕組みを実装する必要があったのですが、フレームワークで出来てしまうのがAngularJSというわけです。
この辺りを詳しく説明しているのがこちらの記事。

この技術があるからこそ、コード量を大きく削減できるのですね。

CRUD系アプリケーションに向いている

CRUDとは。

データベース管理システム(DBMS)に必要な、基本的な4つの機能である、データの作成(Create)、読み出し(Read)、更新(update)、削除(Delete)を表すことば。

CRUDとは|クラッド|Create/Read/Update/Delete - 意味/解説/説明/定義 : IT用語辞典

要は、ユーザーが入力したデータを扱うような管理系のアプリケーションに向いているということです。
今回作成したタイムキーパーやToDoアプリなんかが該当します。

どのフレームワークが、どんなアプリケーションに向いているかということに関しては、けっこういろんな記事がありました。
向き不向きについてわかりやすかったのがこちらの2つです。

フルスタックなので、割となんでもできるとの見解もあったりしますが、
双方向データバインディングを活かせるという点で、CRUD系アプリケーションに向いているのではないでしょうか。


・・・ということで、「AngularJSとは何か」ざっとまとめてみました。
実際にWebアプリを作りながらのシリーズでしたが、「JavaScriptの基礎」が何よりも大事ということを痛感しましたね!
実践で使う場合は、さらに「コードの設計」もある程度できる必要があります。が、これがなかなか難しい><
ということで、最後、設計に関する記事を紹介して終わりたいと思います。
勉強勉強!