らいふうっどの閑話休題

興味のあることをゆる~く書いていく

How to Create a Service with HttpClient and Injectable in Angular 9/8 の翻訳

mediumHow to Create a Service with HttpClient and Injectable in Angular 9/8 の翻訳です。

このチュートリアルでは、 HttpClient を使用して、 Angular アプリケーションを REST API サーバーに接続するためのサービスを構築する方法を学習します。

Angular サービスを実装して、REST API サーバーからのデータの取得を処理するコードをカプセル化する方法について説明します。

f:id:ic_lifewood:20200102001855p:plain

Angular サービスは、Angular 依存関係インジェクターを使用して他のサービスまたはコンポーネントに挿入できる単なる TypeScript クラスです。

前提条件

Node 、NPM 、Angular CLI が必要で、Angularプロジェクトを初期化する必要があります。

ステップ1 — HttpClient モジュールのインポート

src/app/app.module.ts ファイルを開き、次のように更新します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ステップ2 — Angular Service の作成

新しいターミナルを開き、次のコマンドを実行します。

$ ng generate service backend

ステップ3 — HttpClient のインポートと注入

src/app/backend.service.ts ファイルを開き、次のように HttpClient をインポートして注入します。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BackendService {
  constructor(private httpClient: HttpClient) { }
}

HttpClient をインポートし、サービスの constructor を介して注入します。

ステップ4 — HTTPリクエストを送信するメソッドの定義

次に、データを取得するためにサーバーにGETリクエストを送信する get() メソッドを定義します。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BackendService {

  constructor(private httpClient: HttpClient) { }

  public get(){
    return this.httpClient.get("http://server.com/endpoint");
  }
}

HttpClientget() メソッドを呼び出して、GET 要求を REST API サーバーに送信します。

ステップ5 — Angular コンポーネントの作成

端末に戻り、次のコマンドを実行してhomeという名前のコンポーネントを生成します。

$ ng generate component home

ステップ6 — Angular Service の注入

src/app/home/home.component.ts ファイルに移動し、次のようにバックエンドサービスをインポートして注入します。

import { Component, OnInit } from '@angular/core';
import { BackendService } from '../backend.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  data= [];

  constructor(private backendService: BackendService) { }

}

ステップ7 — サービスメソッドの呼び出し

最後に、次のように、サービスの get() メソッドを呼び出して GET リクエストを送信できます。

  ngOnInit() {
    this.backendService.get().subscribe((ret: any[])=>{
      console.log(ret);
      this.data = ret;
    })  
  }

ステップ8 — ngFor を使用したデータの表示

<div>
  <ul>
    <li *ngFor="let item of data">
      {{item.name}}
    </li>
  </ul>
</div>

ここでは、データ要素に名前属性があると仮定します。

他の Angular チュートリアル をご覧ください。

個人の Web サイトである TwitterLinkedIn 、および Github を介して著者に連絡するか、著者をフォローできます。

まとめ

この投稿では、 Angular でサービスを作成し、 HttpClient を使用して HTTP リクエストを REST API バックエンドに送信し、 ngFor ディレクティブを使用して API から返されたデータを最終的に表示する方法を説明しました。

itnext.io

itnext.io

Angular in 2020 and Beyond の翻訳

mediumAngular in 2020 and Beyond の翻訳です。 長所、短所、そして次へ

f:id:ic_lifewood:20191225213626p:plain

まず、 Angular の利点、変更されるもの、および React よりも Angular の利点について説明しましょう。

私は主に Angular の未来と何が変わるかに焦点を当てています。 通常、 Angular について学ぶには、 GitHubリポジトリを参照します。リポジトリは、ここからアクセスできます。これは、コードの変更点や追加する機能について最新情報を入手するのに最適な場所です。 また、 Angular をプロジェクトに使用する場合は、問題を確認して問題に注意することができます。

・・・・・・

Angular の改善が必要な弱点

Angular の最大の問題は、 Angular で構築するアプリが比較的大きいことです。 これは、プロジェクトのファイルサイズが大きいことを意味します。 これは、 Angular CLI が原因の JavaScript バンドルが原因で発生します。 これらのバンドルを、 React アプリを作成して取得したバンドルと比較すると、 Angular アプリは大きくなります。

