tekitoumemo’s diary

C#、.NET系の技術ブログを書いています。みんなの洋楽ランキングを運営しています。

React使ってちょっとしたもの作った

今週、seo下がっちゃってアクセス数激減してます、つらみ。今月は21KPV着地しそうです。今回はReact使って「いいね」機能を作ったので、簡単な仕組みと感想文を書きたいと思います。

f:id:tekitoumemo:20180726203349p:plain

上の画像の通り、いいねを作りました。会員登録とか無いサイトなので「いいね」作っても意味はないと思いますが、React使ってみたかったんです。以前に書いたSPAじゃないReactの延長みたいなもんです。

簡単な仕組み

みんなの洋楽ランキングには、会員がいないので誰でも「いいね」が出来ます。「いいね」して、また来たときに「いいね」の状態が残ってないと萎えるので、状態を保存するためにローカルストレージを使いました。

クッキーだと、最大20個?までと制限があるので、10M保存出来るローカルストレージが最適でした。ストレージにはJsonで状態を持ってる感じです。サーバ側はCRUDAPI作って押した状態(付けたか外したか)によって呼び出すAPIを変えています。

デザイン

Instagramモロパクリしてます。本当はTwitterを丸パクリしたかったのですが、cssの知識がないので妥協しました(下のリンクみたいにしたかった、かわいい)
https://isaito-kurumizawa.github.io/GoodButton/

出来なかったこと

今月と来月は時間を作ることが難しくなるので、仕事終わってから2日で仕上げました。やはり色々課題が残っちゃいました。

・Azure でnpm i出来てない。
しょうがないからgithubにnode_moduleをブッこむという荒技を使ってます。ちなみにAzure Web Serviceはデプロイ時にnpm iしてくれるのでAzureは悪くないです。単純にpackage.jsonの書き方が悪いだけだと思います。デプロイはnpm i productionなので下見て変えれば大丈夫だと思う。

・スタイルが効かない
Reactのスタイルはhtmlに書き込まれるのですが、なんかデプロイしたら効かなかった。まぁcssはminifyしてるんで、ここら辺はどうでもいいかなと思ってます。おそらくPhysicalFileProvider使わなければいけないのかな?

・Redux使えば良かった
単一コンポーネントなので無駄に分散させる必要ないなーと思ってたから使わなかったんですが、勉強がてら使えば良かった。

普段Angular使ってる私がReact使ってみた感想

今仕事でAngularを使っていてAngular歴3カ月程度になります。Angular嫌いでロクに勉強もしてないので仕組みとかよくわかってないですが、React使ってみてAngularの良さがわかったのでちょっとぼやき程度に話したいと思います。

Angularはちょー難しいけど、スキルが低いチームほど使った方が良い

一般的にはReact、Vue.jsの方が初心者向けと言われてるのですが、API群が少なく開発者が選定しなければいけません。これの何が難しいのかというと他人のソースをパクりにくいので、統一してコードを書くのが難しいだろうなぁと思います。Angularは、基本的にRxJs、InputOutput、typescript、ライフサイクルさえ覚えればだいたいみんな同じコードが書けるようになります。つまり、ほぼAngularで完結するようなAPI群が揃ってるのでスキルレベルに左右されないチームが出来るってことになります。現に今のチームでダントツで仕事ができない僕でも多少なんとかなってるのでまぁ良いフレームワークなんでしょう。ただ、難しいのはやっぱり状態管理で、ReactみたいにRedux使おうぜ!みたいな風潮がないので、普通に作り上げるとバグを潰す期間が必要で普通に辛いです(@ngrx/storeってのがあるんですけどね)また、DIのせいでテストを書くのがめっちゃむずかったりするんでそこらへんはスキルが必要なんでしょう。その点、Reactは初見でも理解が出来て、ステートレス推奨してるので僕はReactの方が好きですね(まだ2%ぐらいしか理解してないけど)。Angular難しいし、1系から2系に変わって全然違う言語になった嫌われ者なので僕も嫌いでしたが、だんだん理解が出来るようになりました。Angular6からRxJsの変更がえぐいのでまた嫌われそうですね(笑)


こんなのがあるんですね。便利。
github.com