BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Node、React、HTML、MDX、Vue、Svelte、PythonファイルからWebアプリを生成するZero Serverフレームワーク

Node、React、HTML、MDX、Vue、Svelte、PythonファイルからWebアプリを生成するZero Serverフレームワーク

原文(投稿日:2020/02/05)へのリンク

Zero Serverフレームワークを使えば、サーバサイドレンダリングを備えて、設定のほとんど不要なWebアプリケーションの生成、構築、開発が可能になる。新バージョンではNode.jsReactHTMLMDXVueSveltePython静的ファイルの混在が可能になり、TypeScriptもサポートされた。

ZeroのWebフレームワークでは、階層構造のフォルダにファイルを置くだけで、Webアプリケーションが生成される。設定はほとんど、あるいはまったく不要だ。ファイルの実装するページのルートは、フォルダの構造とファイル名によって決定される。ファイル自体は静的なファイルでも、さまざまな言語を使用したプログラムでも構わない。当初はReact、HTML、MDXによるWebページ実装がサポートされていたが、新たにSvelteとPythonファイルのサポートが追加された。

さらに、Zero Serverの機能を拡張することにより、ほぼ制約のないミックス・アンド・マッチが可能になる。マシンラーニングの分野でPythonが一般的な言語であることを意識して、Zero Serverの資料では、Zeroの最新バージョンで可能になった次のような開発シナリオが紹介されている。

次のような手順を想像してください。

  1. TensorflowモデルをPython APIとして公開する。
  2. Reactページを使用してAPIをコンシュームする。
  3. Node.jsでログインコードを記述する。
  4. HTMLないしMarkdown/MDKによるランディングページ。
    これをすべて、単一のWebアプリケーションとしてひとつのフォルダに配置してください。

フロントエンド側では、Zero Serverの解釈可能なファイルフォーマットにSvelteファイルが加わったことにより、スタイル、テンプレート、ビヘイビアを配置したシングルページのコンポーネント、リアクティビティの言語組み込み、さまざまなアプリケーションのパフォーマンス向上が可能な外科的(surgical)DOMアップデートなど、Svelteコンパイラの提供するメリットを活用したページ構築が可能になった。

ZeroでPythonファイルを使用するには、事前にPython3のインストールが必要だ。それにより、.py拡張子を持つファイル内にある個々のPython関数に対して、APIエンドポイントを定義することが可能になる。関数はhandlerという名称でなければならない。この名前の関数が./api/process.pyファイル内にあれば、http://<SERVER>/api/processにAPIとしてエクスポーズされる。Zeroは内部的にFlaskを使用しているので、jsonify(JSONレスポンスを生成する)やrequest(URLパラメータを解釈する)など、任意のFlaskインポートを活用することが可能だ。

プロジェクトのルートに配置されたrequirements.txtファイル内に記述された依存関係は、Pythonのパッケージインストーラであるpipを使って自動インストールされる。ファイル名称メカニズムによる動的ルーティングも利用可能だ($で始まるファイルあるいはフォルダは動的ルートと解釈される)。PythonとZeroを使用してファイルのアップロードを処理する方法のサンプルが提供されている。次のupload.pyファイルは、

# upload.py
from flask import request
from werkzeug import secure_filename
def handler():
  if request.method == 'POST':
    f = request.files['file']
    f.save(secure_filename(f.filename))
    return 'file uploaded successfully'

以下のHTMLフォーム(index.html)で指定されたアップロード操作の処理を行う。

<!-- index.html -->
<html>
  <body>
  <form  action="/upload"  method="POST"  enctype="multipart/form-data">
  <input  type="file"  name="file"  />
  <input  type="submit"  />
  </form>
  </body>
</html>

一方のSvelteファイルは、サーバでレンダリングされる。svelteコンポーネントが./about.svelteファイル内にあれば、そのページはhttp://<SERVER>/aboutに実装される。Zeroは個々のSvelteページのトランスパイルと(Parcelとの)バンドル、サーバ上でのレンダリング(従って、JavaScriptがロードされるまでユーザがブランクページを見せられることはない)、自動コード分割を実行する。トップレベルの.svelteコンポーネント/ページはデフォルトのuserおよびurlプロパティで渡されるので、Svelteのexport let prop宣言構文を使ってコンシュームすることができる。

<script>
  export  let user;  // user data from session (req.user of Express)
  export  let url;  // { query, params }
  // also any preload data returned from preload()
</script>

SEO向上のため、svelte:headコンポーネントでページのheadタグを設定することができる。

<svelte:head>
  <title>Page Title</title>
</svelte:head>
<h1>Hello!</h1>

さらにAPIデータを事前にロードして、サーバがレンダリングしたSvelteコンポーネントに渡すことも可能だ。これを行うには、Svelteファイルがpreload()関数をエクスポートして、必要なデータをページがレンダリングされる前にロードする必要がある。

<script  context="module">
  export  async  function  preload({ req, url, user })  {
  const res =  await  fetch(`/api/messages`);
  const messages =  await res.json();
  return  { messages };
  }
</script>

<script>
  // messages prop returned from preload() is passed here.
  export  let messages;
</script>

TypeScriptもサポートされた。Glitchを使用すれば、ローカルにインストールしなくてもZeroを試すことができる。ZeroはWebアプリ開発における"設定より規約(convention-over-configuration)"のトレンドの一部をなすものだ。同様のフレームワークは、しかしながら、ReactのNext.jsやVueのNuxtのように、フロントエンドフレームワークに特化したものが少なくない。このような特化は開発者の選択肢を狭くする反面、フレームワークに最適化されたアプリケーションを生み出すことにもなる。フレームワークロックインを回避するためのマイクロフロントエンド・アーキテクチャにおいて、Zero Serverがどのような役割を果たすことができるのか、今後が注目される。

Zeroのnpmパッケージは、Apache 2.0オープンソースライセンスで公開されている。コントリビューションはガイドラインに従った上で、ZeroのGitHubパッケージ経由で受け付けられている。

この記事に星をつける

おすすめ度
スタイル

BT