1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

さて、小学生からのJavaScriptジャバスクリプト入門、第2回目のはじまりです。
今回は、JavaScriptでの演算えんざんの方法を学び、今月ののこり日数を計算してみましょう。

演算というのは、足したり、引いたり、割ったり、かけたり、という計算です。

山田

てやんでぇ、べらぼうめ!

アル

ど、どうしたの!?

山田

この、電卓でんたくこわれてるべ。1たす2は12って出るべ。明らかに間違ってるべ

りこ

……多分、「+」ボタンがきかなくなってるね

山田

「むいちもつ(かつお)」がどれだけ必要か知るために、今月ののこ日数にっすうを計算しようと思ったのに、できないべ!

アル

なんてことだ

りこ

「ー」ボタンが使えるなら、できそうな気がするよ! 今月は30日までだから、30から今日の日にちを引けばいいんだよ

山田

これはプログラミングで計算するしかないべ!

アル

その手があったね!

りこ

うえーん、だれもわたしの話を聞いてくれないよー。助けて錦戸くーん!

目次
  1. 演算子ってなぁに?
  2. 今月の残り日数にっすうを計算してみよう!
  3. 年月日を取得して計算してみよう!
  4. 今月末の日にちを取得してみよう!
  5. 取得した年月日を使って、今月の残り日数を表示してみよう!
  6. まとめ

演算子ってなぁに?

プログラミングで演算を行うとき、演算子えんざんしというものを使います。

山田

演算子というのは、演算を行うときに使う記号だべよ

りこ

足し算や引き算とかだけじゃなくて、いろんなのがあるのよ

アル

はやくも難しそうだよー

代入演算子

まずは代入演算子だいにゅうえんざんしを学んでいきましょう。

山田

代入は前回もやったけど、おぼえているべか?

アル

うーん、なんだっけ?

りこ

変数に、数や文字を、そのまま覚えてもらうことよ。ちゃんとしてよね!

変数へんすうに、数字や文字を代入するとき、「=」を使ったのを覚えていますか?
この「=」こそが代入演算子です。

例えば、a = 30というのは、「aという変数に、30という数を覚えておいて」とお願いする意味になります。
a = "こんにちは"とすれば、「aという変数に、こんにちはという文字を覚えておいて」とお願いする意味になります。

文字を覚えておいてもらうには、””でその文字をはさむ必要があります。
ちなみに、a = "30"というふうにすると、「aという変数に、30という文字を覚えておいて」という意味になります。

代入演算子は他にもありますが、まずは「=」を覚えておくといいでしょう。

比較演算子

前回、if()を使いました。比較演算子ひかくえんざんしはこのif()の中などで使われます。

==数や文字が同じ
===数や文字がかたも同じ
!=数や文字がことなる
!==数や文字が型も異なる
>左の数字の方が大きい
>=左の数字が同じか大きい
<右の数字の方が大きい
<=右の数字が同じか大きい
アル

===や!==に出てくる「型」ってなんだろう?

山田

変数には整数や小数点、文字列もじれつといった型があるんだべ。文字列は文字の集まりのことだべ

例えば以下の例では「変数aが覚えている数が30だったとき、aは30ですというアラートを表示して」とお願いしている意味になります。

var a = 30;
if( a === 30 ) {
	alert("aは30です");
}

では、以下の例ではどうでしょうか。
1行目に注目です。30という数字ではなく、30という文字になっています。
この例の場合、aが覚えているのは30という文字(文字列)ですので、アラートは表示されません。

var a = "30";
if( a === 30 ) {
	alert("aは30です");
}

そんなときは、if()の中の「=」を2つにしてあげます。3つだと厳密げんみつに同じときという意味になってしまうので、文字か数字かが違うと、違うものと判断してしまうのです。

var a = "30";
if( a == 30 ) {
	alert("aは30です");
}

こうすることで、変数の型が違ってもアラートが表示されます。

算術演算子

算術演算子さんじゅつえんざんしは、普段みなさんが計算するときに使うものとほぼ同じです。
ただ書き方がちょっとちがったりするので、注意ちゅういです。

+足し算
引き算
*かけ算
/わり算
りこ

かけ算やわり算の書き方がちがうから注意ちゅういしないとね

例えばこのようにすれば、20足す35の計算ができます。
varというコマンドで、sumという変数を宣言せんげんし、そこに20 + 35の結果を代入しています。
sumというのは合計という意味です。

var sum = 20 + 35;
alert( sum );

今月の残り日数にっすうを計算してみよう!

山田

