Aleph.jsとは。Denoで動くReactフレームワークです。

Aleph.jsとは。Denoで動くReactフレームワークです。

本日はDenoで動くReactフレームワークのAleph.jsについて紹介します。

Aleph.jsはReactのフレームワーク

Next.jsからインスパイアされたAleph.jsはDenoで動くReactフレームワークです。しかしながら、Next.jsのようにwebpackやバンドラを必要としません。モジュールに変更があった場合は、変更のモジュールのみコンパイルされメモリ上に展開されるため、バンドリングが必要ありません

ふむ、素晴らしい。 ということで、早速Aleph.jsを試してみることにしました。

Denoをインストール

Denoの公式サイトを参考にセットアップしました。
私はLinux使っておりますので、以下を実行します。Macも同じだそうです。

curl -fsSL https://deno.land/x/install/install.sh | sh

ちなみに、私の環境ではパスが通ってなかったので、以下を~/.bashrcに書きました。

export PATH=$PATH:~/.deno/bin

あとは、ターミナルから以下を実行

source ~/.bashrc

Denoの動作確認

deno run https://deno.land/std/examples/welcome.ts

Hello World的なのが表示されます。ファイルをダウンロードしてきているようで若干時間がかかります。

Aleph.jsのセットアップ方法

deno install -A -f -n aleph https://deno.land/x/aleph@v0.3.0-alpha.1/cli.ts
aleph init hello
cd hello
aleph dev

初回はダウンロードやらコンパイルがあるせいか、結構時間かかります。
起動が環境すると以下の画面が表示されます。

initial-img

感想

実際に変更してからリロードまでの時間がとてつもなく早いです。 Rollupもかなり早いらしいですが、どちらが早いのでしょうか。

Typescript用のコンフィグやらWebpack用のコンフィグやらが全然ありません。
すごくディレクトリがスッキリして見えます。

もうちょっと遊んでみようと思います。


Written by Yasuhiro Ito
Software engineer

© 2021, Yasuhiro Ito