実行時には、違いは見当たりません。 ランタイムのパフォーマンスはかなり良いですが、アプリは単純なアプリであっても比較的大きいため、読み込みに時間がかかることがあります。

第二に、 Angular アプリは非常に複雑になる可能性があります。 Angular は完全なフレームワークです。 それだけでなく、機能とツールの完全なプラットフォームでもあります。 そして、それは、 Angular の学習が React の学習よりも少し難しいことを意味します。 React では、システムのユースケースに関連するコンポーネントの構築のみに焦点を合わせます。 後に、 React はいくつかの新しい機能を追加しましたが、そのコアはコンポーネントの構築に基づいています。 これは、 Angular にはあるが React には存在しないグローバルな状態管理、サービス、および依存関係の注入に関するものです。 HTTP または AJAX リクエストの場合、 React 用に別のライブラリが必要ですが、 Angular に組み込まれています。 ルーティングも同じです。

React および Vue JS と比較した場合、 Angular はより多くの関係が組み込まれているため、学習が少し難しいのはこのためです。これはアプリにも関連しています。 もちろん、それは難しいことですが、これは大きな強みでもあります。なぜなら、これは常に組み込まれているので、存在する機能にいつでも頼ることができ、非常にうまく機能するからです。 Angular のコアを開発する同じチームがフォームの検証やルーティングなどの作業も行うため、フレームワークのこれらの部分が最新であり、ベストプラクティスに従って、 Angular のバージョンと互換性があることに依存できます。 これは、 React で使用されるサードパーティのアプリでできることではありません。 ルーティングライブラリを使用している場合、 React の最新バージョンに更新されていないか、 React のすべての機能をサポートしていない可能性があります。 サードパーティのライブラリを同じレベルに更新するのには時間がかかります。

・・・・・・

Angular の輝く強み

Angular には、プロジェクトの種類に関係なく、より多くの依存関係とコンポーネントが組み込まれているため、 Angular で対応します。 これが最大の強みです。 多くの機能を選択できます。 優れたプラクティスに従うための明確なルールセット、明確な構文、および typescript があります。 明確に定義されたスタイルガイドと、 Angular を学習するための大量のリソースとチュートリアルがあります。

Angular の新しいバージョンは6か月ごとにリリースされます。 だからといってすべてが変わるわけではありませんが、フレームワークは徐々に進化します。 これがこれらの Angular アップデートの中核です。 すべての更新には完全な下位互換性があり、 Angular 2 の最初のリリース以降、小さな API の変更など、小さな変更のみが発生しています。 ゆっくりだが一定の改善は常に良いです。

Angular のある Web サイトには、 「バージョン8.0およびIVYの計画」 と呼ばれるブログ投稿があり、バージョン8および将来の計画について説明しています。 これは読む価値があり、Opt-in-Ivyのプレビューを提供します。 Ivyは内部の Angular Renderer です。 レンダラーは、指示を受け取ってDOMに変換するエンティティエンジンです。 レンダリングは非表示であり、 Angular での作業方法は変わりません。

・・・・・・

Angular を使用すると、小さくて高性能なアプリができます。 将来的には、2020年以降のように、最新の JavaScript の差分ロード、オプトイン Ivy プレビューが搭載され、 Angular チームはBazelの実装に取り組んでいます。Bazelは、Angular CLI で、 Google が開発したコンパイルツールです。 また、ファイルサイズの改善、より小さなバンドルの作成を支援し、一般的な開発者エクスペリエンス全体を強化するためのビルドプロセスを高速化することができます。 それはすぐに利用可能になります。

アプリケーションのサイズが小さくなるため、これらの弱点は取り除かれます。 代わりに、多くの機能、明確な構文、構造という強みがあります。 次に、小型で高性能のアプリを作成します。 繰り返しになりますが、 Angular チームの目標は、 API の大幅な変更を回避することですが、もちろん、コンポーネントを作成するためのいくつかの代替方法を確認できます。 そして、おそらく、 IVY で NG モジュールを削除することで可能になる可能性があるので、コンポーネントに集中することができます。

したがって、現在のAngular は、すでにかなり良いものであり、非常に人気があり、うまく機能しています。 アプリは少し大きくなっていますが、それは大きな問題ではありません。

medium.com

medium.com

5 Awesome RxJS Observables and Operators That Are Often Overlooked の翻訳

