卒業研究とか部活に追われてあまりReactとか触れていなかったのでリハビリのつもりでやった。1日でガーッと書いたときの記録。コケたところとかも(どうせ後でまた同じところでコケるので)記録しておく。

どういうアプリ？

graphemesplitという、Unicodeで1文字をカウントするライブラリがある。それを使って文字数をカウントするだけのアプリ。ロジック部分はほぼないに等しいので、主にビューを作り込んでいた。

文字数カウント

作ってるとき思ったこと

今回はファイル分割すらせず1ファイルに全て書いた。70行以下に収まっているし、これくらいなら分割するほうが面倒。このファイル、かなりまとまっているし、結構あとあとまでテンプレートとして使いまわせそう。

流れとか

前につくったプロジェクトからwebpack.config.jsだとか色々引っ張ってくる
それを眺めながら適当に叩いて直していく
形ができてきたらTypeScriptを導入(本当にビューしか書いていないので、React.FCくらいしか型が出てこないけど)
バンドルサイズが大きすぎるからPreactを導入してみようと試みる

Preact導入

流れ見てもらえばわかるけど、Reactで書いた後にPreactを導入することにしたので、Reactから移行する方法について調べた。

Getting Started – Preact

どうやらpreactをインストールして、webpack.config.jsのresolve.aliasに設定するだけでいいみたい。TypeScriptの型もそれで通った。不要になったのでreactとreact-domをアンインストール。

コケた部分

TypeScript導入したらビルドできなくなった

これはめっちゃカンタンに解決できた。

import React from 'react' -> import * as React from 'react'

これだけ。

styled-componentsが効かない

styled-componentsはclassを振るので、それを受け取っていないと効かない

// NG
// const Component = (props) => <h1>{props.value}</h1>;

// OK
const Component = (props) => <h1 className={props.className}>{props.value}</h1>;
const StyledComponent = styled(Component)``;

設定ファイルどれを書けばいいんだ…

awesome-typescript-loaderを導入している場合、babelrcとかは要らなくて、webpack.config.jsとtsconfig.jsonだけあれば良い。babel関連はtsconfig.jsonに書いて、webpack.config.jsはその辺を気にしなくてよい。

input[type=checkbox]ってどうReactで扱えばいいんだ？

まあ何にも考えずに書くならこんな感じでOK

const CheckboxComponent : React.FC<{}> = () => {
    const [flag, setFlag] = useState<boolean>(true);
    return (
        <label>
            <input type="checkbox" checked={flag}
                onChange={() => setFlag(v => !v)}/>
            フラグ{flag ? 'onだよ!' : 'offだよ!'}
        </label>
    );
};

もうちょい捻るとこんな感じ

type Props = {
    value: boolean,
    onChange: (events: React.ChangeEvent<HTMLInputElement>) => void,
};
// 外部からonChangeとvalueを受け取る
const CheckboxComponent : React.FC<Props> = ({value, onChange}) => {
    const [flag, setFlag] = useState<boolean>(true);
    return (
        <label>
            <input type="checkbox" checked={value}
                onChange={onChange}/>
            フラグ{flag ? 'onだよ!' : 'offだよ!'}
        </label>
    );
};

イベントハンドラの型わかんねえ…

まず、関数の型はこんな風に書ける。

type Props = {
    value: string,
    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void,
};

型についてはVSCodeとかだとマウスオーバーすると出てくる。ありがたい時代になったものだな…Vimにもこの機能欲しいしちょっと調べるか

依存関係

@babel/core
awesome-typescript-loader
webpack
webpack-cli
typescript
@types/react
@types/react-dom
preact
styled-components

これだけで出来るんだな…すごい

一発ネタだし、今回は特にテストとか書くつもりはない。

リハビリがてらやったけど、結構サクサクと書けて楽しかった。

Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

Reactのリハビリがてらアプリ作った記録