はじめに
業務で学んだ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のアダプターや他フレームワークの統合が充実しているので、要件によってフレームワーク選定をして、爆速かつリアクティブな開発ができるようになるのかなと思いました。