Sign in Subscribe

Topic

JavaScript

A collection of 16 issues

ファイルダウンロードできるChrome拡張(Chrome Extension)をつくる

Chrome 拡張(Chrome Extension)でファイルダウンロードさせたい。実装は簡単なんですが、JS を実行させるまでハマったのでメモ。なお、「自作のChrome拡張を使うにはどうしたらいいの？」っていうのは書いてないです。そこはクリアして書き始めた人向け。 Chrome 拡張の chrome.downloads を使う Chrome拡張の設定ファイルであるmanifest.jsonのpermissionに"donwloads"を設定するだけで使える。のですが、ページ表示でcontent_scriptsから実行される JavaScript に登録するだけでは使えないのでハマりました。 chrome.downloadsを利用できるのはバックグラウンドで動作する JavaScript です。ページ側で動作するcontent_scriptsからは直接使えないので、バックグラウンド側に情報を渡して動作させます。ちなみに以前は Google Chrome 派でしたが、Chromium版Edge の垂直タブが便利すぎて乗り換えました。 Chr

JavaScriptでユーザIDをランダムに作成する

基本無料のオンラインゲームやろうとしたら、ユーザ ID どうします？とか聞かれるわけですよ。そんで、自分の名前とかネコの名前でつけようとすると、「その名前は使われています」とか言われるわけですよ。もうね、考えるの面倒になっちゃった。絶対に重複しない名前をジェネレートしよういや、ただの乱数まかせなので「絶対」とは言い切れないのだけれど。 JavaScript を使って、アルファベットと数字から任意の長さでランダムな文字列を生成するプログラムを作った。ユニーク ID ジェネレータ(大げさ) // ユーザIDをランダムに作成する関数 function gen(len) { const chars = 'abcdefghijklmnopqrstuvwxyz0123456789' const name = [] for (let i = 0; i < len; i++) { const num = Math.floor(chars.length * Math.random()) name.push(cha

node v12+でgraceful-fsが動かない

今更ですが、node.js のバージョンを 10 系から 12 系にあげてみました。すると自作ツールが動かなくてハマったのでメモ。。。 unzipを利用するツールがあったのですが、最終更新が 6 年前。このライブラリが使っている graceful-fs 、さらにはその先の fstream が v12 系に対応していないらしく、エラーがでます。 ReferenceError: primordials is not defined いろいろ調べてみると gulp が古いとだめだよ、って書いてありましたがそもそも gulp 使ってないし。直接 node.js で JavaScript 実行してるだけだし。 unzip のアップデートができない開発が止まっているので、yarnから入れ直しても解決しません。 unzipに見切りをつけて、別のライブラリを利用することにしました。 unzipper ってのがあるよく調べずに、unzip 検索結果の次に来ていた unzipper

JSで文字列の分割

JavaScript の文字列分割です。 .splitメソッドを使いますが、便利な反面、ハマりどころもあるので少し詳しく紹介します。通常の文字による分割カンマ区切りのデータ(改行なし)を単純に分割したいとき。 splitメソッドの引数に分割したい文字(文字列も OK)を渡します。 const str = 'a,b,c,d' const arr = str.split(',') console.log(arr) // [ 'a', 'b', 'c', 'd' ] うむ。基本の「き」。正規表現による分割業務でよく使うやつです。正規表現を使えるとプログラミングの幅がグンと拡がりますね。今回は空白文字(\s)と全角スペース(0x3000)文字の両方で分割したいと思います。対象文字列「'a b 全角'」にはちょっとした罠を仕掛けてあります。実はaとbの間は半角スペース

nullまたはundefinedの判定(Null合体演算子)

JavaScript で変数 a が null または undefined の場合、デフォルト値 0 を返したいコード。そんなときどう書きますか？素直に書くとこんなコード if(a === null || a === undefined) { return 0 } return a ダメなコードこれはダメな例。変数aがfalsyな値、0やfalseでも0を返してしまいます。 if(!a) { return 0 } return a asis まあこんな風に書くと思います。 nullとundefinedは変数 == nullで一発判定できるし、三項演算子を使えば1行でしょ？ return a == null ? 0 : a ありきたりなこのコードが tobe なんと？？ return a ?? 0 ウルトラスッキリ！

