🐕

Ionic AngularをM1 MacBook Proで利用する速度計測。

2021/12/05に公開

Angular

macOS

Ionic

tech

本記事は Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021 の記事です。

M1 MacBook Proを買いました

速くなると話題のM1 MacBook Proを購入しました。諸条件を検討した結果、購入したのはこちらです。

というか、M1 MacBook Proを購入すると決めたら選択肢はほぼなかったんですよね。ちなみにポイントが5%還元なので、ヨドバシカメラで購入すると14,990ポイント得ることができます。お得。

以前使っていたMacBook Pro（Intel）は15インチにCPUやメモリをフルで積んで、457,704円で購入しました。

中小企業には、「中小企業者等の少額減価償却資産の取得価額の損金算入の特例」があるのですが、それも30万円までなので当然ながら減価償却を行いました。4年ですよ、償却期間。長過ぎる。しかも固定資産をもつと毎年いろいろな書類手続きも増えるんですよね・・・。

なので、今回は一括償却を狙いたいので30万円以内と決めていました。その時点で、購入候補は以下の2つに絞られます。

14インチ　10コアCPU/16コアGPU/16GBユニファイドメモリ/1TB SSDストレージ　299.800円
16インチ 10コアCPU/16コアGPU/16GBユニファイドメモリ/512GB SSDストレージ　299,800円

それ以外は30万円を超えるので除外。この金額以下も開発体験落としたくないので除外。
そして、ストレージサイズですが、600GB程度を使っていましたので、開発でストレージ容量を気にすることをしたくなく1TBは欲しいと思っていたので、14インチ一択でした。

ビルド時間などを計測する

おそらく私と同じようにIonic Angularの開発でMacBook Proを購入する人は大体同じ選択肢になると思うので、Ionic Angularのビルド時間を残しておこうと思います。今のPCからの買い替えを検討する材料にしていただければ幸いです。

まず、 ionic start でプロジェクトを作成します。今回は angular の blank テンプレートを選択しました。それでは、まず ionic serve の時間を計測してみましょう。この記事を書いてるブラウザ（Chrome）だけ立ち上げており、esm2015へのコンパイルが終わっている状態から開始します。また、 ionic info の環境は以下の通りです。

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.9.1
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.2.13
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.3.2
   @capacitor/android : not installed
   @capacitor/core    : 3.3.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v16.13.1 (/usr/local/bin/node)
   npm    : 8.1.2
   OS     : macOS Monterey

ってこれ手動でストップウォッチでやらないとだめなんですね。ブラウザが立ち上がってファーストミーニングフルペイントが完了した時点までとします。

1回目	2回目	3回目
10秒0	9秒05	10秒96

所感として、ブラウザ立ち上がり（CLI）までよりも、ブラウザでのレンダリングにひっかかりを感じますね。まぁ手動でやってるのでずれがあるとして、大体10秒程度と考えていいでしょう。

続いて、 npm run build を実行します。これについては、CLIで時間が表示されるのでそれを利用します。

1回目	2回目	3回目
3,718ms	3,617ms	3,582ms

ついでプロダクションビルドにしましょう。 npm run build -- --prod を実行します。

1回目	2回目	3回目
8,267ms	8,188ms	8,252ms

こんな感じの速度でした。メモリ16GBにしては健闘してるのではないでしょうか。

まとめ

減価償却を考えずにフルスペック積むというのも手ですが、減価償却以内でMacBook Proの買い替えを検討してるIonic/Angularユーザがいましたら、上記計測を手元でしてもらい、買い替えた場合に高速化されるかどうかの確認をしてみたらいいのではないかと思います。

それではまた。

M1 MacBook Proを買いました

ビルド時間などを計測する

まとめ

Discussion