安心して2017年を迎えるためのAngular最新動向チェック - Qiita
忙しい人向けのまとめ Angularは破壊的変更を含む可能性のあるメジャーアップデートを 半年に1回 に定めました 次のメジャーアップデートは3月1日予定です 諸事情により来年3月にリリースされるのはAngular 4.0.0です 2.xで書いてるものは基本壊れないから怯えないで あとAngular2 って呼ばないで！ Angular だから！ 時間がある人はここから読んでね どうも、lacoです。ng-japanの代表とかやってます。 さて、2016年はAngularコミュニティにとって、とても重要な激動の1年になりました。去年の今頃からは考えられないほど状況は変化しました。日常的に動向をウォッチしている筆者でさえ突然の大本営発表に驚くことが何度もありました。しかしその結果、無事にAngularは2.0のFinalリリースを迎えることができて、ようやくコミュニティとエコシステムが軌道に乗
npmでTypeScriptの型定義を管理できるtypesパッケージについて - Qiita
どうも、らこです。 Angular 2の開発リポジトリでは型定義ファイルの依存解決に関して、最初はtsdだったのが途中でtypingsに移り、そして最近またtsdに回帰していたのですが、ついにtsdすらも使わず、npmだけですべてを解決するようになってました。 いったいどうやって？というのが今回のお話で、結論から言うと @types スコープから公開されているパッケージがdevDependenciesとして依存されるようになっていました。 @types typesという名前のユーザーで、明らかにbotだけど中身はMicrosoftの人らしい。(メールアドレスから) どのパッケージもだいたい 2016/5/17 に最初のpublishがされているらしく、最近始まった取り組みのようです。 現在1700超のパッケージが公開されてますが、すべて型定義ファイルのパッケージです。型定義は https:
Angular 2への移行を助けるライブラリ angular-http-harness の紹介 - Qiita
どうも、らこです。物好きなみなさんはもうAngular 2への移行を始めていると思いますが、$httpの移行どうしてますか？ Angular 1の$httpからAngular 2のHttpへの移行を助けるライブラリ angular-http-harness を作ったので、何が問題で、何を解決できて、どう嬉しいのかを紹介します。 用語の統一 サービス: ビューから切り離されたアプリケーションまたはライブラリのロジック。 $http: Angular 1のHTTP通信モジュール Http: Angular 2のHTTP通信モジュール $httpの移行に伴う問題 ほぼすべてのAngular 1のアプリケーションは$httpを使っているんじゃないかと思うので今更説明の必要はないと思いますが、改めて言うと$httpはAngular 1で(たいていはAjaxのために)HTTP通信を行うのに便利なサービ
PolymerとAngularJSでコンポーネント間の状態を同期する - Qiita
@laco0416です。PolymerとAngularJSで一方向データバインディングによるコンポーネントツリーを作り、コンポーネント間で状態を同期してみました。 完成品 タブを表示するコンポーネントとドロップダウンメニューのコンポーネントは別のPolymerElementです。 <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <script src="bower_components/webcomponentsjs/webcomponents.js"></script> <script src="bower_components/angular/angular.js"></script> <link rel="import" href="components/tab-header.html"/> <lin
Angular 2でCSSアニメーションを書く - Qiita
どうも、らこです。 Angular 2の勉強会で出た質問でアニメーションのことがあったので、試してみたら問題なく動いたので使い方を紹介します。 はじめに Angular 2のメインパッケージに含まれているのはangular2/animateモジュールです。これはもう実用段階のAPIです。 それとは別に、ngAnimateというプロジェクトも動いており、これはアノテーションベースでアニメーションを宣言的に記述できるようにしようというものです。まだ全然出来てないのでいまは使えませんがデザインドキュメントはみることができます。 Animations for Angular 2 Beta - Google ドキュメント 今回紹介するのは前者の今使える方です。 完成形 マウスオーバーで背景を指定された色に変更するアニメーションが動くディレクティブを書きました。 いろいろごちゃ混ぜですが動くサンプルは
その使い方はもう古いかも？AngularJS老化チェック（ディレクティブ篇） - Qiita
こんにちは、らこです。AngularJSのバージョン1.5.0がリリースされましたね！ コードネームは ennoblement-facilitation、ざっくり訳すなら「高尚化促進」でしょうか。コンポーネント志向の「高尚」なアプリケーション設計への移行をサポートするバージョンだということでしょう。 1.5.0ではcomponentの追加をメインに、Angular2へのスムーズな移行を行うための足がかりとなるアップデートです。いい機会なので、 今の自分のAngularJSの使い方がどれくらい古いのか をチェックし、どのようにモダンにしていけばいいのかを知っておきましょう。 ちなみに、1.4までに関しては AngularJSモダンプラクティス - Qiita を参考にするとよいでしょう。 このモダンプラクティスに従ったコードになっていればcomponent()対応はあっという間のはずです。
Angular2はいかにしてオブジェクトの変更を監視しているのか - Qiita
こんにちは、laco0416です。 今回はAngular2がいかにしてオブジェクトの変更を監視し、データバインディングを解決しているのかを解き明かします。 結論 この部分でループとtick処理を実装していた。 ObservableWrapper.subscribe(this._zone.onTurnDone, (_) => { this._zone.run(() => { this.tick(); }); }); 調査開始 Angular2は$applyがないのにどうやってオブジェクトの変更をビューに反映しているんだろう？という疑問から調査を開始。 そもそも、Componentのプロパティに変更を加えたときに何かイベントが発生しているわけではない（object.ObserveもProxiesも使っていない)ので、何かしらのタイミングで別のメソッドから変更があるかどうかをチェックしているはず
Angular2のDIを知る - Qiita
Injectする側 これをComponentでDIします。DIするにはComponentのprovidersプロパティにDIしたいクラスを指定し、コンストラクタでそのクラスの引数を取ります。 import {Component} from 'angular2/core' import FooService from "./fooService"; @Component({ selector: 'my-app', providers: [FooService], template: ` <div> <h2>Hello {{name}}</h2> </div> `, directives: [] }) export class App { constructor(private fooService: FooService) { this.name = fooService.say(); }
gulp.srcのglobからtsconfig.jsonのfilesを更新するプラグインを作った - Qiita
[追記] Gulpプラグインで受け取れるファイルストリームが順不同で、実行するたびにfilesの順序が変わる可能性がある。 ので、atom-typescriptと同じようにfilesGlobを展開するだけのCLIを作ったのでこっちを使って欲しい。 laco0416/tsconfig-cli Globの展開に使ってるのはatom-typescriptの内部でも使われてるTypeStrong/tsconfigなので、割と信用していいはず。少なくともnpmにある他のtsconfig展開系CLIはどれも独自にglob展開しているので使いたくなかった。 tsconfigに設定を集める、タスクランナーに設定を持たないべきという思想のメモという意味でこの記事は残す @laco0416です。gulp.srcのglobパターンからtsconfig.jsonのfilesを更新するプラグインを作りました。 gu
Polymer 1.0とBootstrap v3を組み合わせる - Qiita
laco0416です。Polymer 1.0からBootstrapのテーマを自作Custom Elementsに適用するのが簡単になった話をします。 0.5から1.0で変わったこと 前回の記事に書いたとおり、Polymer 0.5系におけるShadow DOMの実装はW3Cの仕様に忠実に、Shadow DOMの外からのCSSの侵入を防ぐようになっていました。しかしPolymer 1.x系では実装を軽量で高速な Shady DOM に切り替えたことで、CSSのスコープは内から外への漏洩を防ぐのみとなりました(W3Cの仕様からはズレますが…)。 この変更によりCustom Elements内でグローバルのスタイルを柔軟に適用できるようになったので、Bootstrapのようなテーマと共に使うのがごくごく自然な書き方で実現できます。 PolymerとBootstrapを組み合わせる意義 WebCo
[deprecated] 今Polymerに乗っかると危ないと思う4つの理由
[2015/11/10 追記] Web Components周りはだいぶ情勢が変わったのでこの記事の内容は真に受けないでください。 (コメント欄が有益なので記事は残します) Polymerというより現状のWebComponents全体がふらふらしてるので口車に乗せられると将来痛い目を見そうだと思った 半年くらい経ってブラウザベンダー間での議論がけっこう進展したので、Web Components自体は割と安泰かと思います。 Shadow DOMの仕様を満たしてない Polymerが使っているShady DOMはCustom ElementsのStylingを容易にするためにShadow DOM仕様を満たさない状態で使われています。 https://www.polymer-project.org/1.0/docs/devguide/styling.html#background the Pol
![[deprecated] 今Polymerに乗っかると危ないと思う4つの理由](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbc1f0f7d57c0fbd7dc87d81bc07542c36a83eff/height=288;version=1;width=512/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-2887e7b4aad86fd8c25cea84846f2236.png)
AngularとPolymerが共存する世界への第一歩 - Qiita
はじめに Polymer 1.0がリリースされました。WebComponentsの普及のためにPolymerには頑張ってもらわないといけませんが、そのためには現在Webで大きなシェアを占めるフレームワーク、AngularJSとの共存が不可欠です。その共存の理想と現実、未来について個人的な考えをまとめます。 そもそも対立構造ではない 何故か一部のプログラマの中では「AngularJS vs Polymer」になっているような空気を時々感じますが、本来PolymerはAngularJSと競合する技術スタックではありません。 Polymer、というよりWebComponents(特にCustom Element)はAngularJSやその他のMVCフレームワークよりも低いレイヤーのWeb技術で、むしろ共存できなければならないものです。 Polymer+Angularのあるべき姿 Polymerが
kuromoji.js使って構文解析した - Qiita
こんにちは、らこです。先日から話題になってるJavaScriptの形態素解析器kuromoji.jsを使って、確率自由文脈文法で構文解析してみました。(注意:アルゴリズムの解説記事 ではない です) 結論 kuromoji.js遊びまくれるのでみんな使おう kuromoji.d.ts書いた 私は型大好き人間なのでTypeScript使ってkuromoji.js使いました。型定義ファイルは自分が使う部分だけエイヤっと自作しました(laco0416/kuromoji.d.ts)。 あと、プロジェクトに↑の自作型定義ファイルを読み込むのにdtsm使いました。tsd使ってたのが馬鹿らしくなるくらい便利です。作者のvvakameさんによるわかりやすい紹介はこちら 確率自由文脈文法とは ちゃんと説明すると長くなりますしうまく説明できる自信もないので、ばっさりカットします。 雰囲気つかむにはここらへんを
AngularDart v.s. AngularJS Benchmark - Qiita
AngularDartとAngularJS、処理系の違いもあってあんまり比較された記事を見ないので、比較してみました。 ベンチマーク方法 こちらのアニメーションでのベンチマークを参考に、少し改良を加えた物をAngularDart/JS両方で実装し、100個の円状のオブジェクトを色を変えつつ回転移動させるというアニメーションにかかる時間の100回の平均を取りました。ブラウザはDart 1.7に同梱のDartiumです。 ソースコードはこちらです。Dartを使う都合上、デモサーバーを用意できなかったので、もし結果を自分の目で確かめたいというかたはリポジトリをクローンして動かしてください。 結果 1位 AngularDart 718ms 2位 AngularDart(コンパイル後JS) 987ms 3位 AngularJS 990ms 考察 各所で「速い」と謳われるDartだけあって、Darti
WebStormでKarma+Mocha+power-assertのjavascriptテスト環境を作る - Qiita
npmでパッケージを揃える グローバル npm install -g grunt-cli bower プロジェクト環境 npm プロジェクトルートに以下のpackage.jsonを置いてnpm installするとパッケージが揃います { "engines": { "node": ">= 0.10.0" }, "devDependencies": { "grunt": "~0.4.2", "karma-mocha": "^0.1.3", "karma-phantomjs-launcher": "^0.1.4", "grunt-espower": "^0.6.0", "grunt-karma": "^0.8.2" } } bower bower install power-assertでpower-assertと依存パッケージがインストールされます。 Grunt設定 プロジェクトルートにGr
TypeScript with AngularJSをASP.Net MVCで使う 環境構築篇 - Qiita
タイトル通りのことをやっていきます。だいぶコアな内容ですがめちゃくちゃ開発捗る組み合わせなのでお勧めです。 参考にしたのはこのページです Using TypeScript with AngularJS and Web API 長くなるので2つに記事を分けます VisualStudio2013で進めていきます。無料のVS2013 Express for Webでも問題ないです。 VS2013のセットアップが済んだら、TypeScript for VisualStudioをインストールします TypeScript for Visual Studio 2012 and 2013 VS2013→TSforVSの順番でインストールしないとテンプレートが読み込まれないことがあるので、すでにインストールしていたら再インストールしたほうがいいかもです。 ここまで出来たらVS2013を起動して新しいプロジェ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
