Middleman, Slim, Sass を使って AngularJS のチュートリアルをやってみた

AngularJS のチュートリアルとして、すぐできる AngularJS を写経しました。

ただコピーするだけでは面白くないのと、最近のフロントエンド開発のツールをついでに触ってみたかったので、Middleman, Slim, Sass を使って書き直しました。

本当は途中まで CoffeeScript も使っていたのですが、最後の Controller 分割部分でエラーが解消できず、素の JavaScript を使うことにしました。

成果物は GitHub に置いてます。また、middleman deploy の機能で GitHub Pages にパブリッシュしています。

• リポジトリ
  • ToDoアプリ - https://github.com/key-amb/middleman-angular-tutorial
  • 帳票アプリ - https://github.com/key-amb/middleman-angular-tutorial2
• Published GitHub Pages
  • http://key-amb.github.io/middleman-angular-tutorial/
  • http://key-amb.github.io/middleman-angular-tutorial2/

使った技術

• AngularJS
• Middleman
• Slim
• Sass

感想

Slim と Middleman はだいぶ好きになりました。 今後、静的サイトを作るときは使おうと思います。

Slim を使うと記述量を減らしてきれいに書くことができます。 少し慣れも要りますが、慣れたら楽です。

Sass は正直、ほとんど書いていません。 サンプルを変換ツールに掛けてコピペしただけです。

CoffeeScript についてはまだあまり親しめていませんが、function や中括弧を省略できたり、class がかんたんに作れたりというメリットがあるようです。 が、今回のように JS へ変換したときにバグると面倒な気がします。 Make Middleman compile coffee-script using bare mode. · GitHub であった bare mode というのも使ってみたのですが、駄目でした。

いろんなサイトを見てみると、AngularJS + CoffeeScript の組み合わせで使っている人もけっこういるようなので、きっと回避策はあるのだろうと思います。

AngularJS で試してみたい機能があるので、もう少しこのサイトで遊んでみるつもりです。

1/3 追記

localStorage を使って ToDo リストを永続化しました。

ngStorage という AngularJS のモジュールがあったので、そちらを利用しました。

GitHub - gsklee/ngStorage: localStorage and sessionStorage done right for AngularJS.

1/3 更に追記

ToDo アプリに加えて帳票アプリの方も写経しました。

参考

• AngularJSでlocalStorageを使う