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

FIDOデバイスエミュレータを作成してみた(これが最後)

何回か続けてきたFIDOデバイスエミュレータはこれが最後です。

・[WebAuthnを使ったFIDOサーバを立ててみた]( https://qiita.com/poruruba/items/243d39c8b77b98a99bab)
　本物のFIDOデバイスをお持ちであれば、この投稿だけでも参考になります。
・[FIDOデバイスエミュレータを作成してみた。。。が]( https://qiita.com/poruruba/items/48656358dbae7531bbee)
　仮想的なFIDOデバイスをサーバに配置しようという野望です。
* [FIDOデバイスエミュレータを作成してみた（だけどもうちょっと。）]( https://qiita.com/poruruba/items/37df2ffd8d26cc091f46)
　Arduinoを使って、ブラウザとFIDOデバイスエミュレータの橋渡しをしました。

上記の投稿ですでに編集済みですが、結局のところ、x509証明書が、FIDO Allianceに登録されていないためと、最終的に判断しました。

試行錯誤しながらも、ある程度の完成

Vue.js 画像URLから幅と高さを取得しようとしてはまった

[こちらの記事](http://cojocco.blog113.fc2.com/blog-entry-131.html)どうり簡単に取得できるものだと思っていたけど、

“`javascript

var img = new Image();
img.src = ‘http://image.src.com/image.jpg’;

var width = img.width; // 幅
var height = img.height; // 高さ
“`

vue.jsでやってみた時には`img.width`や`img.height`が0だった。

調べているとstackoverflowなどでreturnが0だ！なんで！みたいな記事を見つけたがそもそもjavascriptの知識が乏しいのとjQueryを使ってどうにかしようとしている解決法をvue.jsでどうかくかわからなかった

知人に聞きこちらの記事を発見
https://www.raymondcamden.com/2019/06/13/reading-image-sizes-and-dimensions-with-vu

[rails,payjp]カード登録の際に登録画面をリロードしないとトークンを作成できない時の解決例

#1.原因
今回の筆者の問題はturbolinksが効いていたからでした。

#2.なぜ起こった？
理由は、turbolinksの機能が影響範囲ページの遷移を非同期で行う（影響範囲の全てのviewページが合わさって１ページとして扱う）ためでした。
他画面を経由し複数で情報を持った状態でクレジットカードの登録をしようとすると、悪意のある情報を持っている危険性があり安全性を保てないと見なされてしまいpayjpからの返答を受けることができなくなっていました。

#3.解決方法
クレジットカード登録画面のみturbolinks(非同期通信)を切ってページ遷移するように記述することで筆者は解決しました。

具体的には`app/views/layouts/apprication.html.haml（全体のbodyの記述部分）`と`app/views/cards/index(ページ遷移元)`を下記のように修正しました

“`ruby:app/views/layouts/apprication.html.haml
〜前略（header部分の記述は省略します）〜

%body
– if con

JavaScript【よく使う表現集】

## 概要
JavaScriptでよく個人的に使用頻度の高い表現をまとめた備忘録。
随時更新予定。

### 1から99の数値間で整数の乱数を生成する
“`javascript
Math.floor(Math.random() * (100 – 1) + 1)
“`
範囲を変更したい場合は最大値（上記の場合だと100）と最小値（上記の場合だと1）の値を変更する。

### 数値を任意の倍数に整える
“`javascript
Math.ceil(num / trim) * trim) //切り上げ
Math.floor(num / trim) * trim) //切り下げ
“`
numには元の数値、trimには整えたい倍数の数値をそれぞれに入力。
下記は配列で渡された数値を5の倍数（切り上げ）で整えた例。

“`javascript
function multipleTrim(num) {
return num.map(a => Math.ceil(a / 5) * 5)
}
console.log(multipleTrim([73, 67, 38, 33])); //

【CSS】最低限の見た目にするためにコンテンツを画面の中心にしたいだけです。

# 1. 記事の目的
**わたしはCSSが書けません。**

しかし、htmlやjavascriptで作成した成果物やコンテンツを、最低限の見た目にしたいという思いはあります。
**「最低限の見た目」＝「画面サイズに依存せずに画面の中心に配置する」**と考えた私は、**「なら、成果物を画面の中心にもってくるCSSをいつでも使えるように用意しておこう。」**と決意しQiitaに投稿しました。それだけです。

# 2. コード（コピペ用）
bodyタグに対して、以下のようにCSSを設定することで、コンテンツを中心に配置できます。

“`css
body {
margin:0;
display:flex;
min-height:100vh;
justify-content:center;
align-items:center;
/* flex-direction: column; */
}
“`
一般公開するので、一通り解説をします。
詳細は参考リンクに譲ります。

# 3. CSS の解説
## 3-1. 解説用html
解説用のhtm

Chromium系ブラウザのdevコンソールで画像やリンクのURL一覧を一気にコピーする

# クイックスタート
F12->consoleに以下をコピペして実行。
selectorとattrの中身は好きなものに書き換える

“`javascript
var selector = “a”;
var attr = “href”;
copy(Array.from(document.querySelectorAll(selector)).map(x => x.getAttribute(attr)).join(“\n”));
“`
クリップボードの中にURL（などのattrで指定した要素）の一覧がコピーされる

# やっていること
– Array.from()の中にquerySelectorAllを入れることでエレメントを全て配列化
– 配列をmapしてその中でgetAttribute(attr)することで”href”など指定したプロパティ一覧の配列にする
– join(“\n”)で改行コードを挟んで結合した文字列にする
– copy()はコンソール限定のビルトイン関数で、その引数がクリップボードに入る

常に動くLINEBOTにお引っ越し（now編）（未解決版）

前回つまって諦めたnowに再挑戦した記録。

ngrokで作った時の記事：
[WikipediaのAPIを使ってLINEbotに調べてもらう](https://qiita.com/shima-07/items/2322598ca5a40cfee47b)

# はじめに
前回同様、課題感とテーマとしては「ngrokだと使いたいときに使えない！だから常時使えるようにしたい！」です。

目次としては、

* now でだいぶハマる
* さらに now にハマる
* 対応したこと

です。

# nowでだいぶハマる
nowを正しく動かすところでまずハマりました。
いくつかハマった気がして、だいたいはいじったりnow自体を消してやり直したりしたらできた印象だが、うっかりでハマったのがこの記事参照。
https://qiita.com/shima-07/items/64c051c9982ac0899b21

# さらにnowにハマる
無事、ngrokを卒業して、nowを使ってLINE botができました。
が、、
なんか挙動がおかしい。ソースコードはngrokの時と何も変えてないのに。

nowでアプリケーションエラーが出たとき対応したこと

nowでハマったメモ

# 状況
@n0bisuke の[この記事](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d#4-now%E3%81%A7%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4)を参考にやっていたつもりがこんなエラーと遭遇。


> An error occurred with this application.
> This is an error with the application itself, not the platform.

「nowは問題ないよ。お前のアプリケーション（ソースコード）が問題なんだよ。」とのこと。

# 対応
このnow.json内で指定しているjsファイルの一部を直したら直った。
（記事の例でいくと、se

typescriptを使ってjavascriptのシンタックスシュガーを理解する

# 背景
typescriptを勉強していて、アロー演算子構文の読み方がわからない。ドキュメントを読んでもよくわからなかった、ということがありました。
そんな時、tscコマンドを使うことで難解なシンタックスシュガーへの理解のヒントになることに気が付きました。
それについて紹介します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

たとえば下記アロー演算子の構文がわかりませんでした。

`[‘bbbbb’, ‘3’].map(({ length }) => length)`
仮引数に `{}` 使とは、、、？みたいな感じです。
出力内容から見ると、`length`プロパティを返していることを察することができましたが、いまいち腑に落ちませんでした。

# tscコマンドの出番です
typescriptをjavascritに変更するコマンドが`tsc`です。

“`arrow.ts
[‘bbbbb’, ‘3’].map(({ length }) => l

点と(直線 or 線分)の距離の2乗　JavaScriptでの実装

いろいろやり方はありますが、この記事では一次式の連立方程式を使って考えます。

# 点と直線の場合

o と p を通る直線に q からおろした垂線の距離の2乗を求めます。

o を p と q からあらかじめ引いておいてやると、計算が楽です。

以下のように求められます。

“`
const
_Dist2 = ( px, py, qx, qy ) => {
const num = px * qy – py * qx
return num * num / ( px * px + py * py )
}
const
Dist2 = ( ox, oy, px, py, qx, qy ) => _Dist2( px – ox, py – oy, qx – ox, qy – oy )
“`

注）o と p が同じ場合 0 / 0 にな

【React + Material-UI】電卓アプリを作ろう！【2020年4月版】

# はじめに

この記事は**「Reactのチュートリアルを終えて、何かを作ってみたい」**という読者を想定しています。
分からない部分が出た場合は[Reactの公式ドキュメント](https://ja.reactjs.org/)に立ち返りましょう。

material-uiの[公式ドキュメント](https://material-ui.com/)も要チェック!

# 作ったもの

[React Calculator](https://shintaro-hirose.github.io/react-calculator/)

iPhoneに入っている電卓アプリのようなものを作りました。

Githubに[ソースコード](https://githu

【knex】this.dialectに関してのエラー解決

##エラー文
Using ‘this.dialect’ to identify the client is deprecated and support for it will be removed in the future. Please use configuration option ‘client’ instead.

##解決法

“`javascript
var knex = require(‘knex’)({
dialect: ‘mysql’,
connection: {
host: ‘localhost’,
user: ‘root’,
password: ‘（パスワード）’,
database: ‘(データベース名)’,
charset: ‘utf-8’
}
});
“`

上の文の、dialectをclientに変更する。

Vue.js で作るForm(フォーム)

# Vue.jsで作るフォーム

form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成するには、**v-model ディレクティブ**を使用することができます。それは、自動的に入力要素のタイプに基づいて要素を更新するための正しい方法を選択します。ちょっと魔法のようですが、v-model はユーザーの入力イベントにおいてデータを更新するための基本的な糖衣構文 (syntax sugar) で、それに加えて、いくつかのエッジケースに対しては特別な配慮をしてくれます。

**<参考文献>**
>https://jp.vuejs.org/v2/guide/forms.html

## 入力フォーム input (text)
**HTML**

“`html

{{ eventDat

Instagramでスクロール中にモーダルが表示され閲覧できなくなる問題を解決する。

## はじめに
※ 悪用厳禁です。

我々のようなエンジニア~~(隠キャ)~~はInstagramという~~(陽キャ御用達の)~~サービスを使う機会がないですし、アカウントも作成していないと思います。

しかし、自分の大好きな芸能人の写真をInstagramで~~ニヤニヤしながら~~見ていると突如、モーダルが表示され、モーダルを閉じることもスクロールすることもできなくなり閲覧できない状態になってしまいます。

その名も、「**Instagram問題**」

大概の人は、そこで諦めるかもしれません。
でも、我々は諦めません。この問題を解決する術があるからです。

## 該当する問題
ログインをしていないときに、しばらくスクロールすると次のような画面になります。
この状態になると、半透明になっているところをクリックしてもモーダルは閉じませんし、スクロールもできません。

写真は有名ユーチューバーHikakinのInstagramを使用しています。
![スクリーンショット 2020-04-04 17.48.09.png](https://qiita-image-store.s3.ap-nor

JavaScriptでタブ機能を実装する（シンプル、IE対応）

##はじめに
シンプルなタブの実装を速やかに終わらせるための備忘録。
CSSは最低限のデザインだけです。クラス名も好きに変えちゃってください。
#ソースコード
```index.html

• Portfolio
• Jobs
• Design
• Event

Portofolioです

Jobsです

Designです

Eventです

```

```style.css
/* 子要素の.tabをfloatで左に浮かせたので

【JavaScript】thisが指すオブジェクトがわけわからなくなるので書いておく

## はじめに
JavaScriptを始めた時に、一番最初につまづくポイントって**this**ば気がします。
自分も訳わかりませんでした。
そんな時のためにチラッと確認できるようここにまとめておきます。

[開眼!JavaScript](https://www.oreilly.co.jp/books/9784873116211/)を参考にしています。

## 結論
関数が実行された時に、thisは設定されています。
その呼び出された関数を**プロパティかメソッドとして保持しているオブジェクトがthisに設定されています。**

## コードにしてみる
```js
const people = {
name: 'java男',
age: 23,
greet: function () {
console.log(`I am ${this.name}`)
}
}

people.greet()
// 出力 : I am java男
```

ここでいうプロパティかメソッドとして保持しているオブジェクトとは、peopleオブジェクトとなります。
つまり、this.na

jQueryのappendで取得元が消えてしまうときの回避方法

# はじめに
エレメントから要素を取得して、その要素を別の場所にコピーする処理をjQueryのappendでしようとしていたのですが、取得元が消えてしまいハマってしまったので、その回避策のメモです。

# 事象
以下のような画面があったとして、「テストタイトル1」をクリックすると、「テストタイトル2」の下に「テスト内容」がコピーされるプログラムを作成したかったとします。

```bash
テストタイトル1 // ① クリック
テスト内容
テストタイトル2 // ② この下に「テスト内容」がコピーされる
```

そこで、以下のようなHTMLとJavascriptを実装します。

```bash:html

LINE botから画像送信～問いかけると柴犬の画像を返してくれるLINE botを作ってみた

#概要
　LINE botでできることを調べていたら、画像を返すことが可能とのことで試してみました。
ただ画像を返すだけでは面白くないので、柴犬APIで画像を拾ってきて表示することにしました。最後にソースコードの全体を載せています。

　柴犬APIについては[こちら](https://shibe.online/)をご参照ください。実際の動きは次のようになります。

【デモ】

LINE botって、画像を返してくれる機能もあるのですね！ということで、問いかけると柴犬の画像を返してくれるLINE botを作ってみました?#protoout pic.twitter.com/iHNFAQvcfR

— まえぷー@出窓菜園 BW

TypeScriptで学ぶデザインパターン〜Template Method編〜

# 対象読者

- デザインパターンを学習あるいは復習したい方
- TypeScriptが既に読めるあるいは気合いで読める方
- いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います
- UMLが既に読めるあるいは気合いで読める方

# 環境

- OS: macOS Mojave
- Node.js: v12.7.0
- npm: 6.14.3
- TypeScript: Version 3.8.3

# 本シリーズ記事一覧(随時更新)

- [TypeScriptで学ぶデザインパターン〜Iterator編〜](https://qiita.com/junkimatsuda/items/c5b016b9762f29ef6f50)
- [TypeScriptで学ぶデザインパターン〜Adapter編〜](https://qiita.com/junkimatsuda/items/e8523185d14e53279fb8)
- TypeScriptで学ぶデザインパターン〜Template Method編〜

# Template Methodパターンとは

**処理の

web開発独学のためのロードマップと参考資料

# WEB開発
友達のために最初の取っ掛かりのためのカリキュラムを書きます。
これを見ながら勉強の方針を立て、それをもとに自分で検索して、いろいろな勉強サイトを使って勉強していく感じで。
全部やろうとしなくていいです。
随時更新予定。
環境はwindowsを想定してます。

## はじめに
プログラミングは挫折しやすいです。
すべてを理解しようとはせず、ある程度できたらアウトプットしてまた次の新しいものを学び、飽きたり挫折したりしないようにがんばりましょう。
ググってもわからないことがあったら、なるべく早めにできる人に聞くといいと思います。
時間を無駄にしている可能性が高いです。

## 開発環境構築
まずは自分のパソコンにプログラミングをする環境を作ります。

#### [VSCode](https://code.visualstudio.com)をインストール
これはエディタです。これを使ってプログラムを書いていきます。
便利な拡張機能を紹介
* Bracket Pair Colorizer(括弧に色がつく)
* ESLint
* HTML CSS Support
* HTML