EY-Office ブログ

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

最近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

AlephDeno用に作られた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": {}
}

まとめ

成功した言語処理系を使った本人が処理系の問題点を見直し、別言語ではなく互換性に目をつぶり新たな言語処理系を作ったのは、おもしろい21世紀的な試みだと思います 😀

互換性より進歩を選ぶ傾向の高いJavaScript(フロントエンド)の世界ではDenoは受け入れられると思います。
React等のフロントエンド開発では、ここ数年Babel + webpackで発展してきましたが、AlephのようなDenoベースのツールが主流になるとおもしろいかなと思います。

今後の発展に期待しています!!

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