テキストエディタの使い方に慣れよう!

今日やること

今日はテキストエディタ(プログラムを書くためのソフトウェア。Visual Studio Code等)の使い方に慣れて、より早く・より正確なプログラミングができるようにします!
このテキストに従って、練習を進めていきましょう。
分からないところがあれば、メンターの人に聞いてください。

まず初めに

今日使うファイルをダウンロードしよう

ここに行って、今日使用する資料を落としてきましょう。
今日の日付が書いてあるのが、今日使うファイルです。「プログラム」と書いてあるのが、ダウンロードして欲しいものです。

ファイルを展開しよう

先ほどダウンロードしてきたものを展開します。(展開の意味は、興味があったら後からインターネットで調べてみてください。)
Windowsを使っている人は、ダウンロードしたファイルを右クリックして、すべてを展開をクリックします。
Macを使っている方は、ダウンロードしてきたファイルをダブルクリックしましょう。
詳しい展開の仕方は「テキストプログラミング第一回スライド」に図とともに書いてあるので、参考にしてくださいね!

課題1 プログラムを動かそう

いつもやっていることですが、復習です!
「今日の課題1」を実行してみましょう。
実行は「index」をダブルクリックすればOKです!
画面に「こんにちは」と出れば成功です!
こんにちはと出たら、次の課題に進みましょう

課題2 プログラムを改造してみよう

まずは、プログラムを開いてみよう

今度は「今日の課題2」を実行してみましょう。
「これは課題2です」と出れば正解です!
あと、課題2のプログラムを見てみましょう。「main」という名前のファイルです。
これをVisual Studio Codeで開いてみましょう。

次に改造してみよう

※つぎの章までは改造したプログラムを実行してはいけません!
プログラムを改造して、「今日の課題2」ではなく「こんばんは」と表示されるようにしましょう。
どこを触ればいいかはもうわかるよね?
できたら保存しよう。

「更新ボタン」を押さずにショートカットキーを使おう

いつもであれば、自分が作ったプログラムを確認するために、このタイミングで、更新ボタンを押してますね?
ただ、今回は更新ボタンを押さずに、更新をしてみましょう。
ブラウザ上のどこでもいいので余白をクリックして、キーボードの「F5」を押してみましょう。
無事「こんばんは」と表示されれば、この課題はクリアです!

課題3 ショートカットキーで保存しよう

プログラムを開いて保存

※次の章まで改造したプログラムを保存してはいけません
「今日の課題3」を次に改造しましょう。
まずは、プログラムを実行して、プログラムをVisual Studio Codeで開いてみましょう。(課題2を参考にしてね)
「今日の課題3」と表示させるプログラムです。
これを「Hello」と表示されるように改造してみましょう。

プログラムを保存してみましょう

いつもなら「ファイル」→「保存」とやりますが、今回はそれを使ってはいけません!
保存をクリックする代わりに・・・

これで保存されます!

ブラウザを更新してちゃんと改造できたか確かめましょう

ブラウザの更新をしましょう。ただし、更新ボタンを押してはダメです!
「F5」を押して更新しましょう。
「Hello」と表示されていれば成功です。

おまけ: なぜショートカットキーを使うのか?
(時間がなければ後で読みましょう)

マウスを使って保存や更新をすることもできますが、マウスを移動させるのに時間がかかってしまいます。
また、プログラムを書くときは、キーボードに両手があることが多いので、マウスまで手を動かすのも少しですが、時間がかかってしまします
ですので、多少ですが、マウスでいろいろ操作をするより、キーボードを使って操作をした方が、早くプログラムを書くことができるようになります。
慣れるまでは大変ですが、慣れてしまえばそっちの方が確実に楽ですので、是非慣れるまで使ってくださいね。

課題4 コピペをしましょう

コピペ(コピー&ペースト)とは

コピペとは、ある文章をコピーして、どこかに張り付け(ペースト)を行うことです。
ホームページに書いてあるプログラムの一部を利用したいときや、自分が過去に書いたプログラムと似たようなプログラムを書く際にすぐに書けるので便利です。
そのコピペの仕方を学んでいきましょう。

プログラムを実行しましょう

「今日の課題4」のプログラムを実行しましょう。
そして、プログラムを見てみましょう。
実行しても何も起きない、プログラムにも何も書いてないが正解です。

プログラムをコピペしてみよう

下のプログラムを先ほどの何も書いていないプログラムの部分にコピペしてみましょう。
やり方は、下のプログラムを選択して、右クリック→コピー
テキストエディタを右クリック→貼り付け

