Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
DelphiRAD Studio

強力なAngular WebフレームワークをDelphiアプリケーションで利用する

smartmockups_kq7btd00

この記事は、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を表示すると、下図のようにページが表示されます。
screen-shot-2021-06-20-at-22-18-31

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


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

関連記事
C++DelphiRAD Studio

知らないと“損”をする!? バインディングのキホン

Delphiニュース

JetBrains Developers SurveyによるDelphiに関する調査データ

C++Delphiニュース

DelphiおよびC++Builder 10.4.2 Community Editionがリリースされました!

DelphiRAD Studio

Delphiのローコードで天気予報アプリを作成してみる!

コメント

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

IN THE ARTICLES