1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

小学生からのJavaScript講座です。
このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。

前回、画面に文字を表示するためのクラスを作ったのですが、それをもう少しアレンジして、もっとかっこよく文字を表示できるようにしてみましょう。

今回は画面に文字を改行する方法と、一文字ずつ表示する方法を紹介します。

アル

うーん、やっぱり長い文章を入力すると、画面からはみ出ちゃうし、一気に文字が表示されるってのもかっこ悪いな……


りこ

文字の表示の話? やっぱりそうだよね。山田先生に訊きに行ってみる?


アル

うん、一緒に行こうよ!

前回までのプログラムについて

前回、画面上に文字を表示することができるようになりました。
しかしこの文字を表示するプログラムでは、長い文章を打ち込むと、画面の右端へはみ出してしまっています。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いていた事だけは記憶して居る。

これを解決するには、改行できるようにする必要があります。

また前回のプログラムの場合、文字が一気に表示されてしまいかっこ悪かったです。
やはり文字は一文字ずつ順番に表示させたいですね。

では、ここからは前回のプログラムを改良していきましょう。

文字を一文字ずつ表示できるようにする

山田

よく来たべな。今日は何だったべかな


アル

文字の表示だよ


山田

そうそう、画面からはみ出てしまうんだったべな


りこ

あと、文字を一文字ずつ表示する方法も知りたいの


山田

そうだべか。じゃあ順番に作っていくべかな。
とりあえず、まずは文字を一文字ずつ表示する方法を覚えて、それから改行の方法を覚えるべ

では、まず文字を一文字ずつ表示できるようにしてみましょう。

前回のgame.jsをカスタマイズしていきます。
Gameクラスでは、8、40、42行目に追加しています。

Labelクラスはある程度改変しているので、前回のソースとじっくりと見比べてみてください。

game.js

'use strict';

class Game {
  constructor( width, height ) {
    this.objs = [];

    //追加
    this.frame = 0;

    //もしもwidthやheight何も代入されていなければ、320を代入する
    this.width = width || 320;
    this.height = height || 320;

    this.canvas = document.getElementById( 'canvas' );
    //canvasの横幅とたて幅
    canvas.width = this.width;
    canvas.height = this.height;

    this.ctx = canvas.getContext( '2d' );
  }

  //start()を呼び出すことで、メインループが開始される。
  start() {
    this._main();
  }

  //メインループ
  _main() {
    //背景を黒く塗りつぶす
    this.ctx.fillStyle = "#000";
    this.ctx.fillRect( 0, 0, this.width, this.height );
		
    //ゲームに登場するものの数だけ繰り返す
    for (let i=0; i<this.objs.length; i++) {
      //ゲームに登場するもののクラスから、render()を呼び出す
      this.objs[i].render( this.ctx, this.frame );
    }

    //追加
    this.frame++;
    //もしコンソールで確認したいならば以下を追加
    console.log( this.frame );

    //_main()を呼び出す(ループさせる)
    requestAnimationFrame(this._main.bind(this));
  }

  //ゲームにテキストなどを表示するための関数
  add( obj, x, y ) {
    obj.x = x || 0;
    obj.y = y || 0;
    this.objs.push( obj );
  }
}

class Label {
  //Labelの初期設定
  constructor( label ) {
    this._text = '';
    this._charcnt = 0;
    this.label = label;
    this.font = "24px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'MS ゴシック', 'MS Gothic', sans-serif";
    this.color = '#fff';
    this.baseline = 'top';
    this.interval = 0;
  }

  //Labelを表示するための関数(メインループから呼び出される)
  render( ctx, frame ) {
    ctx.fillStyle = this.color;
    ctx.font = this.font;
    ctx.textBaseline = this.baseline;
    if ( this.interval === 0 ) ctx.fillText( this.label, this.x, this.y );
    else {
      if ( this._charcnt < this.label.length && frame%this.interval === 0 ) {
        this._text += this.label.charAt( this._charcnt );
        this._charcnt++;
      }
      ctx.fillText( this._text, this.x, this.y );
    }
  }
}

59〜65行目に注目してください。
ここでは文字を表示するための初期設定を書いています。

これらは、実際にラベルを表示したい時に、設定を変更することができます。
また最初に_(アンダーバー)が入力されているもの(_textや_charcnt)は、クラスの外側から設定を変更されては困るので、分かりやすくするために_(アンダーバー)を入れています。最初に_(アンダーバー)が付いているものに限っては、クラスの外側から設定を変更してはいけません。

