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

weblog of key_amb

主にIT関連の技術メモ

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

Middleman テンプレートエンジン CSS JavaScript

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

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

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

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

使った技術

感想

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

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

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

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

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

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

1/3 追記

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

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

gsklee/ngStorage · GitHub

1/3 更に追記

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

参考