Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 【追記】 Angularのロードマップを追加しました。 基礎知識（HTML, CSS, JavaScript）、制作者として必要なスキル（Git, HTTPSプロトコル, Terminalなど）をはじめ、Vue.jsとReact.jsで何を学ばなければならないのかが、まとめられています。 拡大画像: Vueのロードマップ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は
Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
フレームワーク対決！Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
前年開催したリーダブルコード勉強会やアプリコンテストに参加いただいた大学院生 kentya6 (Kengo Yokoyama) · GitHub さんが、Swiftで作った以下のライブラリをGitHubで公開したところ、★300以上ついた！ というお話を聞きつけ、その経緯やどんなことが起こったのか、インタビューしてきました! github.com －まずは自己紹介ということで、普段行っている研究や開発で、どんなことをされているか、教えてもらえますか? 私の在籍している 筑波大学高度ITコース では、研究ではなくPBL形式のチーム開発を行っていて、顧客の要望をヒアリングして実装に落とし込み、最後に納品するというシステム開発を行っています。 修士2年になってからは別のプロジェクトが始まりましたが、修士1年では施設内ナビゲーションアプリCampusAR を作成していました。 （補足: Campu
問題 AngularJSと、Bootstrapのui.bootstrap使ってて BootstrapのModal機能とか使いたくなるけれど Angular的なControllerや$scopeの扱いが混乱したのでメモ 参考 公式: Angular directives for Bootstrap サンプル 親View。対応するControllerのメソッドをふつうに呼んでるだけ↓ <!-- モーダル開く親側のView --> <ul> <li data-ng-repeat="task in tasks"> <span>{{task.name}}</span><a href="#" data-ng-click="openDeleteConfirm(task)">さくじょ</a> </li> </ul> 親Controller。もちろんopenDeleteConfirmをexportしてる。そ
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015 佐川 夫美雄（Ashiras, inc.） この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第2回目）です。 はじめに HTML5ハイブリッドアプリケーションとは、内部の実装にHTML5が利用されているモバイルアプリケーションです。アプリの内部実装にHTML5を使うことでクロスプラットフォーム対応が可能になりますが、その代わり問題となるのがUIとパフォーマンスです。このセッションでは、Angularの上に構築されたUIフレームワークであるOnsen UIを紹介しながら、Angularでどうすれば高速かつ快適なUIを持つモバイルアプリを作れるかについて話します。 AngularとOnsen UIで作る最高のHTML5ハイブリッドアプ
車輪開発大好きおたいがです。こんにちは。（挨拶） 今回は JavaScript で非同期処理を実施するときに用いられる Promise ( プロミス ) についてまとめてみました。Promise とは「非同期処理を抽象化したオブジェクトと、そのオブジェクトを操作する仕組み」のことを指します。 引用 : https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise より Promise インターフェースは作成時点では分からなくてもよい値へのプロキシです。プロミスを用いることで、非同期アクションの成功や失敗に対するハンドラを関連付けることができます。 これにより、非同期メソッドは、最終的な値を返すのではなく、未来のある時点で値を持つプロミスを返すことで、同期メソッドと同じように値を返す
AngularJSではselect要素による選択フィールドもスコープ変数にバインドすることが出来る。その際、option要素の代わりに ng-options属性で選択肢を提供するための書式を解説する。 Tweet 2014年3月29日 嶋田大貴 ng-options属性の書式は一見独特で最初はわかりにくいので、具体的な例をいくつか挙げることで理解の助けにしてもらおうと思う。 公式ドキュメント: AngularJS: API: select 数値や文字列などの配列から選択させる 配列にプリミティブな値が直接格納されており、選択肢のラベル＝バインドされる値で構わない場合には一番シンプルな記述となる。 JavaScript $scope.years = [2010,2011,2012,2013,2014]; $scope.selectedYear = 2014; HTML <select ng-
メモ書き。何か発見するたびに更新してます。 合っているかどうかは分からない話 下記は古い(いつから？)AngularJSの記述方法です。 ng-controllerはwindowオブジェクト直下の関数を見なくなりました。 var app = angular.module('app', []); app.controller('con', function($scope){});ng-controllerの名前の指定は、angular.module().controllerの第一引数で指定します。 view ng-model属性 コントローラーの$scopeのオブジェクトと一致する。 <div ng-controller="con"> <input type="text" ng-model="a.b" /> <input type="text" ng-model="c" /> </div>
angular.module('Ninja', []) .directive('ninjaCustomer', function() { return { templateUrl: 'partials/ninja-customer.html' }; }); こんだけなので、まあどってことない。これだけなら ng-include のほうがラクでいいやんってことになるかな。でもまあ、とりあえずこんだけしか書かなくても directive として動作するのかってことを見ておく。 要素として使う Directive としたければ デフォルトでは属性（restrict: 'A'）として使う directive として作られる。なので、要素として HTML で指定する directive にしたければ、restrict オプションが必要になる。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Angular.jsのアドベントカレンダー6日目です。(遅れてすみません汗) 今日は泥臭い?感じの話になります。 この記事は言及している人達の記事やスタイルガイドのまとめという感じなのですが、これからディレクトリ構成を考える初学者の方や，ディレクトリ構成に悩んでるかたの参考になれば幸いです Angular.jsのディレクトリ構成パターン紹介と、利用して感じた考察などのことを書きます。 ##はじめに LIG主催のAngular.js勉強会 #ng-curry にて、登壇したときの発表内容をまとめようと思っていたのですが、今回のAdvent
はじめに ディレクティブは、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 種類を解説します。 モデルを共有するサービスを使用する (Shared Service)。 親コントローラのスコープを子コントローラで共有する (Parent Scope Sharing)。 イベントを利用する (Pub/Sub)。 Shared Service 複数のコントローラ間で共有するモデルをサービスとして作成し、そのサービスを複数のコントローラで参照します。 実装例を示します。 <!DOCTYPE HTML> <html ng-app="AngularJsStudy"> <head> <title>Shared State Service - AngularJS Study</title> <meta charset="utf-8" /> <meta http-equiv="
最近、プライベートのプロダクトでAngular.jsを勉強がてら使っている。 Yeomanでgenerator-angularを使う方法でやってたり。 で、結構悩んで調べたことがあったので、メモ。 ※使い始めて間もないので、間違いがあったらご指摘ください。 サービスを作るやり方、Angular.jsだと色々あります。 yeoman-generatorのREADMEを参考に挙げると https://github.com/yeoman/generator-angular#service service, factory, provider, value, constant と、実にたくさん。 providerとvalueとconstantは、名前からなんとなく使い分けが判るんだけど、 serviceとfactoryの違いって何よ？って結構悩んだ。 簡単な実装例だと、「結局どっちも書き方が違うだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く