React、Vue、Svelte、Solid のレンダリング性能
様々な指標で多くの JavaScript フレームワークが計測されている GitHub js-framework-benchmark による処理時間 + レンダリング時間の公式総合結果。最も速い Vanilla JS (素の JavaScript) を 1 とした数値です。Vue は高性能とされているコンパイラ型の Svelte や Solid と比較しても意外？に速いようです。この結果からは性能に関しては React に対して Solid は圧倒的ですが、Vue に対して Svelte の優位性が薄い感じです。
表示速度は UX や SEO (Google 検索順位) に大きく影響します。現在の Google クローラーは CSR (クライアント側で JavaScript を実行してレンダリング) でコンテンツを評価できるため、Next や Nuxt などの拡張フレームワークによる SSR (アクセス時にサーバー側でレンダリング) や SSG (事前に静的サイト生成) でなくてもコンテンツ自体はほとんどの場合は認識されますが、方式に関わらず、処理 + レンダリング速度は重要です。Vercel、Cloudflare、AWS などの CDN で JS を実行するサービス CDN Edge も有用です。
拡張フレームワークの機能
| ベース | 拡張 | ファイルシステムルーティング | SSR | SSG |
|---|---|---|---|---|
| React | Next | ○ | ○ | ○ |
| Vue | Nuxt | ○ | ○ | ○ |
| Svelte | SvelteKit | ○ | ○ | ○ |
| Solid | SolidStart | ○ | ○ | ○ |
Eclipse と STS の違いは？
STS3 のときは、Eclipse に STS3 プラグインをインストールしたときと、ほぼ同じだったのですが、STS4 になり WTP が削除されたため、現在は STS と Eclipse + STS プラグインは結構異なります。ベースの Eclipse に Wild Web Developer が追加されましたがサーバー機能が無いため、WTP の代わりにはなりません。また、一般の開発者はあまり使わない重量級のプラグイン PDE (Eclipse プラグイン開発機能) が STS4 でも残っています。Tomcat 組み込みの Spring Boot jar しか使わない場合でも、画面を使用する場合、現在の STS は HTML 作成ウィザードなどがありません。
WebFlux と R2DBC の性能検証
Qiita に書きました。記事中からリンクしてる Spring Boot のドキュメントは公式サイトの日本語訳です。WebFlux だと 1 万リクエストが 1.7 秒でしたが、もっと速いと予想してました。スレッド数とかはデフォルトで十分そうだし、他の設定とか変更すると、もっと速くなるのかなー。
同時実行性能を求められる要件があり、Web MVC と WebFlux のパフォーマンスを比較しました。WebFlux は Web MVC と同じように Vue.js や Thymeleaf などを使用した画面や、REST API で使用でき、Reactor の継続渡しスタイル (CPS) と関数型プログラミングにより、非同期でノンブロッキングな処理を実現し、少ないスレッドでの並行処理と少ないハードウェアリソースでスケールが可能な Web スタックです。
WebFlux と合わせて R2DBC の DatabaseClient や WebClient のサンプルも少し載せています。
Spring Boot 入門 - 公式ドキュメントの日本語訳
spring.pleiades.io という Spring 公式ドキュメントの日本語訳サイトを作りました。最新版がほぼ即日で反映され、翻訳は文単位で随時校正されています。入門からリファレンス、Javadoc API ドキュメントなどもあり、Spring Boot で構築したことはあるけど、基本や仕組みも押さえておきたい方は必読です。
Spring Boot のプロジェクトを構築する際の基本となる Spring Framework のリファレンスドキュメントです。DI コンテナや AOP などの Spring 根幹のテクノロジーについて記載されています。
Spring Framework 上に構築されたプロジェクトの一覧。Gradle や Maven の依存関係に追加することで、使用できます。
WordPress「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」403 エラー - 会計事務所 M&A
WordPress を使用してサイト構築の技術支援したときの備忘録です。大阪にある会計事務所 M&A NICOT さんのサイトで、会計事務所が M&A の支援サービスを提供している話かと思ったのですが、税理士や公認会計士の高齢化が問題になっていて、会計事務所の事業継承を解決するために会計事務所自体の M&A の需要が増えているそうです（会計事務所の M&A サイトのご紹介 / なつじかんブログ / フェーブ検索エンジン / 会計事務所のM&Aとは / 旧サイト）。WordPress は PHP や DB を意識せずにプラグインで大概のことができてしまうのがいいですね。
目次
テーマのカスタマイズなどでエラー
エラー例1：WordPress > 外観 > カスタマイズ > 内容を編集 > 公開ボタン
何かうまくいかなかったようです。時間を置いてもう一度お試しください。
エラー例2：WordPress > 固定ページ > Elementor で編集 > 更新ボタン
サーバーエラー (403 error).
これらは、サーバーの WAF (Web Application Firewall) のセキュリティ設定が原因となっていることが多いようです。ロリポップやヘテムル、さくらインターネット、お名前.com などの設定画面から WAF 設定を無効にすることで、更新できるようになります。以下、ロリポップの設定です。
注意
- WAF 設定は反映されるまで、かなり時間がかかります。
- 通常運用時は WAF 設定は有効にしておきましょう。
お問い合わせフォーム作成
以下 2 つの WordPress プラグインを使用しました。
- Contact Form 7
WordPress > お問い合わせ
からフォーム項目を設定します。内容は設定したメールアドレスに送信されます。設定後、以下のようなショートコードが生成されるので、フォームを入れたいページに、このショートコードを貼り付けます。[contact-form-7 id="??" title="コンタクトフォーム ?"]
- Contact Form 7 add confirm
Contact Form 7 単体では確認画面がありませんが、このプラグインを追加し、フォーム作成時の一番下に下記のようにボタンを設定するだけで、確認画面が有効になります。
[confirm "確認"][back "戻る"][submit "送信"]
WordPress でランディングページを作る
そのまま、WordPress の固定ページを作成すると、共通のヘッダ・フッタが使用されてしまいます。そこで Elementor というプラグインを入れると、下記のようにテンプレートに「Elementor キャンバス」を設定できるようになるため、完全に独立した自由にレイアウトできるページを作成できます。
