先日まで、ティラノスクリプトでスライド式メニューバーを作る説明をしていました。今日もその続きを、と思ったのですが、『自動整形ツールなしで次の解説をするのは難しすぎる』と判断したので、閑話休題を兼ねてVSCodeと自動整形ツールの話をします。
VSCodeを使おう
ティラノスクリプト公式リファレンスでも紹介されているように、ティラノスクリプトを編集するときVSCodeを使うことが一番おすすめです。
なぜかというと、以下のような利点があるからです
覚えるべきコマンドが少なく、通常のドキュメントツール（Wordとか）と同じような操作感で問題なく使える
豊富な拡張機能。ティラノスクリプト用の拡張もある。（重要）
無料
テキストエディターとしては、他にもVimやAtomなどもあります。すでにこの辺りを使っているという方は、そのままそれらをお使いいただくのが良いと思います。（この辺りの良し悪しを語り始めると大乱闘エディターブラザーズになりかねないので、今はやめておきましょう！）（そのほかのエディタはよく存じ上げないので、良し悪しはわからないです。この記事を読んで『今のエディタで事足りる』と思ったらそのままで良いかと思います。）
ただ、PC標準のメモ帳など、本来コードを書くようじゃないようなツールでコードを書いているよ、という方は、今すぐにVSCodeに乗り換えることをお勧めします。メモ帳のようなツールを使うか、VSCodeやVimといったコードを書くためのツールでコードを書くかでは、学習スピードも、制作スピードも、大きく異なります。
※ あくまで、コードはVSCodeで書きましょうという話であり、シナリオなどは別のツールで書いても問題ないと思います。実際、私はシナリオをNotionで書き、それをスプレッドシートで整形した上でVSCodeに転記しています。
VSCodeのインストール方法は、ティラノスクリプト公式リファレンスでも紹介されています。雑に「VSCode」と調べるだけでも簡単にわかると思うので、そちらを参照してください。
自動整形ツールを使おう
VSCodeを強く勧める理由の一つに、『コードの整形ツール』があります。
HTMLやCSS、JavaScriptでは、ある程度、「こういう風に書くと読みやすい」というルールというかお作法のようなものがあります。このルールを守らなくてもゲームは作れますが、ほとんどの人は、ルールを守った方がコードが書きやすい&読みやすいと感じているはずです。
例えば、以下のようなコード。
<div class="text
content">ここにテキストがは
いリマス</div>
これと、以下のコードは同じ意味です。
<div class="text content">ここにテキストがはいリマス</div>
どちらが読みやすいかは、一目瞭然です。下の方が読みやすいでしょう。
さらに、以下のような例だとどうでしょう。
.btn_33_black::after { background: -webkit-repeating-linear-gradient( -45deg, #444,#444 6px, #999 0, #999 12px
);background: repeating-linear-gradient(
-45deg, #444,
#444 6px, #999 0, #999 12px
);
}.btn_33_black:hover {
background-color: #444;
color: #fefefe;
}.btn_33_black:active {
background-color: #333;
transform:
scale(0.96); }
これが、
.btn_33_black::after {
background: -webkit-repeating-linear-gradient(
-45deg,
#444,
#444 6px,
#999 0,
#999 12px
);
background: repeating-linear-gradient(
-45deg,
#444,
#444 6px,
#999 0,
#999 12px
);
}
.btn_33_black:hover {
background-color: #444;
color: #fefefe;
}
.btn_33_black:active {
background-color: #333;
transform: scale(0.96);
}
悪意を持って読みづらくしたので、極端な例ではありますが。とりあえず、読みやすい書き方というものがあるのだろうということはイメージできたかと思います。
自動整形ツールというのは、
<div class="text
content">ここにテキストがは
いリマス</div>
これを、保存ボタン1つで、下の状態にします。
<div class="text content">ここにテキストがはいリマス</div>
最初は、勝手に書き換わるコードにびっくりするかもしれませんが、慣れだすと整形ツールなしでプログラミングやりたくなくなるくらい、便利に感じると思います。
VSCodeで自動整形する方法は、「VCode 自動整形」で調べてください。（他人任せですみません。これの解説、とても難しいんです。）
もしかしたら、ちょっと面倒というか、行き詰まるかもしれませんが……。でも、これを導入すると誇張抜きで作業時間が数十時間単位で短縮されるので、VSCodeを使うなら意地でも導入してください。
「.ks」ファイルの自動整形ツールはまだないので（ほしいよね、有志でどうにか作れないかな？）、「.js」と「.html」ファイルが自動整形されるようにしてください。それさえ出来るようになれば、大丈夫です。
なぜ自動整形ツールが必要か
自動整形ツールを使うか使わないかは本来ユーザーの自由ですが、今回、私が自動整形ツールを使ってほしいと説得するのには理由があります。
それは、ティラノスクリプトの新規ゲームプロジェクトのコードの一部に、整形を行わないと到底読み解けないコードがあるからです。
tyrano/plugins/kag/kag.menu.js と、tyrano/plugins/kag/kag.tag.js を開いてみてください。おそらく、ほとんどの方は添付画像のように英数字がごちゃ〜と並んだものが入っていると思います。
これは、普通のJavaScriptのコードです。スライド式メニューバーの実装を行うにあたって、このコードを一部改変する必要があります。
で、仮に私が「このコードのtest()部分をこっちに書き換えまして」と言ったところで、それがどこなのか全然わからないと思います。読みづらいので。
これ、どうしてこんなに読みづらい状態になっているかというと、こうして空白や改行を除いて圧縮することによって、コードのデータ量を軽くすることができるからです。ですが、このままでは私たちが編集できないので、編集しやすい形に”整形”しておく必要があります。（整形するとわずかにデータ量が大きくなりますが、数KB程度の微々たるものなので、気にしなくてOKです。）
自動整形ツールを導入していれば、tyrano/plugins/kag/kag.menu.js とtyrano/plugins/kag/kag.tag.js を開いてからそれぞれ『保存』することで、読みやすい感じに整形してくれます。コードの内容そのものは変わらないので、心配も不要です。
ボタンひとつでこの通り。
次回の、『スライド式メニューバー』の解説のその4では、自動整形を行なっているものとして解説を進めます。
もし、何かしらの理由で『どうしても整形が行えない』という方は、以下に整形済みの私のコードファイルを貼っておくので、これの内容を丸々コピペしておいてください。ヒューマンエラー的なミスにつながりやすいですし、おすすめはしません。
tyrano/plugins/kag/kag.menu.js
tyrano/plugins/kag/kag.tag.js
コピペした場合は、ゲームをプレビューして、タイトル画面の標準の「つづきから」や「コンフィグ」が問題なく行えるか確認しておいてください。無事行えれたならOKです。このコードで次回に進みましょう。
今回伝えたかったことは以上です。
おすすめ拡張機能
せっかくなので、おすすめ拡張機能をいくつか紹介します。
Japanese Language Pack for Visual Studio Code
VSCodeのボタンなどを日本語にしてくれる拡張です。私は英語で慣れているので導入していませんが、評価の高い拡張です。プログラミングにおいてストレスは大敵なので、遠慮なく導入してください。（肌に合わなかったら後からアンインストールできます。）
TyranoScript syntax
ティラノスクリプトのタグに色をつけたり、エラーを表示したりと、何かと便利な拡張です。VSCodeでティラノスクリプトを触っている人は、ほとんど導入しているんじゃないかなと思います。
たまに、原因不明のよくわからないエラーが発生することもあるので、その時はVSCodeを再起動をするか、気にせずに放置しておきましょう。気にしない心も大事です。特にevalタグでエラー起こしがち。
zenkaku
プログラミングにおいて、全角スペースは敵と言っても過言じゃない。ありとあらゆるバグの温床になります。
しかし、コードを見ているだけだとそのスペースが全角スペースなのか半角スペース2個なのかわからないことがあります。
そこで便利なのが、このzenkaku拡張。全角スペースが少し目立つようになります。全角スペースを滅しましょう。
※ シナリオの台詞などは全角スペースのままでも大丈夫だと思います。私は「！」や「？」の後に全角スペースを入れる派なので、「ちゃんと全角スペースが入っているか？」という確認でも使っています。
他にも、VSCodeには便利な拡張がたくさんあります。私も十数個拡張を入れています。ぜひ、いろいろ調べて自分好みのVSCodeにしてください。