山田

GameクラスやLabelクラスを直して、文字が一文字ずつ表示されるようになったべよ。あとはscript.jsで、GameクラスとLabelクラスを呼び出していくべよ

さらにscript.jsからは、以下のように呼び出します。
10行目を見てください。これは文字が表示される時間の間隔を示すものです。
今回は「10」と入力しました。

この値が大きいほど間隔が広くなり(ゆっくり文字が表示される)、小さいほど間隔が短く(素早く文字が表示される)ようになります。

script.js

'use strict';

const str = '吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いていた事だけは記憶して居る。';

//ゲームのオブジェクトを640×480サイズで作る
let game = new Game( 640, 480 );

//ラベルオブジェクトを作る
let label = new Label( str );
label.interval = 10;

//add()を使って、ゲームにラベルを表示
game.add( label, 0, 0 );

//ゲームスタート
game.start();

これでとりあえず一文字ずつ表示されるようになります。
吾輩は猫である。名前はまだ無い。どこで生

しかしまだ、長い文章を入力した場合、画面右端から文字がはみ出してしまう問題を解決していません。
なので、あらかじめ決められた文字数で改行するプログラムを作ってみましょう。

文字列を改行できるようにしてみよう!

では長い文章を入力した時に、改行できるようにプログラムを作り直してみましょう。

アル

画面の外にはみ出ちゃうのを、早く直したいよ


山田

そうだべな。今から直すべよ

ちなみに、それぞれの役割を。

this._text[] : 表示したい文字列を代入。配列にして、添字(そえじ)を行数とします。
this._displayLength : 実際に画面に表示されている文字数。一文字表示されるごとに1つずつ増えていきます。
this._line : 表示する文字列の行数
this.label : 表示したい文字列
this.font : 表示したい文字列のフォント
this.color : 表示したい文字列の色
this.maxLength : 表示したい文字列の、一行の最大文字数
this.baseline : 表示したい文字列のベースライン
this.interval : 文字列を表示する速度

_(アンダーバー)が最初についているものは、クラスの外から変更されるとあまりよろしくないものです。
クラス外から変更できるものとできないものをしっかり区別しておきましょう。

game.js

'use strict';

//Gameクラス
class Game {
  constructor( width, height ) {
    this.objs = [];

    this.frame = 0;

    //もしもwidthやheight何も代入されていなければ、320を代入する
    this.width = width || 320;
    this.height = height || 320;

    this.canvas = document.getElementById( 'canvas' );
    //canvasの横幅とたて幅
    canvas.width = this.width;
    canvas.height = this.height;

    this.ctx = canvas.getContext( '2d' );
  }

  //start()を呼び出すことで、メインループが開始される。
  start() {
    this._main();
  }

  //メインループ
  _main() {
    //背景を黒く塗りつぶす
    this.ctx.fillStyle = "#000";
    this.ctx.fillRect( 0, 0, this.width, this.height );
		
    //ゲームに登場するものの数だけ繰り返す
    for (let i=0; i<this.objs.length; i++) {
      //ゲームに登場するもののクラスから、render()を呼び出す
      this.objs[i].render( this.ctx, this.frame );
    }

    //フレーム
    this.frame++;

    //_main()を呼び出す(ループさせる)
    requestAnimationFrame(this._main.bind(this));
  }

  //ゲームにテキストなどを表示するための関数
  add( obj, x, y ) {
    obj.x = x || 0;
    obj.y = y || 0;
    this.objs.push( obj );
  }
}

//Labelクラス
class Label {
  //Labelの初期設定
  constructor( label ) {
    this._text = [];
    //表示している文字列の長さ
    this._displayLength = 0;
    this._line = 0;
    this.label = label;
    this.font = "20px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'MS ゴシック', 'MS Gothic', sans-serif";
    this.color = '#fff';
    this.maxLength = 30;
    this.baseline = 'top';
    this.interval = 0;
  }

