【JavaScript】文字列を取得して一文字ずつspanタグで囲む方法2021.08.24JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptで文字列を取得して一文字ずつspanタグで囲む方法をご紹介しています。取得した文字列を一文字ずつ表示したりするアニメーションで活躍すること間違いなしです。文字列を取得して一文字ずつspanタグで囲む下記は文字列を取得して一文字ずつspanタグで囲むサンプルです。JavaScriptで要素から文字列を取得し、一文字ずつspanタグで囲んで対象の要素の内容を置き換えます。<span>m</span></p>JavaScriptのquerySelectorに指定している.targetに対象の要素を指定します。対象には、一文字ずつspanタグで囲みたいtextContentを持つ要素を指定いただければと思います。上記のサンプルではアロー関数を使用しているため、IE11では動作しません。IE11の対応が必要な場合はこちらで変換してご利用ください。ここまでで文字列を一文字ずつspanタグで囲むことができるようになりました。本記事の内容を使って簡単なアニメーションを作成してみたいと思います。定番ですが、一文字ずつフェードインで表示するアニメーションを作成してみます。文字列を一文字ずつフェードインで表示するアニメーションでは実際に作成していきます。フェードインだけでも良いですが、今回は右から左の方向に文字がふわっと表示されるようにしてみます。実行結果も用意していますので、似たようなアニメーションを実装する際に参考にしていただければ幸いです。CodePen.オブジェクトにまとめたり、関数化したりするともっと使い回しやすくなると思いますので、ぜひやってみてくださいね!最後に業務案件で久しぶりに一文字ずつ表示するアニメーションを実装することになり、せっかくなら一から考えてみようということで今回のアニメーションの作成にいたりました。良い方法があるでしょうが、意図した動きにはなっているので満足です。JavaScriptで文字列を取得して一文字ずつspanタグで囲む方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。