Posted at

読書記録 JavaScriptフレームワーク入門

More than 1 year has passed since last update.


この文書について

この本 (http://amzn.to/2i4pAlw) に対する個人の読書メモ

対象読者 : 掲題の書籍について何が書いてあるか知りたい人

筆者の状況


  • phpの開発が長い

  • オブジェクト指向はわかっているつもり

  • jQueryはCMSの開発程度で1.xを少し触った程度


概要

jQueryの箇所は省きます。


  • TypeScriptはJavaScriptに足りない機能を追加する


    • 静的型付け

    • スコープ


      • ES6と同様、letやconstなどが使える



    • クラスベースのオブジェクト指向



  • MVVMとは


    • 画面(View)とコード上のJavaScriptの画面モデル(ViewModel)とを紐付けること


      • 紐付けをbindingと呼ぶ



    • ViewとViewModelの紐付けにより、下記の可能となる


      • ViewModelのプロパティを更新すると画面が自動的に更新される

      • 画面をユーザが操作するとViewModelのプロパティが自動的に更新される





  • VirtualDOMとは


    • html操作のDOMではなく、JavaScriptObjectで作られたDOM


      • MVVM的に考えるとVirtualDOMがViewModelでと実際のDOMがView



    • VirutalDOMに対する処理が行われると、以前のVirtualDOMとの差分のみを実際のDOMに適用する



  • (Reactの)JSXとは


    • タグをソース・コード中に書ける


      • いつも見ているhtmlとほぼ同じなので直感的






  • 各フレームワークの特徴


    • Vue.js


      • MVVM



    • Bacbone.js


      • MVC


        • RESTによるサーバ連携





    • Angular2


      • コンポーネント指向

      • SPA(SinglePageApplication)がターゲット

      • トランスパイラは TypeScript

      • VirtualDOMの採用



    • React


      • コンポーネント指向

      • 画面表示特化 = Viewだけ

      • JSXによる記述

      • トランスパイラは Babel

      • VirtualDOMの採用



    • Aurelia


      • コンポーネント指向

      • トランスパイラは TypeScript

      • 設定より規約


        • Railsと同様の考え方



      • SPAがターゲット






  • 構成管理ツール


    • 構成管理ツールは依存関係の解決に必要


      • ライブラリやフレームワークに依存関係がある


        • 関係のあるライブラリやフレームワークを全部揃わないと使えない








  • 代表的な構成管理ツール


    • npm


      • Node.js用のパッケージマネージャ


        • phpでいうところのcomposer





    • Bower


      • Webのクライアントサイド開発のためのパッケージマネージャ






  • モジュールバンドラー


    • 複数のライブラリやフレームワークを別々にロードすると画面描画までに時間がかかる

    • リソースファイルを1つにまとめてアクセスできるようにするのがモジュールバンドラー

    • webpack


      • モジュールバンドラーのひとつ