【JavaScript】入力した文字を先頭から１文字ずつ表示させる方法

更新日 : 2023年9月25日

今回はHTMLとJavaScriptを使って「入力した文字を先頭から１文字ずつ表示させる方法」をご紹介していきます。

文章だと分かりにくいので画像で図解すると次のようになります。

https://teratail.com/questions/191920より

感覚としては見た目をHTMLで、裏のシステムをJavaScriptで実装していくイメージです。

【迷ったらココ！】HTMLやJavaScriptが学べるプログラミングスクール3選

テックアカデミー	デイトラ	侍エンジニア
講師は全員現役エンジニア週2回のマンツーマンメンタリング無料の転職サポートあり課題レビュー＆チャット質問し放題	1年間のエンジニアサポートカリキュラムは無期限閲覧可能専用チャットコミュニティ参加 Webセミナー勉強会に参加	累計指導45,000人＆転職成功率98% オーダーメイドカリキュラム対応無料の転職サポートあり専属マンツーマンレッスン方式
公式サイト	公式サイト	公式サイト

当サイトではプログラミング学習やエンジニア転職に関する情報を発信しています。他の記事も合わせてご覧ください。

: HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】
HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...
続きを見る

実装環境
HTMLのコードを書く
JavaScriptのプログラムを書く
まとめ：JavaScriptのタイマー機能を使いこなそう

実装環境

HTML5
JavaScript
Google Chrome 85.0.4183.121

HTMLのコードを書く

まずはHTMLで簡単な入力欄とJavaScriptを呼び出すボタンを作りましょう。

<html>
  <head>
    <meta charset="utf-8">//文字コードの設定(あまり重要ではありませんが一応書いてあります)
    <title>入力した文字を先頭から１文字ずつ表示させる</title>//ページのタイトルを設定
  </head>
  <body>
    <p id="output_space"></p>//最初は空欄ですが、ボタンを押すとここに文字が表示されます
    <input type="text" id="input_box" value="入力してください">//入力ボックスを生成
    <button onclick="startTimer()">Start</button>//JavaScriptを呼び出すボタンを生成
  </body>
</html>

<html>

<head>

<title>入力した文字を先頭から１文字ずつ表示させる</title>//ページのタイトルを設定

</head>

<body>

<p id="output_space"></p>//最初は空欄ですが、ボタンを押すとここに文字が表示されます

<input type="text" id="input_box" value="入力してください">//入力ボックスを生成

<button onclick="startTimer()">Start</button>//JavaScriptを呼び出すボタンを生成

</body>

</html>

それでは重要な箇所を解説していきます。

■p属性

p属性ではout_spaceというidを指定しています。

これはJavaScriptで文字を出力させる時に、書き出す場所を同期させるために指定しています。

■input属性

typeをtextにすることで入力ボックスが生成されます。

idではJavaScriptと同期させる時に用います。

valueは入力ボックスに書かれているテキストを指します。今回のコードの様にあらかじめ設定しておくことも可能です。

■button属性

onclickではボタンを押された時の処理を指定できます。

ここではstartTimer()という関数を呼び出します。

JavaScriptのプログラムを書く

続いて先程記述したHTMLのコードの下に以下のJavaScriptのプログラムを書いていきます。

ポイント

※HTMLとJavaScriptでファイルを分けても良かったのですが、今回は大した処理ではないので同ファイル内で済ませます。

