この記事は、Heru Susanto氏のブログの抄訳です

Angularは、非常に人気の高い、強力なWebアプリケーション設計フレームワークです。非常に効率的で洗練されたシングルページアプリケーションを作成するための開発プラットフォームです。 Angularは、JavaScriptの強力な型付けされたスーパーセットであるTypeScriptで構築されています。

TypeScriptフレームワークは、Delphiの生みの親として知られるMicrosoftのAnders Hejlsberg氏がプロジェクトを率いていることから、Delphiと親戚関係にあります。Andersは今でもTypeScriptプロジェクトに積極的に参加しています。

TypeScriptは、JavaScriptの欠点を克服するために設計されました。特にDelphiの厳格な型チェックで学んだ教訓を活用し、開発者が誤ってオブジェクトを使用したときにJavaScriptで頻繁に発生する非常に一般的で微妙なエラーを防ぐことを目的としています。

Angularには、どのような機能がありますか？

• スケーラブルなWebアプリケーションを構築するための、コンポーネントベースのフレームワークです。
• TypeScriptには、ルーティング、フォーム管理、クライアント・サーバー通信など、さまざまな機能をカバーする統合されたライブラリのコレクションが用意されています。
• TypeScriptには、コードの開発、ビルド、テスト、更新を支援する開発者用ツールが用意されています。

Angularを使用すると、開発者が1人のプロジェクトからエンタープライズレベルのアプリケーションまで拡張可能なプラットフォームを利用できます。Angularは、アップデートができるだけ簡単にできるように設計されているため、最小限の労力で最新の開発成果を利用することができます。そして何より、Angularのエコシステムは170万人以上の開発者、ライブラリ作者、コンテンツ作成者からなる多様なグループで構成されています。

AngularとDelphiで何ができるのか

もちろん、Delphiを使用して実行できることはたくさんありますが、そのうちの1つは、Delphiを使用してAngularアプリケーションを提供することです。そこで、Angularを使用して簡単なWebアプリケーションを作成しましょう。 手順は以下の通りです。

(1) Angular CLIのインストール

npm install -g @angular/cl

(2) 新しいアプリケーションを作成

ng new web

詳しいチュートリアルは、https://angular.io/guide/setup-localのWebサイトで参照できます。

(3) アプリケーションのビルド

問題がなければ、以下のコマンドでアプリケーションを実行できます。

ng serve --open

しかし、ここでは、Angularアプリケーションが組み込まれたHTTPサーバーを使って実行するわけではありません。そこで、以下のコマンドを実行して、アプリケーションをビルドします。

ng build

上記のコマンドによってDistフォルダが作成されます。

このブログではHorseをバックエンドとして使用しています。サンプルコードはリポジトリからダウンロードできます。なお、静的ファイルを提供するためには、Horseミドルウェアが必要です。こちらからダウンロードできます。

Delphiのサンプルコードは、以下の通りです。

program horse1;

{$APPTYPE CONSOLE} {$R *.res}

uses
  Horse, Horse.ServerStatic, System.SysUtils,
  index in 'approutesindex.pas', employee in 'approutesemployee.pas';

begin
  try
    THorse.Use(ServerStatic('web'));
     with THorse.Group.Prefix('/apis')
    do
    begin
      Route('/').Get(index.API_Index);
      Route('/employees').Get(employee.Get_Employees);
      Route('/employees/:id').Get(employee.Get_Employee);
    end;
    THorse.Listen(8080,
      procedure(Horse: THorse)
      begin
        Writeln(Format('Server is runing on %s:%d', [Horse.Host, Horse.Port]));
      end);
  except
    on E: Exception do
      Writeln(E.ClassName, ': ', E.Message);
  end;
end.

ここで、Horseアプリケーションがwin32にビルドされるため、dist/webフォルダをWin32/Debugフォルダ以下にコピーします。

(4) Delphiを使用してAngularを実行する

アプリケーションを実行し、Webブラウザでhttp://localhost:8080/index.htmlを表示すると、下図のようにページが表示されます。

このブログで紹介した最新のサンプルコードは、 https://github.com/checkdigits/horse-API-Demo をご覧ください。