better-programming5 Awesome RxJS Observables and Operators That Are Often Overlooked の翻訳です。
Pluck, Defer, FromEvent など

f:id:ic_lifewood:20191224234932j:plain
Photo by Toa Heftiba at Unsplash

RxJSを使用する場合、多くの場合、人々は mapfilterreduce などの配列 operator を覚えています・・・・。

適切な理由で可能な限り使用することを強くお勧めしますが、より専門的な別の operator を使用すると、別の開発者がコードを小さく印刷したり、読みやすくしたりできる可能性があると言えます。

ここでは、これらのシナリオが発生したときに使用する一部を強調してみます。

・・・・・・

1. Pluck

各ソース値(オブジェクト)を、指定されたネストプロパティにマップします。

始めましょう。これは非常によく似ていますが、放出されたすべてのオブジェクトから選択したプロパティを1つだけ取得します。 実際に下の map operator を使用します。

次のように宣言されたインターフェイスがあるとします。

gist.github.com

そして今、次のようなオブジェクトがあります。

gist.github.com

すべての名前を選択したい場合、次のようにします。

gist.github.com

そして、それぞれの家の通りについて:

gist.github.com

・・・・・・

2. Defer

購読時にのみアクティブな遅延 observable を作成します。

これは、promiseとobservablesの違いの1つを強調しています。

promises が待機されている場合は、defer を使用して、observable 実行を遅らせることができます。 おそらく、ネーミングはそれが何をするのかを暗示していると推測しているかもしれません。 これは、cold observable とも呼ばれます。

クリックイベントを listens し、クリックされた日付を返すAngularアプリケーションがあるとします。

gist.github.com

この問題を修正するには、 defer を追加します。

gist.github.com

ほんの少しのコンテキスト。 hot observable (デフォルトでは、eager)である fromEvent を使用し、 defer を使用して cold に変更しました。

これは、 FromEvent の大きな道のりにつながります。

・・・・・・

3. FromEvent

イベントターゲットからのイベントタイプに基づいて放出する observable を作成します。

前に示したように、 fromEvent は最大3つのパラメーターを取ることができます。

  1. イベントが発火するターゲットです。
  2. listen するイベントの名前です。
  3. options の optional listener です。

事実上、 addEventListenerremoveEventListener は、1つにラップされています。 passivecaptureonceなどのリスナーオプションを渡すことができ、オプションの3番目のパラメーターを1回指定できます。

これらの詳細に関する詳細情報が必要な場合は、AddEventListener にアクセスしてください。

gist.github.com

使用される基本的な関数は実際にはadd / removeEventListener であるため、これはRxJSとJavaScriptの類似性を示しています。

・・・・・・

4. ExhaustMap

投影された関数を適用した後、 observable を返します。 前の実行中にソースが別の observable を emits する場合、新しい emits は無視されます。

現在、これの使用は特別なユースケースであり、多くの場合、使用する必要はありません。 しかし、なぜそれが役立つのかを強調したかったのです。

ボタンクリックに関連付けられた支払いを行い、次のようなロジックを設定したとします。

gist.github.com

現在、mergeMap は単なる平坦化 operator です。 つまり、 observable ソースを取得し、ラップ解除される新しい observable を返します。 したがって、payServicepay 機能は、observable を返す必要があります。

exhaustMapは、mergeMap(mergeAll + map ほとんど違いはありません)と同様に、平坦化機能の一部です(exhaust+ map の組み合わせです)。

ただし、ここにある問題を見ることができます。 ユーザーは複数回 pay をクリックして、複数のリクエストを効果的に実行できます。

もちろん、最初のクリック後にボタンを無効にすることもできますが、イベントストリームも保護する必要があります。

この問題は、exhaustMap で解決できます。これは、inner observable payHTTPS リクエストおよびレスポンスを介して実行されている間、他のすべての動作が無視されるためです。

・・・・・・

5. ObserveOn

提供されたスケジューラで、observable の動作を実行できます。

次に、observeOn を使用してスケジュールの領域に移動しますが、これについては詳しく説明しませんが、必ず確認しておくべき優れたリンクをいくつか提供します。

ただし、たとえばパフォーマンスやユーザーエクスペリエンスを向上させるために、イベントをキューに入れる場所を制御したい場合があります。

