はじめに
名前は知っているけどまだ触ったことのないフレームワークで Hello, world! していきます。
※ この記事では Hello, world! のみ行うため、特徴などを深掘りすることはありません。ご了承ください。
Gatsby
Gatsby は React ベースの SSG （ Static Site Generator ）です。また、 DSG （ Deferred Static Generation ）にも対応しています。
特徴として独自の GraphQL data layer を持ち、サイトを構築するためのデータをすべて保持します（データを data layer に取り込むためには Gatsby が提供するプラグインを使用します）。この GraphQL data layer からデータを取得するには各コンポーネント内で GraphQL クエリを記述します。
Hello, world! - Gatsby
Quick Start を参考に環境構築を行います。
※ Node.js は v18.0.0 以上をご使用ください。
$ npm init gatsby
What would you like to call your site?
✔ · My Gatsby Site
What would you like to name the folder where your site will be created?
✔ gatsby/ my-gatsby-site
✔ Will you be using JavaScript or TypeScript?
· TypeScript
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· No (or I'll add it later)
✔ Would you like to install additional features with other plugins?No items were selected
生成されたフォルダは以下のようになります。
※ node_modules 、 .git は割愛します。
my-gatsby-site
├── src
│ ├── images
│ │ └── icon.png
│ └── pages
│ ├── 404.tsx
│ └── index.tsx
├── .gitignore
├── gatsby-config.ts
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock
$ yarn develop で以下の URL にアクセスできるようになります。
-
http://localhost:8000/...src/pages/index.tsx内の UI を表示 -
http://localhost:8000/___graphql... GraphQL API をテストするための UI を表示
src/pages/index.tsx を以下のように書き換え、 Hello, world! します。
import * as React from "react";
import type { HeadFC, PageProps } from "gatsby";
const IndexPage: React.FC<PageProps> = () => {
return (
<h1>Hello, world!</h1>
);
};
export default IndexPage;
export const Head: HeadFC = () => <title>Hello, world!</title>;
Remix
Remix は React ベースのフルスタック Web フレームワークです。
特徴は Server/Client Model を採用していることです。 SSG のように静的ファイルをビルドするのではなく、ネットワークに送るデータ量を減らすことで高速化を図っています。
Hello, world! - Remix
Jokes App Tutorial を参考に環境構築を行います。
※ Nodejs は v14.17.0 または v16.0.0 以上、 npm は v7 以上をご使用ください。
$ npx create-remix@latest
? Where would you like to create your app? ./my-remix-app
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix App Server if you're unsure; it's
easy to change deployment targets. Remix App Server
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes
生成されたフォルダは以下のようになります。
※ node_modules は割愛します。
blog-tutorial
├── app
│ ├── routes
│ │ └── index.tsx
│ ├── entry.client.tsx
│ ├── entry.server.tsx
│ └── root.tsx
├── public
│ └── favicon.ico
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── remix.config.js
├── remix.env.d.ts
└── tsconfig.json
app/routes/index.tsx を以下のように書き換え、 Hello, world! します。
export default function Index() {
return <h1>Hello, world!</h1>;
}
Svelte
Svelte はコンポーネントフレームワークです。（厳密には、宣言的なコンポーネントを、効率的な Vanilla JS に変換するコンパイラです。）
特徴として Write less code / No virtual DOM / Truly reactive の3つがあります。
- Write less code ... 重要なのは読みやすさという思想のもと、ボイラープレート（
useMemoやuseEffectにあたる動作）に終焉を告げる - No virtual DOM ... 仮想 DOM を使用しないで宣言的で状態駆動型の UI 開発を行う
- Truly reactive ... JavaScript そのものに、リアクティビティ（値の変更を検知して DOM へ反映する処理）をもたらす
Hello, world! - Svelte
GETTING STARTED を参考に環境構築を行います。
※ 公式ドキュメントに沿って SvelteKit を使用します。
$ npm create svelte@latest myapp
Welcome to SvelteKit!
✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes
Your project is ready!
✔ Typescript
Inside Svelte components, use <script lang="ts">
生成されたフォルダは以下のようになります。（ $ npm install 後に .svelte-kit フォルダと package-lock.json が作成されます。）
※ node_modules は割愛します。
myapp
├── .svelte-kit
│ ├── generated
│ │ ├── client-manifest.js
│ │ ├── client-matchers.js
│ │ ├── nodes
│ │ │ ├── 0.js
│ │ │ ├── 1.js
│ │ │ └── 2.js
│ │ └── root.svelte
│ ├── types
│ │ ├── route_meta_data.json
│ │ └── src
│ │ └── routes
│ │ └── $types.d.ts
│ ├── ambient.d.ts
│ └── tsconfig.json
├── src
│ ├── routes
│ │ └── +page.svelte
│ ├── app.d.ts
│ └── app.html
├── static
│ └── favicon.png
├── .gitignore
├── .npmrc
├── package-lock.json
├── package.json
├── README.md
├── svelte.config.js
├── tsconfig.json
└── vite.config.js
src/routes/+page.svelte を以下のように書き換え、 Hello, world! します。
<h1>Hello, world!</h1>
SolidJS
SolidJS は UI を作成するための JavaScript ライブラリです。（フレームワークではありませんが触っていきます。ご了承ください。）
特徴は、 Svelte 同様仮想 DOM を使用せず、 React ライクに記述できるところです。また、 Vanilla JS とほぼ遜色の無いパフォーマンスを誇っています。
Hello, world! - SolidJS
Solid を試す を参考に環境構築を行います。
$ npx degit solidjs/templates/ts my-app
生成されたフォルダは以下のようになります。（ $ npm install 後に package-lock.json が作成されます。）
※ node_modules は割愛します。
my-app
├── src
│ ├── assets
│ │ └── favicon.ico
│ ├── App.module.css
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ └── logo.svg
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.json
└── vite.config.ts
src/App.tsx を以下のように書き換え、 Hello, world! します。
import type { Component } from "solid-js";
const App: Component = () => {
return <h1>Hello, world!</h1>;
};
export default App;
Fresh
Fresh は Deno 製の Web フレームワークです。
特徴として、事前のビルドステップを行わず、エッジでの Just-in-time レンダリングを実現しています。また、 Islands Architecture を取り入れており、デフォルトではクライアントに JavaScript は送られません。
Hello, world! - Fresh
Getting Started を参考に環境構築を行います。
※ Deno CLI は v1.25.0 以降をご使用ください。
$ deno run -A -r https://fresh.deno.dev my-project
Fresh has built in support for styling using Tailwind CSS. Do you want to use this? [y/N] N
Do you use VS Code? [y/N] y
生成されたフォルダは以下のようになります。
my-project
├── .vscode
│ ├── extensions.json
│ └── settings.json
├── components
│ └── Button.tsx
├── islands
│ └── Counter.tsx
├── routes
│ ├── api
│ │ └── joke.ts
│ ├── [name].tsx
│ └── index.tsx
├── static
│ ├── favicon.ico
│ └── logo.svg
├── deno.json
├── deno.lock
├── dev.ts
├── fresh.gen.ts
├── import_map.json
├── main.ts
└── README.md
routes/index.tsx を以下のように書き換え、 Hello, world! します。
import { Head } from "$fresh/runtime.ts";
export default function Home() {
return (
<>
<Head>
<title>Hello, world!</title>
</Head>
<h1>Hello, world!</h1>
</>
);
}
RedwoodJS
RedwoodJS はフルスタック Web フレームワークです。
特徴は、スタートアップ企業向けのフレームワークであり、 React や GraphQL 、 Prisma を使用して開発行います。また、多くの機能を提供しており、 features にまとめられていますが、この他にも認証（ Auth0 など）や CSS フレームワーク（ Tailwind CSS など）の設定も、コマンドラインから呼び出すだけで可能になります。
Hello, world! - RedwoodJS
Quick Start を参考に環境構築を行います。
※ Nodejs は v14.19.x 以上 16.x 以下、 Yarn は v1.15 以上をご使用ください。
$ yarn create redwood-app my-redwood-project
------------------------------------------------------------------
🌲⚡️ Welcome to RedwoodJS! ⚡️🌲
------------------------------------------------------------------
✔ Compatibility checks passed
✔ Language preference
› TypeScript
✔ Git preference
› Initialize a git repo
✔ Creating Redwood app
✔ Creating directory '/.../my-redwood-project'
✔ Installing packages
✔ Running 'yarn install'... (This could take a while)
✔ Generating types
✔ Initializing a git repo
生成されたフォルダは以下のようになります。
※ node_modules 、 .git は割愛します。
my-redwood-project
├── .redwood
│ └── types
│ │ ├── includes
│ │ │ ├── all-currentUser.d.ts
│ │ │ ├── api-globImports.d.ts
│ │ │ ├── api-globalContext.d.ts
│ │ │ ├── api-scenarios.d.ts
│ │ │ ├── api-test-globals.d.ts
│ │ │ ├── web-routerRoutes.d.ts
│ │ │ ├── web-routesPages.d.ts
│ │ │ └── web-test-globals.d.ts
│ │ └── mirror
│ │ ├── api
│ │ │ └── src
│ │ │ └── directives
│ │ │ ├── requireAuth
│ │ │ │ └── index.d.ts
│ │ │ └── skipAuth
│ │ │ └── index.d.ts
│ │ └── web
│ │ └── src
│ │ └── pages
│ │ ├── FatalErrorPage
│ │ │ └── index.d.ts
│ │ └── NotFoundPage
│ │ └── index.d.ts
│ ├── schema.graphql
│ └── telemetry.txt
├── .vscode
│ ├── extensions.json
│ ├── launch.json
│ └── settings.json
├── .yarn
│ ├── releases
│ │ └── yarn-3.3.0.cjs
│ └── install-state.gz
├── api
│ ├── db
│ │ └── schema.prisma
│ ├── src
│ │ ├── directives
│ │ │ ├── requireAuth
│ │ │ │ ├── requireAuth.test.ts
│ │ │ │ └── requireAuth.ts
│ │ │ └── skipAuth
│ │ │ ├── skipAuth.test.ts
│ │ │ └── skipAuth.ts
│ │ ├── functions
│ │ │ └── graphql.ts
│ │ ├── graphql
│ │ │ └── .keep
│ │ ├── lib
│ │ │ ├── auth.ts
│ │ │ ├── db.ts
│ │ │ └── logger.ts
│ │ └── services
│ │ └── .keep
│ ├── types
│ │ └── graphql.d.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── server.config.js
│ └── tsconfig.json
├── scripts
│ ├── .keep
│ ├── seed.ts
│ └── tsconfig.json
├── web
│ ├── public
│ │ ├── README.md
│ │ ├── favicon.png
│ │ └── robots.txt
│ ├── src
│ │ ├── components
│ │ │ └── .keep
│ │ ├── layouts
│ │ │ └── .keep
│ │ └── pages
│ │ │ ├── FatalErrorPage
│ │ │ │ └── FatalErrorPage.tsx
│ │ │ └── NotFoundPage
│ │ │ └── NotFoundPage.tsx
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── index.html
│ │ └── Routes.tsx
│ ├── jest.config.js
│ ├── package.json
│ └── tsconfig.json
├── .editorconfig
├── .env
├── .env.defaults
├── .env.example
├── .gitignore
├── .nvmrc
├── .yarnrc.yml
├── graphql.config.js
├── jest.config.js
├── package.json
├── prettier.config.js
├── README.md
├── redwood.toml
└── yarn.lock
プロジェクト作成後、 $ yarn redwood generate page hello-world / コマンドを入力し、 Hello, world! を表示するための画面を作成します。作成後は web/src/pages フォルダ内に HelloWorldPage フォルダが以下の構成で作成されます。
HelloWorldPage
├── HelloWorldPage.stories.tsx
├── HelloWorldPage.test.tsx
└── HelloWorldPage.tsx
作成した HelloWorldPage.tsx を以下のように書き換え、 Hello, world! します。
import { MetaTags } from '@redwoodjs/web'
const HelloWorldPage = () => {
return (
<>
<MetaTags title="Hello, world!" description="Hello, world! page" />
<h1>Hello, world!</h1>
</>
)
}
export default HelloWorldPage
Astro
Astro はコンテンツにフォーカスした高速な Web サイトを構築するためのオールインワン Web フレームワークです。
特徴として、特定のUIに依存せず、 React 、 Preact 、 Svelte 、 Vue 、 SolidJS 、 Lit などをサポートします。また Astro Islands という Islands Architecture が元となったアーキテクチャを採用しています。
Hello, world! - Astro
Quick Start を参考に環境構築を行います。
※ Nodejs は v.14.18.0 または v16.12.0 以上をご使用ください。
$ npm create astro@latest
✔ Where would you like to create your new project? … tutorial
✔ How would you like to setup your new project? › a few best practices
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Strict
✔ TypeScript settings applied!
生成されたフォルダは以下のようになります。
※ node_modules 、 .git は割愛します。
tutorial
├── .vscode
│ ├── extensions.json
│ └── launch.json
├── public
│ └── favicon.svg
├── src
│ ├── components
│ │ └── Card.astro
│ ├── layouts
│ │ └── Layout.astro
│ └── pages
│ │ └── index.astro
│ └── env.d.ts
├── .gitignore
├── astro.config.mjs
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
src/pages/index.astro を以下のように書き換え、 Hello, world! します。
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="Hello, world!">
<h1>Hello, world!</h1>
</Layout>
おわりに
今回 7 つのフレームワークを触ってみましたが、かなりのものが React ベースで書けるため、取っ付き易かったです。また、これらフレームワークの思想や特徴は面白いものばかりでした。そのため、技術的に挑戦できるプロジェクトでは、これらのフレームワークを使用してみる価値は大いにあると思います。
また Next.js v13 や Nuxt v3 に関してもまだキャッチアップの途中なので、このあたりも引き続き学んでいきたいと思います。