Java デベロッパー向けの Angular 入門① - Angular 概要と Java デベロッパーが気になるポイントについて

こんにちは！

テクニカルコンサルティングチームの古堅です。

本記事は Java デベロッパー向けの Angular 入門をテーマにした連載記事の 1 記事目となります。

はじめに

本記事では、Java デベロッパーから見た Angular の概要と、気になるポイントを紹介していきたいと思います。

記事の対象者

Java デベロッパー向けの Angular 入門記事で「Java は分かっている」が「Angular は未経験」という方を対象にしています。

前回、Java デベロッパー向けにフロントエンドフレームワークに関する記事を書いているのでよければ、こちらもご参照ください。

https://blogs.jp.infragistics.com/entry/java-frontend

Angular とは

Google が中心になって開発している JavaScript フロントエンドフレームワークです。

フルスタックでアプリケーションに必要な全ての機能を提供しており、Angular が提供するアーキテクチャに従うことで、高品質なアプリケーションが作成できます。

AngularJS という言葉を聞いたことがある方もいるかと思いますが、Angular の古いバージョンです。
AngularJS は 2021年にサポートが終了します。間違えずに Angular を学習するようにしましょう。

Angular + Java の運用インフラ

基本的なパターン、フロントエンドとバックエンドのサーバーを分ける

フロントエンドは Angular、 バックエンドは Java とした場合、基本的なインフラ構成としては下記のようになります。

Angular はコンパイルすることで、アプリケーションに必要な HTML、CSS、Javascript を一式にまとめることができます。

Angular はブラウザ上で動作が完結するため、Java のサーバーサイドレンダリングのように、サーバーサイドに動的処理を要求しません。

そのため、Angular を配置するサーバーは、静的ファイルを配布する機能がある Webサーバー (Apache HTTP Serverなど) であれば Angular を運用することができます。

徐々に Angular 移行していくパターン、フロントエンドとバックエンドのサーバーが同一

Java サーバー (Tomcat, GlassFish)は勿論、静的なファイルを配布する機能を有している為、Java Server に従来の サーバーサイドレンダリング + Angular のどちらも配置することもできます。

この構成は、部分的に Angular に移行していきたい。というプロジェクトで採用される事がある運用パターンです。

Angular の気になるポイントについて

コードを書くメインツールは Visual Studio Code

Java は、コードを書く際には、IDE (Integrated Development Environment／統合開発環境)の Eclipse 、NetBeans や IntelliJ IDEA などが採用される事が多いですが、Angular はコードエディターである Visual Studio Code の採用が最も多いです。VIsual Studio Code はシンプルで高速なエディターであり、かつ、拡張機能が豊富であり、Angular 開発も快適に行う事ができます。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

https://qiita.com/tkiryu/items/98596eb40a83373af9bd

GUI ではなく CUI ベースの開発

Java の場合、GUI 操作でクラス、コンフィグファイルなどを作成することが多いかと思いますが、Angular の場合、CUI 操作で、コマンドを入力し目的に合わせてファイルを作成していくのが主な流れです。

コマンドを介してファイルを作成する際に、ファイル一式の作成、および、更新が必要なファイルも自動的に更新してくれます。このようなコマンドを標準で提供しているのも、Angular １つで必要なものが全てが揃う、嬉しいポイントですね。

https://angular.jp/cli

コード修正時のオートリロード機能

Java の開発時、コード修正時に画面に、すぐさまサーバに反映させる機能として「オートリロード」がありますが、Angular も同様に、コード修正時に即時に画面反映する機能を有しております。

まとめ

Java デベロッパー向けに、Angular の概要と、気になるポイントついてまとめました。

次回以降の記事では、弊社で公開している以下の Angular 向けのサンプルを参考に、実際に Java + Angular を組み合わせたアプリケーションの構築手順について、チュートリアル形式で進めていきたいと思いますので、是非ご購読ください。

https://igjp-sample.github.io/igniteui-angular-application-template

https://blogs.jp.infragistics.com/entry/2021/01/08/105151?utm_source=ig_marketing&utm_medium=Email&utm_campaign=202101newsletter

Ignite UI for Angular トライアル版を利用するには

インフラジスティックスでは充実した UI コンポーネントライブラリーを収録し、データリッチでレスポンシブなWebアプリケーションをより迅速に構築することを可能にする Ignite UI を開発しており、Angular 対応のIgnite UI for Angular
もリリースしています。

Ignite UI for Angular はトライアル版での試用が可能です。

製品に関する技術的な問い合わせはこちらのページ よりアカウントの作成を行ってください。登録より30日間、弊社のテクニカルサポートをご利用いただくことが出来ますのでお気軽にお問い合わせください。

また、製品をご購入をご検討のお客様はこちらのページより

開発全般に関するご相談はお任せください！

インフラジスティックス・ジャパンでは、各開発プラットフォームの技術トレーニング、コンサルテーションの提供、開発全般のご支援を行っています。

https://jp.infragistics.com/service-and-support/professional-service

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。

お問い合せはこちらからお気軽にご相談ください。

技術サポート・無料オンライン相談会をご利用ください

インフラジスティックスのUI製品は多くの機能を備えているためドキュメントの情報量も多く、なかなかお探しの情報に辿り着けない場合もあります。そういった際はお気軽に技術サポートや、製品導入支援担当との無料オンライン相談会をご予約いただくことで検証時間を節約可能ですので、ぜひご活用ください。

技術サポートへの問い合わせ方法を確認する

無料オンライン相談会を予約する