題して「頼りすぎないAngular」ということで、Angularの層をなるべく薄くアプリケーションを作るにはどうすればいいかというのを考えるシリーズです。 Angular良さそうなんだけどロックインされて捨てにくそう、という人々向けに、コードのモジュール性とフレームワーク非依存性を重視した実装パターンを試行錯誤します。 第一回目はAngularのHttpClientを覚えずに、人気のnpmモジュールである axios を使ってAngularアプリでAjaxする例を紹介します。 axiosはTypeScriptの型定義を同梱していて、インターセプターなどAngularのHttpClientと同じような機能が揃っています。 Live Example 今回の完成形はこちらです。 stackblitz.com Random User Generatorからユーザー情報のJSONを取得し、画面に表示

僕がAngularアプリケーションを書くときに頻出する実装パターンを紹介する記事です。続くかどうかは未定です。 onDestroy$ ngOnDestroyメソッドが呼び出されたタイミングでemitされるEventEmitterを作っておき、RxJSのtakeUntilパイプなどで使う実装パターン。 ngOnDestroyメソッド内でunsubscribeメソッドを呼び出すよりも宣言的で意味が取りやすいし、忘れにくい。 実装例はこんな感じ。ReactiveFormsModuleを使うときにvalueChangesに引っ掛けることが多い。 import { Component, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core'; import { FormGroup, FormControl } from '@ang

Angularフレームワークのv6.0.0リリースにあわせ、Angular CLIもv1.7系からv6.0へメジャーアップデートをおこなう予定です。 この記事ではAngular CLI v1.7系で作成した開発環境からv6.0系の開発環境へマイグレーションする方法を解説します。 この記事は安定版リリース前のRCバージョンを使用しています。 前提 次のような開発環境を想定しています。 グローバルにAngular CLI v1.7系がインストールされている状態 ng new が可能な状態 Angular CLI v1.7系に依存した状態のプロジェクトが存在する状態 package.jsonの@angular/cli がv1.7系、かつ .angular-cli.json ファイルが存在する状態 移行ステップ 1. プロジェクトローカルのAngular CLIのバージョンを更新する グローバルで

lacolaco.hatenablog.com ngIvyのSeparate Compilationについてのプロポーザルを読み、実装中のRenderer3のコードを読み、ベータ版のcompilerが生成するコードを読み、毎晩毎晩考えを巡らせた結果、ngIvyについてある程度体系的な理解が得られたという錯覚があるので、ここで言語化しておきます。 単なるメモなので、何か伝えたいとかではないです。ng-sake #11 - connpass の話のネタにはなるかもしれません。 また、予め断っておきますが、この内容はAngularの内部処理を理解している上級者向けです。これはブラックボックスの内側です。 これがわからないからといってAngularが使えないわけではないですし、まったく自信を失わなくてよいです。 知らないほうが素直にライブラリを使える可能性のほうが高いです。 いままでのAoTコンパ

まずご存じない人のために紹介しますが、Angular CLIの使い方について解説する「Angular CLIがわかる本」という電子書籍を、Leanpubというプラットフォーム上で販売しています。 leanpub.com 経緯やモチベーションなどについては過去記事を読んで下さい。 lacolaco.hatenablog.com lacolaco.hatenablog.com 経過報告 販売開始が2017年10月21日なので、ざっくりと4ヶ月ちょっと経ったわけですが、いろいろと数字を公開してみようと思います。 販売数 現在、80人の方に購入いただき、うち1人が払い戻しているので、アクティブな読者は79人です。 粗利 79人の読者に購入いただき、売上は合計 $741.60 になりました。 Leanpubは最低価格と希望価格をそれぞれ設定できるのですが、仮に全員が最低価格で購入した場合は、$536

angular/separate_compilation.md at master · angular/angular · GitHub 日本語訳しながらngIvyの設計を理解する。 読んだ。要点だけまとめると以下。 Angular 6.0ではIvyという新しいコンパイラが導入される IvyはAngular 5.0 (Renderer2) における分離コンパイルの課題を解決できる Ivyコンパイラは過去の形式を"バックパッチ"してIvy化できるので、後方互換の問題はない Ivyが要求するのはコンパイル後の.jsファイルと.metadata.jsonファイルだけであり、手書きやあるいはサードパーティのツールにより生成されたコードであっても区別せず同様に扱うことができる かなりアツい。 DESIGN DOC (Ivy): Separate Compilation / コンパイルの分離 AUTH

こんにちは、lacoです。 今日は業務中にこういったものを作ってnpmに公開しました。 www.npmjs.com リポジトリはこちらです。ご覧の通りKaizen PlatformのOSSです。 github.com なにこれ Prettierというコードフォーマッターがあり、その設定をKaizen Platform内で共有するためのnpmパッケージです。 社内向けではありますが別にprivateにしておく必要もないし @kaizenplatform スコープでnpmパッケージを出したかったのでエイヤでpublicにしました。 すでにいくつかのリポジトリで使い始めていますがなかなか良い体験です。 内容としては基本的にPrettierに従いつつ、以下の点は上書きしてます 折り返し幅は120に広げる クォートはシングル 末尾カンマは常に付与 基本的にTypeScriptと併用するのでES5対応

電車とか暇な時はよくこういう意味のない空想をする。空想なので何か伝えたい事があるわけでもなく、破綻していても怒らないでほしい。 もし新しい自然言語を定義するときにGitやGitHubがあったらどうなるか、あるいは英語がGitHubで開発されていたらどういうプロセスがあっただろうか。 自分がいまから自然言語を新しく作るとしたら、まずは基本的な品詞の定義から始めると思う。ここはたぶんひとりのauthorが決めてしまう部分。 品詞ができたら、次に文型の定義に進む。文型はSV, SVOだけが最初は定義されるだろう。しかしSVだけではVの責務が大きくなるため、VをパラメタライズするSVCが提案され、おそらく認可される。（"大人になる"という動詞を具体な単独のVではなく"become an adult"という形にVを抽象化してCに具体を逃がす） 問題はSVOOだ。誰かがSVOOのProposalを提出

僕が監修した 「Angularデベロッパーズガイド」が12/15に発売となります！ Angularデベロッパーズガイド 高速にかつ堅牢に動作するフロントエンドフレームワーク 作者: 金井健一,吉田徹生,林優一,宇野陽太,奥野賢太郎,稲富駿出版社/メーカー: インプレス発売日: 2017/12/15メディア: 単行本（ソフトカバー）この商品を含むブログを見る 上のリンクはアフィリエイトではないので何万回踏まれても僕に利益はないですが、買ってくれたら印税が回ってくるので気になったら買ってください！ 監修 まだ発売前ですがこの本の監修をする上で気をつけたことを軽くまとめておこうと思います。 今回監修としてやったことは、個々の原稿のレビューと、全体の内容の設計のレビューです。 監修は初めてだったので最初は何をするんだろうという感じでしたが、ただただひたすらレビューをしました。 本のレビューするとき

mizchi.hatenablog.com エモにはエモ。 わかる だいたいわかる。そもそもSPAの必須パーツであるクライアントサイドルーティングなんてブラウザ機能の再実装の極致だし、ブラウザ上でアプリケーション作るとなるとブラウザに足りてない部分はラップして、アプリケーションプラットフォームにしたてる必要がある。 Angularはアプリケーションフレームワークとして、HTMLの限界をカバーするために独自にHTMLのパーサーを積んでいる。 テンプレート構文をサポートするためでもあるが、おそらく中途半端にブラウザの機能に頼ってデータモデルからビューへの投影にノイズが含まれるよりは、 Angularという世界に閉じた一気通貫なフローを採用して、ブラウザとのコミュニーケーションを最小限にしたかったのも大きいと思う。 というか、Native ScriptとかWeb WorkerとかSSRとか、クロ