Angular2 β版が出たのでブラウザで動作するオンラインツールを作ってみました。
jQueryしか知らないjQueryおじさんがAngular 2を使うまでの遙かなる旅路でした。

Angular2でツール作ってみました。私って見やすい?色の組合せ作ります。色の組合せを作るツールです。

このツールは?

Angular 2 β版のお勉強のテーマにした「色組合せ作成ツール」です。
私は色の組み合わせって実際に見てみないとなかなか作成できません。オンライン上のColorGeneratorはたくさんありますが、背景とテキスト色の組合せの視認性を数値表示できるものは少なく、また自力で組合せを作れるようなセンスが無いので、複数の色を自動表示するものを作成してみました。

以下、このツールの主な特徴です。

  • 背景色・テキスト色の組合せをシステムが作成して候補を表示します。
  • 背景色・テキスト色の見やすさの数値が表示されます。 (Web Content Accessibility Guidelines (WCAG) 2.0を使っています。)
  • 気に入った色は保存しておくことができます。
  • 背景色・テキスト色、テキスト内容・フォント・サイズを変更して確認できます。
  • 色はコンピューターによる高度計算結果です。つまりランダムです。ゆくゆくゆくゆくゆくゆくは人工知能が提示してくれるのかも..
  • 表示時に色をフィルターすることができます。グレースケール・色弱の簡易シミュレートができます。

jQueryおじさんがAngular 2を使った感想

jQueryおじさんがAngular 2を使った感想はこんな感じです。

  • Angular 2 はスゴイ。ReactiveかつComponentが綺麗に作れます。これ本当にJSが基盤にあってブラウザで動くものなの?という驚きが最初でした。
  • Node.js,Typescript,Reactiveな考え方とかズブの素人だったので、学習コストは大きい!VC++とかのようなビルド必要なガッツリ開発に思えました。Angular 2-seed,gulpやbrowserify,webpack,systemjsなど周辺環境とtypescriptの見慣れぬ記法で戸惑い、
    作業の7~8割は試行錯誤と学習でしょうか...

  • Angular 2でUI作成するところはnpmに良いライブラリが登録されていたため案外すんなり進みました。
  • Typescriptは良く出来ていて、Classの記法などES6,ES5やcommonjs,systemjsなど適切な出力をしてくれます。ただし既存のjavascriptライブラリを使うとかすると、アンビエント宣言にはまりました...
    tsd(TypeScript Definition manager for DefinitelyTyped)を使いましたが、npmライブラリのバージョンと微妙にバージョンが合わないものもあります。自分で定義するにもjsのモジュールの概念がよくわからずかなり時間かかりました。

  • Angular 2のプロジェクト雛形にAngular 2-seedを使いましたが、ライブラリを追加する手順がよくわからず試行錯誤。途中でAngular2-seedを更新したら大幅に変更されていて(browserifyでbundleするように変わった)ので涙目。
  • Angular 2の利用方法によって最適ビルドはケース・バイ・ケースと思います。1つにbundleにするか、systemjs等で必要な際にjsを読み込むか。Angular 2のビルドについてはまだ混沌としていると思い自分でgulp組んでみましたがさらに学習コストが...