Deno+Alephをためしてみた

365
NO IMAGE

はじめに

Deno+vnoをためしてみた(その2)を書こうと考えていたが、やりたいことができずに、少々はまってしまっているため、気分転換もかねて別のものをためしてみた。

Aleph

AlephはDenoで動かすことができるNext.jsインスパイアなフルスタックフレームワークとのこと。
ただ、バージョンがまだv0.3.0-beta.8なので、どこまで動くのかは不明である。
以前にどこかの記事でみた際はalpha版だったので、開発は進んでいると期待する。

では、vnoと同じように、サイトのGet Startedに従って動かしてみます。

Alephのインストール

  • Denoのインストールは済んでいること。インストール方法などは前のブログ参照
    • Denoのバージョンはある程度新しくないと動かないようです。
      deno run -A https://deno.land/x/aleph/install.ts
PS C:\Users\localuser> deno run -A https://deno.land/x/aleph/install.ts
Download https://deno.land/x/aleph/install.ts
Warning Implicitly using latest version (v0.3.0-beta.8) for https://deno.land/x/aleph/install.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/install.ts
Download https://deno.land/std@0.106.0/flags/mod.ts
Download https://deno.land/std@0.106.0/fmt/colors.ts
Download https://deno.land/std@0.106.0/path/mod.ts
Download https://deno.land/std@0.106.0/fs/exists.ts
Download https://deno.land/std@0.106.0/_util/assert.ts
Download https://deno.land/std@0.106.0/path/common.ts
Download https://deno.land/std@0.106.0/path/_interface.ts
Download https://deno.land/std@0.106.0/path/glob.ts
Download https://deno.land/std@0.106.0/path/win32.ts
Download https://deno.land/std@0.106.0/_util/os.ts
Download https://deno.land/std@0.106.0/path/posix.ts
Download https://deno.land/std@0.106.0/path/separator.ts
Download https://deno.land/std@0.106.0/path/_util.ts
Download https://deno.land/std@0.106.0/path/_constants.ts
Check https://deno.land/x/aleph/install.ts
Looking up latest version...
Download https://deno.land/x/aleph@v0.3.0-beta.8/cli.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/shared/log.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/shared/fs.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/shared/util.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/version.ts
Download https://deno.land/std@0.106.0/fs/ensure_dir.ts
Download https://deno.land/std@0.106.0/fs/_util.ts
Check https://deno.land/x/aleph@v0.3.0-beta.8/cli.ts
Aleph.js was installed successfully
Run 'aleph -h' to get started

コンソールの出力に従って、aleph -hを実行してみた。

PS C:\Users\localuser> aleph -h
Aleph.js v0.3.0-beta.8
The Full-stack Framework in Deno.

Docs: https://alephjs.org/docs
Bugs: https://github.com/alephjs/aleph.js/issues

Usage:
    aleph <command> [...options]

Commands:
    init           Create a new app
    dev            Start the app in development mode
    start          Start the app in production mode
    build          Build the app to a static site (SSG)
    analyze        Analyze the app deps
    upgrade        Upgrade Aleph.js command

Options:
    -v, --version  Prints version number
    -h, --help     Prints help message

インストールは問題なさそうである。

Alephでプロジェクト作成

sampleという名前でプロジェクトを作ってみた。