<script type="text/javascript">
      var n;//文字を増やす処理の回数を数える変数nの宣言
      //↓関数の宣言↓
      function word(){
        var s = document.getElementById("input_box").value;//HTMLの入力欄に入力された文字を取得する変数sの宣言
        var len = s.length;//入力された文字の変数sの文字数をカウントする変数lenの宣言
        document.getElementById('output_space').innerHTML=s.slice(0,n);//HTMLのoutput_spaceというidの要素に、変数sの０文字目からn文字までのテキストを表示する
        if(n < len){//文字を増やす処理の回数が入力された文字数を超えるまで繰り返す
          n++;
        } else{//文字を増やす処理の回数が入力された文字数を超えた時の処理
          clearInterval(intervalId);//タイマーをリセットする
          s=null;//変数sを空にする
          }
      }
      //↓関数の宣言↓
      function startTimer(){
        n=1;//nの初期値を1とする
        intervalId=setInterval(word,2000);//2000ミリ秒(2.0秒)ごとにword()関数の処理を実行する
      }
    </script>

var n;//文字を増やす処理の回数を数える変数nの宣言

//↓関数の宣言↓

function word(){

var s = document.getElementById("input_box").value;//HTMLの入力欄に入力された文字を取得する変数sの宣言

var len = s.length;//入力された文字の変数sの文字数をカウントする変数lenの宣言

document.getElementById('output_space').innerHTML=s.slice(0,n);//HTMLのoutput_spaceというidの要素に、変数sの０文字目からn文字までのテキストを表示する

if(n < len){//文字を増やす処理の回数が入力された文字数を超えるまで繰り返す

n++;

} else{//文字を増やす処理の回数が入力された文字数を超えた時の処理

clearInterval(intervalId);//タイマーをリセットする

s=null;//変数sを空にする

}

//↓関数の宣言↓

function startTimer(){

n=1;//nの初期値を1とする

intervalId=setInterval(word,2000);//2000ミリ秒(2.0秒)ごとにword()関数の処理を実行する

}

</script>

それでは重要な箇所を解説していきます。

■関数の宣言

function word(){
入力された文字を１文字ずつ出力する処理をまとめた関数
function startTimer(){
関数word()を2.0秒ごとに実行させる関数

■変数の宣言

var n;
文字を増やす処理の回数を数える変数nの宣言
var s = document.getElementById("input_box").value;
HTMLの入力欄に入力された文字を取得する変数sの宣言
var len = s.length;
入力された文字の変数sの文字数をカウントする変数lenの宣言

■タイマー処理

今回は指定した時間ごとに処理を実行するsetInterval関数、それを停止させるclearInterval関数を使っています。

JavaScriptには他にもいくつかタイマー処理があります。

JavaScriptのタイマー機能

setTimeout関数
指定した時間経過後に処理を実行する
setInterval関数
指定した時間ごとに処理を実行する
clearTimeout関数
setTimeoutで設定したタイマーを取り消す
clearInterval関数
setIntervalで設定したタイマーを取り消す

Javascriptのタイマー処理setIntervalとsetTimeout - Qiitaより

まとめ：JavaScriptのタイマー機能を使いこなそう

今回はHTMLとJavaScriptを使って入力した文字を先頭から１文字ずつ表示させる方法をご紹介しました。

JavaScriptにはタイマー機能を始めとした便利機能がたくさん用意されています。

またWeb言語ということもあり難易度もやさしめなのでプログラミング初心者にはおすすめです！

JavaScriptやHTML/CSSの学習でつまづいた時、独学に限界を感じた時はこちらの記事もオススメです。

: JavaScriptが学べるプログラミングスクールおすすめ8選
JavaScriptを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... JavaScriptを学びたいけどまず何から始めたら良いのか分からない...プログラ ...
続きを見る

: HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】
HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...
続きを見る

: 無料体験できるプログラミングスクールおすすめ10選を解説
プログラミングスクールって思ったより高いからなかなか決められない... 無料体験できるプログラミングスクールを知りたい！せっかくプログラミングスクールに入るなら、無料体験に参加して自分に合うスクール ...
続きを見る

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格：ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-HTML, JavaScript

合わせて読みたい：関連記事はこちら

: ReactとVueはどっちがおすすめ？違いを比較【難易度・求人数・学習コスト】
React.jsとVue.jsだったらどっちがおすすめ？難易度・求人数・学習コストなどの違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアを目指す人が最初に抱える悩みの1つに「 ...
JavaScript

: jQueryを学べるプログラミングスクールおすすめ7選【2024年最新】
jQueryを学びたいが、どんなプログラミングスクールにするべき？おすすめを知りたい！今回はこんな悩みを解決していきます。一口にプログラミングスクールと言っても、学べる内容はスクールごとにさまざま ...
JavaScript プログラミングスクール

: FlutterとReact Nativeはどっちがおすすめ？【違いを徹底比較】
FlutterとReact Nativeだったらどっちを使えば良いのかな？両方の特徴や違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアにとってモバイルアプリ開発に欠かせないの ...
JavaScript

: JavaとJavaScriptはどっちがおすすめ？全然違う？【難易度や違いを比較】
JavaとJavaScriptだったらどっちを使えば良いのかな？両方の特徴や違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアを目指す人が最初に抱える悩みの1つに「プログラミン ...
Java JavaScript

: HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法
今回はHTMLとJavaScriptを使って「戻るボタン」「進むボタン」「更新ボタン」を作成する方法をご紹介します。どのボタンもページ遷移の操作には欠かせない重要な要素です。一見すると難しそうな操 ...
HTML JavaScript

: RaiseTech(レイズテック)のReactコースの評判・口コミ【料金や特徴を解説】
RaiseTech(レイズテック)のReactコースってどうなの？特徴や料金、評判や稼ぎ方について詳しく知りたい！今回はこんな悩みを解決していきます。ここ最近プログラミングの需要は急激に高まってき ...
JavaScript RaiseTech

: テックアカデミーのHTML/CSSトレーニングってどうなの？【料金やカリキュラムをご紹介】
テックアカデミーのHTML/CSSトレーニングってどうなの？特徴や料金について詳しく知りたい！今回はこんな悩みを解決していきます。ここ最近プログラミングの需要は急激に高まってきており、フリーランス ...
HTML TechAcademy

: 【厳選】Vue.jsが学べるプログラミングスクールおすすめ7選
Vue.jsを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... Vue.jsを学びたいけどまず何から始めたら良いのか分からない...プログラミングスクールで ...
JavaScript プログラミングスクール

: PHPで会員登録＆ログイン機能を作成してみた
PHPを使って会員登録機能とログイン機能を実装しました。重複登録防止の機能も追加しております。参考にしていただけたら幸いです。今回のテーマ PHPとMySQLを使って会員登録機能を実装 PHPと ...
HTML PHP

: HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】
HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...
HTML プログラミングスクール

: 【PHP】MySQLにデータを保存するフォームを作成してみた
MySQLにデータを保存するフォームをPHPとHTMLで作成しました。重複投稿防止の機能も追加しております。参考にしていただけたら幸いです。今回のテーマ PHPを使ってMySQLにデータを追加す ...
HTML PHP

: PythonとJavaScriptはどっちがおすすめ？似てる？【違いを比較】
PythonとJavaScriptだったらどっちを使えば良いのかな？両方の特徴や違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアを目指す人が最初に抱える悩みの1つに「プログラ ...
JavaScript Python

: Node.jsが学べるプログラミングスクールおすすめ5選をご紹介
Node.jsを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... Node.jsを学びたいけどまず何から始めたら良いのか分からない...プログラミングスクー ...
JavaScript プログラミングスクール

: テックアカデミーのはじめてのプログラミングコースの評判・口コミ【料金や特徴をご紹介】
テックアカデミーのはじめてのプログラミングコースって稼げる？特徴や料金、評判について詳しく知りたい！今回はこんな悩みを解決していきます。ここ最近プログラミングの需要は急激に高まってきており、フリー ...
HTML TechAcademy

: Reactが学べるプログラミングスクールおすすめ5選を解説
Reactを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... Reactを学びたいけどまず何から始めたら良いのか分からない...プログラミングスクールでプロ ...
JavaScript プログラミングスクール