はじめからはじめる @ngrx/data 第2話(NgRx 激闘編)

今日も、@ngrx/data の続きです。

前回は @ngrx/data が何なのかをくどくど説明して、プロジェクトをセットアップして、ライブラリをブチ込んだところで時間切れでした。

今日はいよいよ本格的に @ngrx/data に挑戦します。


前回の話
tercel-tech.hatenablog.com

例題

次のエンティティに対する CRUD 処理を @ngrx/data で実装してみよう。ちなみに主キーは id だよ。

エンティティ名: Hero

項目名
id number
name string

まずはこのエンティティを表現するクラスが必要だね。 DTO みたいなやつが。

続きを読む

はじめからはじめる @ngrx/data 第1話(プロジェクト作成編)

@ngrx/data は、アプリケーションの CRUDクラッド 処理を強力にアシストしてくれる魔法のようなライブラリです。

2019年に公式リリースされたばかりですが、やはり後発だけあって非常に使いやすいので、ぜひこの場でご紹介したいな、と思った次第です。


Angular アプリの CRUD 処理は、@ngrx/data で決まり!

今回のテーマは @ngrx/data だよ。

かなりのながちょうになるので、いくつかに分けて話そうと思う。

あれ??

先日、NgRx は難しいって話してなかったけ?

したよ。

NgRx シリーズには、もともと Redux をベースにした @ngrx/store, @ngrx/effects などがあって、これらは確かに使いこなすのが大変なんだ。

でも、@ngrx/data だけは毛色が違う


@ngrx/data を使用すると、非常に少ないコードで、NgRx をまったく知らなくても、大規模なエンティティモデルを迅速に開発できます。

【原文】
With NgRx Data you can develop large entity models quickly with very little code and without knowing much NgRx at all.

【出典】


ちなみに、NgRx にありがちな リアルタイム Web とか、プッシュ通知とか、状態管理とか、そういうおしゃれな話は一切出てきません。

業務アプリケーションにおいてとても普遍的な CRUD 処理をラクに実装するためのアプローチとして、@ngrx/data を使ってみませんか、という趣旨です。

うーん、CRUD は分かるけど、NgRx が唐突すぎてさっそく話についていけないのだが?

言い換えよう。 この際、NgRx の知識は要らないんだ。

すごく便利なライブラリがあるからステップバイステップで試していこう!

続きを読む

団体競技ってどんなもの?

たーせるくんは、学生時代どんな部活に入ってたの?

いろいろ転々としましたが、だいたい楽器コンピュータのどちらかでしたね。

ていうか全部ユルユルの文化部でした。

運動部じゃないんだね。

うん……。 僕、うんだから。

続きを読む

FlexGrid のカスタムエディタでお友達のグリッドに差をつけよう! (同時上映: 続・パフォーマンスの話)

Wijmoウィジモ の FlexGrid には、セルの入力コンポーネントの種類を変更できるカスタムエディタという隠し機能があります。

ちょっとクセはあるのですが、使いこなせばお友達に差をつけることができます!

TL; DR

  • FlexGrid のカスタムエディタを導入すると入力のバリエーションが広がる
  • 一方で、カスタムエディタを(Angular アプリケーションに)導入すると処理性能が劣化する
  • カスタムエディタを NgZone で性能改善するにはトリッキーなコーディングが必要

ナイスな導入

グリッドの中で、「この項目だけはコンボボックスにしたいのに」って思うこと、あるよね。

あるあるだね。

Wijmo ならカスタムエディタでできるよ。
公式サイトのサンプルをキャプってみた。

f:id:tercel_s:20200122200522p:plain
カスタムエディタを搭載した FlexGrid

そうそう、こういうのがやりたかった。

サンプルソース一式はこちらの公式サイトから zip でダウンロードできるので、興味のある人はぜひ解析してみよう。

初心者向け解説は無いのか……orz

続きを読む

NgRx が難しい 5 つの理由

Angular と一緒に使われることの多い NgRx。 非常に強力なライブラリである一方、学習コストが比較的高く、手を出そうとして途中で挫折してしまう方も多くいらっしゃることと思います。

今日はそんな NgRx の挫折あるあるポイントを紹介していきます。

はじめに

こちらの Developers.IO の記事の中で、僕が一昨年に書いた NgRx をりしてみた系メモが参考文献に挙げられていました。 うれし恥ずかし/////

dev.classmethod.jp

続きを読む

Wijmo の FlexGrid を使う際に気を付けるべきこと(パフォーマンスについて)

GrapeCity さんが誇る高機能コンポーネント群・Wijmoウィジモ

とっても便利ですが、その中の FlexGrid は上手に使わないと簡単にパフォーマンスが低下してしまうので注意が必要です。

はじめに

Web アプリを開発する際、GrapeCity 謹製の Wijmo という製品のお世話になることがあります。

特に Excel ライクなデータグリッドビューである FlexGrid は非常に強力で、ビジネスアプリケーションでしばしば汎用されます。

けっこうお高いので個人開発では手が出せませんが、React や Angular、Vue といった主要な JS フレームワークとの相性も良く、頻繁に機能改善も行われているため、個人的には予算を割いてでも購入しておきたいと思える製品です。

2018年には Visual Studio Code で利用できる GUI ツール「Wijmo Designer」も登場し、より直感的にグリッドを構築できる環境が充実しつつあります。

ただ、そんな FlexGrid ですが、意外と初心者向けの体系的な情報が少なく、実際に製品を組み込んでアプリケーションを開発している現場でプログラマが悪戦苦闘している様子をよく目にします。

続きを読む

2019年 買ってよかった本10選

今年ももう残り僅かです。 みなさま、今年1年はいかがでしたでしょうか。

僕にとっての 2019年は本当に様々なことがあり、大変な一年でした。 ある意味、人生のひとつの転換点でもあり、時間というものの不可逆性を強く意識させられた年でもありました。

そんなわけで、今年も1年間のうちに読んだ本の中から、僕の独断と偏見で10冊をピックアップしました。

ちなみに、今年の初めにあれほど気になっていたはずの『FACTFULNESS(ファクトフルネス) 10の思い込みを乗り越え、データを基に世界を正しく見る習慣』は、ついぞ読むことはありませんでした。

それではいってみましょう。

続きを読む

Copyright (c) 2012 @tercel_s, @iTercel, @pi_cro_s.