Toru Shimizu

はじめに知人から「MMDモデルをWebで表示できないか？」と相談されたのをきっかけに、Babylon.jsとbabylon-mmdを使って、Next.js 環境で .pmxモデルの表示やアニメーションを再生する方法を試してみました。本記事では、モデルの読み込みから基本的なモーション再生までの過程を記録としてまとめています。 使用環境この記事では、以下のバージョンで動作確認を行いました。Next.js: 14（App Router）@babylonjs/core: 7.54.0babylon-mmd: 0.62.0@babylonjs/coreとbabylon-m...

Next.js × Babylon.jsでMMDモデルを動かしてみた

Reactで開発を進める中で、useMemo はパフォーマンスを最適化する便利なフックですが、使い方によってテストの容易性やロジックの再利用性に意外な影響を与えると感じています。たとえば、useMemo 内にビジネスロジックを直接記述する場合、テストはコンポーネント全体を対象にする必要があります。一方、ビジネスロジックをコンポーネント外や別ファイルに切り出すと、ビジネスロジック単体をユニットテストで簡潔に検証でき、テストの容易性が向上します。また、ビジネスロジックを分離することで、再利用性も向上します。こうした設計の違いが、プロジェクト全体のテスト方針や開発体験にどのような影響を...

テスト容易性と再利用性を高めるuseMemoとビジネスロジックの分離戦略

VoltaでNode.jsのバージョンを管理しているプロジェクトで、CI環境でも同じバージョンを使用するための設定方法を紹介します。Volta公式の volta-cli/action を使用することで、簡単かつ確実にバージョンを揃えることができます。https://github.com/volta-cli/voltaなお、本記事ではVoltaについては詳しく触れませんので、公式ドキュメントやVoltaのセットアップ方法の記事を参考にしてください。https://docs.volta.sh/https://zenn.dev/taichifukumoto/articles/how-...

GitHub ActionsでVoltaの設定を簡単に反映する

本記事では、git-pr-releaseを使ってリリース用のプルリクエストの作成を自動化したことについて話していきます。https://github.com/x-motemen/git-pr-release 導入前の課題リリース用プルリクエストの作成は定期的に発生する作業ですが、以下のような課題がありました。プルリクエストの作成が手作業となっており、作業工数が発生する手動でプルリクエストを作成する場合、レビュアーへのapprove依頼が必要リリースPRから変更内容をdescriptionにまとめるのが困難これらの課題を解決するため、git-pr-releaseとGit...

git-pr-releaseとGitHub Actionsで作るリリースPR自動化

Next.jsでStatic Export(SSG)を使用している場合の、i18を活用した文言管理の一元化について紹介させていただきます。記事執筆時のNext.jsのバージョンとホスティング環境は以下になります。Next.js: 13.4.7ルーティング方法はPages Routerホスティング環境: CloudFront + S3 文言管理の一元化の必要性 文言管理の課題ウェブサイトやアプリケーションでは、多くのテキストが散在しているため、それらを管理するのは困難です。その結果、表記ゆれが生じることがあり、場合によってはユーザーの混乱を招いたり、一貫性の欠...

【Next.js】Static Export(SSG)でのi18nによる文言管理の一元化

フィーチャーフラグとはコードを書き換えることなく、特定の機能を動的に有効化したり無効化することができる開発手法です。この手法を用いることで、すべてのコードが本番環境にデプロイされている状態で、開発中またはテスト中の機能をユーザーには見えないように管理することができます。また、フィーチャートグル（Feature Toggle）と表現されることもありますが、本記事ではフィーチャーフラグ(Feature Flag)という表現を用いています。フィーチャートグル(Wikipedia) メリット ブランチワークの複雑性の解消フィーチャーフラグを使って開発中の機能をOFFの状態で...

【Next.js】フィーチャーフラグの導入方法

Next.jsで静的ファイル（HTML, CSS, JavaScriptなど）を出力する場合に使用するStatic Exports機能ですが、v13.3で使用方法に変更がありました。そこで、実際に変更してみたところ、変更後にnext startコマンドでアプリケーションが起動できなくなってしまったので解決方法を記事にしてみました。 Static Exportsの変更点まず、Static Exportsの変更点について。変更前next exportコマンドを実行することで静的ファイルが出力されていましたが、このコマンドはv13.3から非推奨となり、v14で削除されています。...