はてなブックマーク

この記事は.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という

会社で「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

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

「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を良くしようとする仕組み オフライ

CSSアニメーションを調べていたらWeb Animations APIというJavaScriptで同じことができることがわかったので、勉強も兼ねて簡単なライブラリを作ってみました。この記事はその時得た知識のまとめです。 Web Animations APIについて CSSのAnimationsとTransitionsをJavaScriptで実現できるAPIです。 現在は、ChromeとFirefoxで実装が進められています。 Safari(WebKit)とEdgeについてはTodoには入ってますが、まだ実装されていません。 web-animations-jsというpolyfillがあるので、そちらを使うとSafariやEdgeでも使えます。 成果物 今回作成したライブラリはパルス（波紋）のアニメーションです。 CSSアニメーションでも簡単に実装できます。これをJavaScriptでやります

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のビルドに

const axios = require('axios'); const url = "https://qiita.com/api/v2/items"; axios.get(url).then(res => { const items = res.data; for (const item of items) { console.log(`${item.user.id}: \t${item.title}`); } }).catch(error => { const { status, statusText } = error.response; console.log(`Error! HTTP Status: ${status} ${statusText}`); }); hp_kj: postgres 公式サイト データベースサンプル dvdrental jhfgjfgjhghj: JP

JavaScript Advent Calendar 2017 13日目の記事です。 今年はnpmが5にメジャーアップデートされました。 npm5になり新しく加わった機能の一つにpackage-lock.jsonがあります。 他の機能についてはこちら(npm v5 がリリースされた) 今回はpackage-lock.jsonの各プロパティについて詳しく載っている日本語記事が無かったので調べてみました。 内容に不備があったり気づいたことがあればどんどんコメントください。 きっかけ package-lock.jsonについては依存パッケージの固定化する機能であったり、元々はnpm-shrinkwrapというものがあってそれを改良したものであったり等は聞いたり読んだりしたことある方は多いかと思います。 私も「依存パッケージの固定ができるなんて便利だな、公式もコミットするのを推奨しているしgit管

@babel/preset-envのuseBuiltInsに関する記事です。 Babel v7以降で使えるようになるpolyfillを自動補完してくれる機能について紹介します。 更新(2018/08/27) 2018/08/27にBabel v7が正式リリースされました🎉 https://babeljs.io/blog/2018/08/27/7.0.0 Babel v7 公式 Upgrade to babel 7 @babel/polyfill babelは文法の変換のみ。ブラウザによっては使えない機能はあります。 例えば、IEはPromiseとかSymbolとか使えません。これは文法ではなく、機能です。 @babel/polyfillを使えばその辺の穴埋め(polyfill)をしてくます。 ソースコードを直接改変する必要があり。以下のようにpolyfillをimportしなければいけま

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

FRONTEND CONFERENCE 2017に参加したのでそのまとめ 復習のためや聞けなかったセッションや行けなかったハンズオンもあったので資料を探してみました。 見つけれていないセッションの資料は見つけ次第更新します。 もし知っていたらコメントか編集リクエストくださいm(_ _)m セッション あらゆる人のためのフロントエンド 花谷拓磨(@Potato4d)さん 新ツールやサービスから考える、明日からのデザインフロー 深沢 幸治郎さん エンジニアとデザイナーとの距離 安田 学さん HTMLスナップショット2016改 momdoさん UIデザインから知る「持続可能なデザイン」 山下 一樹さん React/FluxベースのElectronアプリをリモートチームで開発した話 太田 絵一郎さん ウェブを構成するUIの品質とHTML 桝田 草一さん スタンドアロンAMPのススメ 石本 光司さん