EVMの各指標を計算するWebアプリをAngular.js で書いてみたら楽ちんだった #HTML

能書きは良いからソースを見せろという人へ

　文末まで読み飛ばしてください。

Angular.JS ？　なにそれ、美味しいの？

　Javascript を使用して Web アプリを作るのに、Angular.JS が使われていることは風の噂に聞いていたが今まで勉強したことがなかった。既に Web 界隈（？）では Angular2 になっているという話も聞こえてきているが、名前だけしか知らなかった。
　気になってきたので Web 上に公開されている情報を頼りに、それぞれの環境で簡単なアプリを作ってみようと思い立った。

EVM ?

プロジェクトの状態を予算と予定の観点で定量的に管理するのに、広く使われているのが EVM(Earned Value Management) という手法で、PMO(Project Management Office) もどきの私も、良く目にする。
EVMについての概要はウィキペディアの記事を参考に。
　https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%BC%E3%83%B3%E3%83%89%E3%83%BB%E3%83%90%E3%83%AA%E3%83%A5%E3%83%BC%E3%83%BB%E3%83%9E%E3%83%8D%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88

EVM の各指標を計算する電卓をWebアプリにしてみた

　EVMでは、現状の出来高と要したコストを計画工数と予算から見て評価する指標が有る。これらを計算するのにはPMツールや MS-Excel シート等を利用しているので不要かとは思うものの、勉強の題材としては簡単で良いかと思った。

Angular.JS と Angular2

　同じところが作っていて名前も似ているのだが、カジッてみたら全く別物だった。
Angular.JS は JavaScript のライブラリーなのに対して、Angular2 はWebアプリのフレームワークなのだった。
　Angular.JS では、JavaScript のライブラリーを HTML ファイルから呼び込むだけで使える手軽さなのに、Angular2 では TypeScript 等といった環境も必要になり、外見を HTML で、処理を TypeScript で記述しコンパイルし・ビルドしてサーバー環境に持っていって動作する。
　今回題材にしたEVM計算機では、1画面でDBも使用していないので、Angular2 ではマシュマロ1個をダンプカーで運ぶようなものでオーバースペック感が半端ない一方、Angular.JS では、JavaScript のライブラリーを使うので、処理部分が簡単に書けるのがとても楽ちんだった。

公開は Angular.JS 版とした

　とりあえず Hello World! に毛が生えた程度の入門として作ることには、両環境ともにできたのだが、ソースの公開は Angular2 だと面倒なのと、Angular.js 版のほうは HTML ファイル1個だけで（ライブラリーを読むのにネット環境が必要だけど）簡単に動作するので、ソースの公開は Angular.JS のみとした。まぁ、こんなEVM計算機を使いたい人は居ないとは思いますが...

EVM計算機 Angular.JS のソース

　ソースはこんな感じ。計算している部分が無いんじゃないかと思うほど少ないスクリプトで動作する。
しかも、Ajax によって、数値を入力するだけで（計算ボタンなどなく）即、計算結果が表示される。
　これを自分で Javascript で書くのはしんどい。

EVMcalc.html

<!doctype html>
<html ng-app>
<head>
    <title>EVM-Calc. on AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-init="bac = 100;pv = 50; ac = 50;ev = 51">
    <div>
    <h1>EVM 各指標の計算</h1>
    <table>
    <tr>
        <td>BAC:</td>
        <td><input type="text" size=8 ng-model="bac"></td>
        <td>完成時総予算（Budget At Completion）</td>
    </tr>
    <tr>
        <td>PV:</td>
        <td><input type="text" size=8 ng-model="pv"></td>
        <td>計画価値（Planned Value）</td>
    </tr>
    <tr>
        <td>AC:</td>
        <td><input type="text" size=8 ng-model="ac"></td>
        <td>実コスト（Actual Cost）</td>
    </tr>
    <tr>
        <td>EV:</td>
        <td><input type="text" size=8 ng-model="ev"></td>
        <td>出来高（Earned Value）</td>
    </tr>
    </table>
    <hr />
    <table>
    <tr>
        <td>SV:</td>
        <td><font color="blue">{{sv = ev - pv}}　</font></td>
        <td>スケジュール差異（Schedule Variance）<br /> = EV - PV</td>
        <td> （0以上であれば良好）</td>
    </tr>
    <tr>
        <td>CV:</td>
        <td><font color="blue">{{cv = ev - ac}}　</font></td>
        <td>コスト差異（Cost Variance）<br /> = EV - AC</td>
        <td> （0以上であれば良好）</td>
    </tr>
    <tr>
        <td>SPI:</td>
        <td><font color="blue">{{spi = ev / pv}}　</font></td>
        <td>スケジュール効率指数（Schedule Performance Index）<br /> = EV / PV</td>
        <td> （1以上であれば良好）</td>
    </tr>
    <tr>
        <td>CPI:</td>
        <td><font color="blue">{{cpi = ev - pv}}　</font></td>
        <td>コスト効率指数（Cost Performance Index）<br /> = EV / AC</td>
        <td> （1以上であれば良好）</td>
    </tr>
    <tr>
        <td>EAC:</td>
        <td><font color="blue">{{eac = ac + (bac - ev) / cpi}}　</font></td>
        <td>完成時総コスト見積り（Estimate At Completion）<br /> = AC + (BAC - EV) / CPI</td>
        <td> （BAC以下であれば良好）</td>
    </tr>
    <tr>
        <td>ETC:</td>
        <td><font color="blue">{{etc = eac - ac}}　</font></td>
        <td>残作業のコスト見積り（Estimate To Completion）<br /> = (BAC - EV) / CPI = EAC - AC</td>
        <td> （残予算以下であれば良好）</td>
    </tr>
    <tr>
        <td>VAC:</td>
        <td><font color="blue">{{vac = bac - eac}}　</font></td>
        <td>完成時コスト差異（Estimate At Completion）<br /> = BAC - EAC</td>
        <td>  （0以上であれば良好）</td>
    </tr>
    </table>

    </div>
</body>
</html>

EVMの各指標を計算するWebアプリをAngular.js で書いてみたら楽ちんだった