こんにちは、皆さん!今回の記事では、TypeScriptとKotlinの連携についてお話しします。JavaScriptの型安全な代替として人気の高いTypeScriptと、Androidアプリ開発やサーバーサイドで広く使われるKotlin。この2つの言語を連携させることで、フロントエンドとバックエンドの垣根を超えたシームレスな開発が可能になります。今回はその手法を、サンプルコードを交えて解説していきます。初心者の方でも理解しやすいように、細かい部分も情緒的に説明していきますので、ぜひ最後までお付き合いください。
TypeScriptからKotlinへのリクエスト
TypeScriptとKotlinを連携させる際、通常はAPIを使ってデータのやり取りを行います。例えば、TypeScriptで作成したフロントエンドからKotlinサーバーにリクエストを送り、データを取得することができます。ここでは、TypeScriptからKotlinのバックエンドに対してHTTPリクエストを送る例を紹介します。
まず、TypeScript側でのリクエストのコードを見ていきましょう。
async function sendRequest() { const response = await fetch('https://example.com/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'John', age: 30, }), }); const data = await response.json(); console.log('サーバーからのレスポンス: ', data); } sendRequest();
このコードでは、fetch
関数を使ってPOSTリクエストを送信しています。リクエストのボディには、JSON形式で名前や年齢のデータを含めてKotlinサーバーに送っています。
Kotlinでリクエストを受け取る
次に、Kotlinサーバー側でこのリクエストを受け取り、データを処理する方法を見ていきます。Kotlinでは、Ktorフレームワークを使ってHTTPサーバーを簡単に構築することができます。
import io.ktor.application.* import io.ktor.features.ContentNegotiation import io.ktor.gson.* import io.ktor.http.HttpStatusCode import io.ktor.request.receive import io.ktor.response.respond import io.ktor.routing.* import io.ktor.server.engine.embeddedServer import io.ktor.server.netty.Netty data class UserData(val name: String, val age: Int) fun main() { embeddedServer(Netty, port = 8080) { install(ContentNegotiation) { gson { setPrettyPrinting() } } routing { post("/api/data") { val userData = call.receive<UserData>() println("受け取ったデータ: $userData") // 処理後のデータを返す call.respond(HttpStatusCode.OK, mapOf("message" to "データを受け取りました", "receivedName" to userData.name)) } } }.start(wait = true) }
ここでは、/api/data
というエンドポイントに対してPOSTリクエストを受け取り、クライアントから送られたデータをUserData
クラスとして取得しています。その後、受け取った名前を含むレスポンスをクライアントに返しています。
KtorのContentNegotiation
プラグインを使うことで、データのやり取りをJSON形式で簡単に行うことができるのがポイントです。
リクエストとレスポンスの流れ
TypeScriptから送られたリクエストがKotlinサーバーに到達し、サーバーがそのデータを処理して適切なレスポンスを返すという流れです。この連携を通して、TypeScriptのフロントエンドとKotlinのバックエンドがシームレスにやり取りできるようになります。
TypeScript側のリクエストコードを実行すると、Kotlinサーバー側で次のようなデータを受け取ります。
受け取ったデータ: UserData(name=John, age=30)
そして、クライアント側には次のようなレスポンスが返ってきます。
サーバーからのレスポンス: { message: "データを受け取りました", receivedName: "John" }
これにより、TypeScriptから送ったデータが正しくKotlinサーバーに伝わり、その結果をフロントエンドで確認できるという流れが確認できます。
実行結果をアプリケーションに反映
では、TypeScript側で受け取ったデータをWebアプリケーションに反映してみましょう。例えば、HTML上のdiv
タグにレスポンスメッセージを表示する簡単な例です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TypeScriptとKotlinの連携</title> </head> <body> <div id="response"></div> <script> async function sendRequest() { const response = await fetch('https://example.com/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'John', age: 30, }), }); const data = await response.json(); document.getElementById('response').innerText = `サーバーからのレスポンス: ${data.message}`; } sendRequest(); </script> </body> </html>
このコードを実行すると、ページ内のdiv
タグにサーバーからのレスポンスが表示されます。これにより、Webページに動的にデータを反映させることができるようになります。
まとめ
この記事では、TypeScriptとKotlinを連携させてデータをやり取りする方法を解説しました。TypeScriptでのフロントエンド開発とKotlinでのバックエンド開発を組み合わせることで、スケーラブルかつ柔軟なアプリケーションを構築できるようになります。APIを介してフロントエンドとバックエンドがシームレスに連携することで、より複雑な機能やデータの処理もスムーズに実装できます。
初心者の方でも、今回のサンプルコードを参考に、ぜひTypeScriptとKotlinの連携を試してみてください。少しずつ理解が深まることで、より高度なアプリケーションの構築ができるようになるはずです。それでは、また次回の記事でお会いしましょう!