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

技術

f:id:ksakae1216:20190615173336p:plain

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

 

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

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

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

 

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

 

  • Use Modern Tools
  • Develop Like Google
  •  

    Nxって何?

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

    nx.dev

     

    簡単に説明するとAngularアプリケーションを構築できるOSSのツールキットです。

     

    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

     

    【次の記事】

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

    コメント

    タイトルとURLをコピーしました