Slackの絵文字を全部消したい！

Slackに絵文字を大量に登録したのはいいんだけど、エイリアスが気にいらない。全部なおすのはめんどくさいので、一括削除して登録し直したかった。 Slack には一括削除ボタンがないこういうところ気が利かないよなぁ・・・とか勝手に思いつつ、なければ作ればいいじゃない？ブラウザのコンソールから JavaScript を実行させるブラウザのコンソールから、JavaScript で削除ボタンと確認ボタンを押しまくるスクリプトを作成。無事削除出来ました。削除スクリプトの例下記がその削除スクリプト。これ流すと絵文字全部消えちゃうからね！ https://[team].slack.com/customize/emoji ([team] は自分のチーム名)にアクセスして、下記スクリプトを開発者ツールにコピペ & Enter!! // https://[team].slack.com/customize/emoji に移動して実行 !(function() { // 300ms待つ関数 function sleep()

firebaseで購読中マンガの新刊チェックCRON作った

マンガって、いつの間にか新刊が出てますよね。毎回 Kindle で買ってるんだから、 Amazon もリコメンドしてくれればいいのに。お気に入り著者の新刊メールに登録していても、なんか欲しい情報じゃなく、微妙な感じだし。発売中に遅れてお知らせじゃなく、発売前に知りたいんだよ！それ、firebase にやらせよう月半ば、月末に新刊情報を取得して slack 通知するやつを作りたい。仕様は下記の通り。 * 月半ば、月末に cron 実行 * 楽天ブックスの新刊マンガ API から最新版を取得 * 全部だと情報過多なので、自分の購読しているマンガ・著者のみ抽出 * レポートは slack に投稿これなら firebase の機能だけでイケそうじゃない？ってことで作ってみました。 ※このあと掲載しているサンプルコードは抜粋なのでこのままでは動作しません月半ば、月末に cron 実行 firebase では cron実行が可能です。関数のスケジュール設定によると、課金は Google アカウントごとに３

楽天のマンガ新刊APIでJSONのパース問題

楽天ブックスでは、非公式ながら最新の発売マンガ一覧を提供してくれる API があります。 node.jsで取得するコードは簡単なのですが、何度やっても JSON パースエラーになります。 const rp = require('request-promise') const url = 'https://books.rakuten.co.jp/event/book/comic/calendar/2019/11/js/booklist.json' rp.get(url, options).then(function(body) { JSON.parse(body) // ここでエラーになる }) うーん、レスポンスのテキストをコピーして JavaScript オブジェクト作ってもエラーにならないのに・・・？エラー情報を読み解いてみる error Unexpected token in JSON

JSON.stringifyを見やすくする

JavaScript でオブジェクトの状態をログに出力したいとき、どうしてますか？例えばこんなオブジェクトを作成した場合。 function createObj() { let aValue = 1, bValue = null const obj = { set a(a) { aValue = a }, get a() { return aValue }, set b(b) { bValue = b }, get b() { return bValue } } return obj } const obj = createObj() const plainObj = { a: 1, b: null } vue.jsやってるとよくある、setterとgetterを持つオブジェクトをログに出したいとき。保持している値は plainObj と同じです

JSの分割代入

JavaScript の分割代入を覚えると、お決まりのコードが簡単にかけます。従来の JavaScript しかしらないとなにしてるかわからないので、しっかり身につける。配列の分割代入クエリパラメータの分割など、よくある=で key と value がセットになっている文字列を分解して代入したい。従来のコード。代入時に0とか1がでてくるのがなんかかっこ悪い。 const keyValue = "a=b".split("="); const key = keyValue[0]; const value = keyValue[1]; console.log(key, "=", value); // a = b 分割代入コード const [key, value] = "a=b".split("="); console.log(key, "=", value); // a = b ウルトラスッキリ！