Zenn
Open17

Angularの新しいチュートリアルをやっていく

Angular
#
tutorial
hoshimahoshima

レッスン 1 - Hello world(https://angular.jp/tutorial/first-app/first-app-lesson-01)
やること：Hello worldを表示する

StackBlitzも準備されてるけど、ローカルのVSCode上でやっていく

ng newから始めるんじゃなくてコードをダウンロードしてきてスタートなんだ

ng serveしたときにアナリティクスの同意が出てくることについて書いてないのは初心者が混乱しそう

.e2e はアプリケーションのテストに使用されるファイルがあります。
.node_modules はアプリケーションが使用する node.js のパッケージがあります。

ダウンロードしてきたコードのディレクトリ名はそれぞれe2eとnode_modulesだった
最初の.って必要か？

app.component.ts の AppComponent クラス定義で、title 行を次のコードに置き換えて、コンポーネントのタイトルを変更します。

ここで指定したtitle変数どこからも使ってなくない？

title と body に Hello world が表示されることを確認します。

bodyにはHello world!を、titleにはHomesをそれぞれ指定したはず
bodyはまだしもtitleはなんかおかしくない？

この章はやっててかなり違和感があった

hoshimahoshima

レッスン 2 - Home コンポーネントの作成(https://angular.jp/tutorial/first-app/first-app-lesson-02)
やること：コンポーネント作成、ヘッダーと検索ボックスの追加

standaloneが出てきた！
よく見たらレッスン1で存在してたコンポーネントもstandaloneだった
もう全部standaloneになっていくんだなぁ

レッスン 1では、AppComponent を更新しましたが、その機能は他のすべてのコンポーネントを含みます。

なんか違和感のある表現と思ったら、英語版はごっそり文章変わってそう？

おしゃれなパーツはできるけど、解説がない長めのHTMLとcssをコピペするのは罪悪感がある

hoshimahoshima

レッスン 3 - HousingLocation コンポーネントの作成(https://angular.jp/tutorial/first-app/first-app-lesson-03)
やること：コンポーネント作成

この章はコンポーネントを作るだけ、実装は次回っぽい

完成イメージ画像と実際の結果でhousing-location works!のフォントが違ってヒヤっとした（イメージ画像はセリフ、実際の結果はサンセリフだった

hoshimahoshima

レッスン 5 - コンポーネントに入力パラメータを追加(https://angular.jp/tutorial/first-app/first-app-lesson-05)
やること：@Input()を子コンポーネントに置く

@Input()が出てきた
リンクされてるAngular 日本語ドキュメンテーション - ディレクティブとコンポーネントの親子間でのデータ共有がすごい重要そうなので、一通りチュートリアル終わったら読み直すほうがいいかも

hoshimahoshima

レッスン 7 - コンポーネントのテンプレートに補間を追加(https://angular.jp/tutorial/first-app/first-app-lesson-07)
やること: 「補完」を使う

{{ hoge }}←html上のこれのことを「補完」って言うことを初めて知った…

手順通りにやってるけど、写真が表示されない…？（assetsフォルダに画像ファイルが存在しない）（記事末尾のStackBlitzもzipファイルも画像ファイルが無い）
→英語版のStackBlitzではレッスン4で設定するファイル名が変わってたので、翻訳が更新されたら治る予感

hoshimahoshima

Lesson 8 - Use *ngFor to list objects in component(https://angular.jp/tutorial/first-app/first-app-lesson-08)
やること: データセットの追加、ngForディレクティブを使う

執筆時点ではここから日本語未翻訳

ngIfより先にngForの学習なんだ
なんとなくifよりforのほうがあとの印象がある

レスポンシブ対応されててすごい良さそうな雰囲気だけど、
レッスン7と同じで画像が表示されないのでつらい

hoshimahoshima

lesson 09 - Angular services(https://angular.jp/tutorial/first-app/first-app-lesson-09)
やること: serviceを使う

コンポーネントが持ってたロジックをサービスに移譲する、実際によくやる作業みたいなステップ

やることがちょっと複雑化してきて楽しくなってきた

「今は固定の配列を表示してるけど、今後のステップでAPIから取得するようにするよ」って書いてるので、今後が楽しみになってきた

hoshimahoshima

Lesson 10 - Add routes to the application(https://angular.jp/tutorial/first-app/first-app-lesson-10)
やること: ルーティングの追加

ページの遷移まではやらない（まだ１画面しかない）ため、ルーティングの下準備って感じ

新チュートリアルでAppRoutingModuleやRouterModule.forRoot()が無くなってるのは新鮮
RouterModule.forRoot()とRouterModule.forChild()、最後までよく分からなかったな…

ルーティング機能、ng newのときにONにすることがほとんどなので、ゼロから追加していくのは不思議な感覚

hoshimahoshima

Lesson 11 - Integrate details page into application(https://angular.jp/tutorial/first-app/first-app-lesson-11)
やること: 詳細ページを作成する、詳細ページへのルーティング、トップページへのルーティング

所要時間を見るに、おそらく過去最大のページ？

HousingLocationComponentのimportにRouterModuleいつの間に追加した！？
レッスン10でHomeComponentにはRouterModuleを追加したけど、レッスン11ではそれがHousingLocationComponentにも存在するていで進む。謎。
ちなみにレッスン最後のStackBlitzでは、HomeComponentにはRouterLinkとRouterOutletをimportしていることになっている。謎。

依存性の注入にconstructorじゃなくてinject関数使ってる…
最近見かけるようになった手法がさっそくチュートリアルに導入されててびっくり

ステップ3のDetailsComponent、今までのAngularならngOnInitでやってそうなパスパラメータやデータの取得処理をconstructorでやってるのはどういう意図や手法の変化があったんだろうか
constructorに処理を書くことは基本的にNGくらいの扱いなんだと思ってたのに

hoshimahoshima

lesson 12 - Adding a form to your Angular app(https://angular.jp/tutorial/first-app/first-app-lesson-12)
やること: フォームを追加する、submitしたフォームのデータがconsoleに表示される

ToHのときは最初にフォームだったのに、first-appのフォームは終わり際のおまけみたいな扱いになってる
あと、ToHのときはテンプレート駆動フォームだったのにfirst-appではリアクティブフォームになってる
このへんはAngularにおけるフォーム機能の基本的な考え方が変わったりしたのだろうか...？

<form>のsubmitイベントを使ってるけど、これを選んだ理由が知りたい
普段<form>内の<button type="button">のclickイベントでpostしてるのだけど、なにか違いがあったりするのだろうか
Enterキーのときの挙動くらい？

hoshimahoshima

Lesson 13 - Add the search feature to your app(https://angular.jp/tutorial/first-app/first-app-lesson-13)
やること: 検索機能を追加

step1-2 またconstructorに処理を書いてる…もうそういう時代なのかな

step3-1 ToHのときの検索機能はバックエンド側でやってたけど、first-appではフロントエンド側でフィルタリングするのか

hoshimahoshima

Lesson 14 - Add HTTP communication to your app(https://angular.jp/tutorial/first-app/first-app-lesson-14）
やること: WebAPIとHTTP通信する

最後の章。

step1-1 ToHのとき利用してたangular-in-memory-web-apiは2023年1月にアーカイブされたため、json-serverというライブラリを使っている。
新しいライブラリのほうがシンプルで使いやすそうな印象。

step2-1-c fetch使ってる！HttpRequestじゃない！！
以下のような文があるので、fetchのほうが手軽だからチュートリアルではこっち使う的なイメージなんだろうか

For more advanced use cases consider using HttpClient provided by Angular.
より高度な使用例については、Angularが提供するHttpClientの使用を検討してください。

step3-1 awaitじゃなくてthen使ってるのはなぜなんだろう

Lesson review 「次はToHをやってみよう」的なことが書いてある。それはいいのか…？？？

hoshimahoshima

今までのAngularならngOnInitでやってそうなパスパラメータやデータの取得処理をconstructorでやってるのはどういう意図や手法の変化があったんだろうか
https://zenn.dev/link/comments/23eecb4b940ffd

takeUntilDestroyed()が話題になったくらいに知った概念なのだけど、v16から出てきたインジェクションコンテキストが関係あるのかなと思うなどした
インジェクションコンテキストのconstructorとライフサイクルのngOnInitは使い分けるべき、みたいなパラダイムシフトが知らない間に発生していたのかもしれない