{ "rules": { "adjacent-overload-signatures": true, "ban-comma-operator": true, "no-namespace": true, "no-parameter-reassignment": true, "no-reference": true, "no-unnecessary-type-assertion": true, "label-position": true, "no-conditional-assignment": true, "no-construct": true, "no-duplicate-super": true, "no-duplicate-switch-case": true, "no-duplicate-variable": [true, "check-parameters"], "no-sha

この記事は.babelrcの設定を使わずにJest用の独自のBabelのオプションを設定する方法を紹介する記事です。 Node.jsで書かれたサーバーサイド用のテストとReactで書かれたフロントエンド用のテストでBabelの設定を変更したいために調べた内容です。他にも方法があれば教えていただけると助かります。 今回の記事ではReactのテストを例にしていますが、他のフレームワークやライブラリにも適応できます。 JestでBabelを使う まずはじめにJestは設定をJavaScriptで書くことができます。 ファイル名をjest.config.jsにしておくか、Jestを実行するときに--config <path/to/file>のように--configオプションをつけて設定ファイルを指定することができます。 JestでBabelを使ってテストを実行するためにはbabel-jestという

Denoはまだ開発中で1.0になっていません。そのため、この記事の内容は将来的に変更されるかもしれませんのでご注意ください。 2020-05-14 Deno 1.0 がリリースされました https://deno.land/v1 この記事はmacOS Catalina で試した内容です。 Denoとは Node.jsのoriginal authorであるRyan Dahl氏が開発しているTypeScriptをV8で動かすラインタイム実行環境です。 DenoはNode.jsの反省点を活かして開発しています。 Ryan Dahl氏が JSConf EU 2018 でそのことについて話している動画がYouTubeにあるので興味がある方はぜひ御覧ください。 Node.jsに関する10の反省点 Ryan Dahl - JSConf EU 2018 また日本語で書かれた記事は以下の記事が詳しいです。

会社で「AMPページ内でこういう操作したときにこういうDOMを差し込むことってできるんですか？」って質問されて、「それworker-domがAMP使えるようになったらできそうですね」ってなったのでworker-domを触ってみました。 ※この記事でやってることはamp-bindとか既存のAMPコンポーネントでも実装可能ですが、worker-domの素振りログなのでご了承ください。 今回出てくるコードはgistに置いています。 worker-domとは GitHub - ampproject/worker-dom: The same DOM API and Frameworks you know, but in a Web Worker. AMPプロジェクトが開発しているWorker内でDOM操作をするライブラリです。現時点(2018年12月)ではalpha版です。 Workerっていうのは

この記事はNode.js Advent Calendar 2018の2日目の記事です。 ちょっとしたネタですが、Node.js v10.10から入ったfs.readdirのwithFileTypesオプションとfs.Direntについて紹介したいと思います。 TL;DR 特定のディレクトリ配下のファイル一覧を表示する方法を紹介 読み込んだディレクトリのファイル種別がファイルかディレクトリか判定する方法を紹介 fs.statを使った従来の方法 Node.js v10.10.0から使えるfs.readdir(またはfs.readdirSync)のwithFileTypesとfs.Direntを使った方法 fs.statを使った判定方法 例えばNode.jsを使ってディレクトリ配下のファイル一覧を表示したいとき以下のようにfs.readdirとfs.statを使って書くことができます。 cons

JavaScriptでも静的な型が求められるようになりTypeScriptやFlowが使われるようになってきました。 しかし、それらが無かったころのJavaScriptのコードやトランスパイラを使わずに開発している人はいてると思います。 この記事はコードの変更なしでJSDocのみで型検査をする方法を紹介します。 TL;DR JSDocの型定義で型チェックをする TypeScriptのallowJsとcheckJsを使う 必要に応じてd.tsをインストールする JSDocの型定義 TypeScriptやFlowが登場するより前からJSDocは存在します。JavadocやPHPDocのJavaScript版のようなものです。 そのJSDocは型定義が書けるようになっています。 エディタによってはJSDocの型定義で型のチェックを行ってくれることもあります。 JSDocについては@use JSD

Node.jsやフロントエンドではnpmを使ってライブラリやCLIツールを使うことは多いと思います。 npmでCLIツールを使うときにnpxを使う方も多いかと思います。 しかしnpmjs.comに上がっているバージョンが古かったり、開発中のパッケージを使いたいなどの理由でGitHubにあるコードをそのまま使いたい場面があります。今回はそんなときの方法を紹介します。 npx npmで一度だけCLIを実行し、CLI実行後は使ったパッケージはローカルに残らないnpxといものがあります。 非常に便利で筆者もcreate-react-appやexpress-generatorで雛形を作成するときとかに使っています。 npxに関しては『npxが結構良さそうな件について』や『npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう』にて紹介されているのでそちらをお読みください。 G

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Webサイトによっては掲載する画像を保存できないようにしなければいけない時があります。 今回は画像がダウンロードできないようにするための対策とその回避方法を紹介します。 回避方法に関しては既存のサイトでも使えるかもしれないので、悪用厳禁です！ また、ここに載っている方法は回避可能なので他の方法を検討しなければいけません。 個々の内容は昔からあるテクニックなので何番煎じな内容ですが、まとめ記事として残しておきます。 TL;DR フロントエンド: 透明の画像を被せる フロントエンド: 右クリックを禁止する フロントエンド: ドラッグを禁止する バックエンド: 画像のURLから直接アクセスできないようにする 環境 フロントエンドはChromeで確認しています。 バックエンドはnginx、Node.jsで確認しています。 OSはmacOS 10.13で確認しています。 透明の画像を被せる 保存され

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ほぼすべてのブラウザやNode.jsでサポートされている数値をフォーマットするAPI「Intl.NumberFormat」を紹介する記事です。 JavaScriptで数値をカンマ区切りにしたいときにGoogleで検索してみると、正規表現を使っていたり、ループで回して3桁ごとにカンマ付ける実装を紹介する記事を多く見つけました。 しかし、それらは古い記事ということもあり、2018年現在は数値のフォーマットを実装する必要はありません。EcmaScriptで仕様策定されておりほとんどのブラウザやNode.jsで使える関数があるので紹介します。 今回紹介するコードの実行結果はすべてChromeでの結果になります。 TL;DR 「Intl.NumberFormat.prototype.format」を使います。 まだChromeとFirefoxだけですが、「Intl.NumberFormat.prot

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

小ネタです。 PWAを構成する要素の一つWeb App Manifestに用いるmanifest.jsonを手動で書いていませんか？ Web App Manifestのicon用にいくつかのサイズの画像を用意しなければいけませんが、画像変換ソフトで一つずつサイズ変換していませんか？ 今回はそれらの作業を3分以内に作ることができるサービスを紹介します。タイピングが早ければ1分もかからないと思います。 おそらくこの記事にたどり着いた方はWeb App Manifestやmanifest.jsonのことは既に知っていると思いますが、念のため知らない方は以下のリンクを参考にしてください。 Web App Manifest | MDN ウェブアプリ マニフェスト | Web | Google Developers App Manifest Generator 今回紹介するのはApp Manifest

「Webには時代遅れで脆弱性のあるJavaScirptライブラリで溢れていることが研究により明らかに」という記事のとおり、世の中には脆弱性のあるJavaScriptライブラリを使った多くのウェブサイトが存在します。 IPAが公開している「安全なウェブサイトの作り方」には脆弱性が修正されたバージョンのライブラリを使用する。と記述があったり、「OWASP TOP10 2017 (日本語版)」にも既知の脆弱性のあるコンポーネントの使用を避けるように、と脆弱性のあるライブラリを使用しないよう注意喚起されています。 脆弱性のあるライブラリを使用しているか調べることができるRetire.jsを紹介します。 すべての脆弱性を防げる保証は無いので、あくまで自己責任でお使いください。 Retire.jsとは Retire.jsは上の画像のようにCLIなどで実行することができる脆弱性のあるJSライブラリを検出

AMP縛りでページ作ったけど、やっぱりPWA化もしたいと思いやってみたらあまりにも簡単にできたので手順を残しておきます。 出来上がったページをLighthouseで計測した結果、PWAの点数は100点満点でした。 TL;DR Web App Manifest Generator使ってmanifest.jsonを生成 amp-install-serviceworkerでAMPでもService Worker動く workboxでService Workerコードを簡単に生成 AMP(Accelerated Mobile Pages)とは モバイルページを高速化するためのもの 速くするというより遅くしない 詳しくはampproject.orgを見て下さい PWA(Progressive Web Apps)とは Webとネイティブアプリの良いところを合わせてUXを良くしようとする仕組み オフライ

React #1 Advent Calendar 2017 2日目の記事です。 もう2018年になって一月経ちましたが空いていたので埋めます。 webpack 4 のbeta版が2018/01/25 JSTにプレリリースされました。 おそらく2月か3月中には正式リリースされるでしょう。 (追記 2/25) 正式リリースされました 正式版でもこの記事の内容に問題が無いことを確認しました。 https://github.com/webpack/webpack/releases/tag/v4.0.0 今回のwebpackは変更点が多く、速度改善もされているようです。 また設定ファイルも不要となり、webpack.config.js書くのが嫌な方には朗報です。 この記事では設定ファイル無しでビルドするところまで簡単な例を用いて紹介いたします。 webpack 4について 今回はReactのビルドに