まだ、使っていない人のためのjavascriptフレームワークを使うメリット

スポンサーリンク
Pocket
LINEで送る

質問:使うメリット

答え:めちゃめちゃ楽になる!

 

Angular・Vuejs・knockoutjsと三つのjavascriptフレームワークを仕事で使用してきました。

使う以前は何がいいのかよくわからずjQueryでよくね?とか思ってましたが実際使ってみるとその便利さにびびります。

javascriptフレームワークはModelとViewがあります。

jsフレームワークはModelに何か変更があった場合にリアルタイムで変更を感知しそれをViewに反映させてくれます。

これらの機能を使うとどんないいことが起こるのか書きます。

 

どんな時に使うと便利なの?

AngularはMVCだ!とかいろんなjsフレームワークの記事を見ましたが、MVCになると何がいいの?って感じでいまいち使いどころが理解できず。

ただ、使ってみるとこんなところに使うと便利だってのがわかってきたので書いていきます。

 

タグづけ機能

よくあるタグをつける機能のUIってフォームにタグ名入力して追加するとタグがぽんと追加される感じです。

fireshot-capture-054-bitpumpkin-%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2%e5%90%91%e3%81%91%e8%a8%98%e4%ba%8b%e3%82%b9%e3%83%88%e3%83%83%e3%82%af%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9-http___b

僕が使ったサービスのタグづけ機能は上記のUIになっています→http://bitpumpkin.com/

上記の機能は、フォームにタグ名を入力し追加すれば即座に上に表示されるというもの。

 

この機能をjQueryで実現するには、追加を押したときにフォームの値を取得して、htmlをappendしたり、削除する時はhtmlをclassで指定して削除ことになります。

 

一方フレームワークは、tagsというModelを作っておいて繰り返し表示のDOMを書いておき、値をpushするだけ。

スポンサーリンク

画面への追加や削除はフレームワークが勝手にやってくれます。

これがめちゃくちゃ便利

 

idやclassがjQueryに関連付けされているか考えなくていい

レイアウトが変わるときにCSSのプロパティ名を変えたいなあって時に、一度jQueryっで使っていないか確認する必要があります。

しかし、フレームワークの場合はclass名でDOMを取得するのではなく、

<input type=“text” ng-model=“yourName” placeholder=“名前を入力してください”>

ng-○○など独自のものを使うので一目でわかり、classを変更することで起きる影響がなくなります。

 

SPAにはもはや必須

SPA(シングルアプリケーションページ)に必須です。

家計簿サービスを作成していた場合、そのページから画面遷移することなく作成、変更、削除を行った方が便利です。

この場合jQueryを使うと、買ったものの追加、買ったものの商品名の変更、買ったもの削除を書く必要があります。

コードもapeendの中に長いDOMを書くことになり、レイアウトが変わった場合htmlの他にjsファイルも修正しなくてはいけなくなります。

 

フレームワークの場合は、Modelの中身を変更するだけですみます。削除したければ、Modelの中から対象を削除し、追加する時はModelに値を突っ込むだけでめちゃくちゃ簡単です。

 

まとめ

Webサービスはアプリの影響なのかSPAが増えてきていて、jQueryだけだと管理が大変になります。

今回、フレームワークを使うメリットが分からなかった場合は実際に使ってみてください。

僕も使うまではわかりませんでしたが、あまりにも便利なため今はもう動的に動くUIの場合フレームワークなしは考えられなくなりました。