jQueryもbackboneもAngularもいらない。の記事で少し触れましたが、目的と手段が入れ替わってしまうようなフレームワークの使い方には疑問があります。
今回はAngularJSを利用することによってどのような問題があるか、どう使えば問題ないのかについて個人的な意見を書いておきます。
仕事で散々な目にあったからってAngularJS＝悪というふうには思っていません。決して。要は使いどころの問題ですね。
AngularJSの最大の特徴、「ng-」属性を用いたデータバインド
Angular使いのみなさんはちゃんと吐き出されたhtmlソースご覧になっていますか？
<div ng-app=""> <ul ng-controller="ctrl"> <li ng-repeat=""><a href ng-bind="item" ng-click="func()">リンクリスト</a></li> <li ng-repeat=""><a href ng-bind="item" ng-click="func()">リンクリスト</a></li> <li ng-repeat=""><a href ng-bind="item" ng-click="func()">リンクリスト</a></li> <li ng-repeat=""><a href ng-bind="item" ng-click="func()">リンクリスト</a></li> <li ng-repeat=""><a href ng-bind="item" ng-click="func()">リンクリスト</a></li> </ul> </div>
ｲﾗｲﾗ…
なによこのソース！
divいる！？
ulにidついてたら子要素取得できるしulだけあればいいじゃない！
マークアップとは関係ないのにレイアウト上ど～してもしょうがなくdivをかませることはあるけど、ulでレイアウトできてるのに文書的にまったく必要ないじゃんこのdiv！ってか邪魔！なんのためにセマンティックにマークアップしてidとclass管理してhtmlソース減らしてると思ってるのよ！ごてごて1要素ごとに属性つけまくってなんなのよ！
っていうことが往々にしてあるんです。
まあこのへんはコード書く人がうまければもっとスッキリするのかもしれませんね。そういうソース私は見たことないけど、世の中には存在するんだろうね。
そんなことより、
「ng-」接頭辞のカスタム属性なんて、HTML5の仕様にない。ってかエラー出る。
お前は本当にGoogle先生の生んだ子か！？
HTML5で定義されているカスタム属性は「data-」。
「ng-」なんて仕様にないので、当然エラーが出ます。
jsだのphpだのってのはみんなちょっとでもシンタックスエラーがあったら真っ白になったり、うんともすんとも言わなくなるのでみんな動かすのに必死ですよね。
htmlやcssをバリデータにかけているプログラマさんってどのくらいいるんでしょうか。
htmlはとっつきやすいのが幸いしてものすごいスピードで普及しましたが、そのぶんstrictにやろうとするとろくに表示できないようなページがたくさんあるんですね。ブラウザは極力それを解釈しようとするように実装されているので、多少間違っていてもページが表示され、ときどき崩れたりするくらいで済むのです。
そのおかげか、そのせいか、誰でも挫折しないでホームページが作れるので発展したともいえますが、そこらへん表裏一体ですね(ヽ´ω`)ﾊｧ…
エラー、出てますから。
仕様がどうのこうのセキュリティがどうのこうのってうるさいくせになんでhtml5の仕様は無視するの？
なんでマークアップ言語がhtml5と定められているWebサイト作るのにhtml5の仕様を無視しちゃうの？
しかもプログラマでもなんでもないAngularなんて知らなかった私ですら、ちょっとぐぐったら「data-ng-」っていうカスタム属性も使えるってことくらいすぐ見つかったんだよ。これなら普通にhtml5の仕様に沿ってるよ。最初からみんな「data-ng-」で作ってよ。
それでは、バリデータでエラーとなってしまうことが気になる方もいらっしゃるかもしれません。そういった場合には、「data-ng-○○」のように独自テータ属性としてしまうことで回避できるようです。
バリデータでエラーが出るのが気になるから「data-ng-」を使うんじゃないんです！
「ng-」が仕様に違反してるからエラーが出るんですっ！！！
電車で騒いで周りに迷惑かけてる子供の親が「おじさんに怒られちゃうからやめようね」って躾になってない躾をしてるのと同じですよ。そうじゃないだろと。おじさんに怒られるからだめなんじゃなくて、周りに迷惑をかけているからおじさんから怒られるんだと。
SEO対策が必要なサイトにAngularJSは使えるのか
Google先生はどんどん進化しておられるので、単純にキーワードが含まれているかどうかだけではなく、そのページの見出しレベルなどから検索ワードと内容の一致率を見たり、ページの読み込みスピードが早いかを見たり、と、「マークアップがセマンティックであるかどうか」「パフォーマンスがすぐれているか」といったことが重要になってきました。
ヘッダでそのページで使いもしない外部jsファイルを呼び出さなければならない、「ng-」を使うことでそもそもhtmlがエラーだらけ、もしくはチームのスキル次第では「AngularJSのために」よけいな要素を挟まないといけない、htmlソースをいまいちGoogle先生に読んでもらえない、こういった問題点が出てくるとプロジェクトによっては非常に困ったことになります。
たとえばPV数が命の広告配信で収益化を図っているようなサイト。
たとえば企業のコーポレートサイト。
たとえば商品ページごとにランディングしてほしいECサイト。
それ以外にも、オーガニック検索の流入を増やしたい、それがクライアントからの要件だったり、目標に含まれているような場合です。
また、そういったサイトを構築するのに
はたしてAngularJSの機能が必要か？
開発工数を削減できても、その後の運用は？
細かな修正に対応していけるか？
必要なスキルを有する人材を確保し続けられるのか？
などなど検討しなければいけないことはたくさんあります。
「なるほど～AngularJSは会員管理ページに向いてるのか！」「遷移しないでSPAっぽくしたいからAngularJSはうってつけだな！」なんていうところだけ見ていると、あとで痛い目にあいます。
ここでひとつ言えるのは、SEOもセマンティックもなにも関係ないWebページやアプリであれば、AngularJSのもつ問題は問題ではないということです。
アプリはもちろん、SEOもなにも関係ありません。htmlが間違ってようが、表示されて動けばいいです。
Webページでも、運営が触るだけのバックオフィスなんて、表示されて動けばいいです。（bootstrapなんかと組み合わせてちゃちゃっと作っちゃったら楽ちんですね）
ユーザーがあれこれ入力して設定を変更する会員管理画面なんかも、いいですね。
ECサイトの商品ページは遷移で導線を作りこんでSEO対策ばっちりにして、会員管理画面はAngularJSでガチガチに作る。という手があります。
つまり、Angularに問題があるのは「data-ng-」以外の接頭辞がhtml5じゃ使えねーよ！ってことくらいで、そのほかの問題は「使いどころが悪い」ということにつきます。（あとは使う人のスキル･･･？）
私が関わったプロジェクトは、たしかにSPAっぽい構成のページでしたがSEO対策が必須だったという点、専任デザイナーが設計したUIを再現するためにhtml/cssが切っても切り離せない関係にあったという点、html5なのに「ng-」属性を使用していたという点、こういったことが相互作用してそれはもうひどいことになりました。
これを防ぐには、事前にサービスの要件（SEO対策必須、使用言語はhtml5等）をきちんと共有して、デザイナーからエンジニアまでそれぞれの視点のプライオリティも共有したうえで、開発環境を選定するべきだったのではないかと考えています。
仕事で散々な目にあったからってAngularJS＝悪というふうには思っていません。決して。要は使いどころの問題ですね。
大事なことなので二度･･･