Vue.jsと比較しながら覚えるAngular -環境構築編- その1

普段、僕はVueを使って開発、運用などの案件をしているのだが
最近、Angularを利用するシーンに出くわしたので頭の整理と共有用に情報を書いていきたいと思う。

# Angularの学習コストを削減したい
学習コストが高いと言われているAngularをどうにか、わかりやすく説明できるように
自分が実際に業務で使っているVue.jsで比較しながら構造を説明していく

なんだかんだ作りながら覚えるのが一番効率がいいということで
とりあえず手を動かしてVue.jsとAngularでモックを作成してみることにする

※学習の前提知識としてVue.jsもしくはSPA開発経験がある人を対象としています。

---

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115335/feef8101-ae4d-e3b0-9a1a-63326ac525ba.png)

---

# コマンドラインツール
Vue.jsのコマンドラインツールには[Vue CLI](https://cli.vuejs.org/)があり
Angularには[Angular CLI](https://cli.angular.io/)がある

コマンドラインツールでは
ディレクトリの作成やSPAでよく利用される**webpackの設定などの大まかな設定を省くことができる**というメリットがある

何はともあれ、まずはコマンドラインツールのインストール

---

```vim:VueCLIのインストール
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```
https://cli.vuejs.org/guide/installation.html


```vim:AngularCLIのインストール
npm install -g @angular/cli
# OR
yarn global add @angular/cli
```
https://angular.io/cli

---

## Vue CLIでプロジェクト作成

```vim:プロジェクト作成
vue create [任意の名前（フォルダ名）]
```

```vim:プリセットの選択
? Please pick a preset: 
  express (router, vuex, dart-sass, babel, eslint) 
  default (babel, eslint) 
❯ Manually select features 
```
**express** はvuexやrouter,sass,babel,lintも含めた構成
**default** はbabel, lintを含めた最小単位の構成
**Manually select feature** は開発者自身で必要な環境をインストールすることを決定する

今回はManually select featureで環境を構築していく

```vim:選択
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
```

- 新しいESを利用したいのでBabel
- ページ遷移するページを作成するのでRouter
- 共通データを保持するためのVuex
- jsのミスタイプを表示してくれるLinter

上記の四点をSpaceキーで選択し、Enterキー

```vim:ルーターをヒストリーモードで表示するか
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 
```

ヒストリーモードを利用しない状態では、urlにハッシュタグがついてとても気持ち悪いので、ヒストリーモードを採用
Yを入力しEnter


```vim:
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
  Stylus 
```

次に、CSSプリプロセッサー何使うかを聞いてくるので
僕が普段利用しているSass/SCSS(dart-sass)を採用

dart sass vs node sassとかあるけど、違いがよくわからんし
dart sass使っていて、ほとんど気になる事はないので考えない

LessやStylusも選択できるけど、今は何も考えない（脳死）

```vim:javascriptのlinterの設定を選択
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
```

Airbnbやスタンダードな記法の設定もできるが、ここも何も考えない
エラーの記述さえ分かれば良いので一番上を選択

```vim:linterの実行タイミング
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
```

これはファイルが保存された時にエラーを確認したいので上を選択

```vim:設定ファイルの記述場所
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
❯ In dedicated config files 
  In package.json 
```

package.jsonに全て書くのは見辛くなるので
それぞれのconfigファイルに記述するように一番上を選択


```vim:将来のプロジェクトとして設定するか
? Save this as a preset for future projects?(y/N)
```

質問の意図がよくわからないけど、
Noにするとrouter.jsのファイルが生成されなかったので
今回はYesでEnterキー

とりあえず、これでVue.jsの開発環境は完了

## Angular CLIでプロジェクトを作成

```vim:プロジェクト作成
ng new --minimal=true --skip-Tests=true [任意の名前(フォルダ名)]
# スタンダードなプロジェクト作成　ng new [任意の名前(フォルダ名)]
```
今回は~~テストの説明が面倒臭いので~~テストファイルは割愛したいので
テストツールとテストファイルを作成しないように設定

|オプション|動作|デフォルト値|エイリアス|
|:--|:--|:--|:--|
| --skipTests=true/false|trueの場合、新しいプロジェクトの「spec.ts」テストファイルは生成されません|デフォルト： false|エイリアス： -S |
| --minimal=true/false|trueの場合、テストフレームワークなしでプロジェクトを作成します。（学習目的のみに使用します。）|デフォルト： false||

https://angular.io/cli/new

```vim:ルーティングを追加するか
? Would you like to add Angular routing? (y/N) 
```

Vue.js同様にページ遷移するサイトを作りたいので
yを選択

```vim:CSSプリプロセッサーは何を利用するか
? Which stylesheet format would you like to use? (Use arrow keys)
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com                                         ] 
```

SCSSが使い勝手がいいのでSCSSを選択

これで終わり


## Angular CLIのgenerate

Angular CLIとVue CLIの大きな違いは

Vue CLIが環境構築の時のvue createぐらいしか利用できないのに比べて
Angular CLIは開発中の必要な設定をコマンドで行えるなどのコマンドの充実さにあると思う
**※これは僕の個人的な見解です**

その中で一番利用頻度が高い``ng generate``について紹介したい

``ng generate``は開発に必要なファイル生成をサポートしてくれるコマンド

例えば、新しくコンポーネントを作成した場合にVueだと
下記のようなVueファイルを複製してファイルの名前やnameの変更を行う必要がある

そこまで大きな手間ではないのだが、地味に面倒臭い

```vue:Template1.vue
<template>
  <div>
    <p>Template</p>
  </div>
</template>

<script>
export default {
  name: 'Template'
}
</script>

<style scoped lang="scss">

</style>

```

一方、Angular CLIではファイルの生成などは
``ng generate``コマンドを利用することによりファイルの雛形を生成してくれる

```terminal
ng generate [生成したい種類] [ファイルパス/ファイル名]
```

試しにAngularのコンポーネントファイルを``sample.component.ts``を生成してみよう

```
ng generate component sample
```

ファイルパスの指定をせずに、実行すると
``src/app``配下にファイルが生成されていることが確認できる

```ts:sample.component.ts
import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}
```

中身を見てみると、最小限に必要なコードが記述されたテンプレートが用意されている

今回は、``ng generate component``を利用したが他にも
様々なファイルを生成することができるので、下記のURLを一読しておくと
開発の手助けになってくれるかも

[Angular CLI - generate](https://angular.io/cli/generate)

# まとめ
Vue CLIに比べて、Angular CLIは設定することが少なくて済んだ印象になった
Vue.jsは色々なパッケージが入れられるぶん、複雑に設定できるようになっているように思われる


次はディレクトリと大まかな構成を比較していこうと思う


[Vue.jsと比較しながら覚えるAngular -構成編- その2](https://qiita.com/masao_keda/private/3c93e40b761eaf6069cd)