メモブログ

技術的なことを書き連ねるブログ

Reactのライフサイクル

f:id:resistance_underground:20190103180425p:plain

Reactでライフサイクルについて学ぶ。
毎回、忘れるので忘備録も兼ねて、文章で読んでもイマイチ頭に入らないのでモックで挙動を確認するのが一番いい。


codesandbox.io

componentWillMount
  • コンポーネントがDOMツリーに追加される直前に一度だけ呼ばれる
  • 初期化に使える
  • ここでsetState()した場合は更新後の値が使われる
  • React 17.0で廃止予定
componentDidMount
  • 最初のrenderが実行された直後に実行される
  • DOMへのアクセスが可能なので要素の初期化処理に使える

componentWillReceiveProps

  • コンポーネントがPropsを受け取るたびに呼ばれる
  • 新しいモノと古いモノ2つを参照出来る

shouldComponentUpdate

  • trueを返すと再描画される falseだとされない
  • propsやstateは更新されたけど、描画は変化無し、みたいな時に再描画するのがもったいないので、その時はfalseにしたりする

componentWillUpdate

  • コンポーネントのPropsやStateの変更で描画する直前に呼び出される
  • 初期描画時は呼ばれない
  • React17.0 で廃止予定

componentDidUpdate

  • コンポーネントのPropsやStateの変更で描画が行われた直後に実行される
  • 初期描画時は呼ばれない

componentWillUnmount

  • コンポーネントがDOMから削除される直前に呼ばれる
  • イベントやタイマーのキャンセルに使う

図だと、この記事がわかりやすい。 qiita.com

Vue.jsで flickr 画像検索アプリを作る

f:id:resistance_underground:20181228194309p:plain

Vue.jsのRouterやらVuexを覚えるために画像検索アプリを作りました。
Vue CLI を使っています。
この規模だとVuexを使うメリットもそんなに感じられず。
お作法の勉強にはかなりなりました。


■DEMOページ
https://underground0930.github.io/demo/vueFlickerApp


リポジトリ github.com

Vue.js で 計算電卓アプリを作る

電卓

Vue.jsが流行っているので、
ちょこちょこ勉強していたのですが、

簡単なアプリならさくっと出来るなーと思い、
練習がてら電卓アプリを作ってみました。

巷で転がっている電卓アプリはeval()を使いまくっていてとても簡単そうだったのですが
evalはあまり推奨されていないのと、セキュリティ的にも良く無さそうなので、
あえて使いませんでした。
お陰で、jsを書くのが少し大変でしたが勉強にはなりました。。

完成品

codesandbox.io

仕様
  • 基本はiphoneの電卓の仕様と同じ
  • 「AC」ボタンは全部クリア、「C」 ボタンは入力中の数字のみクリア
  • 「=」連続押しでの、計算の反復は今回は無し(やりたかったけど、結構めんどくさい)
感想

面倒だったのが、値のデータ型で、それをいちいち変換しないといけない所です。
表示上Stringじゃないとうまくいかない所、

例えば
Numberのままだと0.00 が 0になったり1.00が1になったりします。
入力中はStringで、計算するときはNumberで、のように
Number <--> String と行き来するのがやっかいでした。
javascriptは型には寛大だけど、バグの温床になりそうですね。
Typescriptで書いた方がいいのだろうか。。

正直Vue.jsの恩恵はこの規模だとそんなに与れないかもしれないですが
このデータバインディングがめちゃくちゃ便利だと感じました。

しかし、codesandboxは素振りやモックには最高のサービスですね。