ゼロJS からビルドしましょう

はじめに

※これは KWC Advent Calendar 2022 の11日目の記事です。

こんにちは、(株)KDDIウェブコミュニケーションズでフロントエンドエンジニアをやっているPikeです。初めてのQiitaです。
紹介したいのは「Astro」。Astroを使えば、front-end framework (vue, angular, react など)の全てを使えます。Astroも自動的にgithub actionsでデプロイが出来ます。

なぜAstroへ移動する？

github actions が既にある
ゼロJS からビルドする（ユーザーさんに早い, bundleが小さい、lazy loadingもあり）
「framework」はどれでも良い (bring your own framework)
他の「framework」(next, nuxt, remix)　と似てる
JSXでかける

ビルドは何が変わってる？

サーバファスト：必要のJSのみを使う。(lazy loading, server side rendering)
folder-based-routing: react-routerなどは必要ない

Let's get started

npm create astro@latest

コードが出来ました：

Github Pagesへデプロイ

deploy instructions

astro.config.mjs を編集して

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://astronaut.github.io',
  base: '/my-repo',
})

.github/workflows/deploy.yml を作って

確認する：
- AstroTemplate

Reactの追加

npm install --save-dev @astrojs/react react react-dom
$: vi components/ReactComponent.jsx

import React from "react";

const ReactComponent = () => {
    return (
        <div>Hello I'm a ReactComponent</div>
    )
}
export default ReactComponent

astro.config.mjs　に　reactを追加する。

import { defineConfig } from 'astro/config'
import react from '@astrojs/react';

export default defineConfig({
  site: 'https://pike-kwc.github.io',
  base: '/astroTemplate',
  integrations: [react()]
})

pages/index.astroに追加する。

import ReactComponent from '../components/ReactComponent.jsx'
...
<ReactComponent />

ほかのframeworkも自由に追加できます！

import react from '@astrojs/react';
import preact from '@astrojs/preact';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
import lit from '@astrojs/lit';
import alpine from '@astrojs/alpinejs';

ステートを共有が必要であれば、nanostoreが　使える。
npm install nanostores @nanostores/react

Performance

Reactいれても、ダウンロードしなかった　(150b)：

おわりに

ここまで読んで頂いた方ありがとうございました。ほぼ手順書みたいな内容でしたが、エンジニアの皆様の一助となれれば幸いです。
KWC Advent Calendar 2022 はまだまだ続きます！明日もお楽しみに！！

フロントエンドで、全てのフレームワークが同時に使える