React,Redux,開発環境(TypeScript)の学び始め(途中経過)
はじめに
盆休み中にReactが出来ないとWebエンジニアの求人少ないよねって感じが急にし始めたので勉強を始めた。 公式みればいいだろって思ったら、やることが多い上に手の付け所がわからなかったのでまとめておく。 あくまで自分の実施記録なので、推奨！とかこうやるといいぜ！という内容ではない。 ちなみにまだ途中経過。 HTMLとかJSとかはある程度勉強済みという前提でお願いします。
Reactを学ぶ
とりあえず公式をやった。
上から順にやっていけばいいのだけれど、ところどころ英語が辛かったりするので、 日本語で記事を翻訳してくれているサイトも参考にした。ありがとうございます。
難易度、量ともにあまり負荷は高くない。 というか、AngularのチュートリアルTour of Heroに比べたらかなり量が少なくて不安を覚える。 具体的には"これってAPIとか非同期系どうするんでしょう”、"噂のJSXって出てこなかったな"という感じ。
JSXについてはチュートリアルのMAIN CONCEPTSにあったので解決。
二点目のAPIとかについては軽く調べてReduxから叩くよっていうのは理解したけれど、手を動かすだけではきつかったので本腰を入れて勉強することに。
Reduxを学ぶ
知識0で公式をやろうとして挫折した。
イントロからしっかり読み込むのは英語が辛くて早々にあきらめて、BasicのTODOをやろうとしたが全体像が見えなくてきつい。 何をインストールして、どういうディレクトリ構成で、みたいなのが見えないと何から書き始めていいかわからない。。。 というか、概念が用語が分からない。。。となってので日本語資料を探すことに。 ありがたいことにいろいろな人が知見を共有してくれていたので大変助かった。ありがとうございます。
他にもたくさん記事を見たのだけれど、上記の２つのQiitaの記事が何度もお世話になった。 検索して出てくる記事の中には内容が古くなっているものもあるので最終更新日をきっちり見たほうがいいかなと思った。 また、初心者向けでない記事(middlewareの話とか、ロジックはaction?reducer?とか、ファイル分割を一切しないで単独ファイルにaction,reducer,container,componentが書いてある)もあるのですべてを理解するというのは諦める。というか、まだ早いと割り切る。共通して語られることが大事な部分なので、それを大量の資料から汲み取るという作業だと認識して進める。
日本語で概念を理解したと思えた後は、改めて公式のTODOをやる。
なんとなく概念の理解と動くものを作ったところで"あれ、非同期ってどうやるの？"という当初の疑問が解決されていないことに気がつく。 軽く調べて、そういうのはmiddlewareにやらせるべきとわかった。が、このmiddlewareがいろいろ種類があるようなのでまた本腰いれて比較しないと行けなさそうだなあと思い、一旦休止。 チュートリアルをやりながら、もっと楽にReact-Reduxを書くにはどうすれば？という気持ちになったので、開発環境について考える。
開発環境について学ぶ
Reactの公式チュートリアルにはcreate-react-appを使うのが推奨されている様な記載があったので、それに従う。
webpackの導入から始めてもいいけれど、便利ツールがあるのであればそちらに流れるべきかなと思ったので特に調べずに進める。
また、型については公式だとPropTypesを使っていたけど、個人的にTypeScriptを使いたかったので導入について調べる。
導入するだけなら、create-react-app --scripts-version=react-scripts-tsで出来るのだけど、それだけではエラー出まくりになるので、下記を参考にもう一度もう一度公式のTODOをTypeScriptでやる。
https://nowscripting.com/posts/blogs/ts_redux_react_tutorial
またEmacsでコードを書いているので、同時にTypeScriptを書く環境も整える。 これはAngularを書いていた時点で出来ていたので、特別にReactのためになにかを実施したわけではない。
Web-mode+tide+company+flycheckで補完+チェックをしている感じ。
上みたいに、エラーがあればEmacs上に通知される。
また、補完も効くのでストレスフリーに書いていける。
TypeScriptでTODOが出来たら、TODOを改変して勘所を掴む。なんでもいいけど、だいたいボタンを押したらFizzBuzzされるみたいな簡単なやつを作った。 ここまででお膳立ては出来たので、休止していたmiddlewareを学び始める。。。というくらいで今日に至る。
今後
middlewareもredux-thunk,redux-saga,redux-observableなど選択肢があるようなので、要調査かなと思います。
本件とは関係ないですが、Reactで開発やるよという会社様に祈られてしまってなぜReact勉強しているのはわからなくなっているけれど、いろいろ学ぶのも大事なのでReact+Redux+TypeScript+{なにかしらのmiddleware}+Firebaseで見せられるものが出来るくらいを目標にやっていきます。
やりたいこと： Webエンジニア
— crewfanq (@crewfanq) July 8, 2018
勤務地： 神奈川、東京
希望年収：500万円
転職時期： 要相談
年齢層： 二十代
スキル/資格/語学：JavaScript,TypeScript,Angular,要件定義,スケジュール管理/TOEIC:780
契約形態： 正社員
作成サービス： https://t.co/int5esxGaH
SES拒否：◎
#hiyokonitsuduke
まだまだ先は遠いですね。
