Laravelで作ってたサイトをReact/ReduxでSPA化してみた。

18/01/2020

感想がてらの宣伝です。


名言投稿アプリみたいな感じのつもり
今のところ少々アクセスはあるものの
投稿とかはなかなかしてもらえてない。
理想は勝手に賑わってくれたらいいのだけど、
そんなうまくはいきませんですよねぇ。

投稿して頂いても良いのですよ。
Let’s登録プリース、ビバ投稿。
先っちょだけでいいから登録してみてください。

技術的な事は何も書いて無いです。アーキテクチャがどうとかは
よく分からないしベストプラクティスがなんだとか意識高い話も知らない。
ただちょっと使ってみた、とこんなんやってみた、とかのかるい感想です。

割でネガティブな感想多いかも、文句ばっかりおじさん。
でも頑張らないとなー、とイヤイヤながら頑張り中。

Laravel

API化

Laravelについてはとりあえず全部API化したつもり。
っていう言い方でいいのかな？

Authのverifiedとかpassword_resetとかも
APIで何とかしようと思ったのだけども
すんなりいかず面倒になって、

誰も見てないだろうし。
と言い訳しつつ
goolgeとTwitterのログインがあれば一旦はいいかと諦め中。

verifyとかもAPI化してみた。

LaravelのAuth・API(passport利用)でmail認証周りとか

postman

あんまりやった事ない作業だったので
APIをリクエストする際どうやってエラーとか見ればいいのか
最初よくわからなかったけども

postman使うと結構はかどりました。

https://www.getpostman.com/


laravelで作った時の前記事

Laravel使ってみたのでRailsとざっくり比較(個人開発)

Firebase

Laravel関係ないけど、途中でFirebaseってのを知って
こっちのが手軽そうで良かった?
のかなとも思ってはいる。
詳しい事は知らない。

React/Redux

jqueryでいいやおじさん(30半ば)なのだけども、
react使う仕事の依頼が入りそうなのもあって
いいかげんやらないとなーと頑張って試してみました。

軽い気持ちでちょっくらやってみっかと始めたら
客仕事の合間にやってたってのもあるけど
あれもやりたいこれもやりたいってやってたら
2ヶ月ぐらいかかってしまった。

React

とりあえず使ってみた感想としては流石人気のフレームワークなだけあって
慣れると使いやすい。とは思う。
日本語の情報が少ない気がするのでgoogle翻訳さんにはよく頼りました。

一人作業で、そこまで気にしてソース書いてる訳ではないのですが
それでもjqueryに比べてかなり整理して作れると思います。

当然だとは思いますが初回の表示とかページ遷移も体感はかなり早くなりました。

styled-components

折角component指向だしcssもまとめたい、
ので多分Reactでやるなら使った方がいいのかなとは思う

ただ、csscombとかが対応してないっぽくて
微妙に快適でない。
ただエディタの設定頑張ればいいだけかも、ですが。

SSR

今はSSRは不要とかって情報も見かけた気がするので

share用のOGPとかだけview(blade)わけて切り替えればいいや、
と思ったのだけども

どうなんだろう？ちょっと様子見中ですが
更新してまだ一週間たってないから誤差の範囲の可能性もあるけど
微妙にアクセスさがった気がもする。

ので、やった方がいいような気はしてる
単純に作りが駄目なだけかもだけど

入れるとしたら
laravel-server-side-rendering
とかなのかな？

やった事ないからしらんけど。

laravel-server-side-renderingやってみた。

LaravelをReact化+SSRした際のつまった所

Redux

React自体は以前Vueとか軽ーく触っての前知識
とかコンポーネント指向ってやつが
多少頭にあったのでわりとすっと入ってきたのですが、

Reduxはあんまり馴染みの無い概念？というか
なんというかだったので結構慣れるのに時間がかかりました。

mapDispatchToProps周りとかなんで
そんな周りくどい事すんの？って思いながら書いてました、
今も若干思ってるけど、でもまぁきっと必要な事なんでしょう。
途中からreact hooksっていうのがあるのを知って、hookでやった方が簡単便利。

余談(フロントのフレームワーク)

angularとかbackboneとかvueとか
試したり仕事でも多少は利用する事は
あるにはあるのだけど、
この辺りすぐ移ろうのでほんとやめてほしい。
別にどれもかわらねぇだろうって気はしなくもない。

流行色みたいに誰か偉い人が
このフレームワークで行っちゃいましょう。
って決めてくれたらいいのにな。

React/Reduxのまとめ

文句ばっかりだけど、
React使うならReduxは使った方がいいだろうなーとは思いました、
ただ慣れるまでが面倒よね。
慣れてしまえば管理はしやすいと思います。

でも今慣れた所でしばらく時間がたった時に
自分で書いたにもかかわらず

なんだっけコレ？

現象がおこりそうで怖い。

ので仕事では基本言われなきゃ
今後もしばらくはjquery使うとは思う。

その他

VS code

sublime派だったのだけど、
VueとかReactの場合はどうにも微妙な気がしたので
vs codeに乗り換えました。

エディタ変えると最初はストレス溜まる、
けど慣れればまぁそこそこ快適です。

Typescript

ついでにtypescript使ってみました。
Angular1ぐらいの頃にかるく触ってみたのだけども、
まぁなんというか面倒くさいな、っていう印象でした。

がGoogleに採用されたりして最近盛り上がってるっぽい様子なので
再度チャレンジしてみました。

が、使ってみた結果としては
やっぱり面倒だなって印象は変わりません。
ググった記事みてもベタ褒めなのが多いので
若干言いづらいけど、ただただ面倒。
ツヨツヨの方に怒られそう。
僕が使いこなせてないって話なだけかもですが、

チームで動いてるような人だと違うのかなぁ
インターフェースとかジェネリクスとか無くても
動くんだから別に無くて良くない？って思っちゃう。

あとlinterでいちいち怒られるのが気になっちゃうので
途中から大分ゆるめにしてました。

テストコード

アクセスあるかどうかもわからない適当個人開発にテストなんてやってられないぜ。
と、laravelもreactテストコード書いてませんが
やった方がいい、というか受注仕事とかだとまず必要だろうなーというのは
なんとなく実感しました。

多分気づいてない所でエラーとかおこってる箇所結構ありそうだなーと、
テスト書きましょう。そのうち。

とりあえずざっくりですが以上です。

鼻くそほじってるだけで収入入らないかなー。

webjavascript, Laravel, react

Posted by admin