以前に投稿したブログの1つである RxJSを使用してドラッグアンドドロップを簡単にし、subscribeOn を使用してデフォルトの asyncScheduler から animationFrameScheduler に再ペイントを行うタイミングを変更することで最終的なソリューションを示しました。

animationFrame キューを使用して、よりスムーズ/より高いフレームレートのペイントを取得するために、タスクキューにキューイングすべきではないことを意味します。

このタイプのテクニックは、通常アニメーションを行う場合にも有効です。

詳細を確認するには、私の投稿をご覧ください。これは、私が言及しなかった他のオペレーターをあなたを見ることで出来るはずです。

スケジューリングの詳細:

私はこれについて長い投稿をしようとはしませんでしたが、いくつかの詳細な説明を避けることはできませんでした。 知識を共有し続けます。 それは私たちを強くするだけです。

medium.com

medium.com

Why Is Angular 9 Delaying Its Release? の翻訳

Why Is Angular 9 Delaying Its Release の翻訳です。

以下訳です

Ivyエンジンにはまだ作業が必要なようです・・・そのため、おそらく来年までAngular 9は、リリースされません。

Angular 9は、待望のリリースです。 Angular 8が非常に優れたリリースであり、よりスマートで遅延ロードされたモジュールシステム、 要素とプロジェクトをより速く生成するための新しく改良されたCLI(AngularルータービルトインまたはSASSプリプロセッサーを搭載)を含む、より多くバージョンです。 フレームワークの9番目のリリースでは、多くの関心が寄せられています。

今回は、開発者側に大きな改善はありません。 つまり、新しいルーターや新しいモジュールなどは許可されません。 Angular 9は、コンパイルと有効性に重点を置いています。 新しいIvyエンジンは、提供されている公式ガイドラインを使用して、Angular 8に統合できます。ここにリンクがあります。 ご覧のとおり、Ivyは新世代のコンパイルおよびレンダリングパイプラインと名付けられています。つまり、Ivyはコンパイルフェーズだけでなく、実行フェーズ、レンダリングフレームワークコンテキスト全体を担当します。

計画中

公式ドキュメントでは、Googleは次の2つのメジャーリリース、9と10について言及しています。 Angular 10は2020年5月にリリースされる予定です。開発者は、Angular 10は少なくとも2020年の夏以降にリリースされる可能性が高いと考えています。

f:id:ic_lifewood:20191222141554p:plain

ご覧のとおり、Angular 9は2019年10月/ 11月にリリースされるはずでした。そのため、公式のスケジュールは実際に起こっていることを反映していないようで、開発者はもっと長く待つ必要があります。

・・・・・・

Angular 9のリリースを遅らせているのは何ですか?

まだそれほど明確ではなく、Googleはリリースが遅れた理由を発表しませんでしたが、GitHubプロジェクトページに従ってコメントと改訂を分析すると、Ivyエンジンはまだ修正が必要なようです。

f:id:ic_lifewood:20191222141858p:plain

また、一般的な機能、ngFors、ngccのコンパイルフェーズ、およびドキュメントに関するコメントも多数あります。 ただし、最近のコメントのほとんどは、 Ivy と一般的な問題に関するものです。 開発者は予想以上に待たなければならない場合があります。 問題ない。 唯一心配しているのは、それだけの価値があるかどうかです。 おそらくそうです。 簡単な答えです。 AngularはJavascriptおよびTypescript開発者にとって最も人気のあるフロントエンドフレームワークになりました。新しいエンジンと、それがどのように作業をより簡単でスマートにするかについて、私たちは皆興奮しています。

・・・・・・

まとめ

新しいリリースが実際にいつ発表されるかについての公式な発表がなくても、大規模な実行はまもなく終了するはずです。 更新を続けて、何が起こるか見てみましょう。 私には、Angular 9のリリースは年末までには出てこないようで、v10のリリースはおそらく2020年9月まで延期されるでしょう。

medium.com

medium.com

ガジェ獣 Advent Calendar 2019 今年買ったガジェットたち

ガジェ獣 Advent Calendar 2019 22日目の記事です。

今年買ったガジェットたち

MOFT - World’s First Invisible Laptop Stand

f:id:ic_lifewood:20191220004511p:plain

