JavaScript関連のことを調べてみた2020年06月08日

TestCafeでログイン画面をテストする

# はじめに

最近、TestCafeを使ってE2Eテストを書き始めました。
ログイン画面でログインに成功することのテストを書く時にちょっとハマったので共有します。

テストは以下のような内容になってます。

– ログイン画面を表示
– フォームにメールアドレス、パスワードを入力
– ログインボタンをクリック
– 遷移先のURLが`http://localhost/mypage/`だったらテスト合格

# コード

## うまくいったコード

“`js
import { ClientFunction, Selector } from ‘testcafe’
import { BASE_URL } from ‘./config’

fixture(‘ログインページ’).page(`${BASE_URL}/login`)

const getPageUrl = ClientFunction(() => window.location.href.toString())

test(‘ログインでマイページに遷移’, async (t) => {
const mailForm = Selec

React Bootstrap + TypeScript: Buttonのプロパティを動的に定める

[React Bootstrap](https://react-bootstrap.github.io/)は、Bootstrapのスタイルが適用されたコンポーネントをReactアプリケーションに組み込めるライブラリです。今年3月24日に正規バージョンv1.0.0がリリースされ、4月23日には1.0.1にアップデートされました。Bootstrapのみでは\などにやたらとクラスを詰め込んだDOM要素があふれます。それに対して、アプリケーションをReactのコンポーネントですっきりと組み立てられるのが利点です。

# ButtonコンポーネントのプロパティをJavaScript形式で定める
山盛りのクラスと`

`の入れ子を書くことなく、設定はタグの属性(プロパティ)で済ませられたりします。[`Button`](https://react-bootstrap.github.io/components/buttons/)コンポーネントのテキストやカラーテーマ(`variant`)、大きさ(`size`)なども、JavaScript形式(`js`ファイル)のコードでつぎのように

小ネタ: Next.js のサーバサイド側の共通処理を括り出したい (Middlewareパターン)

## 困った共通処理

Next.js で、全ページ共通の処理がある場合、あんまり頭のよくないコードを書くことになります。

“`js:pages/index.js
export const getServerSideProps = async (ctx) => {
// （全ページ共通処理）共通情報を取得する。
let commonInfo;
try {
commonInfo = await getCommonInfo();
} catch (exception) {
// 取得できなければ404で返す
ctx.res.status = 404;
return { props: { notFound: true } };
}

// いろいろな処理…
}
“`

これを全ページにコピペして書くなんて信じられな〜い！

もちろん関数に抽出すればもっと短くなるかもしれないけど、 `try { } catch () { return … }` は短くならないでしょう。　

## ミドルウェアとして共通処理を括りだす

そういう

【Javascript】CanvasをイメージPNGとして保存する

#結論

“`html

download

“`

【Rails】Catalinaでrails sコマンド実行時に「Could not find a JavaScript runtime.」とエラーが出る場合の対処法

# エラー内容
> Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)

# 対処法
gem ‘therubyracer’ はハマりやすいのでやめたほうが良い。
Node.jsをインストール
https://nodejs.org/en/

最速で画像を圧縮するAlfred Workflowを作った

# はじめに
PNGやGIFの圧縮は、ブログ記事やGitHubのPull Requestの実行画像貼り付けとかで割とあります。

自分は[TinyPNG](https://tinypng.com/)や[iLoveIMG](https://www.iloveimg.com/ja) を利用していましたが、プラウザを開きファイルをアップロード・圧縮しダウンロードという手順が毎回面倒でした。
なので、[alfred-imagemin](https://github.com/kawamataryo/alfred-imagemin) という**PNG / JPEG / GIFを手軽に圧縮するAlfred Workflow**を作ってみました。
（GIFでも使えるというのが嬉しいポイントです）

この記事ではalfred-imageminの概要と、仕組みを紹介します。

![May-25-2020 06-44-34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/e84ddf06-bf74-76d7-5e

React hooksを基礎から理解する (useContext編)

#React hooksとは

React 16.8 で追加された新機能です。
クラスを書かなくても、`state`などのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。

– [React hooksを基礎から理解する (useState編)](https://qiita.com/seira/items/f063e262b1d57d7e78b4)
– [React hooksを基礎から理解する (useEffect編)](https://qiita.com/seira/items/e62890f11e91f6b9653f)
– React hooksを基礎から理解する (useContext編) :point_left_tone2: 今ここ
– React hooksを基礎から理解する (useReducer編)
– React hooksを基礎から理解する (useCallback編)
– React hooksを基礎から理解する (useMemo編)
– React hooksを基礎から理解する (useRef編)

## useContextとは

#

Web Storageの取り扱いメモ

業務でsessionStorageを取り扱うことがあったのでメモ。
ユーザーがStorageを使えない場合のエラー対応について。

## sessionStorageとlocalStorage

### Web Storage
`Web Storage`であるStorageオブジェクトには２種類あります。

| sessionStorage | localStoroge |
|:——————|:—————–|
| ブラウザを開いている限り、リロードしても持続 | ブラウザを閉じても持続 |

`sessionStorage`と`localStorage`とほぼ同じであり、唯一の違いは、`localStorage`に保存されたデータに期限がないのに対して、`sessionStorage`に保存されたデータはページのセッションが終了するときに消去されてしまうところです。

### 構文

keyは文字列（string）と整数(number)を利用できますが、値は文字列のみ。

#### sessionStorage

“`javascri

