@yakipuddingの技術ブログ。ポエム多め

ReactとFirebaseを勉強してみた感想

※個人の感想です※

前提

  • 仕事ではC#er(ASP.NET MVC)、バックエンド側担当
  • フロントエンドは苦手だけど興味はあるから知っておきたいなー程度
  • 最近盛り上がってるからいっちょやってみるかー程度

なぜReactとFirebaseを勉強しようと思ったのか

  • 特に意味はない

やったこと

  • 初心者の新しい技術習得方法についてにも書いたが、基本は公式チュートリアルやYoutubeの動画で勉強した
  • 動画のレポジトリをもとにして、自分が作ってみたかったもの(QiitaとかQrunchライクな投稿サイト)を作ってみようとした
    • ただしこのリポジトリをもとに作り始めたのは正直悪手だったかもしれない
    • ※動画はとても勉強になりますが、おそらくReact,Reduxの原理原則に対して厳密ではなく、動画主の癖が若干出ています
    • 例1.未認証なら認証画面に飛ばす処理を各コンポーネント側で制御していた
      • RouteでComponentを呼ぶときにfunctionかませたほうがよさそう
    • 例2.materializecssを使っている
      • Textareaまわりで実装していくとちょっと不満がでてきた
      • 途中でreact-materializeに変更した
    • ほかにもちょこちょこあったり。。。

感想

Reactについて

  • ライフサイクルメソッドの使い方はちょっと難しく感じたが、わりとわかりやすかった
  • 特徴
    • コンポーネントを部品としてClassとかfunctionで定義できて便利。使いまわせる。
    • 画面の状態は基本的にstateに持たせている
    • 初期処理などブラウザ側のイベントはライフサイクルメソッドで定義する
    • クリック処理などユーザー操作系のイベントはコンポーネントにhandleさせる
    • パッケージがいっぱいあるので、こういうコンポーネントほしいなーと検索したら大抵ある

Reduxについて

  • 役割が多くて正直難しい。こういう時にどのように実装すべきかで悩むことが多かった。
  • 正直いまでもよくわかってないところが多い…DB更新どこでやるのとか
  • お作法に厳格な感じがにじみ出ていてマサカリがこわい
  • 特徴
    • 情報はStoreとしてアプリ全体で管理
      • ComponentはmapStateToPropsでStateの情報をPropsとして呼べる
    • イベントでstateに変更を加える流れが決まっている
      • イベントをActionとして定義。Actionはdispatchするとstoreから呼べる
      • Reducerで変更後のstateを作成して返却する
      • ComponentはmapDispatchToPropsでdispatchしたActionを呼べる

Firebaseについて

  • 無料でサーバー使えるなんてすてき。わっほい
  • さらにDBも無料で使えるなんて便利。素敵
  • 特徴
    • Hosting
      • 簡単に使える。簡単で便利。
    • DB(Realtime Database, Firestore)
      • 普段RDBしか触ったことがなかったので、NoSQLの設計が若干難しかった
      • 複雑なアプリを作ろうとすると難しいのかなーと思った
    • Functionsでバッチ処理もできる

勉強をしてみた感想

  • 何かやってみたいときは、自分で手を動かしてやってみることが大切だと思った
    • 自分で手を動かすことで使い勝手や特徴、自分が今まで触ってきたものとの違いがよくわかる
    • 勉強したいと思ったとき、いまどき個人で無料で試せる環境はいくらでもあるのでやったもん勝ちだなと思った
  • ただし複雑なアプリケーションを作りたいなら未経験領域は難しい(時間がかかる)と思った
    • これやりたい、と思ってもどう実現させるかを調べるのに手間がかかる
    • 自分は複雑なアプリケーションを作りたいと考えがちなので特に
    • でも自分が作りたいものを作るほうが勉強していて楽しい

これからについて

  • このまま開発していたアプリを完成させてもいいが、どう考えても時間がかかりそうなのでいったんストップすることにした
  • 今度はVueでもやろうかな
  • あとは機械学習回りも勉強しないとな…と思っているので悩み中

この記事へのコメント

まだコメントはありません