JavaScript関連のことを調べてみた2019年12月09日

A-FRAME: 物理演算でボーリングっぽい動きを実現してみる１０（ピンに複合シェイプの基本形状を複数適用する）

A-Frameをつかって物理演算ができるようにしてみます。
今回は複合シェイプを複数適用して、よりピンに近い物理的な形状を設定してみます。

3つのcylinderを組み合わせて、ピンの形状に近い物理的な形状を設定しました。
[demo](https://k38.github.io/aframe/physics-system/pin_shape_comp_multi_1.html)

ボールを転がしてみます。
[demo](https://k38.github.io/aframe/physics-system/

loading=lazyのリソース読み込みタイミングについて

# はじめに
この記事は[ZOZOテクノロジーズ #2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/zozo_tech2) 9日目の記事になります。

Chrome76より実装されたloading属性と
loading=lazyが指定された場合のリソース読み込みタイミングについて紹介させていただきます。

# loading属性について

“`html

“`
サポートされている値は現在（2019/12/9時点）下記の通りです。

|値 | 動作 |
|—–|—–|
|auto|ブラウザのデフォルトの遅延読み込み動作 (default)|
|lazy|viewportから計算された距離に達するまで、リソースの読み込みを延期|
|eager|ページ上の場所に関係なくリソースをすぐにロード|

因みに、10×10より小さいインラインサイズを指定した要素は

JS プロトタイプチェーン


create-react-appを用いて，React/JSXのコンパイル環境を構築する

## はじめに
`create-react-app`を用いて，コンパイル環境を構築する例を備忘録としてまとめます．

## 環境
* Windows 10 Home
* npm 6.12.1
* Git bashでコマンド実行

## Reactのツールでビルド
React/JSXを使用するときは，ソースコードをあらかじめコンパイルしておくのが一般的です．
ここでは，React/JSXのコンパイル環境を整える方法を紹介します．

### React/JSXのコンパイル環境を作る

`create-react-app`というアプリを使ってコンパイル環境を構築します．
これはFacebookが用意しているアプリです．

以下のコマンドで`create-react-app`をグローバルインストールします．

“`
$npm install -g create-react-app
“`

次に，このツールを利用したプロジェクト(sample1)を作成します．
作業ディレクトリの直下に`sample1`というフォルダが生成されます．

“`
$create-react-app sampl

JS標準スタイルで自動整形

## はじめに
JavaScriptでは数多くのコーディング規約がありますが，
ここでは，JavaScript Standard Styleの規則について簡単に紹介します．
また，自動整形する方法を備忘録として記述します．

## JS標準スタイルの代表的な規則

* インデントはスペース2つ．タブは使わない
* 文字列表現は基本的に，クォートで囲む
* 未使用の変数は記述しない
* セミコロンは記述しない
* 制御構文などキーワードを記述するとき，単語の後ろにはスペースを入れる
* 関数定義の時，関数名の後ろはスペースを入れる
* 値の比較は`==`ではなく`===`を利用する
* 代入や演算のための記号の前後にはスペースを入れる
* 配列などカンマで値を列挙するとき，カンマの後ろにスペースを入れる
* if文でelseを書くときは，elseの前に改行しない
* 複数行のif文を記述するときは，`..`を省略しない
* コールバック関数で，エラー処理が必要な時，省略しない
* ブラウザーのグローバルオブジェクトはwindowsを諸略しないで記述すること
* 2行以上の空行を書かない

ブラウザの「あとで見る」機能をChrome拡張機能を使って実装する。

この記事は[Zeals Advent Calendar 2019](https://qiita.com/advent-calendar/2019/zeals) 9日目の記事になります。

はじめまして。Zealsでバックエンドエンジニアのインターンをしている大学3年生の@tomowarkarです。

日頃の少しきになることを解決するために作ったツールについて書いていきたいと思います。

# TL;DR
– Chrome拡張は簡単に作れるぞ。
– webサイトのあとで見る機能をChrome拡張機能を使って実装したぞ。
– HTML, CSS, JavaScriptしか使っていないので誰でも作れるはずだぞ！！

# 動作
まずデモ動画を見ていきます。

以下の動画のように、ワンクリックで開いているwebページをあとで見るリストに登録でき、

あとで見るリストの並べ替えができ、

削除もできるといった拡張機能を作りました。

![gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235435/af079

Vuetifyのdatepickerを使って【和暦】＋【年度/月】pickerを作ってみた

vuetifyのv-date-pickerは、表面上のテキストをfuncitionで書き換えることができるので【和暦表示】と【年度/月】が選択できるピッカーを作ってみました。
**0.5x倍**にしてみると普通に見れると思います。

See the Pen express-graphql + TypeScript で始めるGraphQL API Server

# はじめに

この記事は `express-graphql` で`Node.js` + `TypeScript` で簡単にGraphQL APIサーバを実装する
ハンズオンちっくな記事です。
実際に手を動かしてみてください?

ディレクトリ構造は下記のようになります。

“`
.
├── src
│   ├── data
│   │   └── index.ts
│   ├── fields
│   │   ├── index.ts
│   │   └── member
│   │   ├── index.ts
│   │   ├── query.ts
│   │   ├── resolvers.ts
│   │   └── types.ts
│   └── index.ts
├── package.json
└── tsconfig.json

“`

# 準備
## パッケージのインストール

実行は `ts-node` で行います。

“`
yarn add @types/express cors express express-graph

react hooks+redux toolkitを使ってtodoアプリを作ってみた

この記事はTOWN株式会社アドベントカレンダー6日目の記事です（大遅刻して申し訳ないです。。。)
https://adventar.org/calendars/4335

React HooksとはReact16.8から追加された機能で、関数コンポーネントにstateなどの機能を使えるようになった記法です。
https://ja.reactjs.org/docs/hooks-intro.html

Redux toolkitとはどうしても複雑な記述を書かなくてはいけないイメージが(個人的に)あるreduxを簡潔に書くことができるライブラリです。reduxの公式チームがリリースしているそうです。
https://github.com/reduxjs/redux-toolkit

今回はreact hooksとredux toolkitを使ってtodoアプリを作成してみました。(初めて一からreduxでアプリを作ったのでアンチパターンなどあるかもしれないです。。)

こちらが完成形です。
![reduxsample.gif](https://qiita-image-store.s3.ap-

jRumbleで要素を揺らしてみた備忘

## jRumble使ってみた備忘

2019年のサイボウズデイのkintoneの発表の中で
jRumbleが使用されているのを拝見して使ってみたいなと思ったのがきっかけです。

#### 必要なもの
jquery(https://code.jquery.com/)
※3.4.1で実施しました。

（補足メモ）
uncompressed・・・コメントあり。開発時に使用を想定。
minifield・・・コメントなど除外した軽量版。稼働時に使用を想定。
slim・・・ajax,effectsを省いたコメントありのバージョン
slim minifield・・・ajax,effectsを省いてコメントなどを除外した軽量版。

jRumble(https://jackrugile.com/jrumble/)

#### やったこと
ドットインストールの「JavaScriptでストップウォッチを作ろう」を元にして、
Stopボタンを押下された時にStartボタン押下時からStopボタン押下時までの差分のミリ秒が3で割り切れる数字の場合は、
timer要素（ストップウォッチの秒が表示されている要素）

ウェブページがピンチアウト・ズームされているかどうか検出する方法

スマホやタブレットなどのモバイル端末の UI を実装しているとき、ときどき「今、ユーザーが画面をピンチアウトして拡大表示しているかどうか？」を知りたくなることがあります。

## ピンチアウト・ズームされているかどうか検出するコード

**１行で済ませられる DOM API があります。**Visual Viewport API です。この API に対応している環境では、window オブジェクトの `visualViewport` プロパティが利用可能です。以下のようなコードを書けば、ピンチズームの検出が可能です。

Android の Chrome と、iOS Safari で対応されています。

“`javascript
function isPinchZooming() {
return window.visualViewport.scale > 1
}
“`

注意したいのは、iOS が Visual Viewport API に対応したのが Safari 13（2019年9月リリース）だということです。もしそれ以前の環境にも対応する場合、以下のコードでピンチズーム

Riot.js v4 自分でRouterを作る

[Riot.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/riotjs) の8日目が空いていたので埋めます。

## Riot Router
[前回](https://qiita.com/nekijak/items/769f0e349f977a2cbebe)と[前々回](https://qiita.com/nekijak/items/bb87e1eec71f4b95190c)でRiot Routerについて触れてきましたが、トリガーの部分で[Rawth](https://github.com/GianlucaGuarini/rawth)が出てきました。
Riot.js v3の時もRouterをカスタマイズして使っていたのですが、このRawthのコードを見ているとRiot Routerを使わずに出来そうだったのでチャレンジしました。

## 気に入らない点
v3のRouterからどうもしっくりこないのが、ページが複数あるときに全部importやmountをしないといけない点です。
複数人でページを分けて開発

写真からマインクラフトのドット絵に変換するwebアプリを作った話

タイトルの通り，写真からマインクラフトのブロックドット絵に変換するwebアプリを作成しました．
こちのらリンクから飛べますので遊んでみてください！
[pic2minecraft](https://pic2minecraft.firebaseapp.com)

# 作った経緯
画像処理系のアプリを何か作りたいなーと考えていました．そしてマインクラフトのドット絵に変換するものがあったら面白いなーと考えて作りました（唐突）

# 使っている技術
このwebアプリはフロントエンドのみで動いてます．なので画像処理を含めた全ての処理はローカルマシンで動かしています．画像処理の部分はJavascript(OpenCV.js)で書きました．ホスティングサーバはFirebaseを利用しています．

## OpenCV.jsとは
OpenCV.jsとはJavascr

Figmaプラグインでcode.tsからui.htmlにNode情報が渡せない

# はじめに
こちらは[FigmaプラグインAdvent Calendar 2019](https://qiita.com/advent-calendar/2019/figma-plugin)の8日目の記事です。

今回は[2日目の記事](https://qiita.com/tatsuyafukui/items/6f5b47cf228d2d14aef8)でpostMessageなどについて説明しましたが、code.tsからui.htmlにNode情報をまるっと送ろうとしたときに、値が送れなかったので、対応策を書きます。

# idしか送られない
code.tsで取得したNodeは下記のようなプロパティを持っています。

しかし、それをui.htmlに送ろうとするとIDしか持っていない状態になってしまっています。
![before2.png](

ワイ「アニメーションするにはこのuseTransitionってのを使えばええんか？」

社長「[やめ太郎くん](https://qiita.com/Yametaro)」

ワイ「なんでっか社長、ワイは今**Reactのアプリを半分だけVueに書き換える作業**で忙しいんでっせ」

[ハスケル子](https://qiita.com/Yametaro/items/11dcd3ec26027ff30214)「（何でそんな意味不明なことを……）」

社長「せやったな、[これからはVueの時代](https://yumemi.connpass.com/event/157720/)やからVueの使用実績を増やさなあかんねん」

ワイ「とはいえReactも今年公式ドキュメントの日本語版が出たり勢いづいとるから捨てがたい」

社長「せやから半々にしてどっちも取り入れるんや！　素晴らしい施策やろ！」

ワイ「さすが社長！」

ハリー先輩「（案件を半々にするんちゃうのかい！）」

ハスケル子「（私は何でこんな所でインターンしているんだろう）」

※ この記事は全面**[無職やめ太郎さん](https://qiita.com/Yametaro)リスペクト**の**ワイ記法**でお送りする二次

AxiosでAPIレスポンスをcamelCaseに変換するお話

# はじめに

この記事は[呉高専 Advent Calendar 2019 9日目](https://qiita.com/advent-calendar/2019/kurekosen)の記事になります。

こんにちは、呉高専在学中のフロントエンドエンジニアの@kobakazu0429です。

12月も始まって1週間が経とうとしているのに、このアドベンドカレンダーはまだ1つも投稿されていなくて寂しいですね。。。
（そもそも、今のところ4記事分しか予約されていない！）

普段はReactを書いているのですが、バックエンドや、外部サービスからデータを取ってくる際には100%と言っていいほど、 [GitHub – axios/axios](https://github.com/axios/axios) を利用しています。
axios便利でいいですよね！
ですが、jsonのkeyは基本snake_caseだと思うので、camelCaseのjsではいまいち、と感じることもしばしば。

「各レスポンスを手作業で変換なんかしたくない！！」そんなあなたに、今回の記事がおすすめです。

Demo: ht

Nefry Cloud Appつくってみた

こんにちは、わみです。

2年前につくったNefryクラウド(仮)のアップデートをしてみたので、記事をまとめてみようと思います。

[](https://qiita.com/wamisnet/items/38d6a5ac8332b090d0c2)

https://qiita.com/wamisnet/items/38d6a5ac8332b090d0c2

# なにを作ったか

Nefry Cloud Appなるものをつくってみた pic.twitter.com/rl1OsulYWm

— わみ@NefryとかFlutter本とか (@wamisnet)

corsに悩まされるな。axios でcorsを攻略する

# はじめに

[いなたつアドカレ](https://qiita.com/advent-calendar/2019/allinatatsu)の八日目の記事です

自分で建てたAPIとの通信でのCORSの回避方法についてですね。

## CORS　いず　なに

Cross Origin Resource Sharing の略称です。
これは、どういつおりじんぽりしーでうんぬんかんぬん、とりあえず別のとこからリソースを取ってくるためのものですね。

## じっそー

axiosの設定をするためのファイルを作りましょう。
“`setting.js

import axios from ‘axios’;

axios.defaults.baseURL = ‘http://localhost:3000’;
axios.defaults.headers.post[‘Content-Type’] = ‘application/json;charset=utf-8’;
axios.defaults.headers.post[‘Access-Control-Allow-Origin’] = ‘*’;

JavaScriptの配列

## 配列の定義

“`:js
//空の配列を作る
const array1 = [];

//数値をまとめた配列
const array2 = [0, 2, 8];

//文字列をまとめた配列
const array3 = [“bernard”, “peter”, “stephen”, “gillian”];

//数値、文字列、真偽値をまとめた配列
const array4 = [1, “bernard”, false];

//数値をまとめた2次元配列
const array5 = [
[1, 1, 1],
[2, 2, 2]
];

//オブジェクトをまとめた配列
const array6 = [{
id: 1,
name: “bernard”
}, {
id: 2,
name: “peter”
}];
“`

## 配列の長さの取得

“`:js
const array = [“bernard”, “peter”, “stephen”, “gillian”];
console, log(array.length);
“`

## 要素

プログラマ―未経験者がJavaScriptの関数の意味をまとめてみた

#関数についてプログラマー未経験者がまとめてみた

関数とは、タスクや値の計算を実行する処理の集まり。
与えられた入力値に基づいて、なんらかの処理を行い、その結果を返す仕組みのことをいう。

##標準関数とユーザー定義関数
関数は大きく分けて「標準関数」「ユーザー定義関数」の2種類に分けられる。
###標準関数
標準関数は、JavaScriptが標準で用意している関数。
random関数（0～1の範囲の乱数を返す。）
round関数（数字を四捨五入）

###ユーザー定義関数
ユーザー定義関数は、開発者が自分で関数を定義したもの。

##関数の定義方法は以下の3種類
・function命令で定義する
・関数リテラルで定義する
・Functionコンストラクタ―で定義する

##引数
引数とは関数の読みだし元から、関数への値を渡すときに使う特別変数。

##関数リテラル
関数リテラルは関数名を持たないことから、「匿名関数」「無名関数」とも呼ばれる。

function（関数1, 関数2　…) {
//実行する処理
}

書き出してみたけど、定義は何となくしか理解でけへん。
プ