typeofには5種類のobject型がある JavaScriptではtypeof演算子を使うとデータ型を調べることができます。 console.log(typeof 123) // => number console.log(typeof 'foo') // => string console.log(typeof true) // => boolean console.log(typeof undefined) // => undefined console.log(typeof function() {}) // => function console.log(typeof Symbol('bar')) // => symbol console.log(typeof 9876543210n) // => bigint
JavaScriptで国民の祝日を判定 JavaScriptのnew Dateによる日付の処理をしている際に国民の祝日を判定したいことがあります。 たとえば2018年1月1日(月)のような月〜金の曜日でも祝日の場合は(月)のように赤くするなどの処理です。 JavaScriptにはgetHolidayはない JavaScriptには曜日を数値で取得するgetDayはあるが祝日を取得するgetHolidayのようなものはない。 そのため祝日のデータをあらかじめ用意しておく必要がある。 祝日のデータは自分で作成しない 祝日のデータを自分で作成して判定に使用している人をたまに見かけるが、祝日は毎年変わるしデータを自分で作成するのは手間がかかる。 間違った祝日データを作成してしまう可能性もあるので自作は避けたほうがよい。 内閣府から祝日のデータをダウンロード 内閣府のWebサイトには国民の祝日につい
textareaの高さの計算式はline-height * 行数 em textareaの高さを指定する際に5行の高さなどに設定したいことがある。 初心者の方だとheight: 5em; のように指定してしまうことがあるが、これは間違いです。 1 2 3 4 5 ↑このようにheight: 5em; では5行の高さになりません。 textareaの高さを5行などにしたい場合は計算式があり、line-height * 行数 em をheightに指定して、同時にline-heightを指定すればきれいに表示されます。 例えばline-heightが1.5で5行のtextareaの場合は以下のように指定します。
JavaScriptのアロー関数でreturnを省略可能 JavaScriptのアロー関数はreturnを省略できる便利な書き方があるのだが、意外と知らない人が多いようだ。 この記事ではreturn省略を使用した便利な3つのTIPSについて説明している。 1. 関数内のコードが式1つだけの場合 アロー関数を使用する上で基本中の基本なので知らない人は少ないだろう。
date-fnsとは ブラウザとNode.jsでJavaScriptの日付を操作するためJavaScriptライブラリ。 インストールは以下のコマンドを実行する。 npm install date-fns --save # or yarn add date-fns 例えばJavaScriptだけで日付処理をする場合、yyyy年M月d日のように表示したい場合は以下のように記述するが… const now = new Date() const [year, month, date] = [now.getFullYear(), now.getMonth() + 1, now.getDate()] const currentDate = `${year}年${month}月${date}日` console.log(currentDate) // => 2022年6月3日
HyperFormとは カスタムURLをセットするだけでフォームが作れる「ヘッドレスフォーム」サービス。 簡単な手順でセットアップができるため、バックエンド開発なしで最短1分でフォームを作成可能。 HyperFormは1つのカスタムURLだけであれば無料で使用可能です。 自動返信メールやSlackおよびGoogleスプレッドシートの外部連携機能なども無料で使えます。 さらに不正問い合わせ防止システムreCAPTCHAを標準搭載しているので悪質なbotによる自動投稿(スパム)を防いでくれます。 HyperFormの使い方 HyperFormの公式ページにアクセスして「無料で使ってみる →」または「会員登録」ボタンを押します。 次に「アカウントを作成」の画面が表示されるので「Googleアカウントで登録」を押す。 登録するとセットアップ画面が表示されるのでカスタムURLをコピーして利用例のコー
HTMLエスケープの注意点 昨日、このような記事がはてブに上がっていた。 innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ 要約するとreturn $('<div />').text(content).html()を使用したやり方だと「"」などをエスケープしないので.replaceで置き換えたものを使いましょうという話。 ただし、元記事のコードだと`(グレイヴアクセント)の置換処理が入っていなかったので下記のように書き換えるほうが良さそうだ。 var str = '& < > ` " ' + "'"; var escapeHtml = (function (String) { var escapeMap = { '&': '&', "'": ''', '`': '`',
ひるおびの捏造円グラフが話題に Twitterを見ていたらTBSの「ひるおび」という番組の朝日新聞世論調査の円グラフがおかしいと話題になっていた。 内閣不支持47%だけど・・・ ん？円の中の赤い部分が妙にデカすぎるぞ pic.twitter.com/xscmStyMAZ — 生涯ゲーマーのキョーさん (@kyousuke_gaming) May 20, 2020 本来であれば、支持する 33%、支持しない 47%、その他 20%であれば以下のような円グラフになるはずである。 朝日新聞 世論調査 内閣支持率 円グラフ しかし、TBSの「ひるおび」ではその他を1%にすることで支持しないの割合を故意に増やしていた。 最初は20%を2%と間違えただけかと思ったが、1%にしないと番組で放送した円グラフの形にならないため、意図的に捏造したことになる。 (それ以前に過半数を超えていないのに半円を超えてい
コミットをまとめる コミットをまとめるにはGitのrebaseを使用する。 (ほかにも方法があるが割愛) まず下記のコマンドでログを表示。 git log --oneline 例としてこのようなログが表示されたとする。 C:\test>git log --oneline 6b78b9d last commit d12871a test3 db92104 test2 e4ae077 test1 fe87ecf first commit 今回はtest1, test2, test3のコミットをまとめてtest allにする。 まず以下のコマンドを入力。 git rebase -i fe87ecf するとテキストエディタが起動してこのような内容が表示される。 pick ～の中にfe87ecf first commitが含まれていないのはgit rebase -i fe87ecfはfe87ecfよ
PlantUMLとは PlantUMLはオープンソースのUMLダイアグラム作成用言語。 以下のようなコードから図をSVGやPNG形式で作成することができる。 @startuml example User -> Server : request User <- Server : response @enduml 左図がsvg、右図がpng pngで書き出すとぼやけるので、なるべくsvgで書き出す。 svgならファイルサイズが小さく、テキストをコピーできるという利点もある。 VSCode PlantUML拡張機能 VSCode PlantUML拡張機能をインストールする。 PlantUML ターミナルでも使用できるようJAVAとplantuml.jarも別途インストールする。 インストールしたらファイルを.plantumlの拡張子で保存すればalt+Dでプレビューを確認できる。 PlantUM
Googleマップが表示されなくなる ゼンリンデータコムはGoogleマップの開発者向けサービスの仕様変更によって、地図表示ができなくなるサイトが発生する可能性があると注意喚起している。 2018年7月以降はAPIキーの取得が必須となるため、APIキーを使用していない場合はGoogleマップが非表示されなくなる。※ ※最初は6月11日だったが、7月16日に延期となった。 Google Maps Platformの適用開始について、6/11（PST）から7/16（PST）に延期となりました。 延期に伴い、7/16（PST）までは従来のルールが適用されます。 ※ただし、6/11から有効なAPIキーをご利用でない場合、地図利用ができなくなる可能性がございます。 Google Maps Platform - 株式会社ゼンリンデータコム GoogleマップがAPIキーを使用しているか調べる方法 サイ
indexOfではなくtestメソッドを使う JavaScriptで文字列の有無を調べる際にindexOfが使用されているコードをよく見かける。 indexOfを使用すれば以下のように文字列の有無を調べることができる。 indexOfは指定した文字列が含まれている場合は初めて出現したインデックス。見つからなかった場合は-1を返す。 var str = 'This is a apple pen'; if (str.indexOf('apple') !== -1) { console.log(true); } else { console.log(false); } // => true indexOfは正規表現が使用できないため文字列の有無を調べるなら正規表現が使用できるtestメソッドを使用したほうが良い。 例えばappleまたはbananaも含まれているかどうかをindexOfで調べるに
JavaScriptで取得した数値を整数として取得するため小数点以下を削除したいことがある。例えば12.34を12にするなどだ。 この際にfloorを使用されているケースが非常に多いのだがfloorは小数点切り捨てではなく小数点切り下げなので使用してはいけない。 小数点切り捨てと切り下げの違い 小数点切り捨てとは1.5なら1、-1.5なら-1のように小数点以下を削除することだが切り下げは指定された基準値1の倍数になるように、最も近い値に数値を切り捨てます。 そのためMath.floor(1.5)は1になりますがMath.floor(-1.5)は-2になります。 console.log(Math.floor(12.34)); // => 12 console.log(Math.floor(56.78)); // => 56 console.log(Math.floor(1.5)); // =
Promiseとは 非同期処理に使用するオブジェクト 使い方 まず$qサービスを使用するため以下の形を作る var app = angular.module('app', []); app.controller('Ctrl', function($q) { }); そして非同期処理用の関数を作成。var deferred = $q.defer();で非同期処理に必要なDeferredオブジェクトを作成して処理の最後にreturn deferred.promiseで返す function async() { var deferred = $q.defer(); // この中に処理を記述 return deferred.promise; } 名前を受け取ってHello付けて返す処理の場合はこのようになる function asyncHello(name) { var deferred = $q
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く