【ITニュース解説】Get Data from API with RCP in HarmonyOS Next

現代のスマートフォンアプリやウェブサービスは、インターネット上の様々な情報と連携して動作することが一般的である。例えば、天気予報アプリは気象情報を提供するサーバーからデータを取得し、SNSアプリはユーザーの投稿や友人の情報をサーバーから受け取っている。このように、アプリが外部のサービスからデータを取得する仕組みを「API連携」と呼ぶ。API（Application Programming Interface）とは、異なるソフトウェア同士が情報をやり取りするための約束事のようなもので、開発者はこの約束事に従ってリクエストを送ることで、必要なデータを取得できる。本記事では、HarmonyOS Nextという新しいオペレーティングシステム上で、Google Books APIから書籍情報を取得し、それをアプリの画面に表示する一連の流れをシステムエンジニアを目指す初心者にも分かりやすく解説する。

HarmonyOS Nextで外部サービスと通信する際に中心的な役割を果たすのが、RCP（Remote Communication Kit）である。これは、アプリがHTTPという通信プロトコルを使ってデータのリクエストを送信する機能を提供するモジュールだ。HTTPはインターネット上で情報をやり取りするための最も一般的な方法の一つで、ウェブサイトの閲覧からAPI連携まで幅広く使われている。GET、POST、HEADなどいくつかの「HTTPメソッド」があり、それぞれ異なる目的で使われる。例えば、GETメソッドは主にデータの取得に使われ、POSTメソッドは新しいデータを送信する際に利用される。今回のようにGoogle Books APIから書籍情報を取得する場合は、GETメソッドを使ってサーバーにリクエストを送ることになる。RCPを使うことで、開発者は複雑なネットワーク通信の細部を意識することなく、簡単に外部サービスとデータのやり取りができるようになる。

APIから受け取るデータは、通常、JSON（JavaScript Object Notation）という形式で提供される。JSONは人間にも機械にも読みやすいテキストベースのデータ形式だが、そのままではアプリのプログラムで直接的に扱いにくい場合がある。そこで、取得するデータの構造をあらかじめプログラム上で定義しておくのが「データモデル」だ。これは、データの「設計図」のようなもので、例えば「書籍にはタイトル、ページ数、画像、説明、カテゴリがある」といった情報を型として定義する。記事ではBookModel.ets、ImagesModel.ets、RSPModel.ets、volModel.ets、VolumeInfoModel.etsといった複数のモデルが定義されている。これらはGoogle Books APIから返されるデータの階層構造に合わせて設計されており、RSPModelが全体のレスポンスを表し、その中にvolModelの配列が含まれ、さらにvolModelの中に書籍の詳細情報を含むVolumeInfoModelがあり、その中に画像のURLを含むImagesModelがある、というようにデータが入れ子になっていることを表現している。このようにモデルを定義することで、APIから取得したデータを安全かつ効率的にプログラム内で扱えるようになる。

データモデルを定義したら、次に実際にAPIにリクエストを送信する部分を作成する。まず、Constants.etsファイルで、APIの基本的なアドレス（BASE_URL）と、特定の書籍情報を取得するための詳細なURL（url）を定数として定義する。このように定数としてまとめておくことで、後から変更が必要になった場合に一箇所だけ修正すればよく、プログラムの保守性が向上する。次に、RCP.etsファイルで実際の通信処理を行う。sessionConfig関数は、APIの基本アドレスを設定して通信セッションの準備をする。この設定を使ってrcp.createSessionで通信セッションを開始する。そして、getHttp関数がこのセッションを使って、指定されたURLへGETリクエストを送信する役割を担う。リクエストが成功すると、APIサーバーから書籍情報を含むレスポンスが返ってくる。then((res) => res.toJSON())の部分は、受け取ったレスポンスデータをJSON形式に変換する処理だ。通信が完了したら、finally(() => { session.close(); })で通信セッションを確実に閉じる。これは、不要なリソースの消費を防ぎ、アプリの安定性を保つために非常に重要な処理である。この一連の処理によって、アプリは外部のAPIサーバーから必要なデータを安全に取得できる。

アプリ開発において、UI（ユーザーインターフェース）の表示ロジックと、データの取得・加工ロジックを分離することは良い設計とされている。この役割を担うのがBookViewModel.etsファイルで定義されている「ViewModel」である。ViewModelは、APIから取得したデータを直接UIに渡すのではなく、UIが必要とする形式に整形し、UIからの要求に応じてデータを提供する仲介役となる。BookViewModelには、取得したすべての書籍情報を保持するallBooksという配列がある。getBooksという非同期関数（async/awaitキーワードが付いていることで、時間のかかるネットワーク通信を待つ間もアプリが固まらずに動作できる）は、先ほど作成したgetHttp関数を使ってAPIからデータを取得する。取得した生データは、response as RSPModelとして事前に定義したRSPModelの形にキャスト（型変換）され、その中から必要な情報（items配列）を取り出す。さらに、map関数を使ってRSPModelの各要素を、アプリで扱いやすいBookModelの形式に変換し、allBooks配列に格納する。このようにViewModelがデータを加工することで、UI側は複雑なデータ変換ロジックを知ることなく、整形されたデータをそのまま表示に利用できるため、コードの可読性と保守性が向上する。

データの準備が整ったら、次にそれを画面に表示するための部品を作成する。BookCardComponent.etsファイルでは、個々の書籍情報を表示するための「カード」のようなUIコンポーネントが定義されている。このコンポーネントは、書籍の画像、カテゴリ、タイトル、ページ数といった情報を受け取り、それらを決められたレイアウトで表示する役割を果たす。例えば、Image(this.image)で書籍の画像を、Text(this.title)でタイトルを表示する。このように、UIを小さな再利用可能な部品（コンポーネント）に分割することで、コードの管理がしやすくなり、同じデザイン要素を様々な場所で使い回すことが可能になる。

最後に、作成したUIコンポーネントとViewModelを使って、実際にユーザーが目にする画面を構成する。BooksPage.etsファイルは、アプリの書籍表示画面全体の構造を定義している。この画面では、@State viewModel: BookViewModel = BookViewModel.instance;という行で、先ほど説明したBookViewModelのインスタンスを画面の状態として保持している。画面が表示される直前（aboutToAppear()メソッド内）で、this.viewModel.getBooks()を呼び出し、非同期で書籍データの取得を開始する。画面のbuild()メソッド内では、取得したviewModel.allBooksのデータ一つ一つに対して、ForEachというループ処理を使ってBookCardComponentを生成し、画面に並べて表示する。これにより、複数の書籍情報がカード形式で一覧表示される。また、Scrollコンポーネントを使うことで、表示しきれない書籍が多い場合でもスクロールしてすべて閲覧できるようになっている。背景色を黒に設定したり、余白を調整したりといった見た目の設定もここで行われる。このようにして、外部APIから取得したデータが、ユーザーにとって見やすい形でアプリの画面に提示される。

本記事では、HarmonyOS Next上でGoogle Books APIから書籍データを取得し、それをアプリの画面に表示するまでの一連のプロセスを解説した。Remote Communication Kit (RCP) を用いたHTTP通信、データの構造化を助けるデータモデルの定義、UIとデータロジックを分離するViewModelの活用、そして具体的なUIコンポーネントによる画面表示という流れを通じて、システムエンジニアを目指す初心者が外部連携アプリ開発の基本的な構造を理解できるよう努めた。これらの知識は、現代のアプリ開発において非常に重要な基盤となる。