Angularのインストールとプロジェクト作成

はじめに

これからWebアプリケーションを作成する業務に携わることになり、
SPA系の技術に触れたことがなかったため下調べの上Angularを導入してみることにしました。
導入に関しては@seteen様のAngular入門を参考にさせていただきました。

導入にあたって調べた単語

Node.js

サーバーサイドでJavaScriptを使えるようにするモノ(環境)
※Node.js を5分で大雑把に理解する

nodist

Node.jsのバージョン管理ができる。コマンドでNode.jsのバージョン変更・更新等が可能

npm

Node.jsのパッケージマネージャー。
nodistでバージョンを指定し、npmでバージョンに紐付いたパッケージを引っ張ってくる
処理としてはコマンドでpackage.jsonの設定を作成しているらしい
※npmでnode.jsのpackageを管理する

yarn

npmより後で出てきたパッケージマネージャー。
Facebook等の開発者がnpmの不満なところを改善して使いやすくした物らしい(詳細な言及はしません)
※yarn 日本語概要

Angular

Google開発のWeb開発用フレームワーク。React・vueなどと違いUIだけでなくフルスタックなことと、
前述の2個とは異なりTypeScriptの習得が必須になることから学習コストが高い。
※JavaScript: フレームワーク React/Vue/Angularについて

Angularの導入・インストール

nodistを導入し、Node.jsの最新化

参考：[Node.js] Node.js の導入(Windows編)

1.nodistのGitHubからインストールファイルを取得しPCにインストール(場所は任意でOK)

　https://github.com/marcelklehr/nodist

2.nodistが導入できているか確認($nodist -v)

　インストールできるnodeのバージョンを確認($nodist dist)

3.Node.jsの最新バージョンをインストールする($nodist + v00.0.0)

Angular CLIの導入

4.AngularCLIをyarn経由で導入($yarn global add @angular/cli)

エラーでインストールできず

Node.jsのバージョンがインストール時に変更されていなかった

nodist installを実行した後、バージョン変更をしていなかったことが原因？

5.nodistを使いAngular対象のNode.jsに変更した上でAngularCLIを導入する

$nodist v00.0.0の記法だとインストールされていないバージョンをインストールするか、
インストール済の場合バージョン名を表示するだけのようなので、$nodist 00.0.0の形式で記述して
Node.jsのバージョンを指定したバージョンに変更する。
(ここだとNode.jsのバージョンがAngularCLIの対象外だったため、インストールが実施されていなかった)

※Nodist を使って、Node.js のバージョン管理を行う方法【 Nodist 導入編 】
　

6.AngularCLIのバージョンを確認し、インストールできているか確認($ng version)

Angularのプロジェクト作成

ここまで実行できていれば下記コマンドで自動プロジェクト作成、自動ビルドの上ブラウザが開きます。

7.AngularCLIコマンドでプロジェクトを作成($ng new [プロジェクト名])

8.作成したプロジェクトのディレクトリに移動し、プロジェクトの起動($ng serve —-open)

できた！

終わりに

・単語が結構曖昧だったため、まとめたことで関連記事が読み進めやすくなった。
　疑問点が出たらすぐ調べたほうが後で頭の中で情報がつながるのですぐ調べるのは大事ですね！

・管理するパッケージが多いので作りながら差異についてはなれていく必要があると思いました。
　実用する場合LTSやTSの対応等も考える必要が出てくるので、ある程度作成できたら
　導入コストの低いReact/vueとも比較して行けたらと思います。