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

ゼロ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 はまだまだ続きます！明日もお楽しみに！！