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

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

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

Nxチュートリアルをやってみた(Create Application)

スポンサーリンク

スポンサーリンク

f:id:ksakae1216:20190615173336p:plain

Nxチュートリアルをやってみた!!

 

その前にNxって何?って人もいるよね。

実は私もこのチュートリアルやる前にそんな状態でした。

プロジェクトで使ってるけど、内容理解してなくて。。。

 

まずはそこから調べて、チュートリアルを進めてきます。

 

 

Nxって何?

まずは公式ページを見てみる。

nx.dev

 

Use Modern Tools

Use Modern Tools

Using Nx, you can add Cypress, Jest, Prettier, and Nest into your dev workflow. Nx sets up these tools and allows you to use them seamlessly. These innovative tools offer a lot of advantages and help you work better and smarter.

 

(翻訳)

Nxを使用すると、開発ワークフローにサイプレス、ジェスト、プリティー、ネストを追加できます。 Nxはこれらのツールをセットアップし、それらをシームレスに使用できるようにします。これらの革新的なツールは多くの利点を提供し、あなたがより良くそしてより賢く働くのを助けます。 もっと詳しく知る

 

Cypressはe2eテストランナー、JestはFacebookが作ったテストランナー、Prettierはコード整形(フォーマット)、NestはNodeJsフレームワーク(サーバー側もTypeScriptで書こうみたいな)です。

 

上記で上げたこれらのツールを使えるようにできるってこと。

 

Build Full-Stack Applications

Build Full-Stack Applications


With Nx, you can build full-stack applications using Angular and Node.js frameworks such as Nest and Express. You can share code between the frontend and the backend. And you can use the familiar ng build/test/serve commands to power the whole

 

(翻訳) 

Nxでは、NestやExpressなどのAngularおよびNode.jsフレームワークを使用してフルスタックアプリケーションを構築できます。フロントエンドとバックエンドの間でコードを共有できます。そして、あなたは全体に力を与えるためにおなじみのng build / test / serveコマンドを使うことができます。 

 

さっき出てきたNestの話ですね。

バックもTypeScriptで書けるのでバックエンドと同じようにコードを書くことができるということです。

フロントとバックが同じTypeScriptで書けるのは開発者にとってだいぶ楽になりますね。

 

Develop Like Google

 

Develop Like Google

With Nx, you can develop multiple full-stack applications holistically and share code between them all in the same workspace. Nx provides advanced tools which help you scale your enterprise development. Nx helps enforce your organization’s standards and community best practices.

 

(翻訳)

Nxを使用すると、複数のフルスタックアプリケーションを総合的に開発し、それらの間でコードをすべて同じワークスペースで共有できます。

Nxはあなたがあなたのエンタープライズ開発を拡大するのを助ける高度なツールを提供します。 Nxは、組織の標準とコミュニティのベストプラクティスを強化するのに役立ちます。

 

正直翻訳しても内容が理解できないですがタイトルは「Googleのように開発する」となってるのできっとGoogleのように開発できるんでしょう。

 

長くなりましたが便利なテストランナー、コードフォーマット、サーバー側もTypeScriptで書けてGoogleのように開発できるのがNxのようです。

 

チュートリアルやってみた(Create Application)

 それではようやくチュートリアルです。

下記ページを参考にチュートリアルを実施してみます。

Step 1: Create Application

 

workspace作成

gistb00f694d843ca15731db67ee2a861f36

 

f:id:ksakae1216:20190615215120p:plain

 

途中で、何回か聞かれます、「CSS」と「empty」を選択しました。

完了するとmyorgディレクトリにとその下にいろいろ作成されます。

f:id:ksakae1216:20190615215806p:plain

 

アプリケーション作成

gist5e5038233f91e707f5774ca6cde4e350

 

f:id:ksakae1216:20190615215819p:plain

 

gist4107c6272f3c99353236c9a915cf69f5

 

f:id:ksakae1216:20190615220109p:plain

 

todoアプリケーションが作成されました。

 

アプリケーション起動

gist1a0e3d91902a78fdee481336d907c6f8

 

localhost:4200に接続すると、アプリが起動されてることがわかります。

f:id:ksakae1216:20190615220533p:plain

 

最後に

このチュートリアルでわかったことは、applicationコマンドでアプリが簡単に作成できたことです。

この後続いてチュートリアルを実施していきたいと思います。

 

github.com