Angularを使ってWebページを作成する(概要)

自己紹介

こんにちは。「たむ」と申します。

昔は組み込み中心に、その後Webシステム中心に、なんでもやってきたシステムエンジニアです。
最近は若手に開発を任せ、管理中心の仕事になっています。

さて、最初としては最近開発で使っているAngularについて話をしたいと思います。

Angularとは

Angular公式サイト

JavaScriptのフレームワークです。
(ソースはTypeScriptを使用)
サンプルソースがいろいろ用意されているので、多少プログラミングの経験があればとっかかりやすいと思います。

• TypeScriptとは

　JavaScriptを拡張したプログラミング言語です。
　(C++やPythonを中心に経験してきた筆者はJavaScriptよりも使いやすいです。)

VSCodeを使用してみます

• VSCodeとは

　Visual Studio Code：Microsoftが開発しているIDE(総合開発環境)です。
　(個人的にはVisualStudioやEclipseより使い勝手は好きです。)

• VSCodeをインストールする

　VSCodeをダウンロードして、インストールします。
　インストールするフォルダも含め、特にデフォルト設定でインストールしてよいです。

Angularをインストールします

VSCodeのコンソールで実行します。
npm install -g @angular/cli

プロジェクトを生成します

VSCodeのコンソールで実行します。
ng new <プロジェクト名>

画面を生成します

VSCodeのコンソールで実行します。
ng generate component ディレクトリ/画面名

1画面あたりのファイル構成
aaa.component.scss　※Webページのデザインの見栄えを記述
aaa.component.html　※Webページの表示の記述
aaa.component.ts　※Webページに関する処理を記述
※ディレクトリも同時に作成してくれます。

共通処理はcommonなどにまとめるようにします。
画面間で受け渡すデータ処理など。

Angularの良いところ

個人的にAngularが良いと思うことは、以下の機能のサンプルがあることです。
・テキスト入力
・複数行テキスト表示/入力
・マスクコントロール
・数値入力
・電卓
・日時
・カレンダー
・リスト
・ドロップダウン
・チェックボックス
・リストボックス
・バッジ
　など・・・・

Wijmoも使ってみました

Wijmoを使うと、以下の機能が使用できます。
・表
・グラフ
・カレンダー
・ツリービュー
　など・・・・

ただ、Wijmoを使用すると処理速度が遅くなりました。(詳細未調査です。)

ひとこと

意味不明なコンパイルエラーが発生した場合は以下のどちらかをやってみると解決できました。
・package-lock.jsonファイルを削除して再度実行
・pom.xml内のバージョンチェック

たむ