【2016年夏】個人的に注目なフロントエンドで使えるJavaScriptフレームワークまとめ - Qiita
特徴 Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリで、MVVMアーキテクチャを採用しています。 HTML/JavaScript間の双方向データバインディングに特化していて、極力シンプルに実装できるようになっています。 シンプルに実装できることから、学習コストも低く初心者でも導入しやすいフレームワークです。 その一方で、コンポーネント間を親から子へと流れる単方向のデータフローを使用することで、データの流れがより簡潔になり大規模なアプリケーションに対して用いることも可能になります。 jp.vuejs.orgではざっくりと以下のようにまとめられています。 シンプル: いくつかHTMLを書いて、いくつかJSONを持ってきて、Vueインスタンスを作って、それでおしまいです。 リアクティブ: 式(expression)と透過依存性トラッキングによる算出プロパティ(
[日本語訳] ViewChildren and ContentChildren in Angular 2 | <output type="laco">
Original: ViewChildren and ContentChildren in Angular 2 Written by: Minko Gechev Translated at: 04/16/2016 この記事ではAngular 2の View Children と Content Children の違いについて解説します。 それぞれの子要素に対して、親コンポーネントからどのようにアクセスするのかを理解し、 そして@Componentデコレータの providers と viewProviders の2つのプロパティの違いについても述べていきます。 プリミティブの合成 まず初めに、Angular 2のコンポーネントとディレクティブの関係についておさらいしましょう。 ユーザーインタフェースを作るのに一般的なデザインはCompositeパターンです。 このデザインパターンは異なる
![[日本語訳] ViewChildren and ContentChildren in Angular 2 | <output type="laco">](https://cdn-ak-scissors.b.st-hatena.com/image/square/161e689c07a03651eb2eddae36fa4617baf54c6c/height=288;version=1;width=512/https%3A%2F%2Fblog.lacolaco.net%2Fimg%2Ficon.png)
Angular 2 — Improve Performance with trackBy
The Problem:When you need to iterate over a collection in Angular 2, you will probably use the ngFor directive that will instantiate a template once per item from the collection. If we need at some point to change the data in the collection, for example as a result of an API request, we have a problem because Angular can’t keep track of items in the collection and has no knowledge of which items h
[意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita
このポストは以下の記事を、筆者の許諾を得て意訳したものです。 JavaScript Modules: A Beginner’s Guide 何か誤りがありましたら、ご指摘いただけると幸いです。 （以下、意訳） はしがき もしあなたがJavaScriptの初心者だとしたら、以下の言葉は全く意味の分からないものかもしれません。 モジュール管理 vs モジュール読み込み Webpack vs Browserify AMD vs CommonJS 等々…。 それでもJavaScriptのモジュール周りについて、苦手意識を持たないでください。モジュールに関して理解することは、Webエンジニアにとっては必須科目なのです。 このポストでは、カンタンな解説とコードサンプルによって上記のようなバズワードを解説します。このポストがあなたにとってお役に立つものでありますように。 注：簡素化のために、このポストは
![[意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d3cb4e29ff53a96cafac0549350570fcfb250eb1/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU1JTg4JTlEJUU1JUFEJUE2JUU4JTgwJTg1JUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFSmF2YVNjcmlwdCVFMyU4MyVBMiVFMyU4MiVCOCVFMyU4MyVBNSVFMyU4MyVCQyVFMyU4MyVBQiVFOCVBQyU5QiVFNSVCQSVBNyUyMFBhcnQxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mMWMwNDVlNTE2ZjQ4MDVkNTk5NTY3ZWNkYWI3NjU5NA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2h1Y2swNTIzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYmU4Nzk0Mzg4MjBiNjRhMWVlMGFkNmI1NTI5MTg5ZA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D869925ae4c8adde2c69d417970def85c)
Angular2 Unit Testing - XHRのテスト
Angular2の実装の方法は記事をよく目にする機会が増えたので、テストについての自分が困らないように調べてみたシリーズ。 今回はXHRが関連するテスト。 （注意）Angular 2.0.0-beta.9 をベースに話しています。 E2Eテストはprotractorがそのまま利用できると思うので、ここでのテストはユニットテストの話です。 Angular2 Unit Testing 準備 基本 Mock, Spyの基本(TBD) DOMのテスト XHRのテスト Componentのテスト(TBD) Serviceのテスト(TBD) Pipeのテスト Directiveのテスト(TBD) カバレッジ XHRのテストXHR通信が関連するテストについて紹介します。 Angular1にはXHR通信を行う$httpサービスがありました。 XHR通信をテストする場合は、$httpをMockする$http
Simple Observable Unit Testing in Angular2
When you’re writing unit tests for your angular2 components, and you throw observables into the mix, things can get complicated fast. Some people go the more complicated route, faking responses from the actual service itself — but on the component level I feel this can get overly complicated. I prefer to test my services themselves, rather then writing fake responses with fake data for every compo
web-animations-jsで策定中のAPIを先取りする - Qiita
この記事はJavaScript Advent Calendar 2014の記事でもなければ、Frontrend Advent Calendar 2014の記事でもありません。 べ、べつに書こうと思ったらすでに埋まってたとかじゃないんだからねっ！ CSSアニメーションやSVGアニメーションなどを抽象的にタイムラインベースで扱うことのできる web-animations-js が便利なので使い方などを書いておきたいと思います。 公式サイト：https://www.polymer-project.org/platform/web-animations.html リポジトリ：https://github.com/web-animations/web-animations-js これは何？ web-animations-jsは、 Web Animations API をJSで実装したPolyfill
Angluar2のクイックスタートとチュートリアルを実施 - その7 - Qiita
前回の投稿Angluar2のクイックスタートとチュートリアルを実施 - その6の続きです。 前回作成したソースを使用します。 本章ではhttpを通してリモートサーバーのweb APIを呼び出し、データの取得・追加・削除する方法を学びます。 本章もかなり長いです... 本投稿の参照元(英語) HTTP - ts 本章で学ぶこと 前述のほか、以下を学びます。 インメモリweb APIの作り方(深入りはしません) Observableの使い方 尚、本章のメインテーマはAngularのHTTPライブラリの紹介ですので、インメモリwebAPIについての説明は主題ではありません。より多くインメモリwebAPIについて学習したい場合、HTTP client chapter(英語)を参照ください。インメモリwebAPIはデモンストレーションのために使用しています。何か替わりになるリモートサーバをお持ちであ
FN1701007 | Angular 2入門 06: HTTPサービスでデータを取得・保存する | HTML5 : テクニカルノート
ID: FN1701007 Technique: HTML5 / JavaScript Package: Angular 2.1 「Angular 2入門 05: サービスをつくる」(以下「Angular 2入門 05」)でつくったサンプル「Angular 2 Example - Tour of Heroines: Part 5」は、データをファイル(mock-heroines.ts)から読み込み、オブジェクトのデータを得て、書き替えたりしていました。このデータをHTTPサービスにより、リモートで扱えるようにします。 01 HTTPサービスでデータを読み込む HTTPサービスで使うHttpModuleは、アドオンの@angular/httpモジュールからimportします。コアのモジュールには含まれていないのでご注意ください。もっとも、「Angular 2入門 01」(02「HTMLドキュ
Angular2の使い方 - Qiita
Help us understand the problem. What are the problem?
Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita
export class Car { public engine: Engine; public tires: Tires; public description = 'No DI'; constructor() { this.engine = new Engine(); this.tires = new Tires(); } // Method using the engine and tires drive() { return `${this.description} car with ` + `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; } } Carはコンストラクタの中で必要なものをすべて作り出しています。何が問題なのでしょうか。問題は、Carクラスが脆弱で柔軟性がなく、テストが難しくなって
![Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0a32ddcea35ebd547d96f17bcd29391d125302a/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QkRFUEVOREVOQ1klMjBJTkpFQ1RJT04lNUQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU0NmY4NmU3MTY1YWZkZGY1MWQ3MjM2Mjk1MTVlZTE0%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwWWFtYW1vdG8wNTI1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00Y2I5NTAwMWU5YzRiYjI3MDk3NjUyNWI5YWQ2YTEzNA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D605cb634980d8308eef0a06e32fa3171)
NgModule導入について · Angular Info
どうも、らこです。RC.5のリリースがおそらく来週と迫っていますが、多くのバグ修正と共に新しい機能が追加されます。 NgModuleはこれまでのAngular2で不便だったこと、複雑だったことを一気に解決してくれる新機能です。 RCも大詰めとなったこのタイミングで導入されることに困惑するかもしれませんが、 ぜひとも対応してもらいたいと思います。 はじめに NgModuleは完全に新しく導入されたAPIであり、既存のAPIへの破壊的変更ではありません。 ただし、従来の方法は非推奨となり、stableリリースの段階では廃止される予定です。 RC.5からは移行期間に入るものと思っていてください。 NgModule NgModuleの概要についてスライドを作ってあるので、これをベースに解説します。 NgModuleの概要 NgModuleは、ディレクティブやパイプ、サービスなどをひとまとめにしたモ
Angular 2のローカル変数とexportAs
Angular 2には local variables (ローカル変数)という機能があります。 公式のチュートリアルやデベロッパーガイドを読んでいると突然登場してみなさんを惑わしているかもしれません。 しかし、この機能はAngular 2を使いこなす上でとても重要なものなので、ぜひ知っておきましょう。 ローカル変数と # シンタックス ローカル変数とは、コンポーネントのテンプレート中で定義して使用できる変数のことです。 ローカル変数には原則として、ローカル変数を定義した要素のインスタンスが代入されます。 ローカル変数の定義は # シンタックスを使います。 次の例では、 input 要素をローカル変数 i として定義し、 ボタンをクリックするときに input 要素の値をコンポーネントに渡しています。 @Component({ selector: 'my-app', template: `
Ahead-of-Time Compilation in Angular v2 - albatrosary's blog
「Angular v2は事前コンパイルすることができる」ということを聞いても何のことだろうと思ってしまう。何故このように事前コンパイルする必要があるかというと「開発したAngular2アプリケーションをより効率の良いもの」にするためです。この「効率」というものを具体的にコードを書いて見ます。サンプルコードはAngular2チュートリアルを使っています。 事前コンパイルはngcコマンドで行いますが、そのモジュールが@angular/compiler-cliから提供されます。これにtsconfig.aot.jsonというファイルを追加することと、package.jsonに"ngc": "ngc -p ./tsconfig.aot.json",というスクリプトを定義すること、そしてbootstrapを定義しているmain.tsに対してAoT(Ahead-of-Time)ファイルmain.aot.
Angular 4でcanvas要素を扱う方法 - Qiita
Angular 4の話 AngularでHTML5のcanvas要素とどうやったら連携できるのか調べてみました。TypeScript 2.2, Angular 4での書き方です。 動作サンプル 動作サンプルはPlunkerにアップしておきました。 Angular 4 Example - How to use Canvas Element 手順の解説 template内のセレクターにID値を割り当てておく。ID値の割り当て方はAngularの記法を使う。(例 : <canvas #hoge></canvas>) クラスではAfterViewInitインターフェースをimplementsキーワードで指定。これによってngAfterViewInit ()メソッド(ライフサイクル)の実装が義務付けられる。 クラスのメンバー変数にViewChildアノテーションでID値を使って関連付けを行う。 ng
Angular2のFormについて（その１） - Qiita
概要 Angular2とionic2でformを使った際に，バリデーションが少し面倒だったので，Angular2のformについて調べてみました．この記事は The Ultimate Guide to Forms in Angular2 を元にしています．元の記事は少々長いため，以下のように二部に分けて記事にします．うまく訳せていないところもあるので，元の記事はご自身で確認いただければと思います． なおionic2に関しては第２部の最後に，フォームのサンプルを書いてみたいと思います． 第１部 FormControl FormGroup FormBuilder バリデーション 第２部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第１部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見てい
Angular2 における Injector の話 - Dolpenの日記
ちょっと機会があってみんなで Angular2 + TypeScript TUTORIAL: TOUR OF HEROES を少しずつ読んで行く勉強会をやっているのだが、コンポーネントの依存性解決に関してかなり独特な世界観があったのでちょっとまとめる。 Dependency Injection (依存性の注入)って何？ 依存性とは あるクラスに特定の変数や定数、インスタンスが入ってしまっている状態。 class Car { engine:Engine = new HondaEngine(); tire:Tire = new BridgestoneTire(); } こんな例だと「この車はHONDAのエンジンとブリヂストンのタイヤに依存している」と言える。 これだと何が問題になるか Car クラスの動き（特定のメソッド）をテストすることを考える。 HONDAのエンジンとブリヂストンのタイヤを
Angular 2の*シンタックス - Qiita
どうも、らこです。先日主催したイベントで「Angular 2の*記号が何の意味があるのかわからなくて気持ち悪い」という声を聞き、意外に知られてないと思ったので一度きちんと書いておこうと思います。みなさんのAngular 2への理解の手助けになれば幸いです。 なお、本記事はAngular 2 Beta.14時点でのものです。 Angular 2におけるディレクティブ Angular 2は基本的にコンポーネント志向であり、アプリケーションはコンポーネントで組み立てます。ただし、Angular 1と同じようにHTML要素やコンポーネントを修飾するためにディレクティブを使うことができます。 次のmyDirectiveディレクティブは、付与した要素のスタイルを変更し、colorをredにします。 import {Component, Directive, ElementRef, Renderer}
必ず覚えておきたい！ Angular2でコンポーネントの子要素を参照する方法
Angular2でアプリケーションを構築する時に、 親コンポーネントから子コンポーネントを操作したいことが多くあります。 例えば、子コンポーネントの値を取得・変更したい時や、DOMを取得したい時などが挙げられます。 Angular2では、ViewChildren、 ContentChildren を使用することで、 親要素から子要素を参照することができます。 今回はViewChildren、ContentChildren を使用した、子要素の参照方法を紹介します。 ViewChildren とは コンポーネントのテンプレートの中に配置された子要素をViewChildren と呼びます。 使い方は、@ViewChildren もしくは @ViewChild デコレータを @angular/core からインポートして使用します。 @ViewChildren は複数個取得でき、@ViewChi
Angular2でdebounceを設定する
Angular2でのdebounce（処理の間引き）は、RxJSの機能を使うと簡単に設定することが出来ます。 今日はdebounceの設定方法を紹介します。 debounceって何？ プログラミングでの「間引き処理」は頻繁に使います。 間引き処理というのは、連続した処理がある場合に、100ミリ秒に一度実行したり、最後の処理の500ミリ秒後に実行するなど、実行回数を間引く（減らす）ことを指します。 今回紹介するdebounce は、「連続処理される、最後の処理の500ミリ秒後に関数を実行する」間引き処理のことを言います。実行は1度きりです。 今回は紹介しませんが、他にも throttle があります。 使い方 今回の例として、検索窓の入力での間引き処理を設定してみましょう。 例えば、検索窓に入力した文字列をサーバに送る場合を想定してみます。 動きはデモを確認してみてください。 キーボードの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
