10日間ほどかけて、モダンどころかトラディショナルなWebも知らない状態から少しずつ勉強を進めて、ようやくReactについてextends React.Componentだとかrender() { return ~}だとか分かってきたところです。
活動を始める直前は「新しい言語を身につけるなら、その言語の教科書買えばいいんでしょ」と考えていたのですが、さまざまな方の「React習得ロードマップ」を見ると半分ぐらいの方が「まずはHTML＆CSSの基礎を」「あとJavaScriptを」と書いていました。
これに則って私もProgateさんで基礎を学んでからReact習得に挑んだのですが、 マジでHTML&CSS、JavaScriptは前提知識として必須 でした。
「具体的にどういうところがよ」を忘れないうちに書き出して、誰かのお役に立てばと思います。
事前に勉強しておいて良かった
HTML編
ReactではHTMLのコンテンツを動的に生成します。
このとき使う言語(？)がJSXなのですが、書き方のルールは95%ぐらいHTMLと同じです。
そしておそらくReactの教科書においては HTMLのタグとその効果を知っていることを前提で書かれていると思います。 というのが、いちいちそれを書いていたらその教科書はReactの教科書ではなくてHTMLの教科書になってしまうからです。
なおHTMLのタグの書き方がと95%似ているだけで、拡張されて可能になっていることがとても多いので勘違いされないように。
CSS編
いまのところ私が触れたReactの学習においては直接CSSとの絡みはありません。
せいぜいJSXで追加する要素に対応したスタイルをあらかじめ用意しておくぐらいです。
しかしせっかくReactにより生成されたコンテンツが味気ないテキストだけだったり、平成初期のホームページのような内容だと達成感が得にくいと思います。
ある程度、基本となる装飾を知ってからReactの学習に挑むことで Reactを勉強するときのモチベーションに繋がります 。見た目って大事だよね。
JavaScript
JavaScript自体、そんなに難しい言語ではないので何かしらプログラミングされた方であればノー勉強でもだいたい分かってしまうものです。私もBashとPerlしかやったことありませんでしが、ほぼ8割は読めますし、残り2割は調べればすぐ見つけられます。Pythonの方が、よっぽどクセが強いです。
実はJavaScriptを先に勉強することで身につけるべきことは オブジェクト指向とそれに関連するキーワードです 。このキーワード、具体的には以下のあたりです。
- 継承
- カプセル化
- コンストラクタ
- プロパティとメソッド
Reactを使おうと思ったら、3行目ぐらいに以下を書きます(継承です)。
class udon expands React.Component {
事前に勉強しておきゃ良かった or もっと勉強すりゃよかった
まだ間に合う…！
CSS
位置関係。以下のあたりがごっちゃごちゃ
- width
- padding
- margin
- background-size: cover
- xxxx-align
- display: inline-block
- float
このあたりは1度課題を解いて「ふーん」で終わらせるのは無理がある。
いくつも例題を解いて体に染み込ませないと覚えられる自身がない。
残念ながらそういった教材は無い気がするがどうだ？
かろうじてProgateのスマホアプリはいくらか近いものがある。
しかし回答がすべて選択肢なので身につくか？と言われると物足りない。
Python実践データ分析100本ノック 第2版 （単行本）みたいな、とにかく量をこなして体に叩き込む機会が得られるのいいのだが。
まだCSS
あと4日目に書いた「CSSのプロパティを探索してみる」。これはもっと進めた方が良い。とにかく知らないと何もできない。
JavaScript
冒頭では偉そうに書いたものの、自分がまさに事前のJavaScriptの学習を途中で投げ出して、継承だとかそういうのをわからずに都度Reactを学びながら出てきた単語をググっていた。
これが非常に効率が悪い。いまさらながらもう一度戻って勉強しなおしているところである。
あと兎に角、書き方が難しい。数をこなして慣れてないと{}とか()とかワケワカメになる。学んで、自分でも書き出して覚えて、自分用チートシートを作っておくことをおすすめしたい。
で、何すればいいの
冒頭にも書いたけど、基礎を学ぶためにProgateさんを使うのはおすすめ。
よくTechブログである、初学者と講師が「○○をしたいんです！」「では○○について学んでいきましょう」という会話に拒絶反応が無い限りはオススメしたい。あったとしても、ちゃんと考えられた会話になっていて決してページ稼ぎにはなっていないので安心して取り掛かって欲しい。
ただしReactについてはバージョンが古いため、HTML&CSS, JavaScript(ES6)に限ったコンテンツだと割り切って欲しい。