ぶうううん's Cafe

どうにかこうにか。備忘録に近い。

Docker利用時のReact動作改善(高速化)について

Web

 Dockerを利用していると、ローカルでのコード変更がもっさりすることがあります。 そうした際の動作改善について調査する機会がありましたので、少しここに残しておきます。

ホットリロード有効化

 以下の何れかの方法でホットリロードを有効化する。

  • docker-compose.yml
    • environmentにWATCHPACK_POLLING=trueを追加する。
  • next.config.js
    • webpackDevMiddleware: config => {},を追加する。

Virtiofsの有効化

 Docker DesktopでVirtioFSを有効にする。ただ、コンテナ内でgit pushがうまくいかないかもしれない。つい先日正式採用されたらしい。

ボリュームマウントチューニング

 docker-compose.ymlでボリュームの末尾に以下の何れかを追記する。

  • :consistent
    • 完全な一貫性（常にホストとコンテナが完全に同じ表示）
  • :cached
    • 完全な一貫性（常にホストとコンテナが完全に同じ表示）
  • :delegated
    • コンテナの表示が信頼できる（コンテナ上の更新がホスト上に反映するまで、遅延が発生するのを許容）

SWCの有効化

 Next.jsのアップグレードを行い、SWCを有効にする。

  • v13.0.0 デフォルトでSWCが有効に。
  • v12.3.0 SWCの安定版。

CakePHPについて

Web

 今回はCakePHPについて調べてみました。

CakePHPとは

 CakePHPはPHP用Webフレームワークの一種であり、MVCモデルを採用しています。個人的な印象では、Laravelに次いで人気なPHP用Webフレームワークという認識です。 初リリースは2005年4月とのこと[1]。Symfonyのプロジェクトが開始されたのが同年10月らしいので、Symfonyよりも少しだけ年上なんですね。

CakePHPの特徴

 CakePHPには以下のような特徴があります。 - テンプレートエンジンが付属していない。 - CakePHPは標準でテンプレートエンジンを使用できず、View部分ではピュアなPHPを書く必要があります。ただ、テンプレートエンジンのTwigがパッケージに含まれているので、Twigを利用するのであれば別途テンプレートエンジンをインストールせずともOKです。 - ActiveRecordのORM - 生SQLを書く必要がありません。

CakePHP 5.0について

CakePHP 5.0では以下の内容がサポートされる予定です[2]。 - PHP 8.1以上をサポート。 - メソッドのパラメータと戻り値にネイティブ型のヒントを追加。（nullとvoid） - プロパティにネイティブの型ヒントを追加。

References

[1] JetBrains：25年に渡る PHP の歴史、JetBrains公式Webページ、入手先 < https://www.jetbrains.com/ja-jp/lp/php-25 > (参照2022-12-30)
[2] CakePHP Organization：5.0 Roadmap、GitHub、入手先 < https://github.com/cakephp/cakephp/wiki/5.0-Roadmap > (参照2022-12-30)

Symfonyについて

Web

Symfonyとは

 SymfonyはPHPフレームワークの1つである。ただ、個人的にSymfonyの存在をこれまで知らなかった。PHPフレームワークといえばCakePHPとLarabelのイメージが強く（特にLarabel）、Symfonyについては聞いたことがなかった。調べた限りではMVCを採用していることからある程度はモダンなフレームワークと言えるだろうが、PHPのWebフレームワークのなかでは先発であるだろう。

Symfonyの特徴

フレームワーク Hello world (ms) REST API (ms)
Symfony 5.0 1.1 2.1
CakePHP 3.7 1.7 5.8
Laravel 5.8 2.0 5.5
  • 他Webフレームワークでの利用

References

[1]. PHP Benchmarks：Comparator、InfoDroid、入手先 <http://www.phpbenchmarks.com/en/comparator/framework> (参照2022-11-29)．
[2]. Symfony：Laravel、A framework project using Symfony components、Symfony SAS、入手先 <https://symfony.com/projects/laravel> (参照2022-11-29)．

ReactとWeb Componentの違い

Web

