Preactをはじめる

15243 ワード
JavaScript es6 preact 入門 webpack JavaScript テキストリンク

はじめる

この記事は preact の動作するプロジェクトの初期状態を組み立てるところまでです。preactならびに React に関するプログラミングの知見は一つも含まれません。ご注意下さい。

preactはサイズ軽量な React.js 「ぽい」ライブラリです。公式でも「Reactの再実装ではない」とうたわれていますが、まず同等の書き味が楽しめます。(JSXによるものが大きい気もする)

プロジェクトを作成する

mkdir preact-entry
cd preact-entry
npm init -y

関連ライブラリのインストール

webpackのインストール

npm install --save-dev webpack webpack-cli webpack-dev-server

babel のインストール

オブジェクトスプレッド代入とかクラスプロパティとか欲しい気がするので preset-state-2 を入れています。babel-preset-preactは更新1年前ですがまあいいでしょう。(やってることこれだけだし)

npm install --save-dev babel-core babel-loader babel-preset-env
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-preact

preact のインストール

npm install --save-dev preact

eslint のインストール

JSX周りのルールを使いたいので eslint-plugin-react を入れます。

npm install --save-dev eslint eslint-config-eslint eslint-plugin-react

設定ファイルの作成

webpack.config.js

エントリポイントは ./src/index.js、出力先は dist/、開発用サーバのベースディレクトリは public/ とします。

module.exports = {
  entry: [
    './src/index.js'
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './public'
  }
};

.babelrc

{
  "presets": [
    "env",
    "preact",
    "stage-2"
  ]
}

.eslintrc.js

ベースとして eslint:recommended を利用し、カスタマイズする方針でいきます。

react/jsx-uses-react と react/jsx-uses-vars あたりをまず追加します。no-console はデバッグ時にほしいので残す。no-empty-pattern は props とか state とりあえず使わないけど消さないパターンが多いので残す。・・・などなど。とりあえずこのくらいあれば違和感はないかと。

module.exports = {
  extends: "eslint:recommended",
  env: {
    browser: true,
    commonjs: true,
    es6: true
  },
  parser: "babel-eslint",
  parserOptions: {
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  rules: {
    "no-console": "off",
    "no-empty-pattern": "off",
    "linebreak-style": ["error", "unix"],
    "react/jsx-no-bind": ["error", { "ignoreRefs": true }],
    "react/jsx-no-duplicate-props": "error",
    "react/self-closing-comp": "error",
    "react/prefer-es6-class": "error",
    "react/no-string-refs": "error",
    "react/require-render-return": "error",
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  },
  plugins: [
    "react"
  ],
  settings: {
    react: {
      pragma: "h"
    }
  }
}

.eslintignore

VSCodeなどで webpack.config.js を開いた時にいちいち指摘がされて嫌なので .eslintignore にチェック対象外となるファイルについて書いておきます。

webpack.config.js
dist/*

プログラミング

public/index.html

以下のような index.html を作って public/ 以下に置きます。

<html>
<head>
  <title>Preact Entry</title>
  <script src="/bundle.js" ></script>
</head>
<body>
  <div id="mount"></div>
</body>
</html>

src/index.js

以下のようにしました。

import { h, render } from "preact";

/**
 *
 * @param {props} props
 * @param {state} state
 */
const Hello = ({ }, { }) => <div>Hello Preact</div>;

document.addEventListener("DOMContentLoaded", () => {
    render(
        <Hello />,
        document.getElementById("mount")
    );
});

package.json

実行スクリプトを用意します

  "scripts": {
    "eslint": "eslint src/",
    "start": "webpack-dev-server --config ./webpack.config.js --mode development"
  },

実行します

npm run start

動いた。よしよし。

まとめ

この段階で build した結果がだいたいディスク上で10kbを切るくらいです。Mac標準の gzip で圧縮すると 3.8KB。

$ ls -lh dist/
total 24
-rw-r--r--  1 ma2saka  staff   9.5K  4 25 14:33 bundle.js
-rw-r--r--  1 ma2saka  staff   3.8K  4 25 14:33 bundle.js.gz

「3kb」を標榜するのも納得のサイズ感かな?