はじめに

業務で学んだSpringBootと興味で学んでいるAstroを組み合わせただけのラフな記事です。

以下記事のオマージュになるので、ご了承ください

今回メインの参考記事

SpringBootとAstro

SpringBoot

・Javaを便利に使えるやつ
・カプセル化だったり、色々な周辺技術を少ない力で実装できる非常に便利なフレームワーク

Astro

・SSR重視のMPA設計や、コンポーネントレベルでインタラクティブ性を付与する、アイランドコンポーネントを利用した、高速静的サイトを生成するフレームワーク
・Reactなどの既存モダンフレームワークもアダプター通して導入可能
・ドキュメント充実しているので、読んだほうがいいかも

なんで組み合わせた？

Svelte人気など、今後React単体で導入するケースが少なくなりそうという考えがあるため、やってみたかった
SpringBootをAPIサーバのように使って、AstroでFetchするというPJを作ってみたかった
ぶっちゃけ簡単に使えるのがAstroのコンセプトなので、それには反している

PJ構成

PJ
├─ astro
│  ├─ src
│  ├─ node_modules
│  ├─ package.json
│  └─ etc...
├─ src
│  ├─ main
│  └─ test
├─ build.gradle
└─ etc...

!! Attention !!
PJ直下に移動して、npm create astroを実行してください。
PJ名以外はデフォルトの設定になっています。

環境

vscode
springboot 3.0.0
astro 1.6.14
Java 17
lombok, spring web, spring toolkit

バックエンド

簡単なコントローラーとエンティティを設定します。
別のオリジンからのアクセスを許可するために、CrossOriginをワイルドカードにしてブロックさせない必要があるそうです

src/main/java/com/example/demo/controller/MainController.java

package com.example.demo.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.entity.User;

@RestController
@CrossOrigin(origins = "*")
public class MainController {
  
  @GetMapping("/user/api")
  @ResponseBody
  public User viewUser() {
    User user = new User();
    user.setLastName("山田");
    user.setFirstName("太郎");
    user.setAge(23);
    return user;
  }
}

エンティティも簡単なものですね

src/main/java/com/example/demo/Entity/User.java

package com.example.demo.entity;

import lombok.Data;

@Data
public class User {
  private String firstName;

  private String lastName;

  private int age;
}

フロントエンド

レイアウトはデフォルトで生成されるものを使っています。

デフォルトでts使えるのも便利ですね。

スクリプト内(---)でトップダウンのawaitでfetchをして、変数に格納したものを、そのままテンプレートに記述してます。

astro/package.json

{
  "name": "@example/basics",
  "type": "module",
    // api側と同じものにすることでapiを使える
  "proxy": "http://localhost:8080",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "astro": "^1.6.14"
  }
}

astro/src/pages/index.astro

---
import Layout from '../layouts/Layout.astro';

type data = {
  firstName: string
  lastName: string
  age: number
}

const response = await fetch("http://localhost:8080/user/api")

const data:data = await response.json()
const userName:string = data.firstName + data.lastName;
const age:number = data.age

---

<Layout title="Welcome to Astro.">
	<main>
		<h2>{userName} <span>{age}歳</span></h2>
	</main>
</Layout>

<style>
	h1 {
		font-size: 3rem;
		font-weight: 800;
		margin: 0;
	}

  span {
    font-size: 0.8rem;
  }
</style>

実行結果

参考記事のおかげで結構サクサクいけました。ありがとうございます。

CORSとproxyさえ設定すれば、フロントエンドのツールが何であれ問題ないですね。

astroのアダプターや他フレームワークの統合が充実しているので、要件によってフレームワーク選定をして、爆速かつリアクティブな開発ができるようになるのかなと思いました。

特に必要性はないけどAstroとSpringBootをつなげてみた