yuw27b’s blog

技術メモと雑記

npmのoptionalDependenciesの使いどころ

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

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

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

2017年の振り返り

今年は書くぞー。 お仕事 今年も、 一人Webアプリ開発担当(@大学の研究室) と、 HTML+CSS(たまにUI絡みのJSも)コーディング(@フリーランス) を並行してました。 設計 プログラムの設計とかファイル構成なんかに、だいぶ気を遣うようになった。 一人…

named pipeでオンデマンド・ダウンロード

「オンデマンド・ダウンロード」って勝手に呼んでるんですけど、要するに、ダウンロード要求があった時に、サーバーサイドで動的に(複数ファイルから)tarを生成してダウンロードさせる、というのを実装した時のメモです。サーバにダウンロード対象のファイ…

NDS第52回勉強会に行ってきたよ

51回に引き続き、第52回勉強会(2017/06/17) - 長岡 IT開発者 勉強会(NDS)に行ってきました。 前回も書きましたが、NDSは名称に「IT開発者」とあるとおり、幅広い分野の開発者さんが参加しているところが好きです。私は今回はCSSのお話をさせてもらいました。…

Neo4j + Rubyでグラフデータベース探索(Neo4j v3.1.2 + Ruby)

久しぶりにグラフデータベースをいじったのでメモ。Neo4j・・・NoSQLに分類されるグラフデータベース。 公式ページ:Neo4j, the world's leading graph database - Neo4j Graph Database 少し前になりますが、パナマ文書の解析にも使用されたと紹介されてい…

NDS第51回勉強会に行ってきたよ

第51回勉強会(2017/03/25) - 長岡 IT開発者 勉強会(NDS) に行ってきました。 50回は行けなかったので、半年ぶりのNDS、半年ぶりの長岡でした。NDSは名称に「IT開発者」とあるとおり、幅広い分野の開発者さんが参加しているところが好きです。 私はWeb周りを…

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

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

CSSの擬似要素を使ったあれこれ

CSS

この記事は、今年お世話になったCSS Advent Calendar 2016の20日目です。擬似要素自体は特に今年どうこうなった仕様ではありませんが、大変お世話になりました。 擬似要素をよく使う場面 自分的頻出パターンとしてはこんな感じです: counterと組み合わせた…

SVGをReact.js/JSXで使う

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

RESTful APIで長い検索クエリを扱う

Webアプリケーション用のRESTfulっぽいAPI*1を作っていて、複雑な検索クエリを受け取る必要が出てきたときのメモです。 悩み RESTfulの原則に従うと、検索クエリを投げて結果の一覧を取得する、というリクエストは、 「リソースの取得」なので、GETを使うべ…

Content Security Policyの今後(2016年10月現在)

CSP

先月の勉強会での発表の内容と少し重なりますが、CSPの各レベルの仕様とブラウザ対応状況などのまとめです。 Content Security Policyとは CSP (Content Security Policy) - Web セキュリティ | MDNざっくりですが、WebサイトからXSSの危険を取り除くための…

NDS第49回勉強会に行ってきたよ

少々日が経ってしまいましたが、NDS(長岡IT開発者勉強会)第49回勉強会に行ってきました。 今回のテーマは「セキュリティ」ということでしたが、貴重なお話がたくさん聞けました。 めずらしく(?)メモを取りながら聞いていたので、感想など書き残しておこ…

stylelintを使い始めたので設定例など (2016年9月更新)

CSS

※2016年9月13日更新:stylelintのアップデートに伴い、ルールの記述方法が古くなっていたものがありましたので、訂正しました。 stylelintって? 名前のとおりCSSのlintツールです。 設定したルールから外れた書き方をすると警告してくれます。CSSを書くにあ…

カレンダーUIを実装する依存なしのJavaScriptライブラリ

カレンダーUIを実装するJavaScriptライブラリの紹介です。 Webアプリ上の入力フォームに、日付を選択する項目を実装したときのこと。 input type="date" を使いたいのだけど・・・ HTMLのinputタグに、「type="date"」を指定すると、一部のブラウザではカレ…

新潟へIターンしてWEBエンジニアをしている話

この記事は、地方在住ITエンジニア(元・地方在住も可) Advent Calendar 2015 - Adventarの19日目の記事です。私が住んでいるのは新潟県新潟市で、政令指定都市ですので、カレンダーの「地方」の趣旨からするとちょっとぎりぎりですが、 住まいは新潟市の端…

SVGを描くJavaScriptライブラリ

この記事は、SVG Advent Calendar 2015 - Adventarの15日目の記事です。 チャートやグラフ用のJavaScriptライブラリはどれがいいんだろう? 2015年は「Ajaxで取ってきたデータを、SVGのチャートやグラフにして表示する」という作業をわりとたくさんやりまし…

writing-modeがFirefoxでも使えるようになっていた

CSS

CSSで縦書きテキスト CSSのみで縦書きテキストを実現するには、writing-modeプロパティを使いますが、Firefoxだけが長いあいだ未対応でした。 Can I use... Support tables for HTML5, CSS3, etc2015年11月現在、この仕様は勧告候補の段階なので、ブラウザに…

CADDYで手軽にHTTP/2サーバを立てる

CADDYとは 公式サイト Caddy - The HTTP/2 Web Server with Fully Managed TLSGitHub GitHub - mholt/caddy: Fast, cross-platform HTTP/2 web server with automatic HTTPS公式サイトから抜粋: Windows, Mac, Linuxと、Androidで動く Apacheやnginxのよう…

language-sparqlというAtomのPackageを作った

atom.ioAtomでSPARQL(RDFデータを検索する言語です)のシンタックスハイライトがなかったので、作りました。 「作った」と言っても、文法の定義はSublime Text用のパッケージから持ってきたので、大したことはしていません。 AtomのPackageを公開する手順は…

JavaScriptのPromiseとarray.reduceを合わせて使う

順番に非同期の処理をしたい要素たちを配列に入れて、各要素に対してPromiseを返す関数を実行する。例)['a', 'b', 'c']という配列があったときに、それぞれの文字を2秒おきにコンソールに表示したい //これだと2秒後にほぼ同時に「a」「b」「c」がコンソー…