5歳の子供と懐かしの歌で楽しむ年末

今年の年末は帰省や旅行をせずに家で過ごしています。
家では子供(5歳)がyoutubeをみていますが、子供が選ぶ動画は大人にとってはあまり面白くないですよね。
どうせなら一緒に楽しめるものを見たい。
そこで、子供ウケが良さそうな昔の歌を見せてみました。
いくつかウケの良いものがあったので今日はその動画を紹介します。
大人は懐かしさに浸りつつ、子供も楽しめる動画なので是非見せてみてください。

ダッシュ

www.youtube.com
スーパーマリオの音が可愛い歌です。
「ビーダッシュ!」の掛け声を一緒にやると盛り上がります。
ただ歌が始まる前のイントロが長いので、マリオがジャンプするような「ピョン」の音と一緒にジャンプすると楽しく時間を潰せます。

富士山

www.youtube.com
次は電気グルーブの富士山です。
「フッジッサーーン!」を一緒にやると楽しいです。
子供には「登るぞ登るぞ登るぞ登るぞ登るぞ登るぞ...」がウケた。
その後、交差点で信号待ちをしてる時に子供が急に「フッジッサーーン!」て歌い出しました。
近くでニヤニヤしてる人がいたので、「あいつも仲間だな」と思いました。

WOW WAR TONIGHT~時には起こせよムーヴメント

www.youtube.com
次は誰もが知ってる名曲「WOW WAR TONIGHT」です。
曲の流れとしては、序盤はボーーっとしたような歌で、途中から一気に弾けたように盛り上がる感じですが、後半の盛り上がりが好きみたい。
加えて、途中に入ってくる松っちゃんのラップみたいな部分もお気に入りのようでした。
ただし、30代の我々にはグッとくる曲なので大人は心構えをしっかりして聞きましょう。

The Pillows - Robotman

www.youtube.com
次はThe PillowsのRobotmanです。
先ほどまでのノリのいい曲とは違い。
至って真面目な、どちらかというと悲しい歌です。
が、なぜかウケた。
Pillows独特のちょっと鼻にかかったような歌声が面白いらしい。
「サヨナラ Baby〜」の部分がお気に入りらしく、ずっとモノマネしながら歌ってます。

夏色 www.youtube.com
最後はゆずの代表曲「夏色」です。
この曲は普通に聴くと爽やかな気持ちの良い曲調ですが、ライブだと全然イメージが違います。飛びまくりです。
子供ウケが良いのはもちろんライブの方なので、動画はそちらを選んでください。
「イチ、ニ、サン、ヘイ!」の掛け声と一緒に家族全員でジャンプしましょう。曲中、ずっとジャンプするハメになりますが、有酸素運動だと思って頑張りましょう。

番外編:ウケなかった曲

番外編として全然ウケなかった曲を紹介します。
それは、とんねるずの「ガラガラヘビがやってくる」です。
絶対ウケると思ったんですけどね。。

まとめ

いかがでしたでしょうか?
いろいろ聞かせて子供の反応を見てると、「ここがウケるのかーw」みたいな意外な発見があって楽しいです。
冬休みに思い出の曲を子供に聞かせてみてはいかがでしょうか?

スプレッドシート製の課題管理でオジサンと共にゴールを目指す

Google Apps Script Advent Calendar 2020 - Qiitaに参加しています。
これは23日目の記事です。
前日の記事では、自作のメルマガツールで2週間サボらずメルマガを配信できたそうで、ツールの力は偉大だなと感じました。
それに便乗して私も自作ツールのお話です。

みなさんは課題管理にどんなツールを使っていますか?
エンジニアの方はGitHub Issueやjiraなど外部サービスを用いて課題管理をすることが多いと思います。
ただ職場には非エンジニアの「オジサン」もいて、その方々はExcelGoogleスプレッドシートなどの表計算的なシートを好みます。
時々、社内の改善活動でそうゆう方々と一緒に仕事をすると、文化の違いに少しモヤモヤします。

私「課題管理はIssueでいいですかねー」
オジサン「イシュー?何それ?課題管理はExcelで十分でしょ」
私「はぁ...」

内心では「Issueを使いたいなぁ」と思うけど、一時的な活動のためにアカウントの作成をお願いするほどの熱量もないのが現実。
結局、Excelで管理をすることになり、なんかツライ...。
同じ会社で働いてるんだから、お互いに気持ちよく活動してゴールを目指したいですね。

