AngularとZone.jsとテストの話 - Qiita
どうも @Quramy です。このエントリはAngular Advent Calendar の3日目向けに書いています。 はじめに Angularにおいて、Componentのテストコードは少し癖が強いですね。少なくとも僕はそう感じました。 次のComponentを例としてみましょう。ngModel を使って name プロパティをバインディングしただけのシンプルなComponent です。 import { Component } from '@angular/core'; @Component({ selector: 'app-my-form', template: `<input [(ngModel)]="name">` }) export class MyFormComponent { name: string = ''; } このComponent に対して、「name プロパテ
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer についてJavaScriptChromee2e puppeteer はHeadless Chrome をNode.jsで操作しやすくしたライブラリです。今日(※ 2017/8/17)一日で凄い勢いでGitHubのトレンド入りしており、TLでも話題になっていたので、早速触ってみました。 Node.jsでChromeを操作するというコンテキストにおいては、Nightmare.jsと同じレイヤに属するプロダクトですね。Nightmare.jsはElectronを介在させることで、Chromeの操作を実現していましたが、今年の5月にChromeでheadlessモードが利用可能になって以降1、headless Chromeを直接操作するライブラリが色々と出始めていますね。この系統は、chr
[Angular] AoT Compile結果を単体テスト時に利用する - Qiita
@Quramy です。 さて、先日 ng-japan というイベントに登壇し、Angularとテストについて喋らせてもらいました。 資料はこちら 実は時間があまったら追加で喋ろうかな、と思っていたコンテンツがあったのですが、結果的には完全に時間オーバーしていたため、Qiitaの方に書いておきます。 Use AOT in JIT and AOT unit testing 「AoTなのか、JiTなのかどっちだよ!」という突っ込みが聞こえてきそうですね1。 Angular v4.2系から TestBed#initTestEnvironmentにオプショナルな引数として aotSummaries というのが追加されました。 AoT Compile済みのNgFactoryを単体テストからも利用できるようになるという素敵野郎です。 今日(2017.06.19)時点では、殆どドキュメントも無いので、対応
![[Angular] AoT Compile結果を単体テスト時に利用する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b1f0a93f8c52db6837f77f0a8497e24a5d39a8db/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCQW5ndWxhciU1RCUyMEFvVCUyMENvbXBpbGUlRTclQjUlOTAlRTYlOUUlOUMlRTMlODIlOTIlRTUlOEQlOTglRTQlQkQlOTMlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTYlOTklODIlRTMlODElQUIlRTUlODglQTklRTclOTQlQTglRTMlODElOTklRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWZjNTU0ZTQyMWJiMjcwZTYzM2NjZDA0OTFjMmUzYmVl%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwUXVyYW15JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lNTlmZDcyODNlN2E4ZjljNjRjNTRkNjM5YzY4NzQyOA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D7b6fae1168c6ffa44e4534833da68086)
TypeScriptにpluginがやってくる 作ってみよう編 - Qiita
はじめに さて、前回の使ってみよう編で、TypeScript 2.3 のLanguage Service Pluginの概要や使い方について記載しました。 Language Serviceにpluginが差し込めるようになったといっても、plugin自体が数える程度しか出回っていません。 無いなら作ればいいじゃない、ということで、今日はLanguage Service Pluginの実装方法を解説していきたいと思います。前半で基本的なpluginの構造を、後半で多少実践的な内容をtipsとして取り上げます。 なお、tipsの方については自作のLanguage Service Pluginが元ネタです。 はじめてのLanguage Service Plugin Pluginのエントリポイントを作成する Language Service Pluginのエントリポイントは次のような形式になります
TypeScriptにpluginがやってくる 使ってみよう編 - Qiita
はじめに どうも、 @Quramy です。 前回の投稿から随分日が経ってしまいましたが、この投稿はある意味で前回投稿の続編的な内容になります。 今日はTypeScript 2.3から導入されるLanguage Service Extensibilityと呼ばれている機能についてまとめてみようと思います1。 どのような変更なのか TypeScript Roadmapのリンクを辿っても、https://github.com/Microsoft/TypeScript/pull/12231 に行き着くだけで、パッと見は何の機能なのかよく分かりません。 このPRの実装を眺めると、次の機能が見えてきます。 tsconfig.jsonのcompilerOptionsに"plugins"というキーが追加されている pluginsに指定した内容は、TypeScript本体からresolveされる すなわち、
Angular AoTガイド - Qiita
はじめに どうも。最近、方々で「build筋」だの「うぇぶぱっ筋」だのと発言して顰蹙を買っている @Quramy です。 さて、皆さんAngularのAhead of Time(以下AoT) Compileは利用していますか？ とても良い仕組みだと思っているのですが、まとめられた記事もまだ殆ど見かけません。 僕自身は少し前に業務案件に適用させたばかりです。折角なので記憶が鮮明なうちに投稿にしておこうと思った次第です。 このエントリは下記の3章構成でお届けします。例によって結構長いので、自分が必要としているテーマに合わせて好きな部分を読んでください。 基本編: AoTの仕組みについてのざっくり解説. 知っている人は読み飛ばしてOK 実践編: 主に僕がAoTに取り組んだ際に行ったこと、ハマったポイントについての説明 発展編: AoT環境を手に入れた後に何をすべきかについて 対象読者 このエント
TypeScript + React JSX + CSS Modules で実現するタイプセーフなWeb開発 - Qiita
はじめに 以前、React JSX with TypeScript(1.6)にて書いたことがありますが、TypeScript 1.6以降ではReact JSXを直接コンパイルできるオプションが追加されています。 一般的にクライアントサイドWebアプリ開発は以下の3言語が土台ですが、 JavaScript HTML CSS TypeScriptのお陰で、1.と2.についてはタイプセーフな世界を手に入れたことになります(HTMLの要素名や属性名まで含めて、コンパイル時のチェックがされる) JavaScript -> TypeScript HTML -> React JSX(.tsx) CSS -> ??? こうなると、3. におけるCSSについても、何とかできんものかと期待するのが人情です。 今回のエントリは、CSS ModulesをTypeScript JSX環境に統合することで、タイプセー
TypeScript 2.0のModule Resolution Enhancementsについて - Qiita
@Quramy です。先日TypeScript2.0 betaがリリースされました。 1.xからの変更点についても、@vvakame 先生が TypeScript 2.0 Beta 変更点 にしっかり纏めてくれています。すごい。 このまとめで端折られているのが、"Module resolution enhancements" というテーマです。今日はこのテーマについてメモを書いておこうと思います。 具体的には、tsconfig.jsonのcompilerOptions に baseUrl, paths, rootDirsというキーが追加されました。どのような機能なのか、それぞれ見ていきましょう。 paths, baseUrl paths は、モジュール名とそのモジュールの.tsファイルの配置場所のマッピングをtscに教えてあげるための機能です。pathsを利用する場合、baseUrlもセッ
Angular2のServer Side Renderingに触れてみる - Qiita
はじめに 今回のエントリでは、 Angular2 とServer Side Rendering(以下SSR)について書きたいと思います。 Angular2でSSRを実現するためのモジュール群は angular-universal で開発されています1。 コーディングレベルでのモジュール利用方法についても記載しますが、APIや利用可能なオプション等の詳細については日々刻々変化が予想されます。 今日時点では、Angular2の開発チームが目指しているゴールと、それを支えているアーキテクチャについて理解しておいた方が今後の変化に柔軟に対応できると考えています。今回のエントリでも、この点を踏まえて書いていくように努めます。 前半でAngular UniversalのDesign Docを交えながらSSRの仕組みに関する話を、後半でExpressと連携させてAngular Universalを動作さ
Angular1とAngular2の非同期処理の違いについて考えた - Qiita
import {Component} from 'angular2/angular2'; import {Http, HTTP_PROVIDERS, Response} from 'angular2/http'; @Component({ selector: 'ngcli-sample01-app', providers: [HTTP_PROVIDERS], templateUrl: ... }) export class MyApp { pet: IPet; constructor(private http: Http) { this.http.get('/api/v1/pets/001.json') .map((response: Response) => response.json() as IPet) .subscribe(pet => { this.pet = pet; cons
TypeScript on VisualStudio Code - Qiita
Buildで発表されたVisualStudio Codeがにわかに盛り上がっているみたいなので、自分のMacbookにインストールしてTypeScriptを試してみた. Install ここから自分のプラットフォームに合わせて選択すべし. 使ってみる .tsファイルのコード補完 適当にTypeScriptのプロジェクトを"Open"でフォルダとして開く. おお、ちゃんと DefinitelyTyped からとってきた.d.ts使って補完が有効化されている。 tsconfig.json tsconfig.jsonに関しても, キーやvalue(module の commonjs 等)が補完されます。これは便利ですねー。 この挙動については, VSCの設定ファイルを開くと, 下記の部分にぶつかる. "json.schema": [ // 中略 { "fileMatch": [ "/tsconf
TSServerの使い方メモ - Qiita
はじめに 最近, TypeScript 1.5関連のエントリが少しずつ上がってきてるけど, このエントリはその中で最も誰得？となること間違いなし! 最初に断っておくが、このエントリを読んで得するのは、これから何かしらのエディタ(EclipseとかEmacsとか秀丸とか自分の信じている神に従え)でTypeScript向けのPluginを作ろうと思っている人限定である。 「他人の作ったpluginなんて使う気にすらならないぜ！自分で実装するぜ！」って奴は, こんなもん読まなくても自分で何とかしそうな気がプンプンする. さて, 先日 別のエントリにて記載したが, TypeScript v1.5.0 alpha版公開に合わせて, TSServerを利用したVim plugin tsuquyomiを作成&公開した. このエントリでは, tsuquyomiを作成する上で身についたTSServerの基礎
TypeScriptのTSServerとVim plugin - Qiita
TypeScript 1.5.0-alpha TypeScript 1.5.0-alphaがリリースされましたね! TypeScriptの1.5では, ES6対応や, Annotation(Decorator)等の言語の対応だけでなく, TSServerというエディタ向けツールが含まれています. TSServerは, コンパイルやリファクタリングなど、エディタに必要な機能を提供するServerです. 標準入出力を介して, エディタに様々な情報を提供してくれる優れものです. MicroSoftが提供しているSublime TextのPluginも, このTSServerを使って実装されています. TSServerの使い方等については, 別途エントリを起こしたので, よければ参考にしてください. とはいえ、僕はVim使い。残念なことに, MicroSoftはVim向けのPluginまでは作って
TypeScriptのDecoratorメモ - Qiita
※ このエントリは策定中の仕様やfix前の実装に従って書いています(2015.04.07). 仕様の状況によっては, 記載内容に不整合が出る可能性があります. Decoratorの基本 TypeScriptの1.5.0-alphaから Decoratorが利用可能になった. Decoratorは @Component のように記述して付加情報をclassやmethod等に付与するための仕組みで, ES7の仕様として検討されている(2015.04.07時点でstage1). TypeScript 1.5.0-alphaでは, Decoratorを付与できる箇所は下記である. class 宣言部 classのプロパティ宣言部 classのメソッド宣言部 メソッドの引数 @someDecorator class MyClass { @someDecorator message: string;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular + Storybook でコンポーネントガイドを作ろう - Qiita