ホームページ - EY-Office

2021-02-11

Deno用のReactフレームワークAlephを試してみた

カテゴリー：React

最近Introduction to Aleph - The React Framework in Denoという記事を読み、Aleph を知りました。Alephは一言で言うとDeno用に作られたNext.jsです。

Next.jsはEY-OfficeサイトもJamstackブームに乗ってみようと思うに書いたように、Jamstackブームの主役になりつつあるReactの開発環境で、シンプルなルーティング機能やStatic Site Generators(SSG)、Server Side Rendering(SSR) をサポートしています。

Aleph Introduction to Aleph - The React Framework in Denoより

Deno

Denoはフロントエンド開発ツールのベースやバックエンドのサーバーとして使われるJavaScript処理系Node.js を作ったライアン・ダールが、新たに作ったJavaScript処理系です。

Node.jsという成功した言語処理系の作者が、Node.js付いて振り返り10 Things I Regret About Node.js — Ryan Dahl (YouTube)をもとに、新たに作ったのJavaScript処理系がDenoです。

Denoを利用する開発者にとってNodeと比べ大きく変わったのは、

パッケージ管理ツールnpmが無くなり、Deno自身がパッケージ（ライブラリー）の読み込みや依存パッケージの読み込みを行います
モジュールシステムを従来のCommonJSではなく、JavaScriptの標準規格ES2015で規定されたES Modulesを採用
- ただしES Modulesに変換してくれるCDNサービスesm.shを使う事でCommonJSのnpmパッケージを利用できます
TypeScriptをそのまま実行できます
WebAssemblyバイナリを実行できます
ファイルやネット読み書きなどの標準ライブラリもNodeとは異なり、コールバックではなくPromiseをベースにしている
セキュリティーモデルの変更

などなど、今どきなJavaScript処理系になっています。

Aleph

AlephはDeno用に作られたNext.jsです。

設定ファイルが不要
TypeScriptをサポート
ES Moduleを利用
Import Maps importするモジュール名とURLのマッピング機能
高速リフレッシュを備えたHMR(Hot Module Replacement)
パス名ベースのシンプルなルーティング
APIサーバー機能のサポート (APIs Routing)
Markdownのサポート
CSS(Less)のサポート
SSR/SSGのサポート

と、ほぼNext.jsです。

Vue3に入門してみた（TypeScriptを使ったReactとVue3の比較）に書いたReactのコードは、そのまま問題なく動きました。

また、Material-UIを使ったコードはImport Mapsで少しハマりましたがなんとか動きました。以下のコードはImport Maps周りのコードですが、私の使い方が良くないかもしれません。AlephはまだAlphaバージョンですし、ネット上の情報もまだ少ないです。

index.tsx

import React, { useState, useMemo } from 'react'
import {Button, Paper, Tabs, Tab} from '@material-ui-core'
import {Table, TableBody, TableCell, TableHead, TableRow} from '@material-ui-core'

import_map.json

{
    "imports": {
        "aleph": "https://deno.land/x/aleph@v0.3.0-alpha.1/mod.ts",
        "aleph/": "https://deno.land/x/aleph@v0.3.0-alpha.1/",
        "react": "https://esm.sh/react@17.0.1",
        "react-dom": "https://esm.sh/react-dom@17.0.1",
        "@material-ui-core": "https://esm.sh/@material-ui/core@4.11.3"
    },
    "scopes": {}
}