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

何も知らないまま雑にNuxtで開発したら死んだ話

# はじめに
本投稿は [TECOTEC Advent Calendar 2019](https://qiita.com/advent-calendar/2019/tecotec) の16日目の記事です。
以前、手探りでやった結果大惨事になったプロジェクトの状況を、主犯の一人として反省を込めてメモがてら書き記していきたいと思います。

## 使ってた技術
– Nuxtjs
– vuex
– Pug
– Firebase(Authentication/Functions/Firestore/Hosting)

## 状況

**俺たちは雰囲気でこのプロジェクトをやっている。**

新規のサービス開発。チームとしては10名くらい。Nuxt触ったことある人なし。JSのスキルレベルもそこそこという感じでした。(ヤバ1) まあNuxtならそんなに難易度高くない（らしい）しへーきへーき！！みたいな楽観もあった気がしないでもない。(ヤバ2）
なお、Firebaseも同様にほぼ触ったことないメンバーでした。collection定義なにもわからない。（ヤバ3）
一体何がダメだったんでしょうかねぇ

自動テスト未経験者が自動テストエンジニアになったお話

#はじめに
こんにちは。
Mikatus株式会社の川嵜です。
Mikatusには1年と少し前にQAとして入社しました。これまで、QAとして品質保証を行ってきましたが、突然「自動テストよろしく！」と言われ、3ヶ月前に経験したことの無い自動テストエンジニアなるものにジョブチェンジしました。
開発もしたことがなく（ほんの少しだけpythonに触れたことはあるくらい）、「Javascript?、selenium？なにそれ？」みたいな状態で、突然自動テストエンジニアになりました。
自動テストエンジニアになってからの3ヶ月間で少しずつではありますが、自分でテストコードを書いて動かしたり、既存のコードを保守したり、それっぽいことができるようになってきました。

テスターやテストエンジニアの方の中には、将来「自動テストエンジニアになりたい！」という方が多くいると思います。（自分の周りだけかな？）
そんな方に向けて、この3ヶ月間でどのようなことをしてきたのかを紹介します。
（「◯◯をした方がもっと成長できるよ！」とかありましたら、ぜひコメントでご意見ください！）

#まずは言語のお勉強
弊社の自動テスト

40歳のおじさんが小さな社内ツールでTypeScriptをつかってみた

## はじめに
JavaScriptを仕事で使い初めて18年のおじさん、
2年前にJSフレームワークの社内選定に関わるも、ここ数年はバッチチームでSQL(HiveQL)ばかり書いたりレビューしたりして悶々としていた。
そんな折、営業側で使う社内ツールをWEBで作って欲しいと依頼され作ることに。
（折角だからTypeScriptを使おうと心に決めて）

## 学習編
すでに社内では一部使われ始めているけど、きっと初歩を知りたい人も多いだろうと勉強会を始めていました。（僕の勉強にみんなを付き合わせようという思惑で）

[TypeScript Deep Dive日本語版](https://typescript-jp.gitbook.io/deep-dive/)
学習方法は上記サイトを先生っぽい立ち位置で僕が読み上げるという方式。
ほぼ初見で私が読み上げるアクロバティックな方法なので、ときに生徒（同僚）たち総動員で「なんでこうなるんだ？」を解決しながら進めていきました。

JSの中級くらいからはじまり、TSの深いところもカバーしていると思うので、かなりおすすめです。

## 実装編
学習は[T

Javascriptで動的に関数を呼び出す

# やりたいこと

探せばいくらでも出てきそうな、変数などを利用して動的に関数を呼び出す方法です。

# ソース
“`js
let funcName = ‘hogehoge’
let arg = ‘fugafuga’

Function(“return this”)()[funcName](arg);
“`
## 解説
関数の実体である`function`オブジェクトは、スコープの一番外側であるグローバルオブジェクトのメンバとして登録されます。
従って、グローバルオブジェクトを取得してそいつにブラケット記法でアクセスすれば、動的に関数を呼び出すことができます。

# 参考にしたサイト
[globalオブジェクトを取得する \- Qiita](https://qiita.com/Hiraku/items/d249a2f2f13532748324)
[?globalThis?と?global?と?this? \- Qiita](https://qiita.com/uhyo/items/f3b6feef9444e86bef94)

PlayCanvasでDOMを扱う手引き [DOM追加しよ編]

最近…ということもなく、前々からですが、
私キドとゲーム畑出身さん（仮称Aさん）と話しているとこんなことが…

—

キド（私）「PlayCanvasで**DOMを追加してPlayCanvasのコンテンツと連携できる**よ」

Aさん「へー**どうやってDOM入れるの？**」

キド「まず、JavaScriptのアセットから`document.createElement(“div”)`でDOM作って…」

(中略)

キド「……最後にbodyタグにappendChild()とかでDOMは追加することができるよ」

Aさん「日本語でおk」

—

JavaScriptに縁のない人にはHTML上にJavaScriptでDOMを追加するまでが出来ず、
やりたいことが出来なかったりするらしい。

そんな訳で今回はそんなMさんやDOMの追加方法を知りたい人のために自分なりに解説します。

#PlayCanvasのProject作成しよ
まずはPlayCanvasのProjectを新しく作って準備。
私は「Model Viewer Starter Kit」のテンプレートを使ってやります。

@storybook/htmlがあまりにも使いづらいのでpugを使って上手く利用する方法を考えてみた

storybook@htmlを利用する場合ってvueとか使わないと思うのですが、実制作で**素のHTMLで書くケースなんてほぼ無い**ですよね。pugで書かれる事が多いかと思います。
そんな中でstorybookを利用したい場合【コード補完の利かない環境でHTMLを書く】か【ビルドしてコピペ】、しかも書いたところで**pugとして再利用できる内容ではない**のです。
下手したら仕事が増えるだけでハッキリ言って使えません。検索にも殆ど引っかからない状態です。
かと言ってstorybookを使うためにnuxtを利用するってのも違うと思うので、上手く使う方法を考えてみました。

## 前準備
初期インストール＋bootstrapのcssを使用して進めます。

npx -p @storybook/cli sb init –type html

インストールしたら、とりあえずこんな感じの構成で準備します。

“`
├── .storybook
│ ├── config.js
│ └── preview-head.html
└── stories
└── sample

Svelteさわってみた

この記事は [ユニークビジョン株式会社 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/uniquevision) の 16 日目の記事です。

##Svelte?
>[Svelte](https://svelte.dev/)
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when th

GraphQLでスキーマファーストなForm Validation

こんにちは、こちらはGraphQL Advent Calendar 16日目です。

タイトルにある「スキーマファーストなForm Validation」とはなんぞやという話ですが、短く説明するとこんな directive を書いたとして

“`graphql
input RegisterAddressInput {
postalCode: String @constraint(minLength: 7, maxLength: 7)
state: String @constraint(maxLength: 4)
city: String @constraint(maxLength: 32)
line1: String @constraint(maxLength: 32)
line2: String @constraint(maxLength: 32)
}
“`

サーバサイドはこの `constraint` を満たしていない値が来たら BadRequest で弾くし、フロントでは下記のようなFormの実装に使うバリデーションオブジェクトをこの定義に基づいて生成

React、Redux 初心者向け解説

#React、Reduxを使ったアプリを解説してみる

今回はアプリのコードを例にReactとReduxを解説していきます。

ReactとReduxの最初の壁として
・チュートリアル的教材は豊富だが、webpackなどのバージョンが違う場合エラーが出る
点があげられます。

これはフロントエンドの技術的進歩が爆速であることに起因しているのですが、ReactやReduxを扱う前に、その沼にはまってしまうのは少し悲しいですよね。。

なんで今回はcodesandboxという便利なサイトを使い環境構築をすっ飛ばして、書かれたコードをサンプルに解説していこうと思います。

又、ぐぐって出てくるreduxのチュートリアルではディレクトリ構成の違いやES6をどこまで使うのかという点で、サイトによってばらつきがあるという点も覚えておいてください。僕はかなり混乱しました。

ReduxではAction、Reducer、Storeが重要な要素なのですが、Storeはややこしいためindex.tsは最初無視しましょう。
root.tsx、index.tsxも無視です。

このアプリでは
①actions

JS初心者がReact+Firebaseで簡単なToDoListを作る

## 概要
最近仕事でReactを触るようになったので、それに関連して何か書けないかなと。
何が良いかな・・そういえばFirebaseってよく耳にするけど触ったことないな・・(汗)

というわけで、ReactとFirebaseで簡単なアプリを作ってみます。

## 作ったもの
– ToDoを一覧に登録/表示する簡単なアプリを作りました
– https://todolist-b715e.firebaseapp.com


– createボタンを押すと一覧に追加する
– doneのボタンを押すと該当のToDoを閉じて、タイトルに取り消し線を引く

## Reactとは
[Reactの公式ライブラリ](https://ja.reactjs.org/)
> React はユーザーインターフェースを作成する為の Java

【javascript】バブルソート処理アルゴリズムを実装する

その他ソートアルゴリズムは後々追加

#バブルソート
– ソートアルゴリズムの中で最も単純
– 基本交換法、隣接交換法とも呼ばれる
– 計算時間はO(n2)
– 降順か昇順にリストを並び替えることができる
– リストの個数をnとした場合、n(n – 1)/2回のスキャンが実行される

##ソートのイメージ
ソート前の配列を[5,3,2,1]

###降順に並び替える

1. スタート時
[5,3,2,1]

2. 要素番号0と1を比較し並び替え
[3,5,2,1]

3. 要素番号1と2を比較し並び替え
[3,2,5,1]

4. 要素番号2と1を比較し並び替え
[3,2,1,5]

これを再び要素番号0と1の比較から繰り返し、最終的に
[1,2,3,5]となる

##実装

“`js
function bubbleSort(ar){
const n = ar.length – 1;
for (let end = n; end > 0; end–){
for (let i = 0; i < end; i++){ if (ar

3000人に聞いた、2019年最先端のフロントエンド開発者が使ってるツールはこれだ

[Ashley Nolan](https://ashleynolan.co.uk/)は、CSSとJavaScriptの機能やフレームワークをどれだけ使っているかというアンケートを毎年行っています。

以下では2019年版である、[The Front-End Tooling Survey 2019](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results)というアンケート結果の概要を紹介してみます。

回答者数が[昨年](https://qiita.com/rana_kualu/items/8dc3f93a7176d9a0f05d)から4割も減ってるのだが一体何があったのだろう。

# The Front-End Tooling Survey 2019 – Results

3005人の開発者が、27の質問に回答してくれました。
私の家族に女の子が増えたので集計結果を出すのが遅れました。ごめんね！

昨年からの一年で変わったところを見ることで、みんなの考えやトレンドが他者と共有されているか確認することができ

1111memo

HTML

“`HTML


　
　

iPhoneのSafariで新しいタブを開いた際にそのタブの戻るボタンを無効化する方法

# はじめに
– iPhone ではアンカータグをタップして新しいタブを開いた後、左から右にスワイプ又は戻るボタンをタップすることで、開いているタブを閉じて前のページへ戻ることができる。
– 開く新しいタブの戻るボタンを無効化する

– iPhone(11.4.1) の Safari のみ確認済

# コード
– 戻ることができる条件は、新しいタブを開いた後、前のタブのURLが変化していない場合。
– つまり、タブを開く -> 元のタブのURLを変更　とする必要がある。

“`html
CLICK
“`

“`js

$(function () {
$(‘.anti_back’).click(function(){
window.open($(this).prop(‘href’));
location.href = “#” + getRandomString(6);
return false;

Riot.js v4 子コンポーネントを操作する

[Riot.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/riotjs) の15日目が空いていたので埋めます。(ちょっと過ぎちゃったケド)

## はじめに

@black-trooper さんの[Riot v4 で子コンポーネントのメソッドを実行する](https://qiita.com/black-trooper/items/69ea1182520237b6aba2)の通り、v3の時は子コンポーネントのメソッドを実行したりということはよくやっていたんですが、v4から簡単には出来なくなっています。

[riot-observable](https://github.com/riot/observable)でも良いのですが、もうちょっと気軽に呼びたかったので少し調べてみました。
observable自体は便利なので、興味がある方は@black-trooper さん記事を参考に！

## コンポーネントを使う

`riot.component`の戻り値はコンポーネントに関する情報を持っているのでここから操作

’10’ – 1 = 9 だけど ’10’ + 1 = ‘101’ になる

jsで演算していて
おや？っとなったことがあったのでメモ。

## string + number は string

“`js

function typeOf(value) {
‘use strict’;
console.log(typeof value);
}

var num = ’10’
var result = num + 1
console.log(result) // ‘101’
typeOf(result) // string
“`

## string – number は number
“`js

function typeOf(value) {
‘use strict’;
console.log(typeof value);
}

var num = ’10’
var result = num – 1
console.log(result) // 9
typeOf(result) // number
“`

## まとめ
冷静になって考えればそりゃそうなんだけど、演算子で変わるのはちょっと面白かった

Node.jsとSocket.ioで簡易的なチャットを実現させる

# 簡易的なWebチャットを実装する
## はじめに
この記事は[SLP KBIT Advent Calender 2019](https://adventar.org/calendars/4214)の16日目の記事である。
Socket.ioを用いた開発をまだやったことがなかったので今回はそういった開発を行っていきたいと思います。
かなり前に作ったので実装過程をちょっと忘れてしまいました…。

##環境
・Windows 10(64bit)
・Node.js : v10.15.3

##準備
この開発ではNode.js、Socket.ioの他に、ローカルサーバーを簡単に立ち上げれるExpressを使うのでもしインストールしていない人は以下のコマンドでインストールしてみましょう。

“`
$ npm install express
“`

#実装
##サーバをたてる準備

“`js:create.js
var express = require(‘express’);//expressを使用
var app = express();
var http = require(‘htt

Vuexを用いた中規模以上WebサービスへのVue.jsアーキテクチャリングの導入

この記事は [CBcloud Advent Calendar 2019 11日目](https://qiita.com/advent-calendar/2019/cbcloud)の記事です。

今回は業務で導入したVue.jsとVuexのアーキテクチャについてまとめました。
なおこちらの内容は [Vue.jsアーキテクチャリング勉強会](https://cw-engineers.connpass.com/event/146975/)
にて登壇したものから一部抜粋しまとめたものです。

# 1. Vue.js とは？
https://jp.vuejs.org/

他フレームワークと比較すると一番特徴的なのは、下記の一行だけでVue.jsの機能が利用できることにあると思います。

“`html

“`

# ２. Vuexとは？
公式サイトにはvuexについてこのように書かれています。
> Vue.js アプリケーションのための 状態管理パターン + ライブラリです。

一筋の光が差し込むWebサイト

[ゆるWeb勉強会@札幌 Advent Calendar 2019](https://adventar.org/calendars/4273) 16日目の記事です。

# 前置き
皆様おはようございます。DE-TEIUです。
本日の記事はCSSとJavaScriptを使った小ネタの紹介です。
ソースコードも公開しておりますので、何かの参考になれば幸いです。

#成果物
Webサイトが停電によって真っ暗になってしまい、内容が読めなくなった事はあるでしょうか。
今回は、そんな時にWebサイトを光らせて内容を表示させる方法をご紹介します。

[サーチライト](https://search-light.netlify.com/)
【使い方】タップしたところが光ります。暗闇に隠された何かを見つけましょう。

## 一筋の光が
差し込みましたね。

#解説
##概要
Webサイトのメインコンテンツの上に真っ黒なオーバーレイを重ねてます。
また、オーバーレイは縦3*横3の計9個の要素で構成されています。
その要素の内、中央の要素の背景色だけを画面クリック時に切り替えられるようにします。

図にする

ApolloClient(React)で、loadingやerror時の表示処理を共通化する。

元々はこちらで紹介されている方法です。
[How to handle loading and error state in a generic way?](https://github.com/trojanowski/react-apollo-hooks/issues/89)

ローディング中にコンテンツを覆うモーダルウィンドウ。

“`tsx
const LoadingModal: React.FC = () => (

);
“`

エラーメッセージを表示するダイアログ。

“`tsx
import { ApolloError } from ‘apollo-client’;

interface ErrorModalProps {
error: ApolloError;
onClose(): void;
}

const ErrorModal: React.FC = ({ error, onClose }) => {
const [o