ゆるふわ技術日誌

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

トップ > 毎日技術日誌

フロントエンドに強い人になる為に…

毎日技術日誌

今日やった事

TypeScriptでアプリを書いてた。

フロントエンド最強マンを目指して……。

バックエンドもフロントエンドもできるようになりたいけど、流石に両立はできないのでフロントエンドから最強を目指すぜ！と思って今日は1日使ってウェブアプリを書いてた。

やっぱり、ステートの設計とか、どうやって非同期処理をするかとか結構難しい部分が多くて辛いなぁと思った。

定石みたいな部分もあるだろうし、知りたいと思ったが、どうすればいいものか。

って感じ。

とりあえず今日の作業リポジトリ↓

GitHub - uutarou10/choimemo2: やっぱりTypeScriptがお好き

謎にCircle CIの設定ファイルが入ってるけど、デプロイもせず、ただビルドがコケないかだけを見ているという謎。

そのうちFirebase Hostingに投げるようにします。

明日の予定 / やること

  • 病院
    • 正直症状が改善してきたので面倒でしかないけどまぁ行きます
  • 今日の作業の続き
    • とりあえず、辛い部分がなんなのかをわかる為にも一回作りきる
    • どれくらい進めるかわからないけど、とりあえずロジックの実装は終えたい(今見た目は全部放置してある)

雑談

新しいMac全てが快適で神…!

最近ブログだれてきてたので、しばらくはこのテンプレートで毎日更新していこうと思います。

次の日やる事がわかるだけでも、朝悩まなくて済むよね、っていうただそれだけ。

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より個人的にはわかりやすいかもしれないと思ってしまった。

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

雑談

でへへへ

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

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

毎日技術日誌

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

techbookfest.org

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

メモ

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

戦利品

f:id:uutarou:20181008231717p:plain

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

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

Firebase

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

雑談

昨日はブログ更新を忘れてしまった。というか寝てて起きたら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大丈夫かしら。

TypeScriptでReactのフォーム部品のイベントハンドラーを使う

毎日技術日誌

うまいタイトルがつけられなかった。

class TodoForm extends React.Component<PropTypes, StateTypes> {
  constructor(props: PropTypes) {
    super(props);
    ...
  }

  public render() {
    return (
      <label>
        What to do next?
        <input
          type='text'
          value={this.state.input}
          onChange={this.onChangeHandler}
          onKeyDown={this.onKeyDownHandler}
        />
      </label>
    );
  }

  private onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    ...
  }

  private onKeyDownHandler = (event: React.KeyboardEvent) => {
    const ENTER_KEY_CODE = 13;
    if (event.keyCode === ENTER_KEY_CODE && this.state.input !== '') {
      ...
    }
  };
}

onChangeやonKeyDownのハンドラの第一引数にはイベントが入るが、その型に何を指定すればいいのかがずっとわからなくて、anyを使ったりいろいろしてたが、正解を見つけた。

Reactの中に、React.xxxxEventという名前のinterfaceがあるので、それを指定する。onChangeであれば、↑の例にもあるようにChangeEventを指定し、ジェネリクスで対象のタグを指定する。

これで、無理やりなキャストやanyを使わなくてもちゃんと型情報を保ったまま使える。細かいことだけどスッキリしたので書いた。

雑談

大きな買い物をしました。