「どうしてAngularは流行らないのか」と言われて思うこと | Marginalia
最近に限らず、ここ数年ずっと目にするし、聞かれることもあるこの話について、いくつかの思うこと、ぼやきを書いておく。あとで参照できて便利なので。 1. あなたが使い始めれば少なくとも昨日よりは広まりますよ好きなら使えばいいと思うので僕には気持ちがわからないのだが、好き・気になるけど流行ってないから使わないという心理があるらしい。企業での判断ならわかるが、個人でそれはまったくわからん。仮にそれがマジョリティだとしたら、使われなければ流行らないのに流行らないと使われない、デッドロックで詰みです。 あなたが使ってみてそのことを発信すれば、少なくとも昨日より世界で一人分は使用者が増えます。その積み重ねでしか普及しません。ですので、流行って欲しいと思うならまず自分から使って周りに広めてください。 2. そもそも「流行っている」とは？僕が思うに、「流行っている」ということと「広く普及している」ということ
実は進化してる！Angularを使う理由をお話します｜Hubble Inc.
開発者のみなさん、普段どんな言語やフレームワークを使って開発していますか？Hubbleのフロントエンドチームでは、Angularを使って開発を行っています。 正直、使っている人口が少なく、古いと思われがちのAngular。なぜこのフレームワークをHubbleでは使っているのか…。このnoteではその謎を解明していきます！ 登場人物 白木：Hubble人事。なぜAngularを使っているのか謎に思っていた。 齋藤：Hubble創業時から開発をリードするエンジニア。Angularが好き。 Angularが好きなのには理由があった白木：Angularって、正直使っている人口はとても少ないですよね。エージェントからも「新規の応募者がかなり少なくて紹介が難しい…。」と共有を受けています。そんな中、なぜHubbleでは数あるフレームワークから、あえてAngularを選んだのでしょうか？ 齋藤：一番の理
Angular: テンプレート駆動フォーム再考
Angular のフォームAPIにはテンプレート駆動フォームとリアクティブフォームの2種類があり、リリース当初からその使い分けは常に議論の種になってきた。Angular v14から導入された Typed Forms が現状はリアクティブフォームだけに適用されることもあり、歴史的にはリアクティブフォームのほうが好まれてきたように思う。だがその評価がなんとなくの惰性によるものになっているような感覚がある。ここでは、Angular v16 を前提にしてあらためてテンプレート駆動フォームを評価してみたい。 リアクティブフォームの利点だと考えられているもの 公式ドキュメント では、2つのアプローチを使い分ける理由が次のようにまとめられている。 Reactive forms provide direct, explicit access to the underlying forms object m
Angular Elementsを使ってみた - Qiita
この記事は Angular Advent Calendar 2020 の 16 日目の記事です。 はじめに 最近、レガシーなフロントエンド環境を採用したプロジェクトで開発をする機会があり、これまで制作したAngularコンポーネントを再利用するため、Angular Elementsを使用してみました。 Angular Elementsの導入はとても簡単でうまくいったのですが、その過程でWeb ComponentsにおけるコンポーネントやCSSの設計に悩まされることが多かったので、それについて調べたり考えたことをまとめてみようと思います。 Angular Elements とは Angular Elementsは、AngularのコンポーネントをCustom Elementsに変換する機能です。 Custom Elementsに変換されたコンポーネントは独自のHTML要素として定義され、フレ
Angular: NgIfを合成したフィーチャートグルディレクティブ
Angularの組み込みディレクティブ NgIf を使って、ある条件を満たすときにだけビューの一部分を描画するケースは多い。たとえば、特定の権限を持つユーザーにだけ表示されるビューを実装することがある。 NgIf を直接使う場合には、その条件ロジックをテンプレートあるいはコンポーネントで持つことになる。一箇所だけならよいが、同じようなロジックを多用するならそのロジックを含めて再利用可能にしたい。 今回はそのようなフィーチャートグルのユースケースをAngular v15で導入された hostDirectives 機能を使って実装してみよう。 サンプルはStackBlitzに用意した。以下、要点をかいつまんで解説するが、あくまでも概念実証的なサンプルコードなのでくれぐれもこのままプロダクションコードなどに転記しないように。 次のコードで、AuthDirective に NgIf ディレクティブ
[Angular] ブラウザを閉じる・リロードのタイミングで処理を実行する @HostListener
Angularアプリを終了するときに処理を実行したい AngularにはngOnDestroyというライフサイクルメソッドがありますが、これはブラウザのタブがリロードされたり、ブラウザを閉じたりURLが新しいページに変更されたりするときには、このフックは実行されません。 Angularアプリ全体が破壊されたとき、何らかの処理を挟みたい時はどうすればよいでしょうか? 💡 結論、@HostListenerとWindow: beforeunloadまたはunloadを使う。 @HostListenerデコレータとは ディレクティブに対してイベントハンドラーを紐づけることができます。 ディレクティブ以外にも、windowイベント(unloadなど)のイベントにも紐づけることができます。 任意のイベントハンドラの前にHostListenerデコレータを付けます。
![[Angular] ブラウザを閉じる・リロードのタイミングで処理を実行する @HostListener](https://cdn-ak-scissors.b.st-hatena.com/image/square/cfce5089066de39b39c3157e23e262dd121fd523/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--EMkanLg3--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BAngular%25255D%252520%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E3%252582%252592%2525E9%252596%252589%2525E3%252581%252598%2525E3%252582%25258B%2525E3%252583%2525BB%2525E3%252583%2525AA%2525E3%252583%2525AD%2525E3%252583%2525BC%2525E3%252583%252589%2525E3%252581%2525AE%2525E3%252582%2525BF%2525E3%252582%2525A4%2525E3%252583%25259F%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E3%252581%2525A7%2525E5%252587%2525A6%2525E7%252590%252586%2525E3%252582%252592%2525E5%2525AE%25259F%2525E8%2525A1%25258C%2525E3%252581%252599%2525E3%252582%25258B%252520%252540HostListener%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Acha%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JkY2Y3ZTM3YjIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
[Angular][RxJS][NgRx] 複数のObservableをSubscribeする
通常subscribe()は一つのObservableを処理します。 下記のようにNgRx/SelectorでObservableを複数取得して、一度のSubscribeで処理するには、zip()を使います。 zipは複数のObservableを組み合わせて一つのObservableとして返すOperatorです。 💡 注意 : zipはRxJS8で非推奨となりました。代わりにzipWithを使ってください。 const isAuth$ = this.store.select(getIsAuth); const isAuthAdmin$ = this.store.select(getIsAuthAdmin); zip(isAuth$, isAuthAdmin$).subscribe(([isAuth, isAuthAdmin]) => { if (isAuth) { 処理 } else
![[Angular][RxJS][NgRx] 複数のObservableをSubscribeする](https://cdn-ak-scissors.b.st-hatena.com/image/square/fdf97d796f856eeb535e5749b724f819a97743cc/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--olcicKuC--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BAngular%25255D%25255BRxJS%25255D%25255BNgRx%25255D%252520%2525E8%2525A4%252587%2525E6%252595%2525B0%2525E3%252581%2525AEObservable%2525E3%252582%252592Subscribe%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Acha%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JkY2Y3ZTM3YjIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
[Angular][ライブラリ] VirtualScrollingでパフォーマンス改善
VirtualScrollingとは VirtualScrollingとはAngular Material CDKの一つで、表示されている部分のみDOMを生成するもので、パフォーマンス向上に貢献します。 通常、何千件とあるアイテムをfor文などで繰り返しレンダリングすると、見える範囲以外のすべてのDOMを一気に生成するためレスポンスが悪くなります。 そこで、このVirtualScrollingを使うことでレンダリングパフォーマンスを向上させることができます。 導入方法とポイント Angular CDKをインストールしてあれば、そのままimportすることで使えます。 ScrollingModuleのインポート app.module.ts import { ScrollingModule } from '@angular/cdk/scrolling'; @NgModule({ declara
![[Angular][ライブラリ] VirtualScrollingでパフォーマンス改善](https://cdn-ak-scissors.b.st-hatena.com/image/square/87ccdbc7b5e8bae649d3bb40734af684f6749c81/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--wPzWiJ6y--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BAngular%25255D%25255B%2525E3%252583%2525A9%2525E3%252582%2525A4%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252583%2525AA%25255D%252520VirtualScrolling%2525E3%252581%2525A7%2525E3%252583%252591%2525E3%252583%252595%2525E3%252582%2525A9%2525E3%252583%2525BC%2525E3%252583%25259E%2525E3%252583%2525B3%2525E3%252582%2525B9%2525E6%252594%2525B9%2525E5%252596%252584%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Acha%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JkY2Y3ZTM3YjIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Marginalia
すべて Tech Idea Diary 2024-04-14 opentelemetry-js レポジトリの歩き方 TechOpenTelemetry 2024-03-17 #ya8 2024 への参加と登壇 Diary 2024-03-08 社外勉強会への参加は個人のキャリア戦略だけでなく組織が取り組まなければならない課題でもある Idea雑記経営学習論 2024-02-24 Angular: Model Inputsで何が変わるのか TechAngularSignals 2024-02-18 『ルールズ・オブ・プログラミング』読後メモ Diary読書 2024-02-17 AngularアプリケーションでのAssertion in Production TechAngular 2024-02-14 パターンが機能するとはどういうことか Ideaパターン 2024-01-25 欲望の理由
チーム開発に効く Angular x Storybook 6
Angular Advent Calendar 2020 24日目の記事です。 Angular を使ってチーム開発するときに Storybook を使うと捗るという話です。今年8月に登場した Storybook 6.0 で大幅に使い勝手が良くなっているので、そこについても紹介します。 Storybook について 開発者が複数人いて、デザイナーもいる環境だとします。昨今はデザインシステムの登場で、デザインの時点でコンポーネントが意識されていることもあります。そうなってくると、コンポーネント単位で見た目を確認したいという需要が出てきます。そこで役に立つのが Storybook です。 Storybook は公式には「UIコンポーネント開発ツール」と表現されています。言葉で説明より先に、まずは Docs の Get Started > Examples > Storybook Design S
Angular vs React in 2022
Angular vs React. Which JS Framework Is Better in 2022?frameworksreact.jsangular Web development is a constantly evolving field, with apps becoming better and better with time. Times when users were asked to download poorly performed web apps for a better experience have gone, and today, with the best practices and techniques used to develop websites and create apps that users want to go and stay
[Angular][状態管理]NgRxの基本
はじめに NgRxを用いて状態管理を行うことになったので、学習ということでまとめてみました。 NgRxは、Reduxなど他の状態管理ライブラリに対して情報が少ないうえに、RxJSやFlux(アーキテクチャ設計思想)などの前提知識も多いので学習コストは高いと思います。 私も全体のうちほんの一部しか理解できていませんが、公式ドキュメントや参考にさせて頂いた情報を元に、自分が理解できるように書き出しました。 この記事で紹介するのは下記の通りです。 @ngrx/store Action Store Reducer Selector @ngrx/Effect なお、@ngrx/Entityは割愛します。 NgRxとは Angular用の状態管理ライブラリです。 NgRx Docs Reduxというライブラリに影響を受けて作成されたAngular専用の公式ライブラリです。 NgRxを利用するとRedu
![[Angular][状態管理]NgRxの基本](https://cdn-ak-scissors.b.st-hatena.com/image/square/55bb0fcff735ce57e1bbef03462aa6e5e0204398/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--R6YKEfcZ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BAngular%25255D%25255B%2525E7%25258A%2525B6%2525E6%252585%25258B%2525E7%2525AE%2525A1%2525E7%252590%252586%25255DNgRx%2525E3%252581%2525AE%2525E5%25259F%2525BA%2525E6%25259C%2525AC%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Acha%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JkY2Y3ZTM3YjIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Angular エンジニアのための React 言い換え表
最近 Angular を触り始めた React エンジニアです。 ただ、周りでは Angular な人が React を触ることになりそうなので、自分の Angular の勉強も兼ねて Angular -> React の言い換え表を作ってみようと思います。 Props @Input/@Output React では input/output の区別は特になく、親から子のコンポーネントに渡すものは全て Props というオブジェクトとして定義されます。 ＠Output は Angular では子が発するイベントを親が購読している関係になっていると思いますが、React では親から関数を渡して、それを子側でコールバックとして実行するという感じです。 type Props = { text: string doSomething: () => void } const Comp: React.
Angularでツリー表示させる初学者向けチュートリアル
Angularでツリー表示したいのでサンプルを作ってとお願いされたけどお蔵入りになったのでこちらで供養させていただく。せっかくなので初学者向けにチュートリアル形式で参ります。 全体のソースコードは以下に。 機能 親子関係のあるデータをツリー表示する 親は子を隠すことができる 複数選択可能 ツリーアイテムはドラッグ＆ドロップできる 複数選択状態でドラッグ＆ドロップできる 順番に実装していきましょう。 登場人物 tree-list.component.ts：ツリービューコンポーネント。利用者向けのインターフェースを提供 tree-item.component.ts：ツリーの中身。 tree-data.service.ts：ツリーの選択状態を管理する app.component.html：ツリービューコンポーネントを使う人 まずはツリービューコンポーネントを追加しましょう。
【Angular】KarmaでDirectiveのユニットテストをおこなう
Angularの単体テストとしては、現在のところ余り使われなくなってしまったDirectiveですが、ごくごくたまに自作Directiveのテストも書くこともあるかもしれませんので、防備録として記事にしておきます。 開く/閉じる $ tree -I node_modules -L 5 . ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package.json ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.
【Angular】コンポーネントのユニットテストを通るようしたときのメモ - オワタ太のブログ
Angularのプロジェクトにおいて、spec.tsの中身が全て下記になっており テストが全然通っていなかったものを修正していく作業があったので、そのときのメモ ※ ここでは、あくまでテストを通るようにするだけの修正を加えただけです import { ComponentFixture, TestBed } from '@angular/core/testing'; import { TestComponent } from './test.component'; describe('TestComponent', () => { let component: TestComponent; let fixture: ComponentFixture<TestComponent>; beforeEach(async () => { TestBed.configureTestingModule(
【待望】Angular v14で導入されたTyped Formsのご紹介！
つい先日、Angular v14がめでたくリリースされました！ アップデートの概要は、こちらの公式ブログをご参照ください。 今回のメジャーアップデート、なんと言っても目玉はTyped Formsの導入でしょう！ これまでのAngularでは、Reactive Formsから得られるvalueの型を指定することができず、その型はすべてanyとなっていました。 TypeScriptを使用しているのにanyなんて……意味ないやん……と全Angularユーザーが不満を抱えていたことでしょう。 Typed Formsの導入で、ついにこの悩みが解消されそうです。 この記事では、Angular v13で作成したデモプロジェクトに、v14を適用してTyped Formsを試してみた結果をお届けします。 Type Formsの概要はAngular公式をご覧ください。この記事で紹介する以外にも有益な情報が載っ
Angular アップデート手順書
公式ガイド で、手順を確認 メジャーバージョンは、必ず一つずつ 上げる ex. Angular v16.x => Angular v17.x アップデート手順 公式ガイド を参照 バージョンを指定 現在のプロダクトのバージョンとアップデートする 必ず一つ上 のバージョンを指定します。 https://update.angular.io/?v=16.0-17.0 ex. Angular v16.x => Angular v17.x App Complexity（複雑度）の指定 Basic を選んでおけば、基本的に大丈夫です。 Other Dependencies の指定 該当する項目をチェックします ex. Angular v16.x => Angular v17.x Show me how to update! をクリックすると下図手順が表示されます。 アップデート実施項目 アップデート実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WARNING in budgets, maximum exceeded for initial
Tailwind UI - Official Tailwind CSS Components & Templates
