ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

real world exampleを読んで

昨日も書いたような気がしますが、SPAのステートの設計があまりにも難しくて、コード書いてて破綻し始めてしまったので、real world exampleのコードを読んだり書き換えたりしながら学ぶことにしました。

real world example

github.com

これは、React + Reduxで書かれているものだが、他にもいろいろな言語で書かれた同じアプリケーションがたくさんあるので、比較する際にも参考になる。

感想や気付き

  • containerとpresentation componentは特に分けて書いたりしてない。この方が見通しがいいというか、行き来しながらコード読まなくていいのでいいなと思った。これからはこっちで書く。
  • appLoadedというステートをReduxの中に用意して、最低限必要なAPIコールが終わるまではヘッダーだけを表示するという挙動をしている。
  • トップレベルのコンポーネントcomponentWillReceivePropsの中でredirectのstateが書き換わった際にredirectを行うコードがあった
    • ただ、現行のReactではcomponentWillReceivePropsはUNSAFEという接頭語がついて非推奨になっているので似たような実装をするとしても違うライフサイクルメソッドを使う必要がある。
  • componentWillMountの中でlocalstorageに保存してあるJWTを取ってきてapi clientに対してセットしていた。やっぱりAPIを叩く部分はそういう感じで切り出してあげた方がいいなと思った。
    • しかし、componentWillMountも非推奨になってしまっている
  • react-reduxのmapDispatchToPropsは単にActionCreatorを渡すだけじゃなくて、そのコンポーネントに合わせた形にしてあげる方が使いやすそう。
  • 使いまわさないコンポーネントはファイル分けずに、作ったりしてる。その方が確かに見通し良いかも。
  • 非同期処理に関してはpromiseがpayloadとして渡された際に、resolveになったタイミングでactionをdispatchするmiddlewareをかましている
    • thunkより個人的にはわかりやすいかもしれないと思ってしまった。

ザクっと読んだだけでもこれだけ出てくるし自分の知識もまだまだだったなぁという反省。もっと深く読んでいきたいところだが、研究室関連でやることを思い出してしまったので今日はこの辺に。

雑談

でへへへ

ビルドがむっちょはやい。

フロントエンドのステート設計が難しすぎると思った話し

フロントエンドのステート設計が難しい

今、フロントエンドの勉強がてら、Gistみたいなアプリを書いています。

React + Redux という構成で書いているのですが、まぁフロントエンドのステート設計が難しい。

たとえば、読み込み中の状態をどうやって持たせるかとか、APIから返ってきたデータをどうやって持たせるかとか。

あと、どのタイミングでAPIをコールするかとかも難しい。

サンプルアプリのコードを読む方を先にやってみようかと思う、

雑談

急がば回れ

技術書典5に行ってきました

技術書典にいってきました。

techbookfest.org

今後行く時のためのメモと戦利品を。

メモ

  • 今回から池袋会場だった
  • 11時開場だったので1時間前着目標で会場へ向かった
  • 10時数分前についた
  • 東池袋駅からの方がサンシャインシティは近いが、池袋からでも全然歩ける距離
  • 結局11時の開場とほぼ同時に入場でき、20分で欲しかった本は手に入ったので速攻で退散した。
  • 次回以降も同じ混み具合なら同じ時間でいいなと思った。
  • 会場の通信はずっと良好だったので、電子決済も難なく。

戦利品

f:id:uutarou:20181008231717p:plain

もっと買おうと思えば欲しい本はいくらでもあったが、あんまりやりすぎても読み切れずお金だけがなくなるのでこれくらいにしておいた。

とりあえずFirebaseの本から読み始めた。

Firebase

今日は1日技術書典のスケジュールだったが、思った以上にサクッと終わって13時ごろには家に帰れたので、Firebase使ってアプリ書いてた。

雑談

昨日はブログ更新を忘れてしまった。というか寝てて起きたら1時だったので諦めた。

持病の薬の副作用なのかなんなのか異様に眠気がするのなんとかしたい。医者に言えばいいのかこれ?

