yikegaya’s blog

yikegayaのブログ

Reactに入門してみる

次の職場のフロントエンドがReactらしいので予習として このサイト のReactチュートリアルやってみた。

+よくわかんないとこググって調べてみた

チュートリアルの内容

Reactを使って三目並べのアプリを作るチュートリアル

Reduxとかルータの話題は出ない。

感想

無料だし最初のとっかかりとしてよかった。

Reactは前に Udemyの講座 を受けてみたことがあったけど、先にこっちのチュートリアルやってからの方がよかった気がする。

Udemyの方は

  • 作るのが本格的なアプリで情報量が多い
  • ReactライブラリだけでなくRedux、ルータの解説もある
  • 楽天API、GoogleAPIの使い方も学べる
  • 有料といってもセールだと2000円以下なので安い

とかで充実はしていたけど当時の前提知識だと重く感じた。

あと動画が配信されてから日が経っていてライブラリとかAPIの情報が古くて自分で色々デバッグするはめになったりはしていた。

気づき的なことメモ

  • 一昔前は日本語ドキュメントの多さでVueがだいぶ有利だったかもしれないけど、色々ググってみてReactの方も十分日本語の情報揃ってる感はあった。
  • 「React」っていうとフレームワーク扱いされるけど、ReactもVueと同じでそれ単体だとjQueryの問題を踏まえて作ったフロントエンド開発の保守性を高めるライブラリであって、Reduxとかルータとか後付けて色々足してくとフレームワークっぽく使える
  • コンポーネント」という再利用可能なUI部品を組み合わせて開発する
  • コンポーネント間で「状態」(三目並べでいうと◯×とか)を受け渡す
  • stateに状態を保持して親コンポーネントから渡ってきたものをpropsに受け渡す
  • 最終的にコンポーネントから受け取った状態をrenderメソッド内のHTMLで描画する
  • renderメソッドは初回の描画でこの中では状態とかDOMを変更してはいけない。コンポーネント間で状態受け渡し→renderで描画のルールがある

これから学ぶこと

この後またReact深掘りしようと思った時に何しようか、思いつくまま書いてみると

  • Railsと連携させてみる(RailsからAPI飛ばしてReactと受け渡しさせる)
  • Reduxとかルータの話題は出なくてその辺の理解まだいまいちなので深掘りする
  • Reactベースで開発に必要な機能全部入りのNext.jsとかいうやつも気になる
  • javascriptの復習する。今回のチュートリアル内で このサイトjavascriptのおすすめおさらい教材として紹介されてたので読んでみたい
  • リントとかテスト触る
  • 「Reactは関数型言語っぽい」らしいけどよくわかってないので調べる。今の理解だと関数型言語は「関数の中の変数の状態を変えずに、関数そのものを他の関数の引数にする」的な組み方をするのでその辺が状態→renderメソッドの流れに似てるとかかと思ってるけど知らない。

キャリアプラン的には当面バッグエンドよりかと思ってるし、 Githubの有名なロードマップ みると道のりは険しいというかそんなに簡単にキャッチアップはできないのかもしれんけど、フロントエンドもできるようになれればいいな。。

その他Reactを調べていて参考になった記事

入門記事としてはこれ読めば良いのでは

5分で理解する React.js - Qiita