【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
MEAN(MongoDB, Express, AngularJS, Node.js)スタックが優れている理由 - Mozilla Open Web Day in Tokyoを終えて - albatrosary's blog
MEANとは、LAMP(Linux, Apache, MySQL, PHP)に変わる技術としてじわじわと注目されはじめているアーキテクチャです。このアーキテクチャMEAN(MongoDB, Express, AngularJS, Node.js)は、シンプルでかつ強力なアーキテクチャで、現在のJavaを利用したアプリケーション開発とは一線を画すところです。HTML5開発にとってJavaの役割が殆どなくなるというのも注目すべき点だと考えます。MEANで一般的に言われる注目すべき事項は次のところです： JavaScriptフルスタックである データモデルとしてクライアントからデータベースに至までJSON そして、この記事を書こうと思ったきっかけですが、2014/10/5(日) Mozilla Open Web Day in Tokyo | Mozilla Japan でのMEAN解説展示で、様
AngularJS使い方メモ - Qiita
AngularJSアプリケーション開発ガイド を読みながら勉強したときのメモ。 HelloWorld AngularJS を入手する 公式サイトから angular.min.js をダウンロードする。 HTML を書く <html ng-app> <head> <script src="angular.min.js"></script> <script src="helloWorld.js"></script> </head> <body> <h1 ng-controller="HelloWorldController">{{message}}</h1> </body> </html> angular.min.js を読み込む。 ng-app ディレクティブを付けたタグの中が、 AngularJS のテンプレートとして処理される。 ng-controller ディレクティブを付けたタグの中
AngularJS のテンプレートを入れ子にしたかったから angular-ui-router を使ってみた - present
AngularJS でテンプレートを入れ子にしたかったけど、ng-view は入れ子にできない。 つまり AngularJS の機能だけでは困難。 おまけに ng-view は複数置いて、別々のテンプレートを表示することもできないときた。 そんな ng-view や ngRoute に置き換わるのを目指したモジュールで、angular-ui-router がある。 angular-ui/ui-router こいつを使えばできそう。論よりコード。 <!DOCTYPE html> <html ng-app="UIRouterSample"> <head> <meta charset="utf-8"> <title>UIRouterSample</title> </head> <body ng-controller="MainCtrl"> <ul> <li ng-repeat="label in
AngularJSメモ
AngularJSに関するメモ ng-classでclass名に-を含んだものを指定する際は’‘で囲む。 ng-class=”{‘foo-bar’: ture}” $inputのvalidationは<formのname属性>.<inputのname属性>.$validの形式で利用する。 form form input NgModelController 入力値バリデーション関係のディレクティブ required ng-required ng-minlength ng-maxlength ng-pattern ng-change ng-trimで両端の空白を削除 $routeProviderにあるwhenメソッドで指定する第2引数のresolve属性(object)について resolve属性のキーはcontrollerに渡されるserivice名になる。 値が関数の場合はserviceが
AngularJSではじめるHTML5開発 – Part7 Promise/Deferredを用いたデータ更新後の画面リフレッシュ at nkjmkzk.net
Part6の続きです。 今回はデータ更新後に、現在画面に表示されている情報を最新状態にアップデートする仕組みを「Promise/Deferred」なるデザインパターンを適用して実装していきます。 まず今回開発する部分をデモでみてみましょう。 デモ それでは実装へ。 Promise/Deferredって何ですか？ データ更新後にサイドバーの情報をリフレッシュするのは難しいことではありません。 updateGuest()の成功時コールバックでgetGuests()を実行すればいいだけです。 ただし、このコールバックで逐次処理を記載していくと、いくつかの問題が発生してきます。 どんどんコールバックが深くなっていく（いわゆるコールバック地獄）。 ゲスト情報は更新したいけどその後の処理は必要ない、といったケースがでたときに更新処理だけを実施できない。 今回のようにAjax非同期通信でデータアクセスを
ui-routerを使って入れ子のビューをフレキシブルに構築 - Qiita
AngularJSでは$routeとng-viewディレクティブが結びついていて、ルートに応じて指定したtemplateがng-view内にincludeされる仕組みになっています。しかし、ng-viewを複数置いてそれぞれに別のテンプレートを表示させる、といった複雑な事はできません。ある表示領域の下に別の表示領域を置きたい...事は頻繁にあるので結構困る。 こういった事は、ルーティングフレームワークui-routerを使うと簡単に実現できます https://github.com/angular-ui/ui-router ui-routerを使うと、各々の状態（state）に「名前をつける」「入れ子にする」「並列に表示させる」 事ができ、インターフェースを格段に柔軟に扱うことができます。開発も非常に活発。 ありがちなwebサービスの画面を例として、ネストされたビューの構築手順を紹介します
ビューのレンダリングが始まる前に特定の処理を完了させたいとき - Qiita
やり方はいろいろあると思います ひとつは、$routeProviderのresolveを使う方法 あるURLに飛ぶ前に、必ず現在のユーザの情報をhttpで取ってきて$scopeに入れたい。 入れ終わってからビューを描画したいという状況だとします <h2>demo</h2> <div ng-app="app"> <script type="text/ng-template" id="sample.html"> <p>sample</p> {{user}} </script> <div ng-view></div> </div> angular.module('app', ['ngRoute']). config(function($routeProvider) { $routeProvider.when('/', { templateUrl: 'sample.html', controlle
AngularJS clientside routing and token authentication with webapi
I want to create an example for authentication and authorization in an SPA angularjs application using asp.net mvc webapi as the backend and client side routing (no cshtml). Below is just example of functions that can be used to set up the complete example. But I just can´t put it all togehter. Any help appreciated. Questions: What is best practise: Cookie or Token based? How do I create the beare
いけむのブログ with h - AngularJSのResourceを使うときの戻り値の使い分け
これもはまったのでメモ。 AngularJSのResource機能を使って、外部のJSONを返すサービスから値を取得して、データバインドして表示させるというプログラムを作ったとき。 .query()を使うと、値が複数ある（配列形式で返せるもの）はきちんととれるけど、 値が一つしかない（配列にならないもの）は以下のようなエラーを返して、なんでだ、となった。 Error: [$resource:badcfg] Error in resource configuration. Expected response to contain an array but got an object 理由はなんてことはなく、使用しているメソッドが間違えていた、というだけ。戻り値が配列にならないものは.get()を使う必要がある。こんな感じ。 .controller('Ctrl', function ($sco
Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発 - albatrosary's blog
Single-page Application(SPA)によりフロント開発にかかる手間が膨大になっています。SPAの開発をするときに通信部分（JSONやJSONPなど）をどうすればいいのかが問題になります。解答としてはスタブAPIサーバを作成し対応します。 画面開発するためにアプリケーションサーバを構築するのは時間の無駄ですのでgruntタスクにモックサーバを構築し簡単実装を行いましょう。 「本物の」APIサーバを使う場合は向きを変えることで簡単に結合テストできますし、CIを使うときはもちろんモックサーバでのテストになりますのでモックAPIサーバは活用するのが良いと考えます。 モックAPIサーバ gruntでモック用APIサーバを立ち上げるためのプラグインとして有名なものとして２つ存在します。 grunt-easymock grunt-stubby easymockはnode-easymo
フロントエンドだけじゃない! サーバサイドの開発も手助けしてくれる grunt-connect-proxy を紹介するよ - Qiita
フロントエンドだけじゃない! サーバサイドの開発も手助けしてくれる grunt-connect-proxy を紹介するよPHPJavaScriptgrunt grunt-connect-proxy grunt でプロキシサーバをたてることが出来るプラグインです。 npm i -D grunt-connect-proxy 特徴 もう単純にリバースプロキシするだけです。はい。 でもそれだけだと利点が分かりませんです。はい。 なので以下利点を2つ。 クロスドメイン問題の回避 開発サーバで 複数ポート / 複数FQDN を 同一ドメイン下で リクエストハンドリング出来るようになります。 例えば 本番環境ではAPI実装とアプリ実装が同一なのに、easymock などの APIモックサーバと開発サーバが別立ての場合、クロスドメイン制約があったりして色々と面倒です。 それらを grunt-connect
『Yeomanでフロントエンドとバックエンドサーバを一緒に開発する』 を yo angular でやってみたら『Cannot GET /』とかなった場合のメモ - 牌語備忘録 -pygo
問題 前回やった方法だとapiサーバ、フロントエンドサーバ、プロキシサーバを立ち上げてとかちょっと面倒。 『YeomanでフロントエンドとREST APIサーバーを同時に開発する方法』 を yo angular でやってみたメモ - 牌語備忘録 - pygo 前回の参考サイトの追記にあるこの grunt task を使う方法のが良さげ。 Yeomanでフロントエンドとバックエンドサーバを一緒に開発する なのだが grunt server を立ち上げてブラウザで確認すると『Cannot GET /』となってしまう。 対処 stackoverflow で対処法発見 gruntjs - Can't implement grunt-connect-proxy - Stack Overflow 前回のを修正してみる （server/proxyServer.js は使わないので削除） インストール $
Yeomanを使ったAngularJSアプリをチームで共同開発して公開するまで - Qiita
Yeomanって何？ フロントの開発に必要なツール郡です。主な機能として、 プロジェクトの雛形の作成 (yo) 依存するライブラリの管理 (bower) altJSのコンパイル、css/jsファイルのminify、画像の圧縮などタスク実行(grunt) が行えます。詳しくは下記サイトの「Yeoman(ヨーマン)とは」がとても参考になると思います。 参照：[Grunt]Yeomanで開発ワークフローを楽にしよう[bower] ｜ Developers.IO node.jsのインストール Yeomanはnpmからインストールするため、node.jsをあらかじめインストールしておく必要があります。 mac macでのインストールはhomebrewがおすすめです。 MacOSX 10.9にhomebrewをインストールする場合、下記の記事を参考にしてください。 参照：Python - MacOSX
AngularJSではjQueryを使わない - The Round
注：古い記事の為、内容が最新ではない可能性がありますm(＿ ＿)m AngularJSではjQueryを使わない どうもマツウラです。 AngularJSでjQueryプラグインを使う方法を調べました。 結論から書くとなるべくdirectiveで書きなおして下さい、ということです。 プラグインをそのまま使いたい気持ちはありますが、理由があるんです。 まず、AngularJSで使う方法をみてみます。 プラグインが適用されない。 directiveのlink関数に書く。 .directive('myDirective', function() { return { link: { post: function(scope, element, attr) { //... } } } }) 動的に生成されたDOMに対してプラグインが適用されない。 $timeoutを使う。 $timeout(fun
AngularJS + TypeScript でリッチなフォームを作ってみる - パンダのメモ帳
前回（AngularJS で Hello World）に引き続き AngularJS + TypeScript による簡単なアプリケーションを書いてみました。 今回は AngularJS を使ったフォームの例です。 AngularJS のみで、比較的簡単にリッチなフォームが作成できることがわかるんじゃないかなぁと思います。 まえおき TypeScript で書いてます。 AngularJS のバージョンは2013年2月現在の最新安定版である 1.0.4 を使用します。 自動受け入れテスト（E2E Test）は面倒なので省略しました。 ソースコードについて なお、今回のソースコード一式も GitHub で公開しています。 また、こちらで実際に動作を確認することもできます。 解説 前回解説した内容についてはなるべく割愛します。 form 要素 <form id="signupForm" nam
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJSとBootstrapを使ったシンプルなRWD対応のダッシュボードのテンプレート・「Responsive Dashboard」
Index of /
AngularUI for AngularJS
textAngular :: Lightweight Angular.js, Javascript Wysiwyg/Text-Editor