そこで今日は、シートによる課題管理だけどギリギリ許せる、スプレッドシート製のGitHub Issue風の課題管理を紹介します。
スプレッドシートですがシートの弱点は克服しています。 セットアップも1分で終わるので、オジサンとのプロジェクトで是非活用してみてください。

続きを読む

【Markdown】はてなブログの独自画像タグをimgタグに変換する方法

はてなブログの記事をローカルのMarkdownエディターで編集したいのですが、
はてなMarkdown記法には独自タグが使われているためうまくいきません。
愛用のTyporaで記事を書きたいのですが。。
独自タグにはいくつかありますが、まずは記事編集でよく使う画像タグだけ解決したので共有します。

やりたいこと

はてなの独自タグというのは、画像の場合はこんな表記です。

[f:id:naosim:20151123001918p:plain]

この表記をなんとかして通常の

![画像名](URL)

に変換したい。

独自画像タグと画像のURLを比較する

まずは独自タグと実際の記事上の画像URLを比較します。

[f:id:naosim:20151123001918p:plain]
https://cdn-ak.f.st-hatena.com/images/fotolife/n/naosim/20151123/20151123001918.png

うむうむ。みえる。みえる。
法則性がみえるぞぉ。

はてなブログの独自画像タグの意味

まずは独自の画像タグから。
どうやら変数としてユーザID、日時、ファイルタイプの3つが埋め込まれてるみたい。
固定値と変数を分けるとこんな感じ。

[f:id:{userId}:{fileDateTime}{fileType}:plain]
変数 説明
userId 私の場合はnaosim
fileDateTime ファイルがアップされた日時。
fileType ファイルの種類を1文字で表現したもの。jならjpg、pならpng、gならgif。(他にもあるだろうけど調べてない)

画像URL

次は独自のタグで見つけた変数を画像URLにマッピングします。

https://cdn-ak.f.st-hatena.com/images/fotolife/{userIdの頭文字}/{userId}/{fileDateTimeの日付部分}/{fileDateTime}.{fileTypeに対応する拡張子}

ベースURLは変わりそうですが、とりあえずできた。

サンプルコード

上記をもとに作った変換プログラムです。

function convertToImg(hatenaImg /* like "[f:id:naosim:20151123001918p:plain]" */) {
  const segments = hatenaImg.split(':')
  const userId = segments[2]
  const fileDateTime = segments[3].slice(0, 14)
  const type = segments[3][14];
  const types = {
    'p': 'png',
    'j': 'jpg',
    'g': 'gif'
  }
  if(!type || !types[type]) {
    throw 'file type not found. ' + type;
  }

  return `![${hatenaImg.slice(1, hatenaImg.length - 1)}](https://cdn-ak.f.st-hatena.com/images/fotolife/${userId[0]}/${userId}/${fileDateTime.slice(0, 8)}/${fileDateTime}.${types[type]})`
}

デモ

サンプルプログラムの動作デモです。
1つ目のフォームにはてなの独自画像タグを入れて変換ボタンを押すと、Markdown標準の画像タグに変換されます。

See the Pen hatenaImg2Img by なおしむ (@naosim) on CodePen.

これでローカルで記事編集できる!

これで自分の好きなMarkdownエディタで記事編集ができるようになりました。
ブログ記事で画像を使う際に↓こんなステップを踏めばOKです。

  1. はてなブログの編集画面に画像をアップ
  2. 生成された独自タグを変換する
  3. 変換後の画像タグを自分のMarkdownエディタに貼り付ける

画像の少ない記事であれば、許容範囲の手間かなと思います。

まとめ

はてなブログの独自画像タグをimgタグに変換することができました。
これで自分の好きなMarkdownエディタで編集できる!
やったぜ!

プレゼン中の孤独な暗闇を照らす灯台の光。YES/NOで答えるリアルタイムアンケートサービスを作った。

Web会議にて。
自分「ここまで何か質問はありますか?」
観衆「シーーーーーン」
自分「で、では、説明を続けますね...」
このように、誰からも反応がなく寂しい思いをしたことはありませんか?
私はよくあります...つらい。。

Web会議でのプレゼンは参加者が多いほど孤独

