フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

Nxチュートリアルをやってみた(Step 3 〜 12)

スポンサーリンク

スポンサーリンク

前回記事の続きです。

Nxチュートリアルをやってみた(Add E2E Tests) - フリーランス チャレンジ!!

 

この記事ではチュートリアルのStep3から最後まで一気に紹介します。

今までは、最初だったので1つずつ丁寧に紹介しましたが、大分慣れてきたので各Stepのやること結果をピックアップして紹介。

 

 

 

Step 3: Display Todos

nx.dev

AppComponent.tsにtodos配列を定義。

画面側にもこのtodos配列の内容を表示するよう修正し、Cypressテストを実行、見事パスします。

 

Step4 Connect to API

nx.dev

 

AppComponentクラスにAPIにアクセスするコードを追加して、最後に画面表示です。

APIを受け取って返す処理がないので画面を表示してもコンソールには404 NotFoundが出力されます。

 

Step 5: Add Node Application Implementing API

nx.dev

 

nestアプリケーションを開発できる機能を追加。

nestを使用してAPIを作成して、コードを一部修正。

最後にAPIを起動してブラウザからURLを叩けば結果を返してくれる。

※チュートリアルは"https://localhost:3333/api/todos"となってるが本当は"http"。

  "https"だと表示できないので注意が必要。

 

Step 6: Proxy

nx.dev

 

Step5で作成したAPIのProxy設定を解説。

todos, apiをng serveで起動し画面が表示されることを確認。

APIを作成するまでは、todosはソースに直書きだったものがAPI経由で取得できるようになった。

 

Step 7: Share Code

 

nx.dev

 

todosインターフェースをフロント、バックエンド両方で定義してるのが問題なのでこのステップでインターフェースをシェアするように変更する。

インターフェース格納用のlibディレクトリをコマンドで作成し、インターフェースを定義。

その後、ng serveで画面起動して表示されることを確認。

 

Step 8: Create Libs

nx.dev

 

 UIライブラリを作成してtodosコンポーネントを作成。

 画面はそのコンポーネントの部品を使う感じ。

正直ここのチュートリアルだけだとコンポーネント部分のとこがイマイチ理解しきれない。

 

Step 9: Dep Graph

nx.dev

 

Nxの標準機能で依存関係をブラウザに表示することができます。

 

Step 10: Test Affected Projects 

nx.dev

 

"npm run affected:apps"で変更された内容を調べ、変更の影響を受ける可能性があるアプリを特定する。

 また、変更内容から影響の受ける可能性のある箇所をテストすることもできる"npm run affected:test"

あと、parallelオプションをつけるとtestをパラレルで実行してくれるのでテストがすぐ終わる。

 

Step 11: Build Affected Projects

nx.dev

 

"npm run affected:build"はtodosをビルドするがuiはビルドしない。

 

Step 12: Summary

nx.dev

 

ここまでのチュートリアルでやってきたことを振り返り

 

最後に

この記事でStep3から12まで一気にやってきました。

 

正直チュートリアルやっただけでNxを全て理解することはできませんが、少なくともNxを使えばしっかりしたテンプレートを自動的に作ってくれるのでしっかりした(?)アプリを作成することができる印象です。