  //Labelを表示するための関数(メインループから呼び出される)
  render( ctx, frame ) {
    ctx.fillStyle = this.color;
    ctx.font = this.font;
    ctx.textBaseline = this.baseline;

    //文字を表示する間隔(はやさ)が0の場合は、文字を一気に表示
    if ( this.interval === 0 ) {
      //表示する文字数を、1行に表示する最大の文字数で割り、切り上げることで、その文字列が何行になるのかが分かる
      this._line = Math.ceil( this.label.length/this.maxLength );
      //文字列の行数だけ繰り返す
      for( var i=0; i<this._line; i++ ) {
        this._text[i] = this._text[i] || '';
        this._text[i] = this.label.substr( i*this.maxLength, this.maxLength );
        //文字列の表示
        ctx.fillText( this._text[i], this.x, this.y + ( i * 25 ) );
      }
    }
    //文字を表示する間隔(はやさ)が0以外の場合、一文字ずつ表示していく
    else {
      if( this._displayLength < this.label.length && frame%this.interval === 0 ) {
        this._text[this._line] = this._text[this._line] || '';
        //this.labelに代入されている文字列を、this._text[this._line]に一文字ずつ入れていく
        this._text[this._line] += this.label.charAt( this._displayLength );
        this._displayLength++;
        if ( this._displayLength % this.maxLength === 0 ) {
          this._line++;
        }
      }
      for( var i=0; i<this._line+1; i++ ) {
        this._text[i] = this._text[i] || '';
        ctx.fillText( this._text[i], this.x, this.y + ( i * 25 ) );
      }
    }
  }
}

では、script.jsに移りましょう。
Gameクラスで設定した部分も、場合によっては変更したかったりしますね。

変更したい場合は以下のソースの10、11行目のように設定します。
今回の場合では
10行目は、文字を表示する速度、
11行目は、一行に表示する最大文字数を変更しています。

script.js

'use strict';

const str = '吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いていた事だけは記憶して居る。';

//ゲームのオブジェクトを640×480サイズで作る
let game = new Game( 640, 480 );

//ラベルオブジェクトを作る
let label = new Label( str );
label.interval = 10;
label.maxLength = 32;

//add()を使って、ゲームにラベルを表示
game.add( label, 0, 0 );

//ゲームスタート
game.start();

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いていた事だけは記憶して居る。
実際の動きを確認したい場合はこちらから。

アル

ちゃんと改行されてる!


りこ

すごい、綺麗に一文字ずつ表示もされてるね

まとめ

今回は文字を改行する方法と、一文字ずつ表示する方法を紹介しました。
しかしまだまだこのプログラムでは問題があります。ゲームでは文字を切り替える必要があるのです。

次回は文字を切り替えられるようにしていきましょう。

アル

やった。文字も綺麗に表示できるようになった!


りこ

でも、キー入力やマウスクリックとかで、次の文章を表示できるようにしたいよね


山田

そうだべな。でもそれはまた次回にするべよ


アル

早く知りたいよー


山田

わだずは家で音楽を聞きたいんだべ


りこ

好きな曲があるの?


山田

いや、わだずがハマっているのはイヤホンだべ。あのコードを見ていると、いてもたってもいられなくなるんだべ


りこ

……


アル

えっ?

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  2. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  3. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  4. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  5. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  6. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  7. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  8. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  9. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  10. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  11. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!
  12. 小学生からのJavaScript。クラスの概念をしっかりと理解しよう!
  13. 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!
  14. 小学生からのJavaScript。文字を表示するクラスを作ってみよう!
  15. 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!
  16. JavaScript|ノベルゲーム風にキー入力で文字を切り替える方法!

スポンサードリンク

関連コンテンツ

オススメ記事

【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

キー入力で文字を切り替えるべ

JavaScript|ノベルゲーム風にキー入力で文字を切り替える方法!

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。 今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう

wordpress

WordPress にウィジェット(サイドバー)を追加する方法。

サイドバーというより、頭がパーな@It_is_Rです。やかましいわ。 WordPress テーマ自作シリーズ、早くも第6回目です。 今回はウィジェット(サイドバー)を追加する方法を紹介します。

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

2件のコメント “小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

  1. 初歩の初歩からやり方を紹介していて、
    まったくプログラムをしたことがない私でも
    とっつきやすく、よくこちらを参考にさせて頂いてます。
    なかなかゼロから講座をしてくれる人を見ることが無いので
    とても嬉しいです。これからも更新楽しみにしています。

    1. >たまさん
      こんにちは。コメントありがとうございます。
      そういっていただけると、本当に嬉しいです。
      私自身、プログラミングを始めたばかりの頃は、何をどこから始めていいのかも分からず、何を参考にしていいのかも分からず、苦労しました。

      よりよい記事を書けるように、これからも精進していきたいと思います。
      ありがとうございます。

コメントをどうぞ!

メールアドレスが公開されることはありません。