JavaScriptでメッセージを1文字ずつ表示する処理を試してみた
作成日:2023.04.07
ChatGPTが提案したスクリプトを試してみた結果、メッセージを1文字ずつ順に表示する処理が非常に汎用的で便利そうだと思いました。
error この記事は最終更新日から1年以上が経過しています。
chatGPTが教えてくれたスクリプトが汎用性ありそうなので、一旦メモ。
// メッセージを順次表示する関数
function showMessage(message) {
// メッセージを1文字ずつ区切って、spanタグで囲んで配列に変換する
var chars = message.split("");
var spans = $.map(chars, function(char) {
return "<span>" + char + "</span>";
});
// メッセージを順次表示するための再帰関数
function showNextChar(i) {
if (i < spans.length) {
$(".message-box").append(spans[i]);
setTimeout(function() {
showNextChar(i+1);
}, 50); // 50ミリ秒ごとに1文字表示する
}
}
// メッセージボックスをクリアしてから、メッセージを表示する
$(".message-box").empty();
showNextChar(0);
}
// テスト用のメッセージを表示する
showMessage("Hello, world!");
1文字ずつ区切った後、 span で囲む処理は必要なのか微妙ではある。

奈良市を拠点に、25年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。
これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。
【制作会社・企業様向けサポート】
Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。
ぜひ、プロフィールやWeb制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。
チェックボックス操作のためのjQuery基本メモ
2025.02.05
jQueryを使ってチェックボックスの状態を操作するための基本的なコードをまとめています。フォームやインタラクティブなUIを作成する際に役立つ内容です。
jQueryでフォームのreadonly属性を操作する方法
2025.02.04
jQueryを使ってフォーム要素のreadonly属性を動的に操作する方法について解説します。readonlyの設定と解除の手順をシンプルにまとめました。
ダッシュボードのパフォーマンス改善:Ajaxとiframeの実践例
2024.12.11
サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。
contenteditableで作るインライン編集システムとデータ送信の仕組み
2024.12.03
contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。