はじめに Webサービスを開発するにあたり、JavaScriptのフレームワークは今や欠かせないものになりました。 多種多用なフレームワークがある中で、今回は主にwebサービスのフロントエンドで用いられるJavaScriptフレームワークをまとめました。 それぞれのJavaScriptフレームワークの詳しい使い方については、詳細に説明されているサイトが沢山あるので本記事では省略致します。 こんなフレームワークもあるんだなーと軽い感じで眺めていただけると幸いです！ 特徴 Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリで、MVVMアーキテクチャを採用しています。 HTML/JavaScript間の双方向データバインディングに特化していて、極力シンプルに実装できるようになっています。 シンプルに実装できることから、学習コストも低く初心者でも導入しやすいフレーム

2023 2023-07-27 読んだ本 2023-Q2 #日記 #読書 2023-07-19 発表スライド『New in Angular』 #io23jp #presentation #Angular 2023-06-25 PHPカンファレンス福岡遠征を終えて #phpconfuk #日記 2023-06-24 発表スライド『DOMのテストがどんどん書きたくなるTesting Libraryの世界への招待』 #presentation #testing #Testing Library 2023-06-23 Notion AIがslugを作ってくれるらしい #雑記 #Notion 2023-06-22 発表スライド『Signalsとはいったい何なのか』 #presentation #Angular #Signals 2023-06-08 Signals 雑記 (2023-06-21) #

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 Modules: A Beginner’s Guide 何か誤りがありましたら、ご指摘いただけると幸いです。 （以下、意訳） はしがき もしあなたがJavaScriptの初心者だとしたら、以下の言葉は全く意味の分からないものかもしれません。 モジュール管理 vs モジュール読み込み Webpack vs Browserify AMD vs CommonJS 等々…。 それでもJavaScriptのモジュール周りについて、苦手意識を持たないでください。モジュールに関して理解することは、Webエンジニアにとっては必須科目なのです。 このポストでは、カンタンな解説とコードサンプルによって上記のようなバズワードを解説します。このポストがあなたにとってお役に立つものでありますように。 注：簡素化のために、このポストは

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 通信をテストする場

この記事は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のクイックスタートとチュートリアルを実施 - その6の続きです。 前回作成したソースを使用します。 本章ではhttpを通してリモートサーバーのweb APIを呼び出し、データの取得・追加・削除する方法を学びます。 本章もかなり長いです... 本投稿の参照元(英語) HTTP - ts 本章で学ぶこと 前述のほか、以下を学びます。 インメモリweb APIの作り方(深入りはしません) Observableの使い方 尚、本章のメインテーマはAngularのHTTPライブラリの紹介ですので、インメモリwebAPIについての説明は主題ではありません。より多くインメモリwebAPIについて学習したい場合、HTTP client chapter(英語)を参照ください。インメモリwebAPIはデモンストレーションのために使用しています。何か替わりになるリモートサーバをお持ちであ

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ドキュ

記事の内容をrc.4に対応しました 動作サンプルについてはまだBeta版のままなのでご了承ください (2016/08/04) Angular2(rc.4)の使い方について簡潔にまとめてみました 細かい部分は省くので、公式サイトやQiita内に素晴らしい記事があるので そちらを参考にしてください インストール npm install @angular/common@2.0.0-rc.4 @angular/compiler@2.0.0-rc.4 @angular/core@2.0.0-rc.4 @angular/platform-browser@2.0.0-rc.4 @angular/platform-browser-dynamic@2.0.0-rc.4

トピック Angular2 CORE DOCUMENTATIONのGUIDEの翻訳です。 DOCUMENTATION OVERVIEW - ドキュメント概要 - ARCHITECTURE OVERVIEW - 構文概要 - DISPLAYING DATA - データ表示 - USER INPUT - ユーザー入力 - FORMS - フォーム - DEPENDENCY INJECTION - 依存性注入 - STYLE GUIDE -　スタイルガイド - 注意1）ここに掲載されていない項目は、Angular2 CORE DOCUMENTATIONのGUIDEを直接参照してください。 注意2）2016年11月22日時点の翻訳です。翻訳者はTOEICで700点くらいの英語力なので、英訳が間違っている可能性があります。しかもかなり意訳している箇所もあります。もし意訳を通り越して、誤訳になっている

