この記事は、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のインストール
|
1 |
npm install -g @angular/cl |
(2) 新しいアプリケーションを作成
|
1 |
ng new web |
詳しいチュートリアルは、https://angular.io/guide/setup-localのWebサイトで参照できます。
(3) アプリケーションのビルド
問題がなければ、以下のコマンドでアプリケーションを実行できます。
|
1 |
ng serve --open |
しかし、ここでは、Angularアプリケーションが組み込まれたHTTPサーバーを使って実行するわけではありません。そこで、以下のコマンドを実行して、アプリケーションをビルドします。
|
1 |
ng build |
上記のコマンドによってDistフォルダが作成されます。
このブログではHorseをバックエンドとして使用しています。サンプルコードはリポジトリからダウンロードできます。なお、静的ファイルを提供するためには、Horseミドルウェアが必要です。こちらからダウンロードできます。
Delphiのサンプルコードは、以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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 をご覧ください。
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