個人的には一番活躍しています。(普段使いがMac Book Proだから当たり前か)
新幹線の中でも気軽に打ち易い角度に出来て重宝しています。

タイピングが楽しくなるマイ・キーボード!超薄型ワイヤレスメカニカルTaptek

レビュー記事:
Taptekキーボード レビュー/コンパクト!光る!SNSで人気のMac用ワイヤレスBluetoothメカニカルキーボード

キーボードにこだわろうかな?と思った時に入ってきた情報で、即ポチりました!
ピカピカ光る所が、ウキウキさせてくれます!

Keychron K2 - A Sleek, Compact Wireless Mechanical Keyboard

f:id:ic_lifewood:20191220004655p:plain

レビュー記事:
Keychron K2 レビュー/Mac用ワイヤレスメカニカルキーボードの新たな定番になるか?軸が選べるセミオーダー!

Taptekポチった直後にこれまた流れてきて、衝動的にポチりました。
Taptekと比較して、ミサワ感が出るこちらの方が好きですね。
こちらのバックライトもピカピカ光ります。

Falcon, Best Ultraportable 2-in-1 Laptop

f:id:ic_lifewood:20191220004154p:plain

f:id:ic_lifewood:20191221213355j:plain

コンパクトで良いのですが、外装の手触りが荒くチープ感が否めせんでした。

MiniBook-Mobile Workstation In Your Hand

f:id:ic_lifewood:20191220004213p:plain こちらもコンパクトですが、ギミックの完成度としてはこちらの方が品質が高かったです。 指紋認証microSDを装着できるところもポイントが高いです。

f:id:ic_lifewood:20191221213156j:plain

f:id:ic_lifewood:20191221213253j:plain

専用バッグもカーボンチックな表面で満足度アップです。

Titan, Unihertz Rugged QWERTY Smartphone

f:id:ic_lifewood:20191220004314p:plain

Black Berryは、あえてスルーしてこちらをチョイスしてみました。
決めては、無骨なこのデザイン!
この記事を書いている時点では、まだ届いていないですが、期待大です!

Shark EVOPOWER W30 充電式ハンディクリーナー(グレイ)

facebooktwitter のタイムラインに流れてきて、皆の評価が高いので買ってみました。 手軽に掃除機を書けるという点では、非常に良いです。 但し、アタッチメントが緩い?雑な感じが残念です。

Mac Book Pro 2019

Apple iPad (10.2インチ, Wi-Fi, 128GB) - スペースグレイ

Apple iPad (10.2インチ, Wi-Fi, 128GB) - スペースグレイ

Apple iPad (10.2インチ, Wi-Fi, 128GB) - スペースグレイ

  • 発売日: 2019/10/02
  • メディア: Personal Computers

Apple Pencil (第一世代)

Apple Pencil (第一世代)

Apple Pencil (第一世代)

  • 発売日: 2015/10/14
  • メディア: Personal Computers

Apple Watch Series 5(GPSモデル)- 44mmスペースグレイアルミニウムケースとブラックスポーツバンド - S/M & M/L

