さわだくんの日記

JavaScript頑張ってます

絶望のReact

今日3時間近く頑張ったのにも関わらず全く進捗が出なかったからその反省。

 

 

反省点その1

基礎ができていない!!!!!!!

React以前の問題でJSのimportやexportであったり、Reactでもモジュールごとにファイルを分けた場合のpropsの挙動、複数のクラスコンポーネントで複数のstateを管理した時の挙動などについて、基礎を疎かにしたせいで基本的な挙動が想像できないので、いちいちconsole.logしてどこにどんな値が入るかを実験していた。

これにかなり時間を取られてしまった。

 

その2

思考の停止。

一回うまくいかなかったことを、なんでだろうと思いながらも全く同じやり方で繰り返し試していた。頭が回っていない。

 

その3

その1と被るがReactのlifecycleやReduxによるstateの管理(qiita等でやりたいことを調べると基本Reduxとセットになっている)などの知識がないので、コンポーネントをそれぞれの機能ごとに作るには作れるけども、うまいこと噛み合せることができない=自分のやりたいことを達成できない。

特にstateについてだが、どうやってバケツリレーしているかが追いきれていない感ある。

 

 

 

これからの方向性

についても、悩んでしまった。

 

現在、

 

firebaseによるメール・パスワードログイン機能

react-routerによるログイン画面とホーム画面のrouting

勤怠管理アプリをもう少し機能的にする

firebaseを使ってデータの保存、ユーザーとデータの紐付け

CSSを適当につけて、かっこよくする

 

といった順番で進めていこうかと思っていたが、今偶然twitterで、「未経験プログラマは適当な管理画面を作成し、簡単なCRUD機能を実装できたら十分だ!」なんて記事が回っていてだいぶ心がぐらついた。それくらいならすぐできそうな気もする。が、また最後まで完成させずに次に行ってしまうといつまでたってもポートフォリオが完成しないので、ここはグッとこらえて当初の計画通り修羅の道を歩んでいきたいと思う。

 

正直この計画を達成して作品を完成させることができる頃には、だいぶReactを使いこなせるようになってると思うので、ちょっと苦しいけどなんとか完成までこぎつけたい。とりあえず5月中には。

 

現時点でのわからないリスト

・ Reactのlifecycle

レンダリングされる前にstateをセットするとかなんとかが、よく理解できていない。逆にこれを理解できたらかなり思い通りにReactを操れると思うので頑張る。

 

・ react-routerによるページ遷移

componentを分けてLinkとRouteを使うと上手いこといってくれない。Link使うと確かにURLは変化するものの、Routeが拾ってくれないので画面遷移しない。

 

・ renderとは

色々なサンプルコードを見てると、renderのなかで条件分岐していたりする。(renderの中ではreturnでDOMを生成するかcomponentを呼び出すしかできないと思っていた。)renderを今一度理解されたい。

 

・ this.props.children

なんやこれはァ!!!!!!!!!

 

・ 最適な設計

色々サンプルを見ていると、どうやらroutingについてはシンプルなJSファイルでやってる。コンポーネントっぽくしていない。いや、コンポーネントだ。routingを一つにまとめる設計について、造詣を深めたい。

 

こうして言語化してみると、あれ、なんだか理解できないこともない気もしてくる。頭の中が整理された感じ。明日は頑張る。