余白

https://blog.lacolaco.net/ に移転しました

Angular

ng-sake #16 を開催しました

10/25 に開催した ng-sake #16の運営レポートです。 ng-sake.connpass.com 今回も前回と同様、ステッカーとマグネットを用意しました。 受付準備完了 #ng_sake pic.twitter.com/nCM7gNDUhb— Suguru Inatomi / lacolaco (@laco2net) October 25, 2019 会場 今…

ng-sake #15 を開催しました

8/23 に開催した ng-sake #15の運営レポートです。 ng-sake.connpass.com ttskchさんが名古屋からLTしにきてくれたり、aquila1o1さんが福岡からお土産を持ってきてくれたりとバラエティ豊かな感じになりました。 今回は前回作ったステッカーの他に、マグネッ…

AngularコンポーネントにおけるSingle State Streamパターンの紹介

Notionに書きました (まだはてなブログでNotionのOGP展開対応されてない...) https://www.notion.so/lacolaco/Angular-Single-State-Stream-2f1bd9fb0fc348dfba78d068134fce9b

ng-sake #14 を開催しました

6/27 に開催した ng-sake #14の運営レポートです。 ng-sake.connpass.com 会場 今回は初の試みとして、スペースマーケット で借りた浅草のカフェレストラン well 浅草 を会場にしました。 well.restaurant 開催中の様子はこんな感じです。 非常にいい雰囲気…

AngularにおけるAtomic DesignとNgModule

Notionに書きました(未だにはてなブログにNotionのURLを貼っても正しく展開できない...Twitterカードは対応してるんだけど) https://www.notion.so/lacolaco/Angular-Atomic-Design-NgModule-52b1c99892e44e0ba032a1da7fbd7f50

登壇ログ: 「Upgrade Angular to v8.0」@ Classi Angular Night

Classi Angular Night #3で 「Upgrade Angular to v8.0」というタイトルで発表しました classi-angular-night.connpass.com Agenda How to upgrade Angularのアップデートは https://update.angular.io を見ましょう New Deprecations 非推奨に関するガイド…

DOMのXSSを防ぐTrusted TypesとAngularのセキュリティ機構

Notionに書きました。 https://www.notion.so/lacolaco/DOM-XSS-Trusted-Types-Angular-Security-Context-8e9535e4effb445c96a54eb68c56dc47 ちなみに余談ですが、Notionの公開ページはどこかから参照されるまではクローラが来ないので、SEOが強めの場所から…

Angular ElementsによるAngularJSの段階的アップグレード戦略

Notionに書きました。 https://www.notion.so/Angular-Elements-Angular-542cfebc09d7456791a66d7af8bbce5e

システムの学習曲線とAngularアプリケーションの設計

Notionに書きました。 https://www.notion.so/lacolaco/Angular-6a4169028d37411a895040001af0938d

NgRx v7.4で導入されるAction Creatorの使い方

この記事では NgRx v7.4で導入される Action Creator 機能と、それを使った実装パターンを紹介します。 Action Creatorはまだ ngrx.io のドキュメンテーションに含まれていませんが、将来的に追加された後はそちらを参照するようにしてください。 アクション…

RxJSによるWeb Workerの抽象化 2つのアプローチ

この記事では、RxJS を使ったWeb Workerの抽象化を試みます。 なお、記事中で Web WorkerあるいはWorkerと言ったときに指すのは new Worker() で作成する Dedicated Workerのみで、Shared WorkerやService Workerなどは対象外です。 なぜWeb Worker? Web Wo…

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

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

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

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

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

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

AngularにおけるListComponent/ListItemComponentの設計

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

技術顧問デビューしました

すでにTwitterではお知らせしましたが、技術アドバイザーとしてClassiさんをお手伝いすることになりました! t.co .@laco2net さんにClassiのフロントエンドの技術アドバイザーとして関わっていただきます!楽しみ〜!https://t.co/pGys8hp3ew— ささたつ(Tat…

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

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

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

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

ng-sake #13 忘年会を開催しました!

こんにちは、lacoです。 12/13にng-sake #13 を開催しました。参加いただいたみなさんありがとうございました! 会場貸してしてくれてる株式会社トレタさんにもいつも感謝です。 ng-sake.connpass.com 開催直前のconnpass上の参加者は30人で、たぶん過去最多…

Google Developers Expert (Angular) になりました

if (document.documentElement.getAttribute('data-page') === 'entry') { const targetUrl = 'https://blog.lacolaco.net/posts/angular-gde/'; const head = document.getElementsByTagName('head')[0]; const meta = document.createElement('meta'); met…

Angular CDK drag-and-drop の紹介

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

ng-sake #12 を開催しましたレポート

8月6日にng-sake #12を開催しました! ng-sake.connpass.com 数字 今回の出席者数は 12人 + スタッフ 3人 という構成でした。 参加費は¥1,500、今回もKyashによる集金をオプションで用意しましたが、6人がKyashで送金してもらえました。ご協力ありがとうござ…

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

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

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…

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…

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

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