React / Vue.js / Angular / jQuery
Angularjsが出た時に、jQueryでもういいじゃん新しい言語覚えるのめんどくせーよと思いながらやってみたら、超便利で新しい言語ちゃんと覚えないとダメだなと改心したのが遠い分昔。
その後、Angularの頻繁なバージョンアップに嫌気がさしVue.jsを使ってみたら、Angularより随分整理されてて簡単でびっくりしたのが少し昔。
Vuetify とセットで利用するとほとんどコードを書かずにやりたいことができるし、typescript を使うと記述もシンプルで安全だし、もうこれで新しい言語覚えなくてもいいかと油断したのが少し前。
とは言え、Reactも触っておいた方がいいかなと触ったら、他のフレームワークとは概念が違い戸惑ったけれども超簡単でびっくりしたのが今日。
触ってみたいけど難しそうだなと思ってる方は是非触ってみてください。
特に便利と思ったところ
jsx/tsx
js/ts に html を直接埋められる。
以下のコードは等価。
const header = React.createElement("header", null,
React.createElement("h1", null, "Hello")
);
const header = <header>
<h1>Hello</h1>
</header>
React.createElementの様な書き方しかできないならVue.js圧勝かなと思ったけれども、そんなことはなかった。Flutterもこの辺融通効くようにならないかな…。
ベタのhtmlに近い形で記述できるVue.jsの方がデザイナとの協業に強いと思っていたのだけど、Storybookを併用して開発すれば問題ないようにも思えた。
Function Component
状態を持たないコンポーネントは class ではなく、function で定義できる。
Flutter の、StatefulWidget / StatelessWidget をすごくシンプルにした感じ。
以下のコードは等価。
class Square extends React.Component {
render() {
return (
<button
className="square"
onClick={() => this.props.onClick()}
>
{this.props.value}
</button>
);
}
}
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
記述がシンプルなだけでなく、このコンポーネントは状態を持たないことが読み手に一瞬で伝わるのが素晴らしいと思った。
チュートリアル
React公式のチュートリアルが、ステップバイステップでサンプルコードを修正していくものとなっており、Reactの素晴らしさを簡単に理解できる作りとなっていた。
準備
チュートリアルのソースコードは code pen にあるため、ローカルの開発環境作成は必須ではない。
ローカルの開発環境を作成する場合、node と create-react-app のインストールを行う。
choco install nodist
nodist + 10.23.0
nodist 10.23.0
npm i -g create-react-app
2020/11/14時点では、node 8, 10, 12 で動作すると記載があったが、8.17.0, 12.19.0 では動作しなかった。
プロジェクト作成と実行
# js版作成
npx create-react-app my-app
# ts版作成
npx create-react-app my-app --typescript
# 実行
yarn start
以後は、src以下のファイルを全部消して、チュートリアルの指示通りファイルを作成し、一つずつ修正をしていけば完了します。
コンポーネント単位でファイルを分けるなども簡単にできました。
おわりに
とにかく超簡単でした。
vue-cli もそうであるが、webpack.config を手で書かなくて良くなったので誰でも気軽に始められるのでぜひお試しください。
以下の記事もあわせて読んでおくとよいと思います。