研究しつつFirebaseの続き

研究

とあるWebサーバーのソースコードを読む、と言ってみたはいいもののC言語で書かれた数万行ありそうなコードを読んで理解して書き換えるのはとっても厳しい気持ち。

いじりたい機能は少ないので、それなら自分でHTTPサーバーを書くというのも一つの手かもしれないと思ったりした。TLSハンドシェイクとか自分で書いたら心折れるだろうか…。

どうするにせよ舵取り早くしないと取り返しのつかないことになりそう。

Firebase

Firebase使ってメモとるウェブアプリを開発中。正直ただの練習でしかないので、使うつもりはない。

AuthenticationとCloud FirestoreとCloud Storageを使えそうなのでいいお題だと思う。

まだとちゅうなのでとくに書くことなし。

雑談

今日は1日ずっと眠かった。なんだろうこれ。

Firebase Authenticationのサンプルを作りました

作ったよ。

動いているのはこれ。

React App

んでソースコードはこれ。

GitHub - uutarou10/firebase-authentication-sample

時間を使ったのはむしろreact-routerだったりする。それくらい簡単にこのレベルであれば実装できる。(コードはかなり汚いが)

このサンプルでは、ユーザーの登録を行うとverify用のメールが飛んでくるようになっている。

認証済みかどうかはuserのオブジェクトから取得することが可能なので、本番サービスではこれを用いてメアドの存在確認ができていないユーザーを弾いたり、操作を制限したりするのだろう。あとDBへの書き込みの権限設定にも使えた気がする。

セキュリティルール設定間違えてて脆弱性を生み出すとかもやらかしそう。この辺何かうまくやる方法があるのかはまだこれから。

雑談

久々にまともに酒を飲んだ

あまり進捗を出せなかった

タイトルの通りですが…。

今日は昨日の記事でも書いた通り、C言語を教えるSAがあったり、研究室のOB会の買い出しに行ったりと割とどうでもいい(?)ことでバタバタしていたので、進捗がない。つらい。

ちょっとだけでもやるか、と思って、30分でFirebase Authenticationのサンプルが実装できるかやってみた。

f:id:uutarou:20181004235249p:plain

f:id:uutarou:20181004235343p:plain

登録するところまでは余裕で間に合ったが、ログインして云々とかログインしてなければフォーム出すとかはちょっと間に合わなかった。

今日は早く寝て明日は1日研究でhないお勉強に使っていこうと思う。

雑談

CSS書けるようになりたい2018

C言語に入門した

フロントエンドやってたと思ったらいきなりC?

C言語入門

いきさつ

SAを担当する科目でC言語を教えないといけなくなって、「まぁ余裕やろ」と思っていた。

ところが、事前にもらった演習資料が結構難易度高くて「これはヤバイぞ」となったので、勉強することにした。

方法

なにから手をつければいいかよくわからなかったので、とりあえず演習資料みながらわからない部分ググりつつやったが、ポインタとか文字列操作とか出てきたあたりでその方法に限界を感じたので、一回基礎を総なめすることに。

昔から知っていた「苦しんで覚えるC言語」を一から順番に進めていくことにした。

9cguide.appspot.com

感想

私の学校では一年生でJavaをやって、その後2年ではJavaの応用に進むかC言語に進むか選べる。私は前者を選んだ。それはそれでオブジェクト指向っぽいなにかとかできるようになったので、間違ってなかったが、コンピュータサイエンスを学ぶ人なら一回どこかでCには触れておくべきだなぁと思った。

メモリ番地とかの話はOSの話の中にも出てくるし、そういう話の理解のためにもポインタとかは一度はやっておいた方がスッと理論が理解できると感じた。

Webの技術だけ触れるならこんなことは知らなくてもやっていけるかもしれないが、やはり本質を知っているのとそうではないのではいざという時の底力的なところで差がつくと個人的には思っているので、SAに対応するためにやるだけじゃなくてちゃんと自分の身になるようにやっていき。

雑談

明日SA大丈夫かしら。