ウチの会社では、Web会議で誰かがプレゼンしているときに自分のマイクをオフにする暗黙のルールがあります。
そうしないと雑音が入って話が聞き取りづらくなるから。
特に大人数の会議では雑音が入りやすいためマイクオフが重要です。
ただプレゼンする側としては、無音の中で話をするので、場の空気がわからず孤独感がハンパないです。
笑いは取れているか?
聞き手は退屈になっていないか?
自分の言ってることは伝わっているのか?
などの不安に襲われます。
たとえるなら、灯台の光もない暗闇を一人で航海してるような感覚です。

で、その孤独に耐えきれず「ここまでどうです?質問あります?」みたいなオープンな質問を急にすると、冒頭のような無反応を喰らい、さらに孤独になります。。
プレゼンする側としては、とにかく聞き手の反応や空気感が知りたいんです。
退屈に感じてるなら、早くそれを知りたい。
そして軌道を修正したい。

聞き手の空気感を手軽に知る方法はないものか...

聞き手の反応を知るなら、質問を投げかけてみるのが良いです。
質疑応答をするサービスにslidoがありますが、これはテキストで返答を得るためテンポが悪い。

www.sli.do

今はもっとカジュアルにテンポよく聞き手の意見を知りたいんです。
例えば「このプレゼン内容、既に知ってたりする人います?」て質問に対して、YES!とかNO!くらいの反応で十分。 それさえわかれば無駄な説明を省略したり、逆に伝わってないところを詳しく説明したりして、軌道を修正できる。
聞き手の状況に合わせて話すことができれば、プレゼンする側も安心できる。

で、そうゆうサービスが見つからなかった自分で作りました。

YESかNOかで答えるだけのテンポの良いアンケートサービス「スイッチオン」

naosim.github.io 「スイッチオン」はプレゼンする側の質問に対して聞き手がYESかNOで回答し、その結果をリアルタイムに表示するサービスです。
slidoなどのちゃんとした質疑応答をするモノとは違い、サッと質問して、サッと答えるテンポの良さが特徴です。
テンポよく聞き手の意見を聞き、それに応じて説明の仕方を修正できます。
下記動画がそのデモです。
左のウィンドウがプレゼン者の画面、右の小さい2つのウィンドウが聞き手です。
聞き手がYESやNOで回答すると、それがプレゼン者の画面にリアルタイムで反映されます。

f:id:naosim:20200713161928g:plain

集計途中の状態は非表示にもできます。
集計結果を隠しておいて、最後に「結果はこちら!ドン!」とか言って出す場合に使います。
話を盛り上げたい時は是非。

f:id:naosim:20200713162005g:plain

始め方

このサービスを利用するにはリアルタイムにデータ通信をするWebSocketサーバが必要です。
今回は無料で試せるWebSocket.INを使う方法を紹介します。

  1. Websocket.INの無料アカウントを作る
    下記サイトでアカウントを作ります。
    いくつかプランを選べますが今回は無料の「Free」を選びます。www.websocket.in

  2. APIKeyを生成する
    次に右上の「Settings」から設定画面へ移動します。
    次に左側の「APIKeys」を選択し、「Create a new API Key」に任意の名前をつけて生成します。とりあえず今回は名前を「mytest」にしました。
    APIKeyは「Current API Keys」の「iマーク」のボタンを押すと表示されます。APIKeyはあとで使うのでどこかにメモっておいてください。

  3. アンケートシステム「スイッチオン」で部屋を作る
    「スイッチオン」は聞き手と対話的にアンケートをとるので、そのための部屋を作ります。
    下記サイトへ移動し、先ほどメモったAPIKeyを入力し、OKボタンを押します。 naosim.github.io

次に、任意の部屋番号を入力します。
とりあえず「1」と入力すればOKです。
これで部屋ができました。

あとは聞き手に画面下側の観衆用URLを伝えて、部屋に入ってもらえば準備完了です。

新人向けの説明会で使ってみたら孤独感がなくなった

会社で新人さんに業務を説明する会議がありました。時間は90分。 新人さんとは年齢が一回り以上も離れてるので「わからないことがあったら質問してね?」と言っても質問が出にくいです。 そこで早速このシステムを使ってみました。
「xxについて知ってる人、スイッチオーーン」とか言って、反応をみながら説明をしていきます。

