(注：2017/08/30、いただいたフィードバックを元に翻訳を修正いたしました。) TL;DR — AngularJSのアイデアは、2012年には妥当と言えましたが、2017年においてはそうとは言えなくなっています。JSのエコシステムは、成熟度、柔軟性、および生産性の面で、あっという間にAngularの前を通り過ぎてしまいました。現在では、webpackやフロントエンドのNPM、成熟したツールとライブラリのエコシステムを背景として、 大型チームを有する企業であっても、 ReactやVueなどの軽量なJSライブラリを使用することで、大規模で柔軟性のあるSPAを、適切な設計で維持することが容易になっています。 加えて、Angular 2/4の問題が散見された3年の開発期間や議論の余地があるアーキテクチャの決定方針が、多くの企業にこの新しいフレームワークの採用を躊躇させているようです。 201
Angular 2 の特徴を美味しいところだけ凝縮してお届けします
この記事でWeb開発の未来を垣間見ることができるでしょう。UIの構築やサーバ、データ・エンドポイントの新しい見解を得ることができると思います。ここで、ブラウザとサーバコードの両側を含めたフルスタックな話をしていきます。これを読めば、 完全に機能するGitHubリポジトリ で紹介されたすべてのコードの検証や実行ができるようになります。皆さまが開発者として次の資質を持っていることを前提に話を進めていきます。 JavaScript中級者 HTML中級者 クライアント/サーバ間通信の基礎知識 JSONの基礎知識 Node.jsの基礎知識 上の知識がなくても、 おそらく この記事の進行についていけるでしょう。しかし、知識がないと私の紹介するコードを現実的なシナリオあるいは重要なシナリオに応用するのは難しいでしょう。インターネットは情報の宝庫なので、理解に必要な概念などをたくさん提供してくれます。必要
この記事では、シンプルなTodoアプリのAngular 1のコンポーネントを、Angular 2のコードにアップグレードする方法を見ていきます。APIの違いや文法のテンプレートを比較することで、それがAngular 2へのアップグレードに何らかのヒントを与え、難しさが軽減すると感じてもらえることを願っています。 注意：Angular 2は、まだ”アルファ”の状態なので、APIやこれまでの技法は変化するかもしれません。しかし、この記事は残し、コードをアップグレードしていくつもりです。 Angular 1..x Todoアプリ この小さなコンポーネントを、Angular 2で書き換えてみます。まずは、このアプリの機能は以下の通りです。 Todoリストにアイテムを追加する アイテムを削除する機能がある アイテムが完了するとマークをつける機能がある 未完了のものと、合計のTodoの数を表示する こ
$timeoutって秒数を指定して遅延させる処理なんじゃないの？ 何で引数なしに使っているのか、$timeout無しでもいいんじゃないのか。 AngularJSの$timeoutサービスはwindow.setTimeoutのラッパーなので、 上記の書き方はsetTimeout(Function, 0)に等しいです。 上記の理由は以下のサイトの説明がわかりやすかったです。 遅延実行 | JavaScript プログラミング解説 http://so-zou.jp/web-app/tech/programming/javascript/window/delay.htm つまりはイベント発火時の関数(イベントハンドラ)やDOMの状態の更新が終了してからsetTimeout内にセットした関数が呼び出されるということ。0秒はドキュメントの状態が整ってからからなるべく早く実行するよーという意味。 0秒を
過去の記事からもわかっていただけるかと思うのですが、AWSやらFuelPHPやら、どちらかというとバックエンドの仕組みやインフラの仕組み作りを楽しいんですよね。 そんな感じで色々自分なりにやりつつも「あー、やっぱり自作アプリぐらい作っておきたいなぁ」と思い、FuelPHPでちまちま書いていたのですが、全然続かないわけですよ。 なぜか。それは成果物の見た目がかっこよくないからです。いくら頑張ってきれいなコードを書いたところで、できたアプリがダサいようでは、機能拡張もやる気になりませんよね。 というわけで、フロントエンド初心者丸出しの私がちょいとググって良さそうだったYeomanを使って、AngularJSを使ってAPIレスポンスのJSONを取得、非同期に画面を更新するというバックエンドとの連携部分をサクッと実装してみましたので備忘録として残しておきます。 Yeomanとは Yeomanとはフ
UI Bootstrap Bootstrap components written in pure AngularJS by the AngularUI Team Code on Github Download (2.5.0) Create a Build Angular 2 For Angular 2 support, check out ng-bootstrap , created by the UI Bootstrap team. Dependencies This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is re
意外とAngularJSを使った入力フォームのサンプルが無かったので作ってみました。 まず作ったものがコチラ AngularJSを使えば手軽にシンプルかつリッチな入力フォームを作ることができます。自前のJavaScriptを用意すればさらに凝ったものも作ることができますが、今回は自前のJavaScriptを使わないでもこれだけできます！というサンプルです。 個別のバリデーションチェック サンプルで行われているバリデーションは、全てAngularJSによるもので、JavaScriptによるコードの記述は一切書いていません。その代わりに、以下のような記述でチェックする内容を指定しています。 <form method="post" name="userInfo"> ... <input type="text" name="userName" ng-model="userName" ng-minl
GoogleのAngular 2はマイクロソフトのTypeScriptで開発されると発表。TypeScript 1.5以降でECMAScript 6とアノテーションなどを取り込んでいくと 来年登場予定とされるAngularJSの次期版「AngularJS 2」が、TypeScriptで開発されることが発表されました。これまでAngular 2はECMAScript 6ベースのAtScriptで開発されていましたが、AtScriptはTypeScriptに統合されます。 AngularJSはGoogleがオープンソースで開発しているJavaScriptライブラリ。次期版のAngular 2は来年登場予定とされています。 米マイクロソフトの開発部門でバイスプレジデントを勤めるS. Somasegar氏は、自身のブログにポストした記事「TypeScript <3 Angular」で次のように書い
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
angular.jsのチュートリアルにはテストもきちんと含まれているが、キューピー3分間クッキングなみに出来上がった状態で提示されてくる。そのため、なんとなくわかった気になるが実際よく分かっていないという状態に陥りがちである。
連載企画「AngularJS徹底解説」の第3回目は、ControllerとScopeの基礎について解説していきます。 AngularJS は MVW(hatever)!!! AngularJSはMVC(Model-View-Controller)フレームワークと呼ばれることが多いですが、一部の開発者からは MVVM(Model-View-ViewModel)である、という声もあがっていて、ある時期に「一体どっちなんだ！？」という状態になりました。 そこで、そういった経緯に対してAngularJSチームが、そこについての議論は本筋ではないとして、AngularJSはMVW(Model-View-Whatever)である、と明言しています。 今回解説するControllerは、このWhateverの役割にあたる機能です。実際に「Whatever = 何でもいい」とはいっても、”Controll
外道はるかぜちゃんジェネレータというWebアプリを いまどきな手法を用いて爆速で開発した話を紹介します。 先の3連休中、外道はるかぜちゃんジェネレータというWebアプリを開発&公開しました。ここで採用した開発手法がいまどきな爆速開発でしたのでちょっと紹介&ステマします。使った技術は以下の通りです。 AngularJS: Googleが開発しているViewModelなWeb開発ライブラリ(MVW: Model View Whateverだったかな?w) Github pages: スタティックサイトのホスティングに最適 Kii Cloud: mBaaS (mobile backend as a service) で共有データの保存に利用 HTML5 Canvas: 画像生成に。サーバサイドではなにもしてない! サービス概要 外道はるかぜちゃんジェネレータはベースとなる画像があり、そこに面白い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