enchant();
window.onload = function(){
    var game = new Core(1024, 1024);
    game.fps = 15;
    game.preload("start.png");
    game.preload("stop.png");
    game.onload = function() {
        var startTime = new Date();
        var pressedStratButton = false;
        var pressedEndButton = false;
        var result = 0;

        var startButton = new Sprite(191, 64);
        startButton.image = game.assets["start.png"];
        startButton.x = 100;
        startButton.y = 250;
        game.rootScene.addChild(startButton);

        var stopButton = new Sprite(191, 64);
        stopButton.image = game.assets["stop.png"];
        stopButton.x = 350;
        stopButton.y = 250;
        game.rootScene.addChild(stopButton);

        var titleLabel = new Label("10秒ストップ");
        titleLabel.x = 30;
        titleLabel.y = 0;
        titleLabel.width = 500;
        titleLabel.font = "42px 'MS 明朝', 'MS ゴシック’";
        game.rootScene.addChild(titleLabel);

        var timeLabel = new Label();
        timeLabel.x = 200;
        timeLabel.y = 80;
        timeLabel.font = "72px 'MS 明朝', 'MS ゴシック’";
        game.rootScene.addChild(timeLabel);
        
        startButton.addEventListener("touchend", function(e) {
            startTime = new Date();
            pressedStratButton = true;
            pressedEndButton = false;
            timeLabel.visible = true;
        });
        
        stopButton.addEventListener("touchend", function(e) {
            pressedEndButton = true;
            result = (new Date()) - startTime;
            timeLabel.visible = true;
        });

        timeLabel.addEventListener("enterframe", function(e){
            if(!pressedStratButton) {
                return;
            }
            if(pressedEndButton) {
                timeLabel.text = result / 1000 + "秒";
                return;
            }
            if((new Date()) - startTime >= 5000) {
                timeLabel.visible = false;
            }
            timeLabel.text = ((new Date()) - startTime) / 1000 + "秒";
        });
    };
    game.start();
};

プログラムを実行しましょう

プログラムを保存して実行しましょう。
保存と更新はショートカットキーで行いましょう。

課題5 コピペをショートカットでしましょう

今日の課題5を実行して、プログラムを開いてみましょう。
先ほどと同じように何も起きないのが成功です
コピーはWindowsの人は「Ctrl」と「C」を同時押し、Macの人は「Command」と「C」を同時押ししましょう。
貼り付けはWindowsの人は「Ctrl」と「P」を同時押し、Macの人は「Command」と「P」を同時押ししましょう。

課題6 インデントを整えよう

インデントとは何か

次のプログラム、どっちが見やすいか見比べてみましょう。

プログラム1

enchant();
window.onload = function(){
    var game = new Core(1024, 1024);
    game.fps = 15;
    game.onload = function(){
        var text = new Label("おはよう");
        text.x = 0;
        text.y = 0;
        text.font = "42px 'MS 明朝', 'MS ゴシック’";
        text.color = "black";
        game.rootScene.addChild(text);
    };
    game.start();
};

プログラム2

enchant();
window.onload = function(){
var game = new Core(1024, 1024);
game.fps = 15;
game.onload = function(){
var text = new Label("おはよう");
text.x = 0;
text.y = 0;
text.font = "42px 'MS 明朝', 'MS ゴシック’";
text.color = "black";
game.rootScene.addChild(text);
};
game.start();
};

プログラム2よりプログラム1の方が見やすいですね。
なぜでしょうか・・・?
どの括弧開く「{」がどの括弧閉じる「}」と対応しているかがとても分かりやすいからです。
このように塊が分かりやすいように、左側にスペースを入れることをインデントと呼びます。
このインデントがあるか無いかで、プログラムの見やすさが大きく変わります。
見やすいプログラムは追加で書いたりするときもとても書きやすいです。
是非インデントを意識したプログラムを書きましょう。

インデントの付け方 Step1

インデントは以下のようなルールでつけましょう。
「{」が出てくる行の次の行からは左側のスペースを多く取りましょう。
(キーボードの左の方にある「Tab」ボタンで、大きくスペースを空けることができるので、活用しましょう。)

××;
××;
if(yyyy) { //この行で「{が」出てきた
    zzz; //この行から左側のスペースを余分に空ける
    www;
    while(aaaa) { //この行でも括弧閉じるが出てきた
        www;//この行から左側のスペースを余分に空ける

インデントの付け方 Step2

「}」が出てきた行はその行から左側のスペースの量を減らしましょう。

        aaaa;
        bbbb;
    } //この行で「}」が出てきたので、一段下げた
    cccc;
    dddd;
} //この行で「}」が出てきたので、一段下げた

インデントの付け方 Step3

「}」が出てきた後「{」が出てきた場合は、その行だけ下げましょう。

    aaaa;
    bbbb;
} else { //この行で「}」「{」が出てきたので、一段下げた
    cccc;
    dddd;

インデントの付け方 Step4

「{」が出てきた後「}」が出てきた行はインデントはしなくても大丈夫です。
塊がその行で完結しているからです。

aaaa;
bbbb;
if(cccc) { dddd; } //「{」と「}」が出てきたけど、特に何も考えなくてもOK!
eeee;
ffff;

練習

「今日の課題6」にプログラムを用意しました。
このプログラムにはあえてインデントを付けていません。
自分でインデントを付けてみてください。

課題7 とにかくタイピングに慣れよう

「今日の課題7」を見てみましょう。見てもらえばわかると思いますが、こちらのプログラムは白紙になってます!
下のプログラムをうつして、動かしてみよう。