プチレッスン『タイプライターっぽいもの』その1

2022年5月15日
This post thumbnail

ミミィ

『オコゲ』Web体験版サンプルプログラムの「タイプライターもどき」をもうちょっとだけタイプライターっぽくしてみるわ! 準備はいいかしら!?

タマちー

ん…元記事はこれ、です…

『オコゲ』Web 体験版 | おこげ俱楽部

ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。

おこげ俱楽部

まず最初に、どこをどのように変更するか決めておきます。

クリックで拡大

サンプルプログラムの記事にあるブロックはこれです。実行してみるとわかりますが、このプログラムでは、キーボードの入力が1行に1文字ずつ表示されます。
以下の記事では、このプログラムを1行に文字を横並びに行として表示、改行とついでにバックスペースで文字を削除できるように改造することにしましょう。

このプログラムは永久にキーボードからの入力待ちをします。実行後は次のステップに行く前に をクリックしてページをリロードしておきましょう。

キー入力を変数に記憶させて表示する

『オコゲ』の黒板表示は1行ずつ表示することしかできません。そこで、キーボードから入力された文字を変数に代入して記憶してから、まとめて表示できるようにしましょう。

変数とは、数字や文字を代入して保存しておくことができる領域のことです。変数には名前をつけて使います。「変数1」という名前の変数に「あいう」を記憶させてから、『「変数1」を表示しなさい』と命令すれば「あいう」が表示されます。変数の中身は必要に応じて何度でも書き換えることができます。

変数を作成する

クリックで拡大

まず、入力を記録する変数を作成します。「変数」カテゴリから「変数の作成…」をクリックします。

クリックで拡大

ダイアログで変数の名前を入力します。ここでは「行」にします。

キー入力を変数に代入する

この状態で「変数」カテゴリを開くと、 がありますので、これと を使って、変数「行」に変数「キー」の内容を代入するコードを作ります。黒板には「キー」ではなく「行」を表示するように変更します。

クリックで拡大

これを実行しても、結果は変更前とまだ変わりありません。これは、変数「行」が1回分の「キー」しか覚えていないからです。では、変数「行」にキー入力を続けて記憶させるにはどのようにすれば良いのでしょうか。

変数に文字を追加して文字列を作成しよう

文字列とは、文字の並びや集まりのことです。文字列も変数に記憶させておくことができます。では変数「行」の後ろに「キー」を追加するコードを考えてみましょう。例えば、最初「行」が “a" で「キー」が “b" だったら、最後に「行」が “ab" になるような、そんなプログラムを作りましょう。

さ、初めての出題ね!すぐに答えを開かないで、自分で考えて実際にブロックを組んで実行してみるのヨ!

ヒントは見てもいいの...

ヒント: を使います。

レッスン:変数「行」に「キー」を追加しよう
クリックで拡大

「追加する」という機能がないプログラミング言語を使う場合はこのような書き方をすることが多いです。分かりにくく感じる方は、式で考えるとすっきりするかもしれません。 「行」=「行」+「キー」 「行」と「キー」を連結して、その結果をまた「行」に戻す(代入する)というわけです。 これで、変数「行」の中身をリセットしない限りはキー入力を「行」にためこんでおくことができるようになりました。このブロックは、次のように配置してください。

クリックで拡大

これを実行してスペースキーを押してみてください。 と表示されたでしょうか。"undefined" は「未定義」という意味で、ここでは「行」という変数が未定義ですよ、ということになります。 何が起きているかというと、プログラム実行後最初にキーボードを押したとき、プログラムはまず「行」と「キー」を連結しようとします。ところが、これより前にプログラムは「行」に対して何もしていません。つまり、このときプログラム的には「行」という入れ物はあっても、何が入っているのか分かっていない状態なのです。だからプログラムは「『行』?わからんなー」と答えているのです。これを避けるためには、次のように、最初に変数「行」は空っぽの文字列だよー、と決めてあげる必要があります。

クリックで拡大

繰り返し処理の中で変数を使う場合、この「変数の初期化」をしないとちゃんと動かないことがよくあります。 昔 C 言語で変数を宣言しただけだと中にゴミデータが入ったままで…いや、なんでもない
頭の片隅にでも入れておくといいかもしれません。

では、実行してキーボードから「abcdefg」と入力してみましょう。

しっかり変数にキー入力が蓄積されて行っているようですね!でもこれだとタイプライターとは言い難い挙動なので、1か所修正します。

クリックで拡大

それっぽくなってきましたね?

その2に続きます。 (準備中)