お疲れ様です、町田です。

先日vue-cliにGUIでアプリ開発を行えるuiコマンドが追加されました、それに続いてAngularConsoleというプロダクトがNwrlから発表されましたのでそれを試してみたいと思います。

AngularConsoleの概要

開発はGithubのnrwx/angular-consoleで行われており、2018/9/19現在はβ版のようです、概要としては

It allows you to create new projects, install extensions, generate artifacts, build, test, and deploy your projects. Anything you can do with the Angular CLI, you can do with Angular Console. It also gives you a visual overview of your projects.

新しいプロジェクトの作成、拡張のインストール、成果物の生成、ビルド、テスト、デプロイをAngularConsole上からAngularCLIを使用して行うことができ、視覚的なプロジェクトの概要も表示されるようです。

公式ページを見てみると

Spend less time looking up command line arguments, and more time shipping incredible products.

コマンドラインの引数を調べる時間を減らして完成させるまでの時間を減らせるとあります。

 

実際に使ってみる

プロジェクトの作成

公式ページにリンクがあるのでダウンロードします。開くとこんな感じです。

下のダイアログは、開発補助のためにデータを送信してほしい旨です。

続いてcreateタブに移ります。

ここでプロジェクトの初期設定を行います。

1. プロジェクトの親ディレクトリを指定する。
2. ワークスペース名を入力する。
3. Angularプロジェクトの構成を選択する。

となっています。

今回は

1. /Users/m.m/Github/MamoruMachida
2. my-ng-console-app
3. 通常の構成

としています。すべて入力できたら右上のCreateボタンを押します。そうするとコンソールにログが表示され、初期化が済むとプロジェクトの構成が表示されます。

my-ng-cocnsole-appがアプリの本体、my-ng-console-app-e2eがアプリのエンドツーエンドテストです。

 

アプリの立ち上げ

次はServeを押してみます。すると次の画面に移動します。

この画面ではアプリの起動設定ができます。今回は特に設定しないでそのままRunをクリックしてアプリを立ち上げます。

立ち上げに成功すると以下のようなログが表示され、localhost:4200にアプリが立ち上がります。

アクセスするといつものAngularの画面が表示されました。

アプリを終了するときは右上のCancelボタンを押します。

 

コンポーネントの作成

続いてプロジェクトトップにあったGenerateComponentボタンから次の画面に遷移します。

ここではコンポーネントを作成する際の設定が行えます。

Important fieldsと

Optional fieldsです。

というように設定できる値が列挙されています。設定が済んだら右上のGenerateボタンをクリックすると作成されます。

 

AngularConsoleでできるのはここまででした。

その他ビルド設定など

コンポーネントの生成と同様にImportant fieldとOptional fieldを設定後、右上のボタンを押す形になっています。

まとめ

どの動作の設定もオプションが可視化されており、簡単な説明が下に書かれているのでAngularのプロジェクトを始めようといったときにはドキュメントを漁る手間と設定ミスを減らせそうです。

また、プロジェクト一覧もみれるのでモノレポを管理する際にも役立ちそうでした。

AngularConsoleはまだバージョンがbeta2で非公式ということですがこれから更にアップデートが進んでいきそうで、今後も楽しみなプロジェクトです。

 

参考

“Angular Console 6 Beta-2 is Released!”