この記事は、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のインストール

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

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

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

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

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

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

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

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

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

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

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

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