VSCode拡張機能でFizzBuzz!〜開発で扱った処理〜
2022年、あけましておめでとうございます！
年末年始は、いかがお過ごしでしたか？
私は、VSCodeの拡張機能開発に初挑戦しておりました！
そこで2022年1本目の今回は、VSCode拡張機能開発で扱った処理についてご紹介していきたいと思います！
※もし、記事への補足・改善点(修正点)などアドバイスがあれば、コメント頂けますと嬉しいです！
今回開発した拡張機能
ユーザが入力した値を最大値として、FizzBuzz出力ができるというものです。
コマンドを実行すると、以下の出力箇所に表示されます。(新たにFizzBuzzという選択肢が発行され、出力箇所が作られます。)
そもそもFizzBuzzって何？
FizzBuzzとは、英語圏の遊びの1つです。
ルールについては、Wikipediaさんを参照してみます。
プレイヤーは円状に座る。最初のプレイヤーは「1」と数字を発言する。次のプレイヤーは直前のプレイヤーの次の数字に1を足した数字を発言していく。ただし、3の倍数の場合は「Fizz」（Bizz Buzzの場合は「Bizz」）、5の倍数の場合は「Buzz」、3の倍数かつ5の倍数の場合（すなわち15の倍数の場合）は「Fizz Buzz」（Bizz Buzzの場合は「Bizz Buzz」）を数の代わりに発言しなければならない。発言を間違えた者や、ためらった者は脱落となる。
3の倍数の場合はFizz、5の倍数の場合はBuzz、15の倍数の場合はFizz Buzz、それ以外の数字の場合はその数字を返す必要があるということがわかりました。
文字列型から数値型への変換
ユーザ入力で受け付けた値は、文字列型になります。
しかし、ループを回してFizzBuzzを実行するためには、数値型に変換する必要があります。
まずは、文字列型から数値型に変換する方法について紹介していきます。
使用する文字列はこちらです。事前にデータ型が文字列型であることも確認しています。
let sampleNum = '12345';
console.log(typeof sampleNum); // string
let samplePoint = '123.5';
console.log(typeof samplePoint); // string
let sampleStr = 'あいうえお';
console.log(typeof sampleStr); // string
方法としては、Number()関数、parseInt()メソッド、parseFloat()メソッドの3種類があります。
Number()関数
まずは、Number()関数から確認していきます。
Number(文字列);
サンプルの文字列を利用して実践してみると以下のような結果になりました。
console.log(Number(sampleNum)); // 12345
console.log(typeof Number(sampleNum)); // number
console.log(Number(samplePoint)); // 123.5
console.log(typeof Number(samplePoint)); // number
console.log(Number(sampleStr)); // NaN
console.log(typeof Number(sampleStr)); // number
全て、数値型に変更できています。
ただ、文字列については、数字に変換できないので、NaNが返ってきます。
parseInt()メソッド
次に、parseInt()メソッドを確認してみます。
parseInt(文字列);
parseInt(文字列, 基数);
第2引数には、基数を渡すことも可能です。
サンプルの文字列を利用して実践してみると以下のような結果になりました。(基数指定なし)
console.log(parseInt(sampleNum)); // 12345
console.log(typeof parseInt(sampleNum)); // number
console.log(parseInt(samplePoint)); // 123
console.log(typeof parseInt(samplePoint)); // number
console.log(parseInt(sampleStr)); // NaN
console.log(typeof parseInt(sampleStr)); // number
こちらも、全て、数値型に変更できています。
文字列についても、NaNに変換されています。
先ほどのNumber()関数と違う点は、小数点以下を持つ数字への対応です。Number()関数では、小数点以下もそのままで数値型に変換されていました。四捨五入もしていなかったです。
しかし、parseInt()メソッドの場合は、小数点以下は切り捨てられます。そのため、.5が切り捨てられ、123だけが返ってきたのです。
parseFloat()メソッド
次は、parseFloat()メソッドを確認してみます。
parseFloat(文字列);
サンプルの文字列を利用して実践してみると以下のような結果になりました。
console.log(parseFloat(sampleNum)); // 12345
console.log(typeof parseFloat(sampleNum)); // number
console.log(parseFloat(samplePoint)); // 123.5
console.log(typeof parseFloat(samplePoint)); // number
console.log(parseFloat(sampleStr)); // NaN
console.log(typeof parseFloat(sampleStr)); // number
こちらも、全て、数値型に変更できています。
文字列についても、NaNに変換されています。
小数点については、Number()関数と同じく、小数点以下も返ってきています。
今回自分が選択したのは...
今回、私はparseInt()メソッドを採用しました。
ユーザが入力した値が小数であった場合、Number()関数やparseFloat()メソッドと違って、小数点以下を無視して整数部のみを返してくれるからです。
おまけ
整数部だけを扱いたい
整数部だけ利用したい場合は、Math.floor()メソッド、もしくは、Math.trunc()メソッドを利用することができます！
parseInt()を使った数値型への変換を実行しない場合などに利用することになるかと思います。
もし、今回私がparseInt()メソッドではなく、Number()関数を選択した場合、Number.isInteger()メソッドでfalseの場合に、Math.floor()メソッドとMath.trunc()メソッドのどちらかで整数部だけを取り出す処理を行なっていたと思います。
Math.floor()メソッドとMath.trunc()メソッドについてご紹介しておきます。
ここから使用する値は以下です。
let num = 123.5;
let minusNum = -123.5;
Math.floor()メソッド
まずは、Math.floor()メソッドです。
このメソッドは、引数に渡した数値以下の最大の整数を返します。
Math.floor(数値);
サンプルの文字列を利用して実践してみると以下のような結果になりました。
console.log(Math.floor(num)); // 123
console.log(Math.floor(minusNum)); // -124
負の数の場合、その数値以下の最大の整数である-124が返ってきました。
Math.trunc()メソッド
次に、Math.trunc()メソッドです。
このメソッドは、引数に渡した数値の整数部を返します。
Math.trunc(数値);
サンプルの文字列を利用して実践してみると以下のような結果になりました。
console.log(Math.trunc(num)); // 123
console.log(Math.trunc(minusNum)); // -123
正の数の場合、負の数の場合ともに、小数点以下を除いた整数部分が返ってきました。
正の数か負の数か判定したい
FizzBuzzのルールでは、1からスタートなので、もしユーザが負の数を入力した場合の対応が必要です。
私は、負の数を受け取った場合には、エラーメッセージを表示するようにしました。
このように聞くと、「負の数かどうかって、どうやったらわかるの？」って思いませんか？
Math.sign()メソッド
Math.sign()メソッドを使うと、正の数か負の数か、0かどうかを判定することが可能です。
Math.sign(数値);
正の数であれば1、負の数であれば-1、0であれば0を返します。
先ほどのサンプルの文字列と0を利用して実践してみると以下のような結果になりました。
console.log(Math.sign(num)); // 1
console.log(Math.sign(minusNum)); // -1
console.log(Math.sign(0)); // 0
おわりに
文字列から数値へ変換する方法や整数部だけを取り出してくる方法についてご紹介してみました。
今回、VSCode拡張機能の開発に挑戦してみて、拡張機能開発の方法だけでなく、今回ご紹介したような処理についてなど学ぶことができました！
今後は、実際の開発で利用できるような拡張機能の開発にも挑戦してみます💪(いや、むしろそうでなければならないか...)
長文でしたが、お読み下さり、ありがとうございました！
参考資料
MDN公式 Number
MDN公式 parseInt()
MDN公式 parseFloat()
MDN公式 Math.floor()
MDN公式 Math.trunc()
MDN公式 Math.sign()
Wikipedia Fizz Buzz
JavaScript Primer 暗黙的な型変換 文字列→数値
Discussion