安心して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
こんにちは、らこです。AngularJSのバージョン1.5.0がリリースされましたね！ コードネームは ennoblement-facilitation、ざっくり訳すなら「高尚化促進」でしょうか。コンポーネント志向の「高尚」なアプリケーション設計への移行をサポートするバージョンだということでしょう。 1.5.0ではcomponentの追加をメインに、Angular2へのスムーズな移行を行うための足がかりとなるアップデートです。いい機会なので、 今の自分のAngularJSの使い方がどれくらい古いのか をチェックし、どのようにモダンにしていけばいいのかを知っておきましょう。 ちなみに、1.4までに関しては AngularJSモダンプラクティス - Qiita を参考にするとよいでしょう。 このモダンプラクティスに従ったコードになっていればcomponent()対応はあっという間のはずです。
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(); }
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
こんにちは、@laco0416です。本稿はAngular2 Advent Calendarに向けた記事として執筆しています。 なお、本稿の執筆時点でのバージョンはAngular2 alpha-48です。本稿にはサンプルコードがないので影響がないのですが、alpha-48にはいろいろと致命的なバグがあるので、実際にいろいろ試すのであれば49で修正されるまでは47を使ったほうが良さそうです。 はじめに 本稿ではAngular2がデータバインディングの変更検知に利用している Change Detection という内部機構について解説しますが、その前にAngularJS (1.x系)時代の変更検知と、Angular2が乗り越えなければならない課題についておさらいすることとしましょう。 なお、こちらの「AngularJS の $watch, $digest, $apply について書く」というブロ
Polymerプロジェクトのこれからについて - Qiita
laco0416です。10/16にPolymerチームから今後のロードマップが発表されましたので、雑に日本語訳します。 すごく雑なまとめ Polymerプロジェクト自体のことはPolymer/projectリポジトリを作ったからそこで話すようになる めっちゃコミュニティ大きくしたいからいろいろやる APIにはあんまり変更なさそう 周辺ツールをかなり強化する Carbonエレメントが爆誕する router やるよ Polymerプロジェクトのロードマップとリポジトリの紹介 Polymer 1.0の公開とPolymer Summitの開催から、Polymerの採用事例は指数関数的に増えています。しかし、我々はPolymerプロジェクトの向かう先について十分に盛り上げることができていませんでした。 我々はチームのゴールとロードマップについて熱心にコミュニケーションし、そして今日新たなリポジトリ
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
先日9.0.0にアップデートされたWebStormの新機能についてJetBrainsの中の人が生放送で解説するウェビナー、「Deep Dive into WebStorm 9's New Features」が、10月30日17:00-18:00(日本時間10月31日2:00-3:00)に開催されました。その中で紹介された新機能・Tipsと質疑応答の中から興味深いものをまとめます。 ウェビナーの様子は近日中に動画がアップされます。 [追記] 公式ブログに動画と記事が投稿されました http://blog.jetbrains.com/webstorm/2014/10/webinar-recording-a-deep-dive-into-webstorm-9s-new-features/ React and JSX 最初に紹介された新機能はReactとJSXについてです。 ReactはUI構築の
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
AngularDart 入門 (0)双方向バインディングとComponent - Qiita
name: angular_sample dependencies: browser: any angular: ">=1.1.0 <1.2.0" web_components: any transformers: - angular [追記] 1.0→1.1の変更も大きかったので安全のために1.1固定したほうがいいと思います。 pubspecを書いたら忘れずに>pub getしてください。 Step 1: エントリポイントの作成 Webページ上でAngularDartを動かすために、エントリポイントを作成します。AngularJSと違い、エントリポイントで明示的にアプリケーションを実行しなければAngularDartは動きません。 まずはHTMLファイルから。web/index.htmlはこのように書きます。 <!DOCTYPE html> <html ng-app> <head lan
Node.jsでもSpy-jsを使ってみる - Qiita
WebStorm 8とSpy-jsによるJavaScriptのトレースについてはこちらですでに解説しましたので、今度は噂のWebStorm 9の新機能、「Spy-js for Node.js」を試してみようと思います。と言ってもほとんどやることは変わらず、Webアプリケーションの方で出来たことがNode.jsでも出来るよというだけのことです。 この記事の作成にあたってはWebStorm公式ブログを参考にしました。 ※この解説で使用したWebStormは WebStorm 9 EAP WS-138.1495です。正式アップデートに向けて今後変更される可能性もあるので注意してください。また、WebStorm 9 EAPの使用も自己責任でお願いします。 サンプルプロジェクトを作る 今度はNode.jsのアプリケーションを作るので、簡単に済ませるために新規プロジェクトを「Node.js Expre
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ページを開く
