Sign in

Photo by Berkay Gumustekin on Unsplash

TL;DR

  1. 実行されるタイミングが違う
  2. propsとstateの値の即時性が違う
  3. 関数の中に含まれる機能の純粋度(凝集度)が違う

1. 実行されるタイミングが違う

  • ComponentDidMount:コンポーネントがマウントされてレンダリングの内容が仮想DOMからリアルDOMへ反映される前に、ブラウザへの表示をブロックするような前後関係で実行される。
  • useEffect最初のレンダリングが行われ、その内容がブラウザ反映された直後(一度初期値でレンダリングされた後に、改めて副作用が反映された内容で再レンダリングされる)

useEffect の利点は初回レンダリングまでのレスポンス性の高さになる。アプリのロード時にプレースホルダーの表示などを行いたい場合などに便利。

Hook APIの中には useLayoutEffect と言う、 componentDidMountcomponentDidUpdate と同じタイミングで画面の更新をブロックして実行されるAPIも存在するが、基本的には useEffect と使い、それで描写や挙動に問題がある場合に useLayoutEffect を利用すると安全。

2. propsとstateの値の即時性が違う

  • classコンポーネント :コンポーネントがマウントされアンマウントされるまでの間、同じインスタンスが残り続ける(再レンダリングには同じインスタンスのrender()メソッドを用いる)。
    よって、クラスコンポーネントにとって propsstate はインスタンスの可変メンバー変数であり、レンダリングがいつであれメンバーメソッドは常に最新の値が参照されることになる
  • 関数コンポーネント :レンダリングは「関数が最初から最後まで実行される」と同値。よって、関数コンポーネントはレンダリング毎に自身が実行され、そのまま関数の実行を終了する。
    よって、関数コンポーネントで定義されている変数・関数は実行の度に定義し直され、実行が終われば都度破棄される。
    しかし、State Hookが使われていた場合、そのレンダリング後のstateがコンポーネントの外に保存され、次のレンダリングが始まるタイミングで改めてコンポーネントに渡される。よって、レンダリングごとにpropsとstateは不変になる。

クラスコンポーネントでは、負荷のかかる処理を伴うUIなどでは、処理に時間がかかってレンダリングが追いつかない状態でUIを操作すると、props・stateの値が想定外の挙動をすることがある。
が、関数コンポーネントについてはレンダリングのタイミングでprops・stateは不変のため同様の問題は起きない。

3. 関数の中に含まれる機能の純粋度(凝集度)が違う

  • ライフサイクルメソッド :凝縮の単位はコンポーネントのライフサイクルのフェーズに当たる。よってその対応するライフサイクルメソッドがコールされる。時間軸での凝縮度が高く、機能軸での凝縮度が低い。
  • useEffect :凝縮の単位は useEffect()メソッド単位に当たる。同じ機能が分散して記述されず、一つの useEffect() にまとまったロジックを記述することができ、コンポーネントから切り離して再利用などもしやすい。

Photo by KOBU Agency on Unsplash

Reactで標準で行うClass適用

ReactでDOMにクラスを適用する際には、classNameプロパティに対して値を適用することが基本です。以下のようなコードになります。

<div className='login is-active'>
ログイン
</div>

上記のような適用するクラス自体が少ないような場合においては問題ないですが、以下のような場合に、直接classN …


Array change in data property

I suppose you know the reactive system of Vue.js when you define variables in data property. When you modify an array, perhaps you set an index directly like below.

export default {
data () {
return {
testArray: ['test1', 'test2', 'test3']
}
}
}
this.testArray[1] = 'test4';

Unfortunately, Vue.js can’t…


I created Simple SPA Application which can create the picture for “The Top 9 Albums Instagram Challenge”. And I used below library & frameworks

  • Laravel (6.2)
  • Vue.js(Vuetify) (2.6)
  • Spotify API

What is the top 9 albums instagram challenge?

‘#9AlbumsThatChangedMyLife’ has been filling our Instagram’s feeds for the past few days as people share their most highly-rated albums from…


Photo by Science in HD on Unsplash

ほぼ未経験みたいな感じでSIerからWebエンジニアに転身して約半年経ったので、いいターニングポイントだなぁと思いながら諸々振り返りたいと思います。

改めて、自分は新卒で入社したSIerを3年間くらい働いたあとに、渋谷に本社があるWebベンチャーに転職しました。前職ではいわゆる 超がつく上流SIerの働き方をしていたので、コードなんて全くイジりませんでしたし、ユーザ向けの要件定義・基本設計や顧客折衝が主な仕事でした。なので、もうほぼ未経験の転職かな、と。

とにかく現職の入社直後は大変だったなぁと改めて思います。

そもそもGitコマンドさえろくに知らず

GitFlow?何それ?PHPってどんな言語?Laravelってどんなやつ?やっぱりオンプレミスとか無いんだ、、あれ、Dockerで開発環境作るとこんなに早いの!?すごい!!

みたいな状態で入社してました。今思えばよく会社も受け入れたな、と思います。

それでも一応、半年経ってスキルセットとしては以下のような物が触れるようになりました。

PHP、Laravel、JavaScript、Vue.js、Circle CI、AWS(チョットダケ)、Git(転職して気づいたけどできないとかありえない)、Dart、Flutter

とかは日常的に触り、また土日で勉強を継続しております。まだまだ知らないことだらけですが、非常にエンジニアとして充実してきました。楽しい。

さて表題に戻りますが

現在、職場において完全新規のサービスのオウンドメディアを一人で保守することになりました。ここでいう一人は、実質アプリの改修や実装部分、また監視や運用周りも一人で見る、ということです。

lamechang

I work for a startup in Shibuya, Tokyo, mainly as full stack engineer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store