JavaScriptでクリップボードにコピー（2022年版）

JavaScript

※ 2017年に書いた記事が、2022年現在では非推奨になっているAPIを使っているので、改めて。変わったところ document.execCommand('copy')が仕様からなくなり、非推奨になりました（MDN）。今のところどのブラウザでも動作しますが、今後も動く保証はありま…

2021-03-09

Web上のExcelファイルからデータを読み取る(Node.js)

Node.js JavaScript

備忘録。 const request = require('request'); const Excel = require('exceljs'); const getBuffer = (url) => { return new Promise((resolve, reject) => { request(url, {encoding: null}, (error, response, body) => { if (error !== null) { reject(…

2020-06-08

ReactでModal windowを実装する

React JavaScript

汎用コンポーネントも存在しますが、自作のミニマル実装コードです。ひとまずコード（スタイルなどは簡略化しています） import React from 'react'; import PropTypes from 'prop-types'; class ModalWindow extends React.Component { constructor(props) …

2020-01-11

GCP Cloud FunctionsでPuppeteerを使う

JavaScript

1日1回スクレイピングしてきてSlackに流してほしい、みたいな簡単なやつなので、Firebaseまではいらない。Cloud FunctionでランタイムにNode.jsを選択→package.jsonとindex.jsを登録しておき、Cloud Scheduler->Pub/Sub経由で呼び出せばOK。プチハマりどこ…

2019-08-19

改行入りのテキストをReactでレンダリングする

JavaScript React

改行が含まれてると分かっている時は、component内に関数を用意して、行ごとにpタグで囲む。または、brタグを挿入する const textWrap = (text) => { if (typeof text !== 'string') { return null; } return text.split('\n').join('<br />'); } 改行が2連続の場…

2019-03-22

HighchartsをReactで使う

JavaScript React

ReactなWebアプリケーション内に、Hightchartsでグラフを描画するときのメモ。基本的には、Hightcharts公式のReact用ラッパーライブラリを使えば良い。 GitHub - highcharts/highcharts-react: The official Highcharts supported wrapper for Reactnpmにあ…

2018-10-04

カレンダーUIを実装するReact component

JavaScript React

＜Airbnb謹製のReact用カレンダーUIコンポーネントの紹介です＞Reactで作っているWebアプリケーションにカレンダーUIが必要だったので、どんなのがあるかな、と検索したところ、いろいろありました。例えばこんな： GitHub - clauderic/react-infinite-cale…

2018-09-08

npmのoptionalDependenciesの使いどころ

JavaScript

npmのpackage.jsonの依存パッケージの定義には、よく使うdependencies、devDependenciesの他に、optionalDependenciesというのもあります。今まで存在を知らなかったのですが、「optional」という名のとおり、なくても問題ないとか、特定の環境でだけ必要と…

2018-09-01

小さなJSライブラリ作った時に使ったもの

JavaScript

ピュアなJavaScriptで書いた JSのファイル数は10もない使ったもの rollup.js Babel prettier ESLint UglifyES Jest あとGitHub -> CircleCIでビルドしてる。ビルドする時にCode Climateにテストスコアを送ってる。今導入してもいいかも？ TypeScript・・・…

2017-02-19

JavaScriptでクリップボードにコピー（Chrome/Firefox/Safari10〜/IE9〜）

JavaScript

※2022/4/19追記：ここで使っている仕様は古くなり、非推奨になっているため、新しい記事を書きました。そちらを参照してください。「クリップボードにコピー」はJavaScriptのみでは不可能だと、昔に思い込んだままだったのですが、HTMLの各種APIとJavaScrip…

2016-12-19

SVGをReact.js/JSXで使う

SVG JavaScript

この記事はSVG Advent Calendar 2016の19日目です。去年に引き続きグラフを描いての参加です。 React × SVG React.jsなプロジェクトでSVGを描画したときのメモです。 React.jsでは、JSXという記法でJavaScriptコード内にHTMLタグを記述していきますが、SVG…