メモブログ

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

javascriptやcssの命名規則のメモ

すぐ名前を忘れるのでメモ

名前 用途
スネークケース young_man bemとか?
キャメルケース youngMan 関数、メソッド
パスカルケース YoungMan Class
ケバブケース young-man コンポーネント

ケバブは串刺しだかららしい、覚えやすい。
キャメルとパスカルでいつもわからなくなる。

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