2019年末くらいにUdemyで買って放置していた
Typescript with modern React (i.e. hooks, context, suspense)
にようやく着手、修了しました。
この記事では、
- コースの内容紹介と背景
- 学べたこと
- 所感
などを書き留めておきます。
コースの内容
ページ概要から抜粋すると、
- 学べること
- React x TypeScriptの導入方法
- create-react-appで作成する場合
- 1から作成する場合
- TypeScriptについての基礎
- React Hooks（ useState / useContext / useReducer / useEffect ）
- React x TypeScriptの導入方法
- 前提条件
- React / Reduxを以前用いたことがある人推奨
- TypeScriptは学んだことがない人でもOK
- React / Reduxを以前用いたことがある人推奨
となります。
自分はReduxを使った経験はありませんが、
問題なく修了できました。
おそらく、
- Fluxに関する知識をかじっていた
- Vuex（状態管理系ライブラリ）を使った経験
があったため、修了できたのだと思います。
自分と同じような経験や知識がある方なら、
問題なくコースを進められるかと思います。
買った背景
本コースを買った背景は、
- TSXの書き方を素振り
- React Hooksを体験する
の2つです。
自分はフロントエンドのスキルとして、
Vueをベースに勉強、仕事で使用しています。
そんなVueが、Vue3のアップデートに合わせて、
TSXをサポートするという情報を耳にしました。
TSX（JSX含めて）触った経験が少ないため、
改めて書き方やメリットを体験したく、本コースの購入を決定しました。
また、Web猫ブログ | 2020年はVueをTSXで書く？で
記載されている通り、
あとはReactとVueの双方でTSXを書けるようになることは、相互乗り入れ(?)ではないですが、互いに往き来しやすいというメリットも生まれそうです。
と技術選定に関するメリット、また、
自分のスキルとしてもReact / Vue双方が触れることで、
関われる仕事の機会が増えるといったメリットが得られると思いました。
学べたことや所感
コースの内容は、以下リポジトリで素振りしました。
TSX（JSX）ついての咀嚼
TSX（JSX）は、
JavaScriptのコードでHTMLを組み込むJS-in-HTML*1と理解しました。
また、自分のJS-in-HTMLに対するイメージが、
- 以前：JS-in-HTML＝React
- これから：JS-in-HTML＝TSX（JSX）
に変わりました。
React Hooksのコンテクストが心地よい
Vuexを使った際は、
ちょっと使い心地がよいグローバル変数というイメージでした。
（おそらく自分がVuexに関する知識や設計ができていないからだと思いますが...）
ただ、React Hooksのコンテクストは、
定義したコンポーネント内に絞ったVuexという感じであるため、
状態管理（どこで取得、クリアするといった制御）が楽かなという所感です。
Reach Routerの認知
コースでReach Routerというルーティングライブラリの紹介がありました。
Gatsbyのルーティングでも使用されているようです。
Reactでは、React Routerが標準のルーティングライブラリのように見えますが、
それぞれのメリット・デメリットが理解できていないため、
実際に使用する際はどちらを選ぶか悩みます。
比較記事とかあればいいんですが...*2
次にやりたいこと
次のステップとして、以下のことを学習・調査したいと考えました。
- TSXでReact / Vueで書いたとき、それぞれのメリット・デメリットを理解する
