AngularJS勉強会行ってきたからとりあえず1つ作ってみた

最近ちらほら見かけるAngularJSの勉強会に行ってきました。「AngularJSってすげーんだぜ！」的な記事を最近ちらほら見かけてたので凄く気になってたのでAngularJS勉強会がちょうど開催されると聞いていてもたってもいられなくなって行ってきた。

ng-mtg#4 AngularJS 勉強会 | 集客ならイベントアテンド

まとめ記事は @yando さんが公開してくれています。

AngularJS 勉強会のまとめ (動画・スライド) #ng_jp | Engine Yard Blog JP

勉強会がどういう内容だったかはまとめを見て頂いた方が良いと思う。

とりあえず僕はAngularJSを触ったこともなく「ちょっと知った」程度だったので話について行けない感じがギュンギュンする場面も多々あったけど基本楽しかったよ、登壇者も楽しそうだった。

でも付いてけない感じがギュンギュンしてはいたんだけど @naoya_ito さんのスライドは初心者にはちょうどよく分かりやすく、それだけでも初心者の僕が「よしとりあえずなんか作るか」と思うきっかけには十分だったと思います。というか十分でした。

ということでとりあえずAngularJS最初のサービス？プロダクト？を作りました。

これと言って作りたい物が決まっていたわけじゃないので、せっかくだし制作に役立つものの方が良いかなぁと思いIEのどのバージョンがどの機能を使えるかの一覧表をインクリメントサーチできる感じのんにしようかなぁと。

で、できたのがこれ。だれかデザイン直してください。

IEEEeee!!!

入力欄に調べたい機能とかを入れればそれがどのバージョンまで対応してるかがチャチャっとでてくるよ。便利。多分。誰かデザイン直してください。

あと、データ自体はほとんどこちらのをコッペさせてもらってます。ダメだったら教えてください、すぐ消します。

Internet ExplorerのどのバージョンからどのHTML/CSS/JSに対応しているかの一覧｜Web制作 W3G

実際に作ってみて感じた事

入力したらすぐ反映されるところとかは凄く簡単にというか何も考えずに実装できた感じなのでそこら辺は本当にすげーなぁ、と。

で、ここ何ヶ月かはJavaScript書いてたというかjQuery書いてたって感じだったから何個かの機能をプラグイン化したりしたんだけど、jQueryで書いてて一番ヤダなーって思うのが、どうしてもDOMの構造に左右されやすい書き方になるんよね。

まぁ、もちろん僕の書き方がまだまだ修行不足なんかもしれんのやけど、でも大抵jQueryって「$(“.tabs”).click(~);」みたいにならん？なるよね。

そしたらさ、クラスってcssでも当たり前に使うやん？したらクラス修正したらhtmlもcssもjsも修正が入ることになって影響範囲がすげー大きいからうんざりする。

でもそういうのがAngularJSだと少なくできるんじゃないかなぁという希望は持てた。要素の選択でクラスは使わない気がするから。そのための（だけじゃないやろうけど） ng-xxx なんかな？

というわけでとりあえず作ってみた IEEEeee!!! ですが、やっぱイマイチどうだろねーって思うところがいっぱいでまだまだ感がハンパない。

これから本家チュートリアルとか各種リファレンスいっぱい見ていかないとなーと思いますですよ。多分これ作るときはドットインストールしか見てない。

AngularJS入門 (全12回) – プログラミングならドットインストール

というわけでもしこれが目に入ったAngularJSの先達様方、「ここはこうするべきだぜ！」とか教えてもらえると凄く嬉しいですがいかがですか。

とりあえず覚えないとダメだろなーなこと

まだデータを普通にJSの中に記述することしかしてないからデータをDBに保存して、非同期でデータを取得してJSONにして表示、編集してデータを保存とか出来るようにならないとなーとは思う。

先は長いけどこの新しいことを覚えてる時はすげー楽しいよね。