少し前、趣味のアプリを Angular で開発した。さらにそのあと簡単な勉強として Vue.js を触ってみた。
Angular, Vue とやってきたら、やはりよく同列で語られる React.js も一度はちゃんとやっておきたいなと思ったので最近 React に入門した。
自分がWeb開発に求める要件と React.js を学ぶ決断への経緯
- Typescript サポートが手厚いこと（やはり、型チェックと補完があると気持ちいい）
- Babel, Webpack などの仕組みを隠蔽して楽につかえる CLI ツールがあること
去年ごろ、自分がこの2つを重視して探した結果 Angular を採用した。Angular は Typescript で組むことを前提に作られている感じがしてとても良かった。 当時は React.js は Typescript のサポートがまだ Angular にくらべて手薄だったように感じる。
しかし、2018年11月になって久しぶりに調べてみると React.js のアプリを簡単に作れる create-react-app というコマンドが Typescript に対応したという情報をみた。
それなら React.js はじめてもいいかな？って思い立った。
create-react-app で速攻はじめる
npx create-react-app my-app --typescript
これだけで、React.js + Typescript の環境が構築完了した。すごい！
開発用サーバーの立ち上げやビルドについても生成される README に書いてあり、とても親切。
npm start
この1コマンドで開発用サーバーが立ち上がり、.ts ファイルを書き換えると即座にコンパイル→リロードまでやってくれる。 angular-cli と同じ体験ができる。いいねぇ〜
Compiled successfully! You can now view my-app in the browser. Local: http://localhost:3000/ On Your Network: http://xxx.xxx.xxx.xxx:3000/ Note that the development build is not optimized. To create a production build, use npm run build.
Angular と比べて良いと思ったこと
Material UI の導入が楽
Angular Material の Getting Started をみると、結構手順が多い。
- npm で複数個のモジュールを入れる
- アニメーションのモジュール設定を入れる
- AppModule に使用する Component を import する
- テーマを決めて入れる
- ジェスチャーのサポートのため、
hammerjsをいれる
対して、React 対応の Material UI の Getting Started をみると、ステップが少ない
- npm でひとつのモジュールを入れる
- フォントとSVGの CSS を入れる
薄いライブラリなので、小規模なアプリに良い
Angular は全部入りのフレームワークという感じなので、いろいろな機能を盛り込んだアプリであれば良いだろう。しかし、自分が趣味で作るようなアプリは自分用の小さいアプリが多いため、Angular の Module という仕組みだったりの管理は煩雑に感じてしまう。
対して、React は薄い。ほぼ View のレンダリング部分のみをやるだけなので、他の機能が欲しかったらその都度ライブラリを入れる、また、入れたライブラリは Typescript の中で import A from '...'; というふうに import するだけで使える。これはてっとり早くて嬉しい。
Stateless Functional Component (SFC) がカッコイイ
さいきんの React は SFC というのを推してるみたいで、これは Component を class ではなく状態を持たない function にしていこうぜっていうやつらしい。初めて知ったけど、スッキリかけてなんだかかっこいい。
import React, { SFC } from 'react'; interface Props { user: firebase.User } const UserProfile: SFC<Props> = ({ user }) => <p><img src={user.photoURL || ''} /> {user.displayName}</p> export default UserProfile