エクスポートの使い方

# プログラミングの勉強日記
2020年6月8日　Progate Lv.85
JavaScriptⅴ

##デフォルトエクスポートとは
　`export default`のことである。ファイルがインポートされると同時に「export default 値」の値がインポートされる。なので、エクスポートしたときの値の名前と、インポートしたときの値の名前が違ったとしても問題ない。
　※デフォルトエクスポートは1ファイルに1つの値しか使えない
　　→複数の値をエクスポートしたいときは名前付きエクスポートを使う。

##名前付きエクスポート
　defaultを書かずに名前を{}で囲む。インポートするときは、`inport {値の名前} from “./ファイル名”`と指定する。複数の値をインポートするときは`,`（コンマ）で区切る。

“`javascript:dogData.js
const dog1 = new Dog(“レオ”,4,”チワワ”);
const dog2 = new Dog(“ベン”,2,”プードル”);
export {dog

これまで見た中で最も汚いソースコード

今回のコードの汚さには正直ちょっと自信あるよ。
下手すりゃIOCCCで優勝も狙えるかもしれないよ。

ということで、私がこれまで見てきた中で最も汚いソースコードを紹介します。

それは、とあるWebサイトのTwitterハッシュタグ埋め込みのコード。
よくあるやつですね。
普通であれば[タイムライン埋め込み](https://help.twitter.com/ja/using-twitter/embed-twitter-feed)使って一瞬で終わるやつです。

ただ、そこはけっこうお堅めのクライアントで、普通に埋め込むだけではできない要件が追加でありました。
すなわち、ハッシュタグを乗っ取る荒らし投稿などを絶対に表示させたくない、というものです。
具体的にはクライアントからNGワードのリストをもらって、それらの単語が含まれる投稿は表示しないようにします。

だいぶ昔の話なので実際はvarとか使ってたと思うんだけど、ざっくり書くとこんなかんじ。

“`js
const ngWords = [/* 省略 */];

let tweetList = $.get(‘TwitterAPI’)

オリジナルスライドショー作ってみる

プログラム用語ってキャラクターの名前みたいですね。
ちなみに単語からイメージが膨らんだのでテスト素材として作成しました。
見本はgifアニメです。動きがスムーズではないので動作確認用のデモ画面をCodePenの方で作りました。
見本画像にリンクを貼っています。

1.ドットスライド