どうも、らこです。RC.5のリリースがおそらく来週と迫っていますが、多くのバグ修正と共に新しい機能が追加されます。 NgModuleはこれまでのAngular2で不便だったこと、複雑だったことを一気に解決してくれる新機能です。 RCも大詰めとなったこのタイミングで導入されることに困惑するかもしれませんが、 ぜひとも対応してもらいたいと思います。 はじめに NgModuleは完全に新しく導入されたAPIであり、既存のAPIへの破壊的変更ではありません。 ただし、従来の方法は非推奨となり、stableリリースの段階では廃止される予定です。 RC.5からは移行期間に入るものと思っていてください。 NgModule NgModuleの概要についてスライドを作ってあるので、これをベースに解説します。 NgModuleの概要 NgModuleは、ディレクティブやパイプ、サービスなどをひとまとめにしたモ

「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の話 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とionic2でformを使った際に，バリデーションが少し面倒だったので，Angular2のformについて調べてみました．この記事は The Ultimate Guide to Forms in Angular2 を元にしています．元の記事は少々長いため，以下のように二部に分けて記事にします．うまく訳せていないところもあるので，元の記事はご自身で確認いただければと思います． なおionic2に関しては第２部の最後に，フォームのサンプルを書いてみたいと思います． 第１部 FormControl FormGroup FormBuilder バリデーション 第２部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第１部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見てい

ちょっと機会があってみんなで Angular2 + TypeScript TUTORIAL: TOUR OF HEROES を少しずつ読んで行く勉強会をやっているのだが、コンポーネントの依存性解決に関してかなり独特な世界観があったのでちょっとまとめる。 Dependency Injection (依存性の注入)って何？ 依存性とは あるクラスに特定の変数や定数、インスタンスが入ってしまっている状態。 class Car { engine:Engine = new HondaEngine(); tire:Tire = new BridgestoneTire(); } こんな例だと「この車はHONDAのエンジンとブリヂストンのタイヤに依存している」と言える。 これだと何が問題になるか Car クラスの動き（特定のメソッド）をテストすることを考える。 HONDAのエンジンとブリヂストンのタイヤを

どうも、らこです。先日主催したイベントで「Angular 2の*記号が何の意味があるのかわからなくて気持ち悪い」という声を聞き、意外に知られてないと思ったので一度きちんと書いておこうと思います。みなさんのAngular 2への理解の手助けになれば幸いです。 なお、本記事はAngular 2 Beta.14時点でのものです。 Angular 2におけるディレクティブ Angular 2は基本的にコンポーネント志向であり、アプリケーションはコンポーネントで組み立てます。ただし、Angular 1と同じようにHTML要素やコンポーネントを修飾するためにディレクティブを使うことができます。 次のmyDirectiveディレクティブは、付与した要素のスタイルを変更し、colorをredにします。 import {Component, Directive, ElementRef, Renderer}

Angular2でアプリケーションを構築する時に、 親コンポーネントから子コンポーネントを操作したいことが多くあります。 例えば、子コンポーネントの値を取得・変更したい時や、DOMを取得したい時などが挙げられます。 Angular2では、ViewChildren、 ContentChildren を使用することで、 親要素から子要素を参照することができます。 今回はViewChildren、ContentChildren を使用した、子要素の参照方法を紹介します。 ViewChildren とは コンポーネントのテンプレートの中に配置された子要素をViewChildren と呼びます。 使い方は、@ViewChildren もしくは @ViewChild デコレータを @angular/core からインポートして使用します。 @ViewChildren は複数個取得でき、@ViewChi

Angular2でのdebounce（処理の間引き）は、RxJSの機能を使うと簡単に設定することが出来ます。 今日はdebounceの設定方法を紹介します。 debounceって何？ プログラミングでの「間引き処理」は頻繁に使います。 間引き処理というのは、連続した処理がある場合に、100ミリ秒に一度実行したり、最後の処理の500ミリ秒後に実行するなど、実行回数を間引く（減らす）ことを指します。 今回紹介するdebounce は、「連続処理される、最後の処理の500ミリ秒後に関数を実行する」間引き処理のことを言います。実行は1度きりです。 今回は紹介しませんが、他にも throttle があります。 使い方 今回の例として、検索窓の入力での間引き処理を設定してみましょう。 例えば、検索窓に入力した文字列をサーバに送る場合を想定してみます。 動きはデモを確認してみてください。 キーボードの