Python転職初心者向けエンジニアリングブログ

Pythonに魅了されたあなたへ。エンジニアリングの扉を開く転職初心者向けのブログへようこそ。このブログでは、Pythonの奥深さに迫りながら、エンジニアリングへの転職に役立つ情報を提供しています。未経験者から始めるPythonエンジニアリングの世界への一歩を踏み出すためのガイダンス、ベストプラクティス、そして成功事例など、初心者の方でもわかりやすいコンテンツをお届けします。

TypeScriptとKotlinの連携について

LYPプレミアム会員 python

こんにちは、皆さん!今回の記事では、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の連携を試してみてください。少しずつ理解が深まることで、より高度なアプリケーションの構築ができるようになるはずです。それでは、また次回の記事でお会いしましょう!