Hyperapp x TypeScript x Webpack 開発環境構築まで

ちょっと話題のHyperappをTypeScriptとWebpackで試す。

今年は試行段階でもいいからもう少しまめにアウトプットしましょうということで…。とりあえず環境構築まで。

前提

・開発マシンのOSはWindows 10（あんま関係ないはず）
・Visual Studio Code
・nodeインストール済み（記事中ではyarnを使います）

webpackとtypescriptの準備

webpackもtypescriptも、グローバルインストールされていないものとします。
もちろんグローバルにインストールされていればここでのインストールは不要。

・プロジェクト作成

> yarn init -y  

・パッケージインストール

> yarn add --dev typescript webpack  

webpackでtypescriptを読み込むためのローダも入れておく。
今回は名前がつよいawesome-typescript-loaderを。

> yarn add --dev awesome-typescript-loader  

webpackコマンド、tscコマンドを使うために、package.jsonにscriptsプロパティを追記。

{  
    "name": "proj",  
    "version": "1.0.0",  
    "main": "index.js",  
    "license": "MIT",  
    "devDependencies": {  
        "awesome-typescript-loader": "^3.4.1",  
        "typescript": "^2.6.2",  
        "webpack": "^3.10.0"  
    },  
    "scripts": {  
        "tsc": "tsc",  
        "webpack": "webpack"  
    }  
}

ここまででpackage.jsonはこんな感じですね。

tsc initでtsconfigのひな形ファイルを作成する。

> yarn run tsc -- --init  

yarn runで実行するコマンドにパラメータを渡したいときは↑こんな書き方になる。
npm runでも同じですね。

TypeScript 2.6で生成されるtesconfig.jsonは↓こんな感じ。

{  
    "compilerOptions": {  
        /* Basic Options */  
        "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */  
        "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */  
        // "lib": [], /* Specify library files to be included in the compilation: */  
        // "allowJs": true, /* Allow javascript files to be compiled. */  
        // "checkJs": true, /* Report errors in .js files. */  
        // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */  
        // "declaration": true, /* Generates corresponding '.d.ts' file. */  
        // "sourceMap": true, /* Generates corresponding '.map' file. */  
        // "outFile": "./", /* Concatenate and emit output to single file. */  
        // "outDir": "./", /* Redirect output structure to the directory. */  
        // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */  
        // "removeComments": true, /* Do not emit comments to output. */  
        // "noEmit": true, /* Do not emit outputs. */  
        // "importHelpers": true, /* Import emit helpers from 'tslib'. */  
        // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */  
        // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */  

        /* Strict Type-Checking Options */  
        "strict": true /* Enable all strict type-checking options. */  
        // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */  
        // "strictNullChecks": true, /* Enable strict null checks. */  
        // "strictFunctionTypes": true, /* Enable strict checking of function types. */  
        // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */  
        // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */  

        /* Additional Checks */  
        // "noUnusedLocals": true, /* Report errors on unused locals. */  
        // "noUnusedParameters": true, /* Report errors on unused parameters. */  
        // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */  
        // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */  

        /* Module Resolution Options */  
        // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */  
        // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */  
        // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */  
        // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */  
        // "typeRoots": [], /* List of folders to include type definitions from. */  
        // "types": [], /* Type declaration files to be included in compilation. */  
        // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */  
        // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */  

        /* Source Map Options */  
        // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */  
        // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */  
        // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */  
        // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */  

        /* Experimental Options */  
        // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */  
        // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */  
    }  
}

つづいてwebpack.config.jsを作成（手書き）。

module.exports = {  
    entry: "./src/index.ts",  
    output: {  
        filename: "bundle.js",  
    },  
    module: {  
        loaders: [{  
            test: /\.ts$/,  
            exclude: /node_modules/,  
            loader: "awesome-typescript-loader"  
        }]  
    }  
}

自分のディレクトリ構成にあわせてうまいことやってください。

src/index.tsを作って、適当なコードで動作確認してみます。

console.log("hello.");  

webpackでコンパイル実行。

> yarn run webpack  

webpack.config.jsと同じ階層にbundle.jsができることを確認。
一応、nodeで実行してみる。

> node .\bundle.js  

hello.が出力されればOK.

hyperappだけ導入

Hyperappは他のパッケージに依存しないとのことなので、まずはhyperappパッケージだけ入れてみる。

> yarn add --dev hyperapp  

2018/1/2現在のバージョンは1.0.1。
TypeScript用の型定義ファイルも同梱されている。

そんで、先ほどのindex.tsを↓こんな感じに書き換え。

import {h, app, View} from "hyperapp";  

class State {  
    public constructor(public readonly count: number) {  
    }  
}  

class Actions {  

    public down() {  
        return (state:State) => new State(state.count - 1);  
    }  
    public up() {  
        return (state:State) => new State(state.count + 1);  
    }  
}  

const view: View<State, Actions> = (state, actions) => {  
    return h("main", {}, [  
        h("h1", {}, state.count),  
        h("button", {onclick: actions.down, disabled:state.count <= 0}, "-"),  
        h("button", {onclick: actions.up}, "+")  
    ]);  
}  

const mainApp = app(new State(0), new Actions(), view, document.body);  

READMEのやつにもうちょっと型を付けてみた感じ。

あと適当にindex.htmlを作って、上のjsを読み込みます。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>hyperapp sample</title>  
</head>  

<body>  
    <Script src="bundle.js"></Script>  
</body>  
</html>  

yarn run webpack してからindex.htmlをブラウザで表示してみよう。

スタイルもなんもないけども、まあちゃんと動きますね。

@hyperapp/htmlを導入

こんな感じでh関数だけでもViewは書けるようだが、JSXやhyperxを使うこともできるらしい。
ここでは公式の@hyperapp/htmlを使ってみる。バージョンは0.5.1。

> yarn add --dev @hyperapp/html  

import {h, app, View} from "hyperapp";  
import {main, h1, button} from "@hyperapp/html";  

class State {  
    public constructor(public readonly count: number) {  
    }  
}  

class Actions {  

    public down() {  
        return (state:State) => new State(state.count - 1);  
    }  
    public up() {  
        return (state:State) => new State(state.count + 1);  
    }  
}  

const view: View<State, Actions> = (state, actions) => {  
    return main([  
        h1(state.count),  
        button({onclick: actions.down, disabled:state.count <= 0}, "-"),  
        button({onclick: actions.up}, "+")  
    ]);  
}  

const mainApp = app(new State(0), new Actions(), view, document.body);  

うむ、こっちのほうがスマートだし、h1とかbuttonとかに型チェックが入るようになるのも良いですね。

とりあえず今回はここまで。

参考：
2018 年は Hyperapp の年だ
GitHub