結果は大成功。
説明中にジョジョネタは一切伝わらないことがわかり、軌道修正できた。
話してる最中の孤独感もなく、楽しく進めることができました。
こりゃ〜孤独な暗闇を照らす灯台の光じゃ〜〜〜〜〜w

まとめ

YES/NOでテンポよく答えるアンケートサービスを作った。
プレゼン中に使ったら、聞き手の状況をいい感じに把握でき、孤独感がなくなった。
Web会議のプレゼンで孤独を味わってる人は是非使ってみてください。

たった3行コピペするだけで可愛いポップアップが表示できる tippy.js

HTMLでサイトを作ってると、ポップアップ表示で説明を入れたい時がある。
とりあえず標準のalert('hello')とか使うけど、見た目がダサすぎる。
作っているのがサンプルアプリだとしても許せないレベル。

で、イイ感じのポップアップをalertメソッドくらい簡単に表示できるライブラリないかなぁと思って調べたら"tippy.js"を見つけました。

f:id:naosim:20200523211309p:plain
こんなポップアップがたった3行のコピペで表示できる。
デザインも良くて、カスタマイズ性も高く、ドキュメントも充実してて使いやすいライブラリだったので紹介します。

tippy.js

f:id:naosim:20200524065810p:plain

公式サイト: Tippy.js - Tooltip, Popover, Dropdown, and Menu Library
github: atomiks/tippyjs: Tooltip, popover, dropdown, and menu library

Webの完全なツールチップ、ポップオーバー、ドロップダウン、およびメニューソリューション

とりあえずアイコンが可愛い。

とりあえず表示するなら3行コピペでOK

クッソ簡単。 例えば

<div id="myContent">hello</div>

という部分にマウスオーバーしたときにポップアップを表示をしたいなら
まずCDNからのJSの読み込みを2行コピペ。

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

jsに実装をコピペ。

tippy('#myContent', {content: "I'm a Tippy tooltip!"});

はい。完成。
指定したのはdiv要素へのセレクターと表示するテキストのみ。
↓動作確認用のページで"hello"にカーソルを乗せてみてください。

See the Pen tippy.js sample by なおしむ (@naosim) on CodePen.

簡単すぎる!
ちなみにjquery等へのライブラリ依存もないです。ほんとに上記のコピペだけで完結。

カスタマイズも豊富

このライブラリ、簡単に使えるだけでなくカスタマイズもめちゃくちゃ豊富なんです。
いくつか利用頻度の高そうなものを紹介します。

クリックで表示する

ポップアップ表示はデフォルトはマウスオーバーですが、クリック時に表示できるようにします。 先ほどのtippyメソッドにtriggerパラメータを追加するだけ。

tippy('#myContent', {content: "I'm a Tippy tooltip!", trigger: 'click'}); // triggerを追加

このようにtippyのカスタマイズは基本的にパラメータを追加するだけ。簡単。

ポップアップを出す位置を変える

デフォルトは上側にポップアップが表示されますが、これも変更可能です。 方法はplacementを追加するだけ。例えば右側に表示したいならこう。

tippy('#myContent', {content: "I'm a Tippy tooltip!", placement: 'right'}); // placementを追加

設定値は他にもたくさんあります。いろいろ使ってみると楽しい。
- top - top-start - top-end - right - right-start - right-end - bottom - bottom-start - bottom-end - left - left-start - left-end - auto - auto-start - auto-end

ポップアップにHTMLを表示する

デフォルトではポップアップのテキストに改行を入れられません。理由はテキストにHTMLが使えず<BR>タグが使えないから。これもパラメータ追加で解決できます。痒いところに手が届いててすごい。

tippy('#myContent', {content: "I'm a Tippy tooltip!", allowHTML: true}); // allowHTMLを追加

AJAXを使うなどマニアックなカスタマイズも

公式サイトを眺めていたら、ポップアップ時にAJAXで画像を読み込んで表示するサンプルが出てきた。
そんなことまでできるのか。。
すごい。。
AJAX | Tippy.js

まとめ

コードを3行コピペだけでポップアップ表示ができるtippy.jsを紹介しました。
簡単で便利すぎるライブラリなので、知っておいて損はないですね。

1次元オセロの問題

こんにちは。
今日はひさしぶりにプログラミングの問題です。題材はオセロゲーム。
オセロゲームといえば8x8の2次元の盤面に白と黒の石をおいていくゲームですが、今日はそれを1次元にしたようなお題です。