Web Componentのおさらい

 Web Componentは、コンポーネントを可能な限り再利用可能な形にする手法のことであり、主に以下の3つの技術から成り立っている。

  • カスタム要素

    • カスタムされた要素とその動作を定義するためのJavaScriptコード。

  • シャドウDOM

    • カプセル化されたDOMツリー（シャドウDOMツリー）を要素に紐付けて、関連する機能を制御するためのJavaScriptコード。シャドウDOMツリーは、通常のDOMツリーとは別にレンダリングされる。

  • HTMLテンプレート

 Web Componentの基本的な実装方法は以下の通り。

  1. Web Componentを明示的に利用するクラスまたは関数を作成する。

  2. 作成したカスタム要素を登録する。CustomElementRegistry.define()に要素名、作成したクラスまたは関数などを渡す。

  3. 必要であれば、シャドウDOMをカスタム要素に紐付ける。Element.attachShadow()を利用する。

  4. 必要であれば、HTMLテンプレートを記述する。前述の<template>と<slot>を利用する。

  5. 作成したカスタム要素を使用する。

ReactとWeb Componentの違いとは

 ReactもWeb Componentも、再利用可能なコンポーネントを作成するという点では似ている。しかしながら、両者の目的は違うものだと認識している。

  • Reactの目的

    • DOMとデータを同期させるためのライブラリを提供する。再利用可能なコンポーネントはあくまでそのライブラリを利用する際の副産物である。

  • Web Componentの目的

Web Componentの使い所

 個人的にはReactやVueなどのライブラリ or フレームワークが存在する今のWebにおいて、それらが使えるのであれば使うべきだと思う。何か特殊な事情があり、それらが使えないが再利用可能なカスタムコンポーネントを使いたい場合にWeb Componentの使用を検討すべきだと考える。

References

ESLintの部分的無効化について

ESLint

ESLintは無効化しても良い？

 原則的に、無効化すべきではないと私は考えています。当たり前ではありますが、ESLintが存在することによって担保されるコードの保守性等が、無効化によって担保できなくなります。
 ただ、一時的な検証等で無効化するのは有りだとは思います。最終的には有効にした状態で動作することが理想です。

ESLintの部分的無効化方法

 ESLintの部分的無効化方法は、インラインで記述する方法と、.eslintrc.jsonやeslintConfig等の設定ファイルに記述する方法の2パターンが存在する。

インラインで記述する例

// 1行のみの場合
// eslint-disable
...

// 複数行の場合
/* eslint-disable */
...
...
...
/* eslint-disable */

References

ReactのuseEffect()の第二引数

React

 多分React初心者なら誰もが気になるuseEffect()の第二引数についてです。私が気になった部分について書きます。

useEffect()についておさらい

  • 副作用に関する挙動を書くReact Hooksである。
  • レンダリングされたDOMが画面に反映された後に動作する。(同期的なレンダリングを行いたい場合、useLayoutEffect()という関数を利用できる)
  • デフォルトだとレンダリング終了後に毎回呼び出されるが、第二引数でタイミングを変更可能である。
    • 空の配列 ([]) を渡した場合、useEffect()では props と state の値は常にその初期値のままとなる。

useEffect()の第二引数にsetState()を渡したら？

 useEffect()内にてstateを利用することは良くある。例えば、他のuseEffect()でstateを更新していて、そのstateが更新されたときに処理を行いたい場合等。その場合、useEffect()の第二引数には更新対象のstateを含むだろう。では、そのstateを更新するsetState()も第二引数に含んだらどうなるのだろうか?

結論：特に変わらない。stateを監視したいのであればそのstateのみを第二引数に含めれば良く、setState()を含める必要はない。

Reactのドキュメントに以下のような記述がある。

React は再レンダー間で setState 関数の同一性が保たれ、変化しないことを保証します。従って useEffect や useCallback の依存リストにはこの関数を含めないでも構いません。

References

ReactとNext.jsの関係

React

 ReactとNext.jsは良く比較されているが、よく分かっていなかった(そもそもNext.jsは使ったことがない)ので調査してみた。

Reactの特徴

Next.jsの特徴

疑問

  • ライブラリのフレームワークとは？
  • ReactにReact Server Componentsってものがあるけど、SSRとは違うの？
    • 違う。
    • React Server ComponentsはあくまでReact Componentをレンダリングするもの。SSRはサーバーでHTMLを予め生成するもの。
    • React Server ComponetnsではクライアントサイドのJavaScriptは不要。
    • ReactでSSRするならReactDOMServer。

References