普段、僕はVueを使って開発、運用などの案件をしているのだが
最近、Angularを利用するシーンに出くわしたので頭の整理と共有用に情報を書いていきたいと思う。
Angularの学習コストを削減したい
学習コストが高いと言われているAngularをどうにか、わかりやすく説明できるように
自分が実際に業務で使っているVue.jsで比較しながら構造を説明していく
なんだかんだ作りながら覚えるのが一番効率がいいということで
とりあえず手を動かしてVue.jsとAngularでモックを作成してみることにする
※学習の前提知識としてVue.jsもしくはSPA開発経験がある人を対象としています。
コマンドラインツール
Vue.jsのコマンドラインツールにはVue CLIがあり
AngularにはAngular CLIがある
コマンドラインツールでは
ディレクトリの作成やSPAでよく利用されるwebpackの設定などの大まかな設定を省くことができるというメリットがある
何はともあれ、まずはコマンドラインツールのインストール
npm install -g @vue/cli
# OR
yarn global add @vue/cli
npm install -g @angular/cli
# OR
yarn global add @angular/cli
Vue CLIでプロジェクト作成
vue create [任意の名前（フォルダ名）]
? 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で環境を構築していく
? 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キー
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n)
ヒストリーモードを利用しない状態では、urlにハッシュタグがついてとても気持ち悪いので、ヒストリーモードを採用
Yを入力しEnter
? 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も選択できるけど、今は何も考えない（脳死）
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
Airbnbやスタンダードな記法の設定もできるが、ここも何も考えない
エラーの記述さえ分かれば良いので一番上を選択
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit
これはファイルが保存された時にエラーを確認したいので上を選択
? 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ファイルに記述するように一番上を選択
? Save this as a preset for future projects?(y/N)
質問の意図がよくわからないけど、
Noにするとrouter.jsのファイルが生成されなかったので
今回はYesでEnterキー
とりあえず、これでVue.jsの開発環境は完了
Angular CLIでプロジェクトを作成
ng new --minimal=true --skip-Tests=true [任意の名前(フォルダ名)]
# スタンダードなプロジェクト作成 ng new [任意の名前(フォルダ名)]
今回はテストの説明が面倒臭いのでテストファイルは割愛したいので
テストツールとテストファイルを作成しないように設定
| オプション | 動作 | デフォルト値 | エイリアス |
|---|---|---|---|
| --skipTests=true/false | trueの場合、新しいプロジェクトの「spec.ts」テストファイルは生成されません | デフォルト： false | エイリアス： -S |
| --minimal=true/false | trueの場合、テストフレームワークなしでプロジェクトを作成します。（学習目的のみに使用します。） | デフォルト： false |
? Would you like to add Angular routing? (y/N)
Vue.js同様にページ遷移するサイトを作りたいので
yを選択
? 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の変更を行う必要がある
そこまで大きな手間ではないのだが、地味に面倒臭い
<template>
<div>
<p>Template</p>
</div>
</template>
<script>
export default {
name: 'Template'
}
</script>
<style scoped lang="scss">
</style>
一方、Angular CLIではファイルの生成などは
ng generateコマンドを利用することによりファイルの雛形を生成してくれる
ng generate [生成したい種類] [ファイルパス/ファイル名]
試しにAngularのコンポーネントファイルをsample.component.tsを生成してみよう
ng generate component sample
ファイルパスの指定をせずに、実行すると
src/app配下にファイルが生成されていることが確認できる
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を一読しておくと
開発の手助けになってくれるかも
まとめ
Vue CLIに比べて、Angular CLIは設定することが少なくて済んだ印象になった
Vue.jsは色々なパッケージが入れられるぶん、複雑に設定できるようになっているように思われる
次はディレクトリと大まかな構成を比較していこうと思う