お題

f:id:naosim:20200502060925p:plain 8x1の盤を使ってオセロをする。
盤面に白と黒の石が置かれている(上図)。
これに白の石を置く。
指定した座標に白の石を置いたときに、オセロのルールにしたがって黒の石がひっくり返った後の盤面を返す関数を作りたい。
下記のプログラムの// TODO 実装の部分にプログラムを下記、この関数を完成させてください。(TODO以外の部分に関数やクラスを作っても良いです。)

続きを読む

【js】落とし穴にハマるな!Dateクラスで日付を操作する技 5選

javascriptの標準ライブラリで悪名高いDateクラス。
通常はmoment.jsなどのラッパーライブラリを使って安全に作りますが、ちょっとしたスクリプトくらいだとライブラリは使わずにスクラッチで書きます。
そんな時に使える日付操作周りのTipsを列挙して解説していきます。 日付操作の解説の中でいくつか落とし穴があるので、それについても解説します。

紹介する日付操作一覧

  • 今日の日付を取得する
  • 明日の日付を取得する
  • 今週の火曜日を取得する
  • 先月末を取得する
  • 今月末を取得する

今日の日付を取得する

Dateは日付と時刻を両方含んだクラスです。
そこから時刻を削り、日付のみを抽出します。

new Date(new Date().toLocaleDateString())

解説

Dateのコンストラク

まずはDateのコンストラクタから解説します。 コンストラクタにはざっくり2種類あります。それは引数ありとなしです。

引数なしの場合、現在日時が取得できる

現在日時はDateのコンストラクタを引数なしで呼び出せば生成できます。

var now = new Date();

引数ありの場合、指定した日時が取得できる

引数ありの場合は、指定した日付が取得できます。指定の仕方は様々ありますが、new Date('2020/3/24')のように日付をyyyy/mm/ddの形式で指定すると日付のみで生成できます。

以上より、今回目的とする「今日の日付」を取得すためには、Dateの引数なしコンストラクタで現在日時を取得し、それをyyyy/mm/ddの形式の文字列に変換して、Dateの引数ありコンストラクタに渡せばOKです。

日時からyyyy/mm/ddを取り出す

DateクラスにはtoLocaleDateString()というメソッドがあります。 このメソッドを呼び出すとyyyy/mm/ddの形式で返ってきます。

まとめ

以上をまとめると下記のようになります。

var now = new Date();// 現在日時のDate生成
var todayStr = now.toLocaleDateString(); // yyyy/mm/ddの形式で取得
var today = new Date(todayStr); // 日付だけのDate生成

これで今日の日付が取得できます。 これを1行で書いたのが冒頭の

new Date(new Date().toLocaleDateString())

です。

落とし穴: 日付をハイフン区切りにすると死ぬ

Date生成で日付をスラッシュ区切りではなくハイフン区切りで書くことがあります。たとえばnew Date('2020-03-24')のように。
これでDateを生成すると結果は「2020年3月24日の午前9時」になります。「9時ってなんだよ!イギリスかよ!」て思いますね。。
一方new Date('2020-3-24')のように月や日付をゼロ埋めしない場合は日本時間で「2020年3月24日の午前0時」になります。
つまりゼロ埋めの有無で結果が変わるんです。
ちなみに例えば2020/10/10のように月も日も2桁の値を指定されたら、これがゼロ埋めされてるか判別できないのですが、この場合は「ゼロ埋めあり」の判定になり、イギリス時間になります。 なのでnew Date('2020/10/9')は日本時間ですが、翌日のnew Date('2020/10/10')はイギリス時間になります。
怖すぎる。。
区切り文字周辺の挙動は怪しいの以下にまとめておきます。

new Date()の引数 結果
2020/1/1 日本時間
2020/01/01 日本時間
2020-1-1 日本時間
2020-01-01 イギリス時間
2020-01-01 00:00 日本時間

(ゼロ埋めアリでも時刻を指定すると日本時間になるのか...)

とりあえずスラッシュ区切りにしておけば安心だ!

明日の日付を取得する

今日の日付取得を応用すれば明日の日付が取得できます。

var d = new Date(new Date().toLocaleDateString())
d.setDate(d.getDate() + 1)

1行目は先ほどの「今日の日付」です。 2行目を解説します。

解説

date.getDate()