PS D:\work\aleph> aleph init sample
Using VS Code? [y/n] y
Deploy to Vercel? [y/n] n
Downloading template. This might take a moment...
Apply template...
Cache deps...
Download https://deno.land/x/aleph@v0.3.0-beta.8/types.d.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/core/mod.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/core/redirect.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/core/events.ts
Check https://deno.land/x/aleph@v0.3.0-beta.8/framework/core/mod.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/mod.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/components/Fallback.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/hooks.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/hoc.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/context.ts
Download https://esm.sh/react@17.0.2
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/helper.ts
Download https://cdn.esm.sh/v46/react@17.0.2/deno/react.js
Download https://cdn.esm.sh/v46/@types/react@17.0.19/index.d.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/renderer.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/core/routing.ts
Download https://cdn.esm.sh/v46/object-assign@4.1.1/deno/object-assign.js
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/pageprops.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/components/ErrorBoundary.ts
Download https://esm.sh/react-dom@17.0.2/server
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/renderer.ts
Download https://cdn.esm.sh/v46/react-dom@17.0.2/deno/server.js
Download https://cdn.esm.sh/v46/@types/react-dom@17.0.2/server.d.ts
Download https://cdn.esm.sh/v46/@types/prop-types@15.7.4/index.d.ts
Download https://cdn.esm.sh/v46/@types/react@17.0.19/global.d.ts
Download https://cdn.esm.sh/v46/@types/scheduler@0.16.2/tracing.d.ts
Download https://cdn.esm.sh/v46/csstype@3.0.8/index.d.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/aleph.ts
Download https://deno.land/std@0.106.0/hash/mod.ts
Download https://deno.land/std@0.106.0/fs/walk.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/config.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/compiler/mod.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/plugins/css.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/core/module.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/analyzer.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/helper.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/cache.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/mime.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/bundler/mod.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/compiler/dist/wasm.js
Download https://deno.land/x/aleph@v0.3.0-beta.8/compiler/dist/compiler.js
Download https://deno.land/x/aleph@v0.3.0-beta.8/compiler/dist/checksum.js
Download https://deno.land/std@0.106.0/hash/_wasm/hash.ts
Download https://deno.land/std@0.106.0/hash/hasher.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/bundler/esbuild.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/localproxy.ts
Download https://deno.land/std@0.106.0/hash/_wasm/wasm.js
Download https://deno.land/std@0.106.0/encoding/base64.ts
Download https://deno.land/std@0.106.0/encoding/hex.ts
Download https://deno.land/x/esbuild@v0.12.24/mod.js
Download https://deno.land/x/esbuild@v0.12.24/mod.d.ts
Download https://deno.land/x/brotli@v0.1.4/mod.ts
Download https://deno.land/x/brotli@v0.1.4/wasm.js
Download https://deno.land/x/lz4@v0.1.2/mod.ts
Download https://deno.land/x/lz4@v0.1.2/wasm.js
Check https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/mod.ts
Download https://esm.sh/react-dom@17.0.2
Download https://cdn.esm.sh/v46/react-dom@17.0.2/deno/react-dom.js
Download https://cdn.esm.sh/v46/@types/react-dom@17.0.9/index.d.ts
Download https://cdn.esm.sh/v46/scheduler@0.20.2/deno/scheduler.js
Done

Aleph.js is ready to go!
▲ cd sample
▲ aleph dev    # start the app in development mode
▲ aleph start  # start the app in production mode
▲ aleph build  # build the app to a static site (SSG)

Docs: https://alephjs.org/docs
Bugs: https://alephjs.org.com/alephjs/aleph.js/issues

sampleディレクトリが作られました。

api/
components/
lib/
pages/
public/
style/
.gitignore
app.tsx
import_map.json
vercel.json

プロジェクトを起動

vnoと同じように開発モードと本番モードで起動を切り分けられる模様なので、開発モードで起動を試してみる。

PS D:\work\aleph\sample> aleph dev
Check https://deno.land/x/aleph@v0.3.0-beta.8/cli.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/commands/dev.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/shared/flags.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/mod.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/server.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/oak.ts
Download https://deno.land/std@0.106.0/io/streams.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/server/response.ts
Check https://deno.land/x/aleph@v0.3.0-beta.8/commands/dev.ts
Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/init.ts
Check https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/init.ts
INFO Download https://esm.sh/react-refresh@0.10.0/runtime?dev
INFO Download https://cdn.esm.sh/v46/react-refresh@0.10.0/deno/runtime.development.js
INFO Download https://esm.sh/react@17.0.2?dev
INFO Download https://esm.sh/react-dom@17.0.2/server?dev
INFO Download https://cdn.esm.sh/v45/react@17.0.2/deno/react.development.js
INFO Download https://cdn.esm.sh/v45/react-dom@17.0.2/deno/server.development.js
INFO Download https://cdn.esm.sh/v45/object-assign@4.1.1/deno/object-assign.development.js
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/bootstrap.ts
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/core/hmr.ts
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/core/nomodule.ts
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/components/Head.ts
INFO Download https://esm.sh/react-dom@17.0.2?dev
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/pagedata.ts
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/components/Router.ts
INFO Download https://cdn.esm.sh/v45/react-dom@17.0.2/deno/react-dom.development.js
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/components/InlineStyle.ts
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/components/CustomScript.ts
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/react/components/StyleLink.ts
INFO Download https://deno.land/x/aleph@v0.3.0-beta.8/framework/core/style.ts
INFO Download https://cdn.esm.sh/v45/scheduler@0.20.2/deno/scheduler.development.js
INFO Download https://cdn.esm.sh/v45/scheduler@0.20.2/deno/tracing.development.js
INFO Start watching code changes...
INFO Server ready on http://localhost:8080/

vnoの際も思ったが、サンプルで小さいといえど起動が早い。
サンプル起動画面

お試ししてみて

vnoと同じく、インストールして起動しただけだが、特に問題なく画面の表示まで簡単にできている。こちらも時間を見つけてちょこちょこいじってみようと思います。