macOSにてAngular10+AngularMaterialをyarnで管理

# 事のきっかけ
フロントエンドをAngular、バックエンドをAWS用にScalaで組んでいるのですが、開発しているAngularが未だにnpmで管理している為、そろそろyarnに移行したいと思った。
いきなりプロジェクトをごっそり入れ替えると大体問題が起こるのが常なので、まずは慣れるというのも考慮に入れ、ng newで作った初期の段階でyarn管理をしてみようと思った次第。

# 前提条件
macOS Catalina Ver.10.15.6
(そろそろ、Big surがやってきますね。)

パッケージ管理: Homebrewは、すでにインストール済み

※番号振りたかったけど、カウントがバグるので上から下に順番にやってちょんまげ
# yarnをインストール
## 前提となるnodeをインストール

- nodeバージョン管理の為にnodebrewをインストール

```shell:terminal
brew install nodebrew
```

- nodebrewのセットアップ

これがないとnodebrew install ができない

```shell:terminal
nodebrew setup
```

- zshrcとかbash_profileとかお好きな所に追記して、再読み込み

追記して

```vim:~/.zshrc
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

再読み込み

```shell:terminal
source ~/.zshrc
```

- 最新バージョンのnodeをインストール

バージョンは、nodebrew ls-remoteで探せまする

```shell:terminal
nodebrew install v14.9.0
```

- 使用するnodeを選択

```shell:terminal
nodebrew use v14.9.0
```

- nodeを確認

```shell:terminal
node -v # v14.9.0
```

## yarnインストール前の下準備
yarn公式では、nodeをnvmで管理している事を想定している為、nodebrew用に準備が必要

要は、yarnインストール時のnodeが/usr/local/opt/nodeを見に行くので、そこにシンボリックでnodebrewを紐付けてあげれば良いだけ。

```shell:terminal
mkdir /usr/local/opt/node
ln -s ~/.nodebrew/current/ /usr/local/opt/node/
```

## yarn本体をインストール

- yarnをインストール


nodebrewが選択しているnodeでインストールをする為、オプション付き
(--ignore-dependenciesがunsupportって出るけど、yarn公式のコマンドがそう書いてあるので、無視無視)

```shell:terminal
brew install yarn --ignore-dependencies
```

- 確認

```shell:terminal
yarn -v # 1.22.5
```

# Angular本体をインストール

```shell:terminal
yarn global add @angular/cli
```

# Angular新規プロジェクト作成

- 新規プロジェクト作成


```shell:terminal
ng new [適当な名前]
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS
ここの選択肢は、vimのJキーとKキーで操作。(JK(女子校生)って覚えると良いよ(おい))
```

- AngularMaterialをインストール

一昔前は、自分でtypescript, htmlを編集してアニメーションを有効化したり、Angular Material Iconを有効化していたのですが、今ではそれらが勝手に入る模様。
hammerjsを入れていた気がするのですが、現在では不要になったのかimportされていませんでした。

```shell:terminal
cd [適当な名前]
yarn ng add @angular/material # yarnって打つ必要無いっぽい?
? Choose a prebuilt theme name, or "custom" for a custom theme: Deep Purple/Amber  [ Preview: https:/
/material.angular.io?theme=deeppurple-amber ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
```

# AngularMaterialが動作するか確認

今回は、Mat-Buttonで確認

```typescript: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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// 追記
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule//追記
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

```html:app.component.html
<button mat-button>hoge</button>
```

# まとめ
Windows界の住人とUNIX界の住人の橋渡し役でもあるmacOSを使っているのですが、HomeBrewが便利ですねぇ。
あと、この記事を書きながら全く関係ないことですが、ふと思ったのは、日本の教育も全部macOSかUbuntuにしてくれると、テスト項目でIE11, レガシーEdge, Chrome版Edge, Chrome版EdgeIEモードって一つのOSにしては多すぎる項目を減らせるんですけどねぇ。
GIGAスクール構想で未だにWindowsがある時点で無理な願いなのかもしれません。知らんけど