lacolaco

Google Developers Expert for Angular / 技術的なことや技術的じゃないことを書きます

プログラミング

良い設計と平衡

免責事項: 思考過程のメモです 「アプリケーションが動いている状態はある種の平衡状態である」簡潔に言語化できてなかったけどまさにそれを言いたかったんです。ありがとうございますhttps://t.co/A5nZzYu47y— lacolaco / Suguru Inatomi (@laco2net) March…

Angularで巨大なライブラリを動的に読み込む

オリジナルはこちら medium.com 基本的にコードサンプルなどはオリジナルを参照してください。この記事では込み入った事情の部分だけを日本語で補足します。 tsconfig.jsonの準備 tsconfig.jsonの module 設定は、TypeScript内で記述したモジュールのimport/…

README.mdに動的コンテンツを埋め込む、あるいはImage via Functionというアプローチ

突然ですが、 README.md に動的なコンテンツを埋め込みたいと思ったことはないですか?僕はあります。 具体的には、リポジトリのコントリビューターをREADME.mdに埋め込みたいという願望がありました。 つまりこういうことです。 しかし毎回CIなどでREADME.m…

Angularの学習コストは本当に高いのか?

有言実行しなきゃね... ちょっと来月の頭くらいまでに、「本当にAngularは学習コストが高いのか?」っていう内容のブログを書くので、書いてなかったら怒ってください— Suguru Inatomi / lacolaco (@laco2net) 2019年1月24日 この記事では、「学習コストが高…

AngularにおけるListComponent/ListItemComponentの設計

Notionに書いた。 www.notion.so 余談。Notionのほうが書きやすいし読みやすいんだけど、ブログとしての体裁(シェアしやすいとかそういう)が無いのでどうしようか悩む。 Notionで書いてリンクだけブログに貼っていくのどう思います?

次世代Webカンファレンス振り返りと、話さなかったネタ集

次世代Webカンファレンス、お疲れ様でした! nextwebconf.connpass.com ありがたいことに2015年に続き、フロントエンドのセッションで登壇させてもらいました。 楽しかったですが、やはり80分のなかで話せることは限られますね... 次世代らしい話を求める期…

Angular Elementsの野望と、Angularに静的サイト用フレームワークがない理由

「Angularって静的なWebサイトを吐き出せる技術とかないんですか」という質問を受けることがたびたびあります。 例えばGatsbyやGridsome、Next.js、Nuxt.jsなどのようなものですね。 サーバーサイドレンダリングの仕組みは自体はすでにAngular Universalがあ…

Google Compute Engine上にMastodonインスタンスを立てた記録

表題のとおり、GCE上にMastodonのインスタンスを立てたけど、なんだかんだ試行錯誤で4日くらいかかったので自分のために記録を残す。 立てたインスタンスは https://activitypub.lacolaco.net。ひとり用に作ったので新規ユーザーは作成できない。 アカウント…

Angular CDK drag-and-drop の紹介

こんにちは。 この記事ではAngular CDKの次期アップデートで提供される、 drag-and-drop 機能を紹介します。 執筆時点ではまだnpmパッケージとして公開されていないので、一般に利用できるまでにはもうしばらくかかりますが、 もし早く使いたい方は、次のコ…

Angularコンポーネントのスタイルにemotionを使う

追記 型安全にCSSのオブジェクトを書きたいというだけならNgStyleとcsstypeを使うだけでもよさそうだ。 github.com emotionを使うことによる利点は、 CSSクラスにシリアライズされるので、テンプレート中で評価対象が文字列となり、Change Detectionのパフォ…

GraphQLとRESTfulについて今日考えてたこと Backend for Usecase/Resourceについて

DISCLAIMER: これは本当にただのメモ書きで、これがベストプラクティスだとかいう話ではないので、同じようなことを考えてる人いたら今度議論しましょうよ、って程度の話の種。 GraphQLを使うべきスポット、RESTfulが好ましいスポットについて今日ぼんやり考…

Angular CDKのPortalを使ったローディングラッパーの実装

今回はAngular CDK(Component Dev Kit)の Portal 機能を使って、ローディングラッパーコンポーネントを実装する例の紹介です。 Angularの基本的な書き方はわかっている前提の内容になります。 ローディングラッパーとは次のようなテンプレートで、ローディン…

AngularにおけるstrictPropertyInitializationのベストプラクティス

AngularコアチームのStephen Fluin氏が、こんなブログ記事をあげている。 https://fluin.io/blog/property-has-no-initializer-and-is-not-definitely-assigned TypeScript 2.7から導入された、クラスプロパティの初期化をチェックするstrictPropertyInitial…

ECMAScriptのimport/exportについてのメモ

js-primerというJavaScriptの本を書く上でES2015のimport/export構文の仕様について気になったところがあって調べたメモ github.com import - JavaScript | MDN https://t.co/qF0RdE0PfXデフォルトエクスポートをdefaultって名前付きエクスポートのように参…

Angular v6.1で導入されるRouter Scrollerの紹介

こんにちは、lacoです。 Angularの次のマイナーアップデートで、久しぶりに新機能らしい新機能が増えます。 その名もRouter Scrollerです。 長くAngularを使っている人には涙が出るほど嬉しい待望の機能です。 この記事ではRouter Scrollerの紹介と、来週のb…

