【#1】Angularのチュートリアルをベースに個人開発してみた（環境構築でエラー多発。）

皆さんこんにちは、こちょすです。

最近仕事が忙しく、記事が書けていませんでした。

これまでPythonでいろいろとツール開発をしたり、DjangoやFlaskを使ってアプリ開発をしてきたのですが、このたび仕事でAngularが必要になりそうなので、TypeScriptのフレームワークであるAngularを勉強することにしました。

といっても、TypeScriptもよくわからないしもちろんAngularも初めて触るのでまったくの初心者と言うことになります。（全力でハードルを下げにいく）

そんな僕がAngularを勉強するにあたってまず初めにやるやってみようと思ったのがv公式サイトのチュートリアルです。

とは言えただ単にチュートリアルをコピペしても面白くないので、チュートリアルをベースに自分なりに文言やクラス設計を変えつつサービスを作っていきたいと思います。

アプリケーション概要

今回作るアプリケーションは、キャンプ場の一覧サイトです。

僕はここ数年キャンプにどハマりしていてITの勉強もそこそこに、日々テントで焚火やコーヒーを飲んでばかりいるのですが、その時に行ったキャンプサイトを記録に残しておきたいという想いで作ることにしました。

このアプリケーションでできること

・ダッシュボード機能・・・お気に入りのキャンプサイトに飛ぶためのカードを設置

・キャンプサイト一覧機能・・・これまで行ったキャンプサイトの情報を一覧にする。

・キャンプサイト詳細機能・・・それぞれのキャンプサイトの詳細を表示する。キャンプ場名称はこの画面から変更可能。

画面遷移図

画面遷移図はこんな感じ。

ヘッダー部にはダッシュボードとキャンプ場一覧に飛べるボタンを設置

ダッシュボードには人気のキャンプ場一覧を表示

一覧画面やダッシュボードから、具体的なキャンプ場のリンクをクリックすると、詳細ページに遷移

詳細ページではキャンプ場名称は変更可能にしています。

キャンプ場一覧_画面遷移図

画面イメージ

ダッシュボードはこんな感じ。シンプルに4つだけ表示することにします。

キャンプ場一覧_ダッシュボード

一覧ページはリスト形式で今まで行ったことのあるキャンプ場を羅列。

キャンプ場一覧_リスト

詳細画面は最低限の情報だけを一旦実装します。

キャンプ場一覧_詳細

使用技術

以下はng versionのコマンドで取得したAngular関連のバージョン情報。

・Angular CLI: 13.0.0
・Node: 16.10.0
・Package Manager: npm 8.19.2
・OS: darwin x64

「Warning: The current version of Node (18.12.1) is not supported by Angular.」って出たけど、一旦忘れて次へ進む。（笑）

追記：結局気になってしまって、以下にしました。👇

Angular CLI: 14.2.10
Node: 16.10.0
Package Manager: npm 7.24.0
OS: darwin x64

プロジェクトを作る

コンソールから、以下のコマンドを実行

 command
ng new admin-app

ng newコマンドでプロジェクトを生成できる。ここの名前は適当だけど、もっとキャンプっぽい名前にしてもよかったな。

ルーティングとCSSはとりあえず以下で進める。

・? Would you like to add Angular routing? No
・? Which stylesheet format would you like to use? CSS

以下が出たので、どうやらうまくいったみたい。

✔ Packages installed successfully.
Successfully initialized git.

初期化が終わったら、VSCODEを開き直す。

プロジェクトを起動

以下のコマンドを打つ。

 command
npm start

これは、ng newで作成されたディレクトリ内にある、package.jsonにある、Scriptに定義されているコマンド。

ng serveに該当して、以下のようなことをやってくれる。

・アプリケーションのビルド

・ローカルサーバーの立ち上げ

・変更監視

実行すると、package.jsonが見当たらないということで、エラーになった。

 command
kochos ~/Desktop/Programming/angular/camp $ npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/kochos/Desktop/Programming/angular/camp/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/kochos/Desktop/Programming/angular/camp/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kochos/.npm/_logs/2022-12-04T22_42_49_341Z-debug-0.log
kochos ~/Desktop/Programming/angular/camp $

どうやらnpmのバージョンによるものらしい。

以下のpackage.jsonで、nodeのバージョンを見てみると、「"node": "^12.20.0 || ^14.15.0 || >=16.10.0",」となっているので、nodeのバージョンを18系にしちゃっているのがダメそう。

https://github.com/angular/angular/blob/13.0.0/package.json

ということで、nodeを15.10.0まで落としてみる。

 command
kochos ~/Desktop/Programming/angular/camp $ node -v
v18.12.1
kochos ~/Desktop/Programming/angular/camp $ nodebrew ls
v15.1.0
v18.12.1
current: v18.12.1
kochos ~/Desktop/Programming/angular/camp $ nodebrew use 15.1.0
use v15.1.0
kochos ~/Desktop/Programming/angular/camp $ node -v
v15.1.0

npmのバージョンを変更すると、Angularが使えなくなるので、再度Angularのインストールをする、

以下のエラーが出た。

「Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en」

ネットで調べると、どうやら16系にすればうまくいくらしいコメントあり。

https://github.com/nodejs/help/issues/3602

次はnodebrewで16系にして、やってみる。

やっぱり同じエラーが出てしまう。何か自分は勘違いしているのかもと思い、再びググってみる。

すると、以下のstackoverflowを見つけた。package-jsonがある場所じゃないところから起動したいというお話に見える。

https://stackoverflow.com/questions/37078968/how-to-specify-the-path-of-package-json-to-npm

つまり、普通はpackage.jsonのあるフォルダから起動する必要があるということか！

ということで、cd admin-appで移動して、ふたたびnpm start。

 command
Build at: 2022-12-05T22:35:15.554Z - Hash: b07b11b4168a350a - Time: 9454ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.

うまくいった！よかったー。

早速画面開いてみる。

angular最初の起動画面