魔法使いの卵

WEBエンジニアの卵の成長記録

Webエンジニアの教科書読んでみたメモ3(フロントエンド)

jQueryを使うメリット

  • ブラウザごとの固有仕様に縛られない
  • 開発者の負担を軽減してくれる

jQueryの特徴

  • ブラウザに依存しないDOM操作
  • イベントやCSS操作が簡単
  • エフェクトとアニメーション
  • Ajax通信が楽にできる
  • 拡張性がある(jQueryプラグイン)

jQueryのバージョンの違い

  • 1.x
    • IE8以前をサポートするレガシーブラウザ向け
  • 2.x
    • IE8以前を捨てより早く安定を目指したバージョン

jQueryより安全に簡潔に実装したいとき

  • CoffeeScript
    • RubyとPytonから影響をうけて生まれたシンタックスシュガー
    • コンパイルすることでjsへの変換が可能で簡潔にかける
    • 変数宣言に[var]が不要(自動で付与される)
    • 行末に[;]が不要
    • [{}]はインデントで表現
    • [()]は曖昧性がない場合は省略可能
  • TypeScript
  • Grunt
    • 上記2つはコンパイルする必要があり手間になる
    • コンパイルを自動化してくれるのがGruntというツール
    • package.jsonやGruntfile.jsを共有することで同じ環境がつくれる
    • 環境の共有がとても簡単にできる

jsの主なフレームワーク

  • Backbone.js
  • AngularJS
  • Ember.js
  • Vue.js

jQueryがあるのになんで?

  • DOMの変更にjQueryが弱い
  • フロントエンドの開発が大規模化している

AngularJSの特徴

  • Googleで作られたフルスタックなFramework
  • フルスタックなので標準でひと通りの機能が用意されている
  • jQueryのようにDOMを辿る必要がないためDOMの構造が変わっても影響を受けにくい
  • HTMLをそのままテンプレートとしてつかうことができる
  • 双方向データバインディング
    • 画面でアクションを起こすとjsの変数に値が反映される処理
    • jsの変数の値が変化すると画面も再描画される
  • こういった連携がシームレスに行われるのがAngularJSの強み
  • DIコンテナを利用して依存関係を管理している

まとめ

読んでいる本

Webエンジニアの教科書