ここから本題だべ。わだずの「むいちもつ(かつお)」があと何袋必要か調べるべ

アル

30から今日の日にちを引けばいいんだね!

山田

そうだべ

りこ

私が最初に言ったのに!

さて、今月は11月です。30日までありますので、30から21を引きます。

var day = 30 - 21;
alert( day );

無事、9とアラートに表示されれば成功です。

アル

でもこれだと、明日になったらまた日にちを変更しなきゃだめだよね

山田

そうなんだべ。でも、そんな時は今月の日数と、今日の日にちを自動的に変数に代入して、計算すればいいんだべ

りこ

そんなことができるの!? すごい! わたしも知りたい!

年月日を取得して計算してみよう!

年月日を取得しゅとくするには、Dateというものを使います。

var date = new Date();
alert( date );
アル

年月日とか、時間までもが表示されてる!

りこ

ここから必要なものをもってくるのね!

アル

でもDate()の前のnewってなんなんだろう?

山田

いいとこに気がついたべな。このDate()というのは、もともと用意されているオブジェクトなんだべ。オブジェクトを使うとき、newすることで、インスタンスが作成されるんだべ

アル

??? 意味が分からないよー

山田

インスタンスを作成することで、いろんな機能きのうが使えるようになるんだべ。とにかく、「Date()を使いたい時はnewする」と覚えておけば今はいいべ

りこ

きっと、オブジェクトってのを勉強するときにつながってくるのね!

とにかく、Date()からインスタンスを作成すると、年月日や時間などに関する、いろんな機能が使えるようになります。
では、現在が何年なのかを表示してみましょう。何年なのかを表示するにはgetFullYear()を使います。

var date = new Date();
var year = date.getFullYear();
alert( year );

今が何年なのか(この記事をかいたのは2018年)が表示されれば成功です。

同じように、月や日付を表示することもできます。
以下にその方法をまとめます。

var date = new Date();

//年
var year = date.getFullYear();
//月
var month = date.getMonth() + 1;
//日
var day = date.getDate();
りこ

あれ、getMonth()には1を足すのね

山田

そうなんだべ。getMonth()を使って月を取得しようとすると、0月〜11月となってしまうから、1を足す必要があるんだべ

アル

//ってのは?

山田

//と書かれた行は、コメントといって、プログラムに影響えいきょうあたえないものだべ。メモをしたい時とかに使うといいべ

今月末の日にちを取得してみよう!

では、今月末の日にちを取得しゅとくしてみましょう。

山田

今月末の日にちを取得するにも、Date()が使えるんだべよ

りこ

どうやってやるの?

山田

来月の0日は何日なのかを取得すればいいんだべ

今月末の日にちは、つまり来月の0日ということになります。
これも、Date()で取得することができます。

使い方は、Date( 年, 月, 0 ).getDate()とします。
実際にプログラムで使うには、以下のようにします。

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var eom = new Date( year, month, 0 ).getDate();
alert( eom );

eomというのは、「end of month(月末)」の省略しょうりゃくです。
月末の日にち(11月は30日までなので30)が表示されれば、成功です。

取得した年月日を使って、今月の残り日数を表示してみよう!

山田

あとは、月末の日にちから今日の日にちを引けばいいべ

アル

わーい、はやくやってみよう!

では残り日数を計算してみましょう。

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var eom = new Date( year, month, 0 ).getDate();
alert( eom - day );

これで、今月の残り日数が表示されます。

まとめ

今回はJavaScriptでの、今月の残り日数を取得する方法を紹介しました。
今月末の日にちから今日の日にちを引くことで計算はできますが、ちょっと今月末の日にちを取得するのが大変なので、しっかりと学びましょう。

山田

今回は演算の方法と、年月日の取得方法しゅとくほうほうが学べたべな

アル

これが使えればいろんなところで役立ちそうだね

りこ

大切なのはDate()ね! デート……錦戸くんと……

アル

毎回毎回……ちぇっ!

山田

まぁまぁ、とにかく演算の方法と年月日の取得方法をしっかり覚えておくべよ

りこ

うんっ

アル

うんっ

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

マップ上をキャラが移動できるようにしよう!

【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介《しょうかい》しました。しかし、まだマップを配置《はいち》しただけで、キャラクター

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

Pug

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

FC2 blog customize

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

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

【Git】リモートリポジトリへPushする方法

こんにちは、@It_is_Rです。 前回「【Git】ブランチを使って履歴を分岐させる方法」では、ブランチを使うことの便利さを学びました。第五回目の今回は、GitHubのリモートリポジトリを作成

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です