Zero Serverについて公式ページを読んで試したみたという内容です。
詳しく知りたい方は公式を参照するようお願いします。
間違いなどありましたらご指摘お願いいたします。 
Zero Server とは
※githubのreadmeの説明の部分をgoogle翻訳↓
Zeroは現代のWeb開発を単純化するためのWebフレームワークです。 パッケージ管理やルーティングを気にせずにアプリケーションを構築できます。 Node.js、React、HTML、MDX、および静的ファイルを組み合わせてコードを記述し、それらをすべてフォルダーに入れるのと同じくらい簡単です。 ゼロはそれらすべてに役立つでしょう。 作業を簡単にするために、ルーティング、バンドル、およびトランスパイルのための通常のプロジェクト構成がゼロで抽象化されています。
自分でいろいろ設定しなくても、require('moment') と書けば、Zero Serverが自動でmomentをインストールして、解決してくれます。
Installation
npm i zero
Hello World
時刻を教えてくれるアプリケーションを作成する
const moment = require("moment")
module.exports = (req, res) => {
var time = moment().format('LT'); // 11:51 AM
res.send({time: time })
}
npx zero
http://localhost:3000/time にアクセスすると、
time.jsで作成しましたので、localhost:3000/time にアクセスすると内容を表示してくれます。
moment を自動でインストールして使えているのが確認できました。
サーバーを稼働し続けた状態で、index.jsx を作成する。
import React,{ Component } from 'react'
export default class extends Component {
static async getInitialProps(){
const { time } = await fetch("/time").then((resp) => resp.json())
return { time }
}
render() {
return <p>Current time is: {this.props.time}</p>
}
}
先ほどの/time からjsonを受け取り、jsxも正しく動作しているのが確認できました。
webpackなどの設定をいじる必要がなく、簡単にアプリケーション構築できました!
Static Files
画像やテキストファイルなどの扱いについて
.js, .ts, .jsx, .tsx, .htm, .html, .md, .mdx以外の場合は、プロジェクトディレクトリにファイルを置けばそのまま表示してくれるようでした。
※プロジェクト直下のディレクトリにnihon-amagaeru.jpg を置いた場合
Node.js (.js, .ts)
module.exports = function(req, res) {
res.send("Hello");
}
Zero はExpress.jsを使用しているようなので、req, resのリクエスト・レスポンスのオブジェクトはExpressのものと同じ。
./api/login.js とファイルを設置した場合は http://localhost:3000/api/login でアクセスできる
module.exports = function(req, res) {
res.send("Login Api");
}
パラメータの取得
module.exports = function(req, res) {
console.log(req.body)
res.send({body: req.body})
}
POST, PUT, PATCH, DELETE でパラメータを問題なく受け取れるようでした。
$ curl http://localhost:3000/param-test -X POST -H "Content-Type: application/x-www-form-urlencoded" -d "category=1&sort=asc"
{"body":{"category":"1","sort":"asc"}}
$ curl http://localhost:3000/param-test -X POST -H "Content-Type: application/json" -d '{"category":1, "sort":"asc"}'
{"body":{"category":1,"sort":"asc"}}
$ curl http://localhost:3000/param-test -X DELETE -H "Content-Type: application/json" -d '{"category":1, "sort":"asc"}'
{"body":{"category":1,"sort":"asc"}}
Route Rewrites
module.exports = function(req, res) {
console.log(req.params)
res.send({params: req.params})
}
/user/lukeにアクセスした時に、./user/luke.jsがなかった場合、req.paramsに['luku']と設定してくれます。
TypeScript
.tsファイルにすると、TypeScriptとして動作させることができる
import * as express from "express";
function handler(req: express.Request, res: express.Response) {
res.send("Hello TypeScript")
}
export default handler
React
export default () => <h1>Hello React</h1>
Populating <head>
import {Helmet} from "react-helmet";
module.exports = () => (
<div>
<Helmet>
<meta charset="UTF-8" />
<title>Page Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
<h1>Hello World</h1>
</div>
)
react-helmetが使えるので、metaタグなどの扱いも簡単です
Importing CSS/Sass
cssとscssがサポートされているようです。
import "./style.scss"
module.exports = ({name}) => (
<h1>Hello {name}</h1>
)
body {
h1 {
color: blue;
}
}
TypeScript
.tsxとするとことで使用することができました。
import * as React from "react";
export default class HelloWorld extends React.Component<{}, {}> {
render() {
return (<b>Hello TypeScript</b>);
}
}
HTML (.htm, .html)
バンドラーはparcelが使われているとのことです。なので<script>タグのsrcから自動で解析してくれました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./style.js"></script>
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
import "./style.scss";
body {
h1 {
color: blue;
}
}
Markdown / MDX (.md, .mdx)
自動で.mdファイルをhtmlに変換してくれる
# Markdown in Zero
Zero renders `.md` files too.
import Btn from "./component/btn"
# Hello, world!
<Btn />
最後まで読んでいただいてありがとうございましたm(_ _)m