FlutterのBLoCパターンをAngularで理解する

この記事ではAngularDart/Flutterの文脈で新しいコンポーネント設計パターンとして広まりつつあるBLoCパターンを、Angularの語彙で理解し、実装する方法を紹介する。 BLoCパターンとは BLoCとは、Business Logic Componentの略である。 BLoCを使ったアプリケ…

持続可能なAngularアプリケーション開発のために大事なこと

Webにかぎらず、アプリケーションというのは作って終わりではなく、その後も継続して改修・改善されていくケースが多い。受託で開発して納品して終わりというケースでも、納品した先にメンテナンスする人がいる。 この記事では、Angularアプリケーションの開…

Angular v2からv6までの変化をまとめてみた

Angular 2から6までの主要な進化をまとめた記事を読みたい。— Masahiko Sakakibara (@rdlabo) 2018年4月20日 逆にIonicの変遷が知りたいですね 最近Stencilも出てきたしその辺の絡みとか俯瞰的に見てみたいです— lacolaco (@laco2net) 2018年4月20日 rdlabo…

Custom ElementsとEventTargetの話

Shadow DOMのHayato Itoさんと、Custom ElementsとEventTargetについてちょっと議論できた話。(ありがとうございました!) 先日、Web Components Cafeで登壇しました。 slides.com 最近自分の中でCustom Elementsの盛り上がりが強くて、 単純なPresentatio…

なぜAngularJSに$httpが必要だったのか(あるいはAngular HttpClientの価値について)

lacolaco.hatenablog.com 「レールに乗っておいたほうがいいんじゃないの?」という声もあるとおもうので、 そもそもなぜAngularはHTTPクライアント機能をスタックとして提供しているのか、というところについて。 AngularJSには$httpが必要だった 遡ってAng…

Angularとaxiosを使ったHTTP通信

題して「頼りすぎないAngular」ということで、Angularの層をなるべく薄くアプリケーションを作るにはどうすればいいかというのを考えるシリーズです。 Angular良さそうなんだけどロックインされて捨てにくそう、という人々向けに、コードのモジュール性とフ…

はてなブログにDouble OのAsk Meボタンを設置する

Double O というサービスがWeb ComponentsやPWAなどアグレッシブにWeb技術を取り入れていて応援したい気持ちなので、まずはユーザーとして使っていこうと思います。 ooapp.co 「よくある質問」がDouble Oの公式アカウントとして運用されてるの面白いですね h…

Angular 頻出実装パターン その1

僕がAngularアプリケーションを書くときに頻出する実装パターンを紹介する記事です。続くかどうかは未定です。 onDestroy$ ngOnDestroyメソッドが呼び出されたタイミングでemitされるEventEmitterを作っておき、RxJSのtakeUntilパイプなどで使う実装パターン…

Angular CLI v1.7からv6.0へのマイグレーションについて (for v6.0.0-rc.2)

Angularフレームワークのv6.0.0リリースにあわせ、Angular CLIもv1.7系からv6.0へメジャーアップデートをおこなう予定です。 この記事ではAngular CLI v1.7系で作成した開発環境からv6.0系の開発環境へマイグレーションする方法を解説します。 この記事は安…

GraphQLのスキーマについて今日考えてたこと

今日はGraphQLのクエリのスキーマを考えてた いろんなデータが関連していて、原理的にはどんな入れ子の順番でも解決はできるんだけど、基本的にはデータの寿命が短い順に入れ子になっていくのが良さそうな気がする。 user { organizations {} } はユーザーの…

MANABIYA.techでAngularとWebについて発表したので反省する

3/24に、MANABIYAというカンファレンスイベントで登壇してきました。 manabiya.tech 当日のスライドはこちら。発表タイトルは「The Angular World」で、Angularの現在と未来、あとWebの世界との関わりについて話そうと思ってました。 内容はだいたいスライド…

ngIvyメモ

lacolaco.hatenablog.com ngIvyのSeparate Compilationについてのプロポーザルを読み、実装中のRenderer3のコードを読み、ベータ版のcompilerが生成するコードを読み、毎晩毎晩考えを巡らせた結果、ngIvyについてある程度体系的な理解が得られたという錯覚が…

DESIGN DOC (Ivy): Separate Compilationを読む

angular/separate_compilation.md at master · angular/angular · GitHub 日本語訳しながらngIvyの設計を理解する。 読んだ。要点だけまとめると以下。 Angular 6.0ではIvyという新しいコンパイラが導入される IvyはAngular 5.0 (Renderer2) における分離コ…

Angular v6で導入されるTree-Shakable DIの紹介

追記: 最新では scope が providedIn に変わってます。 github.com Angular v6では、これまでのDependency Injectionの仕組みをTree-Shaking可能にするためのオプション機能を追加します。 概要を説明するために簡単なスライドを作りました。 現状の問題 現…

Angular commits summary 2018-02-28

github.com Angular CLIが依存するwebpackのバージョンを4系にアップデート。 github.com @angular/common が提供するパイプで使われている関数を公開APIとしてエクスポートする変更。 NumberPipeやDatePipeの変換処理をテンプレート外で使えるようになる。v…