[3選]最近気になるjavascriptフレームワーク

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

最近見かけて気になったJsフレームワーク

最近は新しいフレームワーク/ライブラリが次から次へとでてきて、名前を覚えるだけでも一苦労です。 参考(少々古いですが):JavaScriptのMVCフレームワークと仲間たち

その中でも、いくつか気になるjsフレームワークがあったのでそれらについて紹介します。

AngularJS 1.x系

AngularJS

これは気になったというか、実際によく使用しているフレームワークです。 いまJavaScriptのフレームワークといえば、一番最初に名前が挙がると思われます。

AngularJSはGoogleとコミュニティが開発しているオープンソースのJavaScript用MVWフレームワークで、 テンプレート言語としてHTMLを使用できたり、双方向データバインディングやDI(依存注入)が使用できたりと、 Webアプリのフロント部分を効率よく記述するための機能を持っています。

AngularJs1.x 公式サイト:https://angularjs.org

1.x系は弊社でもいろいろなプロジェクトで使用しています。 AngularJS 1系の詳細はこのへんをご確認ください。

AngularJS 2.0

angular2

2015年の米AngularJSカンファレンス発表された、AngularJSの次期バージョンです。 1.xと比較して、もはや別物じゃないかといえるくらいの大きな変更が加えられています。

主な変更点

  • ECMAScript6(ES6)の採用
  • 双方向バインディングの廃止
  • ng-xxx記法を廃止して、記号([]、()、#)による式やイベント記述
  • JavaScriptベースでアノテーション等を追加したAtScriptを利用
  • WebComopmentsを利用し、コンポーネント化を進める

具体的にはControllerやService、$scopeがなくなるとか、 ディレクティブ定義がただのclassになるなどの変更があります。 2.0の公式サイトがすでにあるので、気になるかたは実際にためしてみましょう、

AngularJs2.0 公式サイト:https://angular.io/

Aurelia

aurelia

Aurelia(アウレリア)は2015年1月にリリースされたばかりのフレームワークで、 元々はAngularJSの開発に携わっていたRob Eisenberg 氏が Durandal 2.xの後継として作成したフレームワークのようです。 フルスタックフレームワークであり、下記のような機能をもっています。

  • ES6/ES7機能取り込み
  • DI(依存性注入)
  • 双方向バインディング
  • HTML拡張
  • ルーティング機能
  • モジュール化

AureliaはECMAScript 6の機能が使用されていて、パッケージマネージャはjspm(bower+gulpっぽいツール)を使っています。 他にもWebComponents、Object.observeなど、新しい技術の機能を取り込んでいます。

Aurelia JS公式:http://aurelia.io/

React

react

React.jsはFacebook製のJavaScriptライブラリで、UIを構築するためのコンパクトなライブラリです。 AngularやAureliaと違い、フレームワークでなくUIを構築するだけのライブラリなので、MVWでいえばV(ビュー)の機能のみを担当します。 主な特徴は下記の通りです。

1.JUST THE UI React.jsはビューのみを担当する。そのため、Angularなど、他のフレームワークと合わせて使用することも可能。 React.jsはComponentを作るためのライブラリで、使用するために覚えなければならない事も多くない。

2.VIRTUAL DOM React.jsは「仮想的なDOMの構造体をJavaScriptのオブジェクトで持つ」という仕組みを持っており、 最小限の変更で実際のDOMへ反映させるので、パフォーマンスがよいみたいです。

3.DATA FLOW Angularでは双方向ですが、こちらは一方向のデータバインディングです。 データ管理用コンポーネントに対してデータを渡すことで、シンプルに実装できるらしいです。 (実際つかってみないとイメージわきません。。)

あとReactの特徴としてはJSX(XMLみたいなシンタックスの記述)を使用できるということがあります。 JSXを使うと、次のようなコードは

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

こんなふうにかけます。

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);

Javascriptのコード中にhtmlをそのまま埋め込んでいるみたいですね。 なお、JSXは必須ではないです。

React公式:http://facebook.github.io/react/

まとめ

さて、今回は私が気になっているJavaScriptのフレームワークを3つ紹介しました。 個人的には、ReactとAureliaがおもしろそうなので、さわってみたいと思っています。

  • ホト

    フロント>サーバサイドも多少>5年後以降には将来はアプリ制作も考えたいと思っている者です。
    絶対的な答えはないので、沢山の方の意見が聞きたく質問しています。

    HTML5>CSS3>jQueryとやってきたのですが、その後どう学んでいくか迷っています。

    その後どうするかがわかりません。
    候補は下記ですが、

    ・リアクト
    ・メテオ
    ・タイプスクリプトないしはバベルのどちらか
    ・jQueryはオワコンのようなので、JSその物でフロントを一年ほどやり、その後サーバサードをやる事になった時に、エクスプレスかメテオをやる。
    ・jQueryはオワコンのようなので、JSその物でフロントを一年ほどやり、その後サーバサードをやる事になった時に、英語の読み書きをやってメテオをやる。

    リアクトはサーバサイドは出来ないようなので、いきなりメテオが出来れば一番合理的なのかなと思っていますが、重くて小中規模のサイトには向かないのと、
    本を買って学べば何とかなると思っていましたが、日本語の本もほとんどないという事なので数年は手が出せない物なのかなと思っています。
    aureliaも同じように無駄が多く重いでしょうか?

    リアクトをお勧めておられるので、サーバサイドのみ出来ないようですが、JSの基礎をやった後にすぐにリアクトを始め、
    その後サーバサードをやる事になった時に、エクスプレスかメテオをやるのが一番でしょうか?
    小中規模のサイト制作を請けるフリーランスか小規模企業での仕事を考えています。

    aurelia、メテオをいきなりやってすべて済むようになるまで、JS、jQueryで待つという手も有るかなと思っています。

    それでは、今後も勉強になる記事を楽しみにしています。
    頑張ってください。