全部揃ったら、絶対Sidecarするんだ・・・・俺。
Mac Book Pro と iPad があれば出来ます 。(メンタル的問題

USB Type C ハブ 7in1 USB C ハブ MacBook MacBook Pro/ChromeBook対応

Mac Book Pro 用に手配しました。

Raspberry Pi 関係

Raspberry Pi4 B+が出るということで手配しました!

リュック

購入してみたけど、物量入るだけで普段使いには厳しいリュックだったので直ぐに処分するハメに・・・・。

座布団 健康クッション

現場・自宅・親父用と3つも購入しました。
大活躍の一品です。

BeatsX ワイヤレスイヤホン - ブラック

BeatsX ワイヤレスイヤホン - ブラック

BeatsX ワイヤレスイヤホン - ブラック

  • 発売日: 2018/10/03
  • メディア: エレクトロニクス
新しい攻性防壁として購入しましたが、先代のurBeats3と世代交代が進まずに未開封のママ・・・。 冬休みにデビューさせます!

Micro:bit 関係

入手したもののケースを装着して以降、時間がなく手がついていません><

obniz 関係

こちらも入手したものの、時間がなく手がついていません><

電源

イベントなどの会場で大活躍です。
多目的に電源が確保できたので、重宝しました!

Ichigo 関係

f:id:ic_lifewood:20191220232650p:plain

f:id:ic_lifewood:20191220232333p:plain IchigoDyhook(PS-IJ1)

今はまだ各種ボードが届いただけで、こちらも手つかず><

PINE 関係

f:id:ic_lifewood:20191220233816p:plain 14″ PINEBOOK Pro LINUX LAPTOP (ISO, UK Keyboard) – Estimated Dispatch in December 2019

f:id:ic_lifewood:20191220233929p:plain PINEPHONE – “BraveHeart” Limited Edition Linux SmartPhone for early adopters

某コミュニティの長老から素人が手を出すと火傷すると言われた、伝説の品々です(大嘘
これからシッピングされるはずなので、年明けの可能性も高いです。

総括

オーダーだけで、手元に届いていないモノも多数ありますが、言えること1つ!
調子に乗って色々手に入れ過ぎた!!!!Σ( ̄Д ̄;)がーんっ! 浪費したことが今年の最大の反省点です、はい。

Gitbook has been released. / Gitbookを公開しました。

f:id:ic_lifewood:20191129001659p:plain

Windows development environment / Windowsの開発環境

https://gurezo.github.io/windows_setup_dev/

Ubuntu development environment / Ubuntuの開発環境

http://gurezo.github.io/ubuntu_setup_dev/

macOSは、時期を見て作成したいと思います。
I want to create macOS by looking at the time.

XPS13を使ってみた

きっかけ

デルのXPSモニター募集に応募したら、当選したのでブログを書くことに。

開封

モニター書類

f:id:ic_lifewood:20191007210049j:plain

初期化手順書

f:id:ic_lifewood:20191007210202j:plain

カタログ

f:id:ic_lifewood:20191007210236j:plain

サイズ比較

f:id:ic_lifewood:20191007210500j:plain

左から Mac Book Pro, XPS13, Falcon 2-in-1 Laptop 
Mac Book Pro のよりも XPS13 が若干小さいですね

f:id:ic_lifewood:20191007210914j:plain

モニターの表示状態もMac Book Proにフィルターを貼ってあることも差し引いても
XPS13 の方が鮮やかに見えます。

表示領域サイズは、Mac Book Pro の方が大きいのでファーストビューの情報量は
Mac Book Pro が良いです。

小物(バッテリー)

f:id:ic_lifewood:20191007211759j:plain

バッテリー関係もケーブルとアダプターは、セパレートなので
小物入れにコンパクトに収まります。

XPS13 ドライバアップデート

f:id:ic_lifewood:20191007213230p:plain

Dell のドライバアップデート用ソフトウェアが分かり易いので
簡単に指定、アップデートできました。
なお、ドライバにもよりますが複数回の再起動が必要です。

開発環境

XPS13にインストールした開発環境は下記の通りです。

slack

f:id:ic_lifewood:20191007215534p:plain

初期のバージョンでは、複数チームを開くとプロセスが多数発生して
PCの負荷が高かったのですが、XPS13だとなんのストレスもなく使用できました。

開発

ターミナル(Git Bash)の起動

f:id:ic_lifewood:20191007220556p:plain

マウス操作なしで、キーボード操作のみでスムースな起動ができました。

githubリポジトリからコードをダウンロード

f:id:ic_lifewood:20191007212933p:plain f:id:ic_lifewood:20191007213059p:plain f:id:ic_lifewood:20191007213126p:plain

なんのストレスもなく、一連の操作ができました。

ビルド

f:id:ic_lifewood:20191007213643p:plain f:id:ic_lifewood:20191007213715p:plain f:id:ic_lifewood:20191007214123p:plain f:id:ic_lifewood:20191007214229p:plain f:id:ic_lifewood:20191007214313p:plain f:id:ic_lifewood:20191007214334p:plain f:id:ic_lifewood:20191007220412p:plain

npm インストールや Angular のコードをビルドもなんのストレスもなく、
スムースにビルドブラウザ表示が可能でした。

まとめ

プログラミング開発の観点で、XPS13は十分ありだと思いました。

残念だったのは付属品として、USBハブが最初からあると
使用当初に戸惑いが軽減されるのでは?と思いました。

Pentium3時代のInspiron以降、デルPCにはご無沙汰だったので
予算確保に向けて検討したいなと思った次第です。