Angular のコンポーネント組み合わせで、IDEっぽいものを作ってみる

Angular のコンポーネント組み合わせで、IDEっぽいものを作ってみる

Angular には Material Component がたくさん用意されていますので、コピペである程度のGUIを開発していくことができます。

今回は、SideNavMonaco-Editorを使用して、エディターっぽいGUIを開発してみます。

※中身の実装はしていませんので、GUIで動くところだけです。

1. 完成イメージ

右側にVisual Studio Codeライクなエディタを配置し、左側にフォルダツリーを表示します。フォルダツリーはトグルボタンで、表示と非表示を切り替えることができるようにしています。

2. 構成

ものすごくわかりにくいですが、コンポーネント構成はこんな感じです。

Material Design の Drawer と SideNav で大枠を作成し、左側のフォルダツリーは Tree コンポーネントを使用しています。また、右側のエディタは Monaco Editor を使用しました。

3. コンポーネント作成

以下のコマンドで、Angular コンポーネントを作成します。

ng generate component EditorArea

今回は EditorArea というコンポーネントを作成します。

4. Drawer SideNav 配置

https://material.angular.io/components/sidenav/overview

MatSidenavModule が必要ですので、app.module.ts に追加します。

HTML は以下のように書きました。

``html <mat-drawer #drawer class="sidenav" mode="side">

File Folder Tree

Editor


5\. Visual Studio Code ライクエディタ
------------------------------

Monaco Editor というオープンソースのJavascript ライブラリを使用します。

[](https://github.com/atularen/ngx-monaco-editor)[https://github.com/atularen/ngx-monaco-editor](https://github.com/atularen/ngx-monaco-editor)

上記の github のページのとおりにパッケージをインストールしていきます。

`editor-area.component.ts` ファイルに以下を記述します。

```ts
      editorOptions = {theme: 'vs-dark', language: 'javascript'};
      code: string= 'function x() {\nconsole.log("Hello world!");\n}';

HTML は以下のようになります。

        <ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

6. フォルダツリー

Material Design の Tree コンポーネントを使用します。

https://material.angular.io/components/tree/overview

MatTreeModule が必要ですので、app.module.ts に追加します。

ほぼサンプルのコピーですが、HTML は以下のようにしました。

        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
          <!-- This is the tree node template for leaf nodes -->
          <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
            <!-- use a disabled button to provide padding for tree leaf -->
            <button mat-icon-button disabled></button>
            { {node.name}}
          </mat-tree-node>
          <!-- This is the tree node template for expandable nodes -->
          <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
            <button mat-icon-button matTreeNodeToggle
                    [attr.aria-label]="'toggle ' + node.name">
              <mat-icon class="mat-icon-rtl-mirror">
                { {treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
              </mat-icon>
            </button>
            { {node.name}}
          </mat-tree-node>
        </mat-tree>

メニュー構成は以下のように定義します。

        const TREE_DATA: FoodNode[] = [
            {
                name: 'Sample Project',
                children: [
                {name: 'index.js'},
                {name: 'config.json'},
                {name: '.gitignore'},
                ]
            }
        ];

サンプルどおりにその他もろもろをコーディングしていきます。

7. フォルダツリーの表示/非表示のトグルボタン

表示/非表示のトグルは drawer.toggle() 関数で出来ます。

HTML に以下のように書けば実装できると思います。

        <button type="button" mat-button (click)="drawer.toggle();" id="ToggleTreeButton">
        { {ToggleLabel}}
        </button>

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