この記事は、Heru Susanto氏のブログの抄訳です
Angularは、非常に人気の高い、強力なWebアプリケーション設計フレームワークです。非常に効率的で洗練されたシングルページアプリケーションを作成するための開発プラットフォームです。 Angularは、JavaScriptの強力な型付けされたスーパーセットであるTypeScriptで構築されています。
TypeScriptフレームワークは、Delphiの生みの親として知られるMicrosoftのAnders Hejlsberg氏がプロジェクトを率いていることから、Delphiと親戚関係にあります。Andersは今でもTypeScriptプロジェクトに積極的に参加しています。
TypeScriptは、JavaScriptの欠点を克服するために設計されました。特にDelphiの厳格な型チェックで学んだ教訓を活用し、開発者が誤ってオブジェクトを使用したときにJavaScriptで頻繁に発生する非常に一般的で微妙なエラーを防ぐことを目的としています。
Table of Contents
Angularには、どのような機能がありますか？
- スケーラブルなWebアプリケーションを構築するための、コンポーネントベースのフレームワークです。
- TypeScriptには、ルーティング、フォーム管理、クライアント・サーバー通信など、さまざまな機能をカバーする統合されたライブラリのコレクションが用意されています。
- TypeScriptには、コードの開発、ビルド、テスト、更新を支援する開発者用ツールが用意されています。
Angularを使用すると、開発者が1人のプロジェクトからエンタープライズレベルのアプリケーションまで拡張可能なプラットフォームを利用できます。Angularは、アップデートができるだけ簡単にできるように設計されているため、最小限の労力で最新の開発成果を利用することができます。そして何より、Angularのエコシステムは170万人以上の開発者、ライブラリ作者、コンテンツ作成者からなる多様なグループで構成されています。
AngularとDelphiで何ができるのか
もちろん、Delphiを使用して実行できることはたくさんありますが、そのうちの1つは、Delphiを使用してAngularアプリケーションを提供することです。そこで、Angularを使用して簡単なWebアプリケーションを作成しましょう。 手順は以下の通りです。
(1) Angular CLIのインストール
[crayon-674387f2c11c3407981722/](2) 新しいアプリケーションを作成
[crayon-674387f2c11d2777544833/]詳しいチュートリアルは、https://angular.io/guide/setup-localのWebサイトで参照できます。
(3) アプリケーションのビルド
問題がなければ、以下のコマンドでアプリケーションを実行できます。
[crayon-674387f2c11d4566480580/]しかし、ここでは、Angularアプリケーションが組み込まれたHTTPサーバーを使って実行するわけではありません。そこで、以下のコマンドを実行して、アプリケーションをビルドします。
[crayon-674387f2c11db066689046/]上記のコマンドによってDistフォルダが作成されます。
このブログではHorseをバックエンドとして使用しています。サンプルコードはリポジトリからダウンロードできます。なお、静的ファイルを提供するためには、Horseミドルウェアが必要です。こちらからダウンロードできます。
Delphiのサンプルコードは、以下の通りです。
[crayon-674387f2c11dd862609038/]ここで、Horseアプリケーションがwin32にビルドされるため、dist/webフォルダをWin32/Debugフォルダ以下にコピーします。
(4) Delphiを使用してAngularを実行する
アプリケーションを実行し、Webブラウザでhttp://localhost:8080/index.htmlを表示すると、下図のようにページが表示されます。
このブログで紹介した最新のサンプルコードは、 https://github.com/checkdigits/horse-API-Demo をご覧ください。