React.js

#02 create-react-appについて

ということで久々にReact.jsを触っているわけだけど、create-react-appが使いやすくなったように感じる。
初期からあるApp Componentがいつの間にかFunctional Componentになっていたりと、そっちに寄せてるのも良いなぁと。

ほとんど

yarn start

だけで良いというのは、とりあえず始めるときにすごく便利だけど、やっぱしボイラープレート的なものは作っておいたほうがいいかも。
reduxもreact-router-domも無いので・・・。

material-ui

やっぱし良く出来てるなぁと思いつつ、Style部分がよくわかってない。
今回のBlogシリーズはひたすらよくわからないところとかを垂れ流して、どこかで見直す・・・のか?って感じになりそう。

Github Actions

これもちょっと触ってみた。
Firebaseと相性良すぎて困る。今後もうこれでいいんじゃないですかね・・・。

#01 久々にReact.js

この間のUdemyのセールで久々に動画を買った。
フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 | Udemy

業務で使う機会がないから結構すっぽり忘れててなかなかつらい。
というか、Hook周りあまり追えてないのでその辺は書きながらやっていこうと思う。

とりあえずcreate-react-appの使い勝手が上がってる気がしてよい。

Vue.js Nuxt.js

この間、業務でVue、Nuxtを使う機会があったけど、その前にReact.jsをやってた関係もあって結構混乱した。
ちょっとやった感じだと個人的にはReact.jsのほうが書きやすい。

Firebaseがすげー便利でびっくりした

なるべくBlogに記事を書いていきたいと言ったので積極的に「良い!」と思ったことは記事にしたいりっくんですこんにちは。

とりあえず、進捗はこんな感じです。

Firebaseいいかもしれない

先日の記事で、Firebaseを使おうと思う、でもここまで手を広げていくと大変かなぁとか言ってましたが、
React.js(やっと)使ってみてる | SteadyWorX

firebase
バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。
firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと – Qiita
でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

実際に触ってみたら結構簡単で、且つやりたいことがそのままできそうなのでこのまま採用しようと思いました。という話です。

Realtime Database

FirebaseのDB機能、NoSQL系だってことしかしらなくて、よく見たらRealtimeって入ってるんですね。
で、そこから色々見ていったら、やっぱし更新を検知することができるっぽいんですよ(というか、そういう使い方がメインなのかな?)

ということで、現在のリロール状況を保持しつつ、更新があったらstateを変更する感じのコードを買いてみました。
実際の動きがこちら

これはいいですね、これならチームごとに更新をリアルタイムに取ってこれます。

後はこの辺に所持チャンプ情報周りもすべて格納していけば結構いい感じになるんじゃないかなぁというのが今のところの感覚です。
楽しくなってきた!!!!

React.js(やっと)使ってみてる

ちょっと体重がやばい感じになっていてゆるくダイエット中のりっくんですこんにちは。
Blogの更新、いよいよちゃんとやっていきたいので最近やってることでも書いておきます。

React.js触ってる

  • 作りたい物
  • 作る時間
  • モチベーション

全部がないとなかなか新しい技術がさわれません。
すげー広くの分野でHello Worldレベルは触ってるんですけど、なかなか理解できないですね。

2周遅れくらいではあるものの、Reactは触りたかった技術の一つなのでこれを気にちょっと使ってみています。

こんなの作ってる


League of Lgendsっていう神ゲーがあるんですけど、いま一緒にゲームをしている人はARAM(All Random All Mid)をよくやるメンバーで、5人を超えると8人、ないしは10人頑張って集めてカスタムゲームを開催しています。
ですが、カスタムゲームのARAMではリロールが出来なくて、しょうがなくドラフトピックのARAM(Randomではない、ハウリングアビスマップのドラフトピックというだけ)を行っていました。
※リロール = 完全にランダムだとツライので、最高2回、自分のチャンプをまた振り直すことができる。

それを雑にWebアプリ化すればなんとかならんかなぁと思ってふらーっと休日、夜間にポチポチ作っているという状況です。

わからんことだらけでつまりまくって入るんですが、これが結構面白いですね。
jQueryで作ったらまぁ形はできるんだろうけど、データがごっちゃごっちゃになるので今回はReact.jsを使っておいてよかったような気がします。

eslint

後ついでに、eslintも入れてAirbnb JavaScript Style Guideも適用させてます。
これはTwitterに書いたんですが、

でもこの大リーグボール養成ギブス的な感じ、好きだわ。出来上がったコードも読みやすいし。

です

機能が足りない・・・

で、まぁとりあえずリロールできるところまで来たんですが(くっそ見にくいけど、名前の横にREROLLボタンが有る)話していて

  • やっぱし自分が持ってないキャラが出て来るのって微妙だよね
    ユーザー管理と所持チャンプ登録したい
  • この状況を共有できないとめんどいよね
    これは、URLで共有できるようにしたい、パラメーターに全部突っ込んで的な
  • デザイン、案はあるけどちょっとまともにしないと

等々、色々課題があります。

firebase

バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。

firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと - Qiita

でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

何にしても楽しい

実はいろいろあってこんなことしてる場合じゃないんですが、割りと楽しいです。
ぱぱっと作ってやることやらないと。