🐣

Angularの公式チュートリアルをやっていく　その１ - Introduction

2023/06/11に公開

Angularの公式チュートリアル「はじめての Angularアプリ」をやっていく過程をまとめています。

はじめに

次の案件でAngularを使う事になりそうなので、まずはAngularの公式チュートリアルをやっていくことにしました。
この記事には、その過程や、躓いたことなどがあれば共有していきたいと思い執筆することにしました。

AngularはライバルのReactやVue.jsに比べて人気が落ちるせいか、情報が少なめのため、少しでも参考になればいいなと思っております。

また、全工程を一記事にまとめるとすごい文量になりそうなので、キリの良いところで少しずつ区切っていきます。

ここからチュートリアルを始めていきます。
日本語版でやるか、英語版でやるか迷ったのですが、取り敢えず日本語版でやっていきます。
https://angular.jp/tutorial/first-app

Angularの公式チュートリアルを始めるにあたって、自分のPCに環境構築するか、StackBlitzっていうWebサービスを使ってクラウドで始めるか選べるらしい。

私はせっかくなら環境構築も学びたいので、自分のPCに環境構築する方でいきます。

まずは下記二つのインストールですが、私は既にインストール済みなので省きます。

VSCodeは開発用のエディタ（実質IDE）。
Node.jsはJavaScriptの実行環境のひとつで、JavaScriptで開発を行うならまず必須になるソフトウェアですね。

この二つのインストール方法などはネット上にいくらでも転がっているので、役割や使い方などを知らない方は別途ご自身で調べていただければと思います。

そして次は、Node.jsのバージョンチェックで、ちゃんとインストールされているか確認します。

node --version

すると……

v16.14.2

あれ、結構古いですね？
いま（2023/6/10時点）の安定バージョン18.16.0なんですけど。

……インストールしたの結構前で、バージョンアップもしなかったせいですね。

できれば最新バージョンにしたいところなのですが、いまこのnode.jsは個人開発のNext.jsで使っているし、node.jsのバージョン管理システムを入れるのも面倒臭いのでこのままで行こうと思います。

node.js のバージョンを確認しましょう。特定のバージョンの要件については、package.json ファイルの engines プロパティを参照してください。
[引用元：https://angular.jp/tutorial/first-app]

package.jsonのexportsプロパティ的にも問題なさそうなのでOK！

チュートリアル通りにAngular CLIもインストールしていく。

npm install -g @angular/cli

これは普通に成功。
つぎはいよいよ、Angularのコードを見て行けそうです。