Angularアプリケーションを構築するには？
Angularは、ダイナミックでレスポンシブな複雑なウェブアプリケーションを構築するための、人気のあるオープンソースのフレームワークである。Angularは2010年にGoogleによって “AngularJS “という名前で最初に開発された。
Angularを使えば、すっきりと整理されたコード構造で、動的な単一ページのアプリケーションを作成できる。
AngularはJavaScriptのスーパーセットであるTypeScriptを使用しており、型チェック、インターフェース、クラスなどの機能を言語に追加している。これにより、Angularのコードはより保守しやすくなり、エラーが発生しにくくなる。
Angularを使ったウェブ開発を効率化するには、Back4appのようなBaaS（Backend-as-a-Service）ソリューションを使うと便利です。
Back4appは、認証、データストレージ、サーバーサイドロジックなどの機能を備えた、あらかじめ構築されたバックエンドインフラストラクチャを提供します。
これにより、バックエンド開発の複雑さを心配することなく、アプリケーションのフロントエンドの構築に集中することができる。
この記事では、Angularを探求し、AngularとBack4appを使って基本的なブログアプリケーションを構築する。
Contents
Angularの利点
Angularはその多くの利点により、開発者の間で人気を博している。ここではAngularの主な利点をいくつか紹介します：
双方向データバインディング
双方向データバインディングは、Angularアプリケーションの品質を高める、時間節約と生産性向上の機能です。双方向データバインディングにより、モデル（データ）への変更が自動的にビュー（UI）に反映されます。
モデルへの変更は即座にビューに反映されます。これにより、複雑で動的なアプリケーションの開発がより簡単かつ迅速になり、モデルとビューを同期させるために定型的なコードを書く必要がなくなります。
依存性の注入
依存性注入は、コンポーネントやサービス間の依存関係を簡単に管理できるAngularの重要な機能です。依存性注入は、Angularアプリケーションの信頼性、保守性、テスト容易性を高める強力な機能です。
Angularの依存性注入は、コンポーネントやサービスが他のコンポーネントやサービスとの依存関係を宣言することを可能にします。依存性注入システムは、これらの依存関係を自動的に作成し提供するタスクを引き継ぎます。これにより、依存関係を手動で作成・管理する必要がなくなり、エラーのリスクを減らすことができます。
Angularの依存性注入システムは、依存関係を簡単に管理し、書くべきコードの量を減らします。
コンポーネント・ベースのアーキテクチャ
Angularのコンポーネントベースのアーキテクチャは、再利用可能な小さなコンポーネントに分解することで、複雑なユーザーインターフェイスを簡単に構築できます。
コンポーネントは、さまざまなアプリケーション部分で簡単に再利用できる。コンポーネントは独立して開発できるため、多くの可動部分を持つ複雑なアプリケーションの管理が容易になる。このアーキテクチャでは、コンポーネントを分離して個別にテストできるため、コードのテストやデバッグも容易になります。
タイプスクリプト
TypeScriptはJavaScriptのスーパーセットであり、JavaScriptに静的型チェック、インターフェース、クラス、その他の機能を追加したものである。Microsoftによってメンテナンスされているオープンソースの言語であり、大規模なWebアプリケーションの開発によく使われている。
AngularはTypeScriptで書かれている。これにより、より優れたツールと、より堅牢な開発体験が提供される。TypeScriptの静的型付けにより、開発者は実行時ではなくコンパイル時にエラーを検出できるため、コードの保守やリファクタリングが容易になる。
大規模コミュニティ
Angularには大規模で活発な開発者コミュニティがあり、それはいくつかの理由で非常に貴重なものとなる。
大規模なコミュニティはチュートリアル、ドキュメント、フォーラムなど多くのリソースを提供しています。これらのリソースはAngularを初めて使う開発者や、特定の問題に対する解決策を探している開発者にとって非常に役立ちます。
コミュニティが大きいということは、多くの開発者がAngular用のサードパーティプラグインや拡張機能を作成し共有することで、フレームワークの改善に積極的に取り組んでいるということです。既存のコードを活用してプロジェクトに新しい機能を追加できるため、時間と労力を節約できます。
Angularの限界
Angularはウェブアプリケーションを構築するための強力で人気のあるフレームワークですが、注意すべき制限もあります。Angularの制限には以下のようなものがあります：
急な学習曲線
Angularはウェブ開発に多くの新しいコンセプトやアプローチを導入しているため、開発者によっては習得が難しいかもしれません。モジュール、コンポーネント、サービス、依存性注入、リアクティブプログラミングについて学ぶのに多くの時間を費やす必要があるかもしれません。
大きいサイズ
Angularは他のフロントエンドフレームワークと比べて比較的大きなフレームワークです。Angularのサイズが大きいのは、フォームハンドリング、ルーティング、データ管理などの多くの組み込み機能を含む、その広範な機能セットによるところが大きい。
Angularのサイズが大きいと、ウェブアプリケーションのロード時間が遅くなり、ユーザーエクスペリエンスに悪影響を与える可能性があります。これは特に遅いインターネット接続のユーザーに当てはまります。
Angularのサイズが大きいと、複雑なプロジェクトの開発や保守が難しくなる可能性がある。
限定SEO
AngularのSEO機能が限られているのは、主にシングルページアプリケーション（SPA）フレームワークであるためだ。SPAは完全にブラウザで動作するように設計されており、HTMLコードはJavaScriptを使って動的に生成されます。そのため、検索エンジンのクローラーがAngularを使ったウェブサイトのコンテンツを正確にインデックスすることが難しくなります。
ブログアプリケーションの構築
Angularアプリケーションを作成し、名前を “blog-application “とします。Angularアプリケーションを作成するには、ターミナルのプロジェクトのディレクトリで以下のコマンドを実行します：
ng new blog-application
Angularアプリケーションを作成したら、2つのコンポーネントを作成します。2つのコンポーネントはhomeコンポーネントとpostコンポーネントになります。コンポーネントを作成したら、コンポーネントをルーティングします。
コンポーネントを生成するには、以下のコマンドを実行する：
cd blog-application
ng generate component home-component
ng generate component post-component
コンポーネントを生成したら、app-routing.module.tsファイルでルーティングを設定する。
こんな感じだ：
//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';
import { PostComponentComponent } from './post-component/post-component.component';
const routes: Routes = [
{path: '', component: HomeComponentComponent},
{path: 'post', component: PostComponentComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
上のコードブロックは、routes配列に2つのルートを定義している。HomeComponentComponentのルートには空のパスがあります。空のパスは、アプリケーションをレンダリングするとすぐにHomeComponentComponentが表示されることを意味します。
PostComponentComponentルートは、パスが「post」で定義されています。つまり、このルートに移動すると、PostComponentComponentがレンダリングされ、ビューに表示されます。
指定されたルートにナビゲートするために、アプリケーションにヘッダーを追加します。ヘッダーはapp-component.htmlファイルに作成します。ヘッダーには、異なるルートにナビゲートする要素が含まれます。
例えば、こうだ：
<!--app.component.html-->
<div>
<div class="header">
<a routerLink=""><h2>Blog</h2></a>
<a routerLink="post"><button>write</button></a>
</div>
<router-outlet></router-outlet>
</div>
ヘッダーdivは2つの子アンカー要素を含んでいます。アンカー要素はh2要素とbutton要素を包んでいます。h2要素をクリックするとデフォルトルートに移動し、button要素をクリックするとpostルートに移動します。ルーター・アウトレットは、ルーティングされたコンポーネントをヘッダー div の下に表示します。
ヘッダーを作成したら、app-compnent.scssファイルでヘッダーのスタイルを設定します：
/* app.component.scss*/
.header{
display: flex;
justify-content: space-between;
padding: 1rem 0;
}
Back4Appの統合
Back4appでアプリケーションを作り始めるには、まずアカウントを持っていることを確認してください。Back4appのアカウントを持っていない場合は、提供される指示に従ってください：
- Back4appのウェブサイトへ。
- ホームページの右上にあるサインアップボタンをクリックしてください。
- 登録フォームに必要事項をご記入の上、送信してください。
登録が完了したら、Back4appアカウントにログインし、以下の手順に従ってください：
- 右上にある「NEW APP」ボタンをクリックします。
- 希望のアプリ名を入力するフォームが表示されます。
- アプリ名を入力し、CREATEボタンを選択すると、アプリの作成プロセスが開始されます。
CREATE（作成）」ボタンをクリックすると、アプリケーションが作成され、アプリケーションのダッシュボードに移動します。
アプリケーションをBack4appに接続する
作成したAngularアプリケーションをBack4appアプリケーションに接続するには、Parse JavaScript SDKをインストールする必要があります。
お使いのパッケージマネージャに応じて、以下のいずれかのコマンドを実行してSDKをインストールします：
#using npm
npm install parse
or
#using yarn
yarn add parse
Parse JavaScript SDKをインストールしたら、アプリケーションIDとJavaScriptキーを取得してください。これらはAngularアプリケーションをBack4appアプリに接続するために必要です。
アプリケーションIDとJavaScriptキーをBack4appから取得するには、ダッシュボードのApp Settingsを選択し、Security & Keysセクションに移動します。そこで、AngularアプリケーションをBack4appに接続するために必要なキーに簡単にアクセスすることができます。
アプリケーションIDとJavaScriptキーを取得したら、アプリケーション内に安全に保管してください。
app.component.tsファイルで、parseから Parseのミニファイ・バージョンをインポートする。次に、Parseの initializeメソッドを呼び出します。initializeメソッドは、Application IDと JavaScript Keyを引数にとります。最後に、Parseの serverURLを‘https://parseapi.back4app.com/’に設定します。
こうすると、app.component.tsファイルは次のようになるはずだ：
//app.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
}
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";
Back4appアプリケーションにデータを追加する
Back4Appアプリケーションにデータを追加するには、ユーザーからデータを受け取るフォームを作成します。フォームを送信する際、handleSubmit関数を実行します。handleSubmit関数には、ブログアプリケーションからBack4Appアプリケーションに新しい記事を追加するロジックが含まれます。
こんな感じだ：
// post-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-post-component',
templateUrl: './post-component.component.html',
styleUrls: ['./post-component.component.scss']
})
export class PostComponentComponent {
data: postData = {
title: '',
body: '',
}
handleSubmit(){
try {
const Post = new Parse.Object("Post");
Post.set("title", this.data.title);
Post.set("body", this.data.body);
Post.save().then(() => {
console.log("New Post added successfully");
});
} catch (error) {
console.log(error);
}
}
}
interface postData {
title: string,
body: string
}
上記のコードブロックはpost-component.component.tsファイルです***.**handleSubmit関数は新しいParsePostオブジェクトを作成し、そのtitleプロパティをdata.titleプロパティの値に、bodyプロパティをdata.bodyプロパティに設定します。最後に、Post .save()を使用してPostオブジェクトのプロパティをParseサーバーに保存します。
データ・プロパティは、フォームを通してユーザーから値を取得します。そのために、post-component.component.htmlファイルにフォームを作成します。
こんな感じだ：
<!-- post-component.component.html -->
<form class="post" (ngSubmit)="handleSubmit()">
<input type="text" placeholder="Title..." name="title" [(ngModel)]="data.title" >
<textarea name="body" placeholder="Body..." cols="30" rows="10" [(ngModel)]="data.body"></textarea>
<button type="submit">Post</button>
</form>
ngModelは、titleとbodyの入力フィールドの値をデータプロパティにバインドする。ngSubmitは、post-component.tsファイルで宣言されたhandleSubmit関数を呼び出してフォーム送信を処理します。
次に、コンポーネントのスタイルを設定します。ポスト・コンポーネントのSCSSファイルに、以下のコードを入力します：
/* post-component.component.scss */
.post{
margin-block-start: 4rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
input{
border: none;
inline-size: 100%;
padding: 1rem;
border-radius: 7px;
&::placeholder{
color: #e2e2e2;
}
textarea{
border: none;
inline-size: 100%;
padding: 1rem;
&::placeholder{
color: #e2e2e2;
}
}
}
Back4appからデータを取得する
Back4appアプリケーションからデータを取得するには、データを取得したいクラスに対してParseクエリを作成します。このクエリはngOnInitライフサイクルフックで実行される。
例えば、こうだ：
// home-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-home-component',
templateUrl: './home-component.component.html',
styleUrls: ['./home-component.component.scss']
})
export class HomeComponentComponent {
data: postData[] = [];
async ngOnInit() {
try {
const query = new Parse.Query("Post");
const post = await query.find();
this.data = post;
} catch (error) {
console.log(error);
}
}
}
interface postData {
id: string,
get: any,
}
上記のコードブロックは、Parse.Query()メソッドを使用して、Back4appアプリのデータベースから “Post “オブジェクトを検索します。次に、Parse SDK のfindメソッドをParse.Query()の結果に対して呼び出すことで、クエリの結果を含む配列を返します。最後に、返された配列をdata変数に代入します。
データ配列を使って、HTMLテンプレートをレンダリングします：
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button>Delete</button>
</div>
</div>
ngForディレクティブは配列をループし、そのdivにラップされたHTML要素を生成する。post.get()メソッドは、Back4Appデータベースにある属性のtitleと bodyプロパティの値を取得します。
コンポーネントのSCSSファイルに以下のコードを追加することで、コンポーネントのスタイルを設定できます：
/* home-component.component.scss */
.home{
display: flex;
flex-direction: column;
gap: 2rem;
margin-block-start: 4rem;
.post{
border-radius: 12px;
padding: 1rem;
&:hover{
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
background-color: #e2e2e2;
}
h3{
text-transform: uppercase;
margin-block-end: 0.4rem;
}
button{
margin-block-start: 1rem;
}
}
}
Back4appアプリケーションからデータを削除する
Back4Appアプリケーションからデータを削除するには、destroyメソッドを使ってデータベースから該当するレコードを削除します。home-component.component.tsファイルにdeletePost関数を作成します。deletePost関数には、指定されたIDに基づいてBack4Appアプリのデータベースから投稿を削除するロジックが含まれます。
こんな感じだ：
// home-component.component.ts
async deletePost(id: string) {
try {
const Post = Parse.Object.extend("Post");
const todo = new Post();
todo.id = id;
await todo.destroy();
const newData = this.data.filter( (item: postData) => item.id !== id )
this.data = newData;
} catch (error) {
console.log(error);
}
}
上のコード・ブロックでは、Parse.Object.extendメソッドを使って新しいPostオブジェクトを作成しています。そして、Postオブジェクトのidプロパティを関数に渡されたidパラメータに設定しています。
次に、Postオブジェクトのdestroyメソッドを呼び出し、指定されたIDの投稿をBack4appのデータベースから削除します。そして、データ配列にフィルタをかけ、削除された投稿以外のすべての投稿を含む新しい配列newDataを返す。newData配列はdata変数に代入される。
home-component.component.tsファイルでdeletePost関数を定義したら、その関数をコンポーネントのHTMLファイルでclickイベントを使ってdeleteボタンにバインドします。
home-component.component.htmlファイルは次のようになるはずだ：
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button (click)="deletePost(post.id)">Delete</button>
</div>
</div>
最後に、以下のコード・ブロックをstyles.scssファイルに追加して、アプリケーションにグローバル・スタイルを追加します：
/* styles.scss */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
inline-size: 50%;
margin: 0 auto;
background-color: #f2f2f2;
}
a{
text-decoration: none;
color: inherit;
}
button{
border: 1px #333333 solid;
padding: 0.3rem 0.5rem;
border-radius: 0.4rem;
background-color: inherit;
inline-size: min-content;
&:hover{
background-color: #333333;
color: #FFFFFF;
}
}
アプリケーションのテスト
アプリケーションをテストするには、プロジェクトのターミナルを開き、以下のコマンドを実行する：
ng serve
上記のコマンドはアプリケーションをコンパイルし、デフォルトでhttp://localhost:4200のローカル・サーバーにホストする。
アプリケーションが起動すると、下の画像のようなUIが表示されるはずです：
書き込みボタンをクリックすると、post-componentに移動します。postコンポーネントには、入力フィールドとボタンがあるフォームがあります。
ポスト・コンポーネントは次のようになる：
入力フィールドに入力後、投稿ボタンをクリックすると、入力値がBack4appのデータベースに追加されます。これを確認するには、Back4appアプリケーションのダッシュボードを確認するか、アプリケーションのホームページにリダイレクトしてください。
削除ボタンをクリックすると投稿が削除されます。例えば、「ライオンとは」の投稿を削除ボタンをクリックして削除します：
結論
Angularは、スケーラブルで堅牢なWebアプリケーションを構築するための強力なフレームワークです。モジュラーアーキテクチャ、強力なデータバインディング、豊富なビルド済みコンポーネントが特徴です。Angularの利点には、開発者の生産性の向上、開発プロセスの合理化、ダイナミックでレスポンシブかつパフォーマンスの高いユーザーインターフェースの作成があります。
Back4appをBackend-as-a-ServiceソリューションとしてAngularアプリを構築することで、開発を大幅に簡素化し、加速させることができます。Back4appのあらかじめ構築されたインフラを使えば、認証やデータストレージといったバックエンド開発の複雑さを心配することなく、アプリケーションのフロントエンドの作成に集中することができます。