サンプルイメージ
[CodePenはこちら　≫](https://codepen.io/mugikomogi/full/eYJmvax)
[](https://codepen.io/mugikomogi/full/eYJmvax)
やりたいこと
・再生(START)ボタンを押すとカバー領域がブロック順に消えていく
・逆再生で画像を隠す

まずはCSSを設計してみる

※Adobe XD　イメージ図01
![pile.p

[Express]DBのデータを利用しつつイベントハンドラの実行、関数の定義・実行をする

# はじめに

所有する技術書を登録（追加）、内容の更新、削除するWebアプリケーションを実装した。

そこから、削除機能について「本当に削除していいですか？」という確認を行うプロセスを追加したかった。

# 作ったのはどんなアプリなの

まだまだ拡張の余地はあるが、現時点での完成形を紹介する。
DBに登録されているデータを表示しているが、それを削除する様子。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com

JESTでWebBluetoothを使ったTypeScriptコードをテストする

# サマリ
TypeScriptで実装した、WebBluetoothを用いた自作ツールを、Mockモジュールを使ってJESTでテストするまでのご紹介です。
今までは、該当のデバイスと直接接続して手動でテストしていた人が多いかと思うのですが、これを使えばJESTの自動テストを導入できるので楽して品質向上できます。

# web-bluetooth-mockのインストール
WebBluetooth向けのMockモジュール[web-bluetooth-mock](https://github.com/urish/web-bluetooth-mock)は、urishさんがOSSで提供してくれているので、今回はこちらを利用します。

“`bash
yarn add –dev web-bluetooth-mock
“`

# Testコードの準備
Characteristicにまつわるテストをするためには、だいたい以下のMockは使うと思いますので、テストコードの冒頭で`import`しておきます。

“`TypeScript
import {
DeviceMock,
Primar

JavaScript 勉強中メモ

・配列に対するfilterメソッド
return true を返すものだけを抽出した配列を返してくれる。
下記例は配列の中から偶数のみを抽出した配列を作成。

“`javascript
const numbers = [1,4,7,6,7,8,3,0];

const num = numbers.filter(number => (number%2 ===0));
console.log(num); //結果[4,6,8,0]
“`

・配列に対するmapメソッド
配列の各要素に対して、それぞれ処理を行った配列を返してくれる。
下記例はそれぞれの値段の税込価格を返してくれる。
Math.floorの中にいれることで、小数点以下を切り捨ててくれる。

“`javascript

const prices = [350, 500, 600, 900]

const updateprice = prices.map(price => Math.floor(price * 1.1));

console.log(updateprice); //　結果[385,55

P5.js 日本語リファレンス(loadImage)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の loadImage関数を説明します。

## loadImage()

### 説明文

パスから画像を読み込み、そこからp5.Imageを作成します。

画像をすぐにレンダリングできない場合があります。画像を処理する前に画像の準備が整っていることを確認するには、loadImage() の呼び出しを preload() に配置します。画像の準備ができたときに画像を処理するためのコールバック関数を提供することもできます。

画像へのパスは、スケッチでリンクするHTMLファイルからの相対パスである必要があります。ブラウザの組み込みセキュリティにより、URLまたはその他のリモートロケーションからの画像のロードがブロックされる場合があります。

### 構文

loadImage(path, [successCallback], [failureCallback])

### パラメタ

– path
String：ロード

JavaScript SDK (SQL API)を見てみる (Part.3)


# この記事について

本記事は、2020年3月6日 (米国時間) にて、Azure Cosmos DB に新しく Free Tier (無償利用枠) が登場したことに伴い、改めて Azure Cosmos DB を色々と触っていく試みの 5 回目です。
今回も、[前回記事][PrevLink2] 同様、 Microsoft Azure Cosmos JavaScript SDK について見ていきたいと思います。

– [2020年から始めるAzure Cosmos DB – JavaScript SDK (SQL API)を見てみる (Part.1)][PrevLink1]
– [2020年から始めるAzure Cosmos DB – JavaScript SDK (SQL API)を見てみる (Part.2)][PrevLink2]

# 対象読者

– Azure Cosmos DB について学習したい方
– N

ブラウザのみでいろいろ試せるサイト集

随時更新中。。。。。

javascript のみ（シンプルではやい）
[https://js.do](https://js.do)

html, css, js 一式（機能豊富）
[https://jsfiddle.net](https://jsfiddle.net)
[https://playcode.io](https://playcode.io)

万能
対応言語はJava、C、C++、C#、Ruby、PHP、Python、Perl、JavaScriptと言ったメジャーな言語からGo言語やScala、Haskellなど24言語以上に対応しています。
[https://paiza.io/ja](https://paiza.io/ja)

MySQL, Oracle, Postgres, SQLite
[http://sqlfiddle.com](http://sqlfiddle.com)

GatsbyJS・microCMS用の画像を扱うnpmモジュールを公開してみた

初めてオープンソースの物を作成したのでいろいろな点が分からない中でリリースまでこぎつけられたのがうれしかったです。

# 何を作ったのか

[@mako-tos/gatsby-transformer-for-microcms](https://www.npmjs.com/package/@mako-tos/gatsby-transformer-for-microcms) を作りました。

gatsby-source-microcms と一緒に使う前提の GatsbyJS プラグインを作りました。
microCMS で設定したコンテンツの中でリッチエディタ(html)のフィールドを指定すると、html 内の img タグを picture タグに変換した html を子 Node に追加します。

# なぜ作ったのか

最近 GatsbyJS を触ってかなりいいなと思ったのでお客様にも利用を提案できるようにしたいと考えました。
しかしお客様に提案するのに海外製の headless CMS を利用すると保守に自信がもてませんでした。
そこで microCMS に注目して色々触っているうちに

【Vue】チェックボックスを選択してもONのまま留める方法

# はじめに
わかってしまえば簡単なことなのだが、
当時は解決に時間を要したので備忘録として残します。

# やりたきこと

こんな感じのテーブルにて
チェックボックスをOFFにした際、確認ダイアログを表示する。


OKならそのままチェックボックスはOFFに、
キャンセルならチェックボックスはONのままに留めたい。

## 詰まったこと
確認ダイアログでキャンセルを選択してもチェックボックスがOFFになってしまう。

キャンセルしてもOFFになってしまう問題が出ていた時の実装が↓こちら。

### 実装

CSSだけでハンバーガーメニュー

本記事ではCSSだけでハンバーガーメニューを実装します。

##前提条件
・javascriptは書かない
・id属性は使用しない。
・SCSSで書く

See the Pen
oNbXdyR by HoRnet2