2行目の括弧内にあるd.getDate()では今日の日が取得できます。
今日が3/24ならば24が取得できます。
これに1を加えて、日付を更新するメソッドsetDate()に渡します。

date.setDate()

最後にd.setDate()の部分です。setDate()は日付を更新します。
引数に月の末日よりも大きな値が来た場合は年や月をいい感じに更新してくれます。
例えば12月32日を指定すると、翌年の1月1日にしてくれます。

var d = new Date('2019/12/31') // 12月
d.setDate(32)` // => 2020/1/1

まとめ

冒頭のプログラムは、今日の日付が入っている変数dから、getDate()で日を取り出して1を加え、setDate()に渡すことで、明日の日付を取得しています。

今週の火曜日を取得する

次は先ほどのsetDate()の応用編です。 今週の特定の曜日を取得します。今回は例として火曜日を取得します。

取得例:

  • 現在が2020/3/25(水)ならば2020/3/24(火)が取れる
  • 現在が2020/3/29(日)ならば2020/3/31(火)が取れる
var d = new Date(new Date().toLocaleDateString())
d.setDate(d.getDate() + 2 - d.getDay())

解説

1行目の日付取得、2行目のsetDateによる日の更新は今まで解説した通りなので省略します。 ここでは2行目のsetDateの中身を解説します。

date.getDay()

date.getDay()で曜日が数値で取得できます。 数値は日曜日なら0、月曜日なら1、...土曜日なら6です。

火曜日までの日数

括弧内の2 - d.getDay()は何をしているのか? まず2は火曜日という意味です。 そこから今日の曜日を引くと火曜日までの日数を計算しています。 例えば今日が日曜日(0)ならば 2 - 0 で2日、今日が金曜日ならば 2 - 5で-3日です。 これを現在の日に加える(または引く)と火曜日の日付が取得できます。

まとめ

getDay()で曜日を数値で取得し、特定の曜日から日数を計算することにより、今週の特定の曜日が取得できました。 プログラムの2の部分を他の数値に変えると、別の曜日を取得できます。

先月末を取得する

var d = new Date(new Date().toLocaleDateString())
d.setDate(0)

解説

「明日の日付」の解説でd.setDate()に月末よりも大きな値を入れた場合にいい感じにしてくれる話を書きましたが、0やマイナス値のような月初よりも小さい値を入れた場合もいい感じにしてくれます。
例えば2020年1月0日は2019年12月31日になります。
つまり0日は先月末の意味になります。
なので現在の日付に対してsetDate(0)をすると先月の末日が取得できます。

今月末を取得する

先月末を応用して、「来月の前の月の月末」を取得すれば今月末になります。

var d = new Date(new Date().toLocaleDateString())
d.setDate(1)
d.setMonth(d.getMonth() + 1)
d.setDate(0)

解説

2行目のsetDate(1)は「ミソ」なのでちょっと飛ばして、3行目から解説します。

date.getMonth()

date.getMonth()で月を数値で取得します。
数値は1月は0、2月は1、...、12月は11になります。0から始まるところが特徴的です。

date.setMonth()

date.getMonth()で月を指定できます。-1や13のようなありえない月を入れてもいい感じにしてくれます。 なので

d.setMonth(d.getMonth() + 1)

の部分では括弧内で今月を取得し、それに1を加えて、setMonth()に渡すことで「来月」にしています。 この来月に対して「先月末」を意味するsetDate(0)をすることにより、「今月末」を取得できます。

落とし穴: getMonth() + 1が2ヶ月後になる

実は上記のやり方には問題があります。
たとえば現在が2020/1/31の場合、今月に1を加えると、2020/2/31となり、2月に31日は無いので、結果は2020/3/2になります。この3/2対してsetDate(0)をすると2月末になり、期待した1月末になりません。
つまり、現在の日が29, 30, 31のような、月によってあったりなかったりする日付の場合にバグになります。 この問題を解決するためには、日を安全な1日に変更しておけばOKです。それが2行目のsetDate(1)です。

まとめ

現在の日を今月の初日に変更し、来月を取得し、そこから先月末を取得することにより、今月末を取得できます。

全体まとめ

今回はDateから様々な日付を取得する方法を列挙しつつ、いくつかDateのハマりポイントも紹介しました。
jsのDateは噛めば噛むほどツラ味がでるな...ライブラリ使おうw
それではまたー。