安心して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通信を行うのに便利なサービ
その使い方はもう古いかも？AngularJS老化チェック（ディレクティブ篇） - Qiita
const app = angular.module("app", []); class MyAppCtrl { } app.component("myApp", { template: `<greeting name="'World'"></greeting>`, controller: MyAppCtrl }); class GreetingCtrl { get upperName() { return this.name.toUpperCase(); } } app.component("greeting", { bindings: { name: "=" }, template: `<h1>Hello {{$ctrl.upperName}}!</h1>`, controller: GreetingCtrl }); angular.bootstrap(document.body, [
Angular2のDIを知る - Qiita
どうも、@laco0416です。本アドベントカレンダーでは3回目の投稿です。 Angular2のDIを知る 今回の目標は「Angular2のDIを知る」ということで、まずは基本的なところからおさらいしていきます。 Angular2のDIの使い方 まずは一番単純なDIの使い方を解説します。そもそもDIとは…という話になると複雑になるので省きますが、Angular2においては「 Providerから提供されているインスタンスを特定の変数にInject（注入）する仕組み 」のことを指します。 Provider と Inject の2つの関係は重要なので頭に入れておきましょう。 Injectされる側 今回はFooServiceというクラスのインスタンスがDIで注入されるようにします。以下のコードではsay()メソッドを持つFooServiceクラスをexportしています。
Angular2のHttpモジュールを眺めてベストプラクティスを考える - Qiita
@laco0416 です。今回はHttpモジュールの機能を眺め、アプリケーション中で使う際のベストプラクティス案みたいなものを考えていこうと思います。 なお、本稿で扱うAngular2のバージョンはbeta.0です 基本的な使い方 まずはざっとAPIリファレンスを眺めます。 https://angular.io/docs/ts/latest/api/ 重要なのは以下のシンボルです。 HTTP_PROVIDERS Http Request Response HTTP_PROVIDERSはHttpクラスのインスタンスをDIで取得するために必要なプロバイダのセットです。テストでモックサーバーなどを差し込みたい場合はこのプロバイダをいじくります。 HttpはAjaxの主役、いわゆるクライアントです。このクラスのメソッドでリクエストを送り、レスポンスを受け取ります。 RequestはHttpクラスが
Angular2のChange Detectionについて - Qiita
Scope.$applyメソッドは、さきほど$watchメソッドで追加した監視対象を実際にチェックします。そして、watch式の結果が変わっていれば、先ほどの$watchメソッドの第2引数のコールバックが呼び出されます。 まとめると、はじめの例は次のような流れで入力されたデータがDOMに反映されています。 input要素に変更を加える ng-modelがinput要素のイベントを受け、$scope.textを変更し、$scope.$applyを実行する。 スコープに登録されたすべての$watch 式を評価する {{text}}の$watch式の結果が変わっている {{text}}の$watch式のコールバックが呼び出される コールバック内でDOMが更新される もう一度スコープに登録されたすべての$watch式を評価する すべての$watch式が前回と同じ結果を返すので終了する ここでポイン
Polymerプロジェクトのこれからについて - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? laco0416です。10/16にPolymerチームから今後のロードマップが発表されましたので、雑に日本語訳します。 すごく雑なまとめ Polymerプロジェクト自体のことはPolymer/projectリポジトリを作ったからそこで話すようになる めっちゃコミュニティ大きくしたいからいろいろやる APIにはあんまり変更なさそう 周辺ツールをかなり強化する Carbonエレメントが爆誕する router やるよ Polymerプロジェクトのロードマップとリポジトリの紹介 Polymer 1.0の公開とPolymer Summitの開催か
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
[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さんによるわかりやすい紹介はこちら 確率自由文脈文法とは ちゃんと説明すると長くなりますしうまく説明できる自信もないので、ばっさりカットします。 雰囲気つかむにはここらへんを
WebStormのTypeScript関連Issueを見る - Qiita
こんにちは、らこです。元々はWebStormでTypeScript書くときのTips書くとか言ってたんですが、ここ何ヶ月かDartしか書いてないんで完全にTypeScriptの書き方忘れました。なのでWebStorm絡みってのはなんとか残して、今後WebStormに実装される/されそうな機能とかを見ていこうと思います。 最新版9.0.2で変わったこと まずはWebStormの一番最近のアップデートで変わったことをまとめます Feature Request: support for TypeScript 1.3 feature 我らがvvakameさんが投げたIssueで、TypeScript1.3のサポートが実装されてます。 Indexer parameter not colorized インデクサに色がつかないバグが直ってます。 Class name after 'new' keywor
WebStormでRe:VIEWを書く (Custom File Type) - Qiita
こんにちは、らこです。今日は電子書籍用のマークアップ言語とその周辺システムである「Re:VIEW」を例に、「WebStormでサポートされていない言語を書く」というテーマで行こうと思います。 「Re:VIEW」のフォーマットや仕組み等には詳しく触れませんので、興味がある方はこちらの記事が入門にピッタリだと思います。 File Typeを作成する WebStormでサポートされていないファイルにシンタックスハイライトや入力補完を有効にする方法は２つあります。 プラグインを導入する File Typeを追加する すでにプラグインがある言語ならば1を選ぶのがよいです。例えばMarkDownやBash Script等はプラグインが存在します。 しかし今回のRe:VIEWはプラグインなんてありません。プラグインを作るのはとても大変です。そもそもJavaで書く必要があるのでWebStormでは作れずI
WebStorm9の新機能(Deep Dive into WebStorm 9's New Features) - Qiita
まだJSXは有効になっていないのでエラー表示されます。エディタの上部にJSXを使うかどうかのポップが出るので、Switchをクリックしましょう。 index.htmlにReactと接続するためのノードを追加し、app.jsのtypeをtext/jsxに変更したら完成です。 Reactのコンポーネントを使う React.createClassを使うと、独自のコンポーネントを作ることができます。作ったコンポーネントはWebStorm上で独自のタグと解釈され、定義元へのジャンプが可能になります。 Tips: Save As Live Template よく使うスニペットはLive Templateとして登録すると便利です。メニューの[Tool]>[Save As Live Template]を使うと簡単にLive Templateを追加できます。 $name$はユーザー定義の変数です。ユーザー定
AngularDart入門 まとめ - Qiita
AngularDart 1.1の入門記事まとめです。 第1回 はじめてのAngularDart AngularDartを使うための準備と、最も単純なバインディングについて http://qiita.com/laco0416/items/5cad659d6b278c4a2081 第2回 HelloWorld改 AngularDartのモデル、スコープ、コンポーネントを知る http://qiita.com/laco0416/items/d8cbc50e15b39ce9be35 第3回 Angular Components コンポーネントを使って独自elementを作る http://qiita.com/laco0416/items/1e969a20c92b9e3c0a3c 第4回 既存のHTML要素を拡張する デコレーターを使って独自attributeを作る http://qiita.com
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
Node.jsでもSpy-jsを使ってみる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? WebStorm 8とSpy-jsによるJavaScriptのトレースについてはこちらですでに解説しましたので、今度は噂のWebStorm 9の新機能、「Spy-js for Node.js」を試してみようと思います。と言ってもほとんどやることは変わらず、Webアプリケーションの方で出来たことがNode.jsでも出来るよというだけのことです。 この記事の作成にあたってはWebStorm公式ブログを参考にしました。 ※この解説で使用したWebStormは WebStorm 9 EAP WS-138.1495です。正式アップデートに向けて今
WebStorm+Spy-jsの使い方 - Qiita
WebStorm9のEAPが始まり、目玉機能の一つに「Spy-jsのNode.jsトレース」が掲げられていますが「そもそもSpy-jsって何なの？」っていう方も多いと思いますので、今更ですがWebStorm8のSpy-jsと使い方をおさらいしておこうと思います。 なお、この記事の内容はWebStorm公式ブログを参考にしました。動画もあるのでぜひご一読ください。 Spy-jsとは？ Spy-jsはJavaScriptの トレース、デバッグ、 プロファイリングの3つの機能から構成されるツールです。Spy-jsはWebStorm, PhpStorm, RubyMine, PyCharm(Professional), IntelliJ IDEA(Ultimate)にバンドルされていますが、スタンドアロンで動くものも配布されています。WebStorm8ではWebアプリケーションだけですが、WebS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularDart 入門 (0)双方向バインディングとComponent - Qiita
