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

axiosのヘッダーのconfigでちょっとハマった

某APIを試しててaxiosのconfig指定をミスってたので、自戒の意味を込めて残しておきます。

完全に自分用メモっぽいやつです。

## ミスったコードなど

“`js

//省略

class Hoge {
constructor() {
//省略
}

//ミスった方
methodA(IMAGE_PATH){
const file = fs.createReadStream(IMAGE_PATH);
const form = new FormData();
form.append(‘image’, file);
form.append(‘entrance’, ‘detection’);

const config = {
‘X-ClovaOCR-Service-ID’: this.SERVICE_ID,
…form.getHeaders()
};

A tampermonkey script

“`js
// ==UserScript==
// @name filter event by aj club name
// @namespace http://tampermonkey.net/
// @version 0.1
// @require http://code.jquery.com/jquery-3.3.1.min.js
// @description add a club index in the head then you could get by event list by club!
// @author Matt
// @match https://www.audax-japan.org/*
// @grant none
// ==/UserScript==

(function () {
‘use strict’;
function onlyUnique(value, index, self) {
return self.indexOf(value) === i

Google翻訳とGrammarlyを1つのアプリにして英作文セルフレビューを効率化する

オフショア先とやりとりをしたり英語でコメントやでコミットログを書くときは、自信がないのでGrammarlyでの文法チェックとGoogle翻訳での対訳でセルレビューをする習慣をつけています。

– 参考： [英語校正ツールでここまで感動したことはあっただろうか？　GitHubでの英文クオリティを劇的に改善！Grammarly – Qiita](https://qiita.com/07JP27/items/91ed401989b3c796806f)

とはいえ、Webブラウザで毎回GrammarlyとGoogle翻訳を開いたりタブを探したりするのが面倒くさくなっていました。

## 1画面に2つのWebサービスをまとめたい

どうせ同じ英文を両方のサービスにペーストするなら、1つの画面で両方いい感じに開けて、ブラウザとは別のアプリケーションとしてまとまっていたら便利そうです。（下図）
![上にはGrammarlyを表示する 英文をサクサクコピペして添削と対訳をチェックできる! 下は高さ固定領域にGoogle翻訳を表示 ツールバーとかはいい感じに非表示にする](https://qiita-

ClojureScriptでReact 2019

こんにちは。

普段はClojureとClojureScriptだけ書いていてJavaScriptは書かないのですが、いつもより広い範囲のオーディエンスにClojureの良さを語りたくなったので参加させていただきました。

この記事ではshadow-cljsというClojureScript用のツールによって

– node&jvmさえあればClojureScriptでの開発を始められる
– 既存のnodeモジュールを簡単に利用できる
– => ClojureScriptでReactプロジェクト作るのめっちゃ楽しい!

という点を今回作った[小さなプロジェクト](https://github.com/iku000888/reagent-shadow-cljs-vis-js)を添えて主張しようと思います。

## ClojureScriptとは

狭義のClojureはRich Hickeyが作ったJVM上で動く言語です。概要は @223kazuki さんの書いた[キメるClojure高速開発](https://qiita.com/223kazuki/items/afb6341cf73a9

Gatsbyを最速で理解するためのチュートリアル

Gatsbyを触ってみたのですがチュートリアルだけだと??となる部分がいくつもあり結局ドキュメントをたくさん読むハメになりました。
ドキュメントのリンクを整理してたらいい感じのチュートリアルができたので投稿しました(所々中途半端ですが・・・)

## Install

“`
npm install -g gatsby-cli
“`

“`
gatsby new [rootPath] [starter] Create new Gatsby project.
“`

[starter](#starter)を指定する。デフォルトではdefault starterが選択されます。

チュートリアルなのでhello-world一択。

“`
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-hello-world
“`

“`
gatusby deplop
“`

一応npm scriptにも書かれています。

“`
npm run deplop
“`

“`　.json
“scrip

React向けチャート描画ライブラリ Top 6

# React向けチャート描画ライブラリ Top 6
React向けのチャート描画ライブラリをgithubスター数でピックアップしました。
以下、スター数の多い順です。

⏲2019/12/13時点のスター数です。

# Recharts
[hp](http://recharts.org/en-US/) / [github](https://github.com/recharts/recharts) / [demo](http://recharts.org/en-US/examples) / ⭐️12,888
Rechartsは、ReactおよびData Driven Documentで構築された、再定義された構成可能なチャートライブラリです。
プログラマが頭痛のないReactアプリケーションベースのチャートを作成するのを支援します。

# Victory
[hp](https://formidable.com/open-source/victory/) / [github](https://github.com/FormidableLabs/victory) / [demo](ht

webpackでriotのcssをコンパイルしたい(v4)

webpackでriotのcssをコンパイルする方法を紹介します。

webpackの細かい設定とかはスキップします。

## 1. プリプロセッサを登録する
“`webpack.config.js
const postcss = require(‘postcss’);
const prefixer = require(‘autoprefixer’)({ overrideBrowserslist: [“last 2 versions”] });
const compiler = require(‘@riotjs/compiler’);

//第二引数はプリプロセッサの名前
compiler.registerPreprocessor(‘css’, ‘postcss’, (code, option) => {
return {
code: postcss([prefixer]).process(code).css, //ここでcssをコンパイルする
map: null
}
});
“`

## 2. @riotjs/webpack-loaderのオプションに設定

React+Reduxで音楽検索アプリを作ってみた

## はじめに
この記事は，SLP KBIT Advent Calendar 2019 の14日目の記事です．
ReactとReduxでSpotifyのAPIを利用した音楽検索アプリを開発していきます．
記事を書くのは初めてで，手が震えていたりしてます?
https://adventar.org/calendars/4214

## Reactとは
Reactとは，Facebook製のJavaScriptライブラリです．Webアプリケーションのユーザーインターフェイスを効率的に構築することを目的としており，主にView部分を設計するだけで，データの変更を検知し，関連するコンポーネントだけを更新，描画します．[React公式](https://ja.reactjs.org/)
なお，こちらの記事に非常に詳しく書かれておりますので，ぜひこちらも読んでください．[今から始めるReact入門 ～ Reactの基本](https://qiita.com/TsutomuNakamura/items/72d8cf9f07a5a30be048)

## Redux
Reduxは，アプリケーションの

非Javascriptエンジニアのための「Javascriptの制御構文」

[前回の記事 – 非Javascriptエンジニアのための「Javascriptの比較演算子」](https://qiita.com/akumachan/items/7140580e00803d7bb9fc)

ITエンジニアのアクマちゃん([@akumachanit](https://twitter.com/akumachanit))デモ！
この記事は[非JavascriptエンジニアのためのJavascript入門　3日遅れのひとり Advent Calendar 2019](https://qiita.com/advent-calendar/2019/js-inst-for-nonjs-engineer)の記事デモ！

この記事は[JavaScript 「再」入門](https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript)をベースに書いているデモ。

１日サボってしまったデモ…!気を取り直して今日は制御構文についてデモ！

#今回紹介する制御構文

– 空文
–

複数のNuxt.jsを用いたプロジェクトに携わってきて感じたこと

みなさんこんにちは[@y_temp4](https://twitter.com/y_temp4)です。

自分は現在フリーランスのエンジニアとして主にフロントエンドの開発を行っており、これまでに複数の Vue/Nuxt の案件に携わってきました。

というわけで今回は、いくつかの Nuxt プロジェクトに関わってきて得た知見についてシェアしていければなと思います！

## 想定読者

この記事は以下のような方を想定読者として書いています。

– Nuxt を導入すべきか迷っている/新規プロジェクトで Nuxt の利用を検討している
– Nuxt の構成で迷っている
– Nuxt の利用について興味がある

## Nuxt でプロジェクトを初める条

【ALB】さくっと5秒でメンテナンス画面を出す仕組みを作った

# 解決したい課題

* 複数の用途の WEB サーバ (EC2) が ELB (ALB) 配下に存在しているが、順番にメンテナンス画面を出すのに時間がかかってしまう (Jenkins などで順番にデプロイ)
* 複数の環境のソースコード上にあるメンテナンス時間を修正して、都度デプロイしないといけない環境など
* ALB に存在する リクエストルーティング を使ってメンテナンス画面を出す方法もあるが、1024 文字の制限があるので、最小限の HTML かテキストの出力しかできない

# 解決案

* メンテナンス用の S3 + CloudFront + route53 (ここでは maintenance.hapitas.jp と定義) をたてる
* CloudFront は `GET, HEAD, OPTIONS` 以上を許可
* CloudFront は `Cache Based on Selected Request Headers` を `Whitelist` とし、`Access-Control-Request-Headers` `Access-Cont

Twitter のツリーのテキストを Chrome のコンソールで取得しよう


Twitter の連続ツイートのテキストをプレーンなテキストでメモしたくなった時に、コピーが難しかったので作りました。

# ⚠注意点⚠
法と良識の範囲でのご利用をお願いします。

# スクリプト全体

“`js
{
const targetDom = document.querySelectorAll(‘div[lang=”ja”][dir=”auto”]’);

const checkLF = () => {
if(navigator.platform.indexOf(“Win”) != -1) {
return “\r\n”;
}else{
return “\n”;
}
};

const logText = () =>

Riot.js v4 カスタムテンプレートを実装する

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

## はじめに
前回の[Riot.js v4 HTMLのテンプレートエンジンにPugを使う](https://qiita.com/nekijak/items/05a812cc437d064d7813)で、[@riotjs/compiler](https://github.com/riot/compiler)の`registerPreprocessor`で自由にテンプレートを登録できるということがわかりました。

これを検証してみようと思います。

## 動きを確認
まずはデフォルトのテンプレートエンジンの動きがどうなっているかを確認。
https://github.com/riot/compiler/blob/master/src/preprocessors.js

“`javascript:/riot/compiler/blob/master/src/preprocessors.js
ex

年末まで毎日webサイトを作り続ける大学生 〜56日目 Canvasを使って遊ぶ〜

##はじめに
こんにちは！@70days_jsです。

canvas内でボールが動き続けるものを作りました。
MDNにあるゲームを参考にしています。

今日は56日目。(2019/12/13)
よろしくお願いします。

##サイトURL
https://sin2cos21.github.io/day56.html

##やったこと
こんなことをやりました。（gif）↓

丸いボールがゆっくり動いています。
真ん中にある四角に入ると、ボールの色と大きさが変わり、軌道が消えます。
スペースキーを押すとボールのスピードが上がります。

html↓

“`html

spaceを押した回数（ペースアップ）: 0回

Cesium と 3D Tiles について（２）

## はじめに
昨年度の [FOSS4G Advent Calendar 2018 22日目](https://qiita.com/advent-calendar/2018/foss4g)で、[Cesium と 3D Tiles について](https://qiita.com/ValueCreation/items/a31827a98f26c5c681d3)紹介しました。また、社内のテックリード会でも同様の内容で紹介しましたので、紹介できる内容に絞って、情報を展開したいと思います。地味にいいね！があるので参考になれば幸いです。

## Cesium について
[Cesium](https://cesiumjs.org/) は、3D のビューワーエンジンで、Cesium js と Cesium ion で構成されています。

– Cesium JS
– Web 上の 3D マップ用の JavaScript ライブラリ
– Cesium ion
– ストリーミング用に3D データをタイリングし、配信するためのサービス

![image.png](https://qiita-image-

スクレイピングする際の自分なりのベストプラクティス

これは[Python Advent Calendar 2019](https://qiita.com/advent-calendar/2019/python)の13日目の記事です。

~~Python要素薄めになっちゃったけど、スクレイピングの文脈でPythonよく出てくる気がするから許してください~~

# 概要

– (自分なりの)スクレイピングシステム構築方法のベストプラクティス的なものがちょっとだけ定まった
– 公開していろいろ意見を聞いてみたい
– たぶんウェブデベロッパーがスクレピングやるときに知っておくとちょっとだけ幸せになるかもしれない
– 誰かの役に立てればいいなあ(希望)

# 構築方法の重要な点

重要な点は以下の2点

1. DOMにアクセスしてデータを取得するスクレイピングする処理部分はJavaScriptを使う(とくにウェブデベロッパーの方は)
2. Chrome, ChromeDrive, Seleniumとかのスクレピング環境にはDockerとかを使う

構成図は以下のような感じです。(OSとか書いてないけど、だいたいのイメージ)
Pythonの部分は任

Photon JavaScript SDKのざっくりとした説明と、PlayCanvasでリアルタイム通信をするゲームを作る。

## この記事の続きになります

#### [そういえば、JavaScriptでリアルタイム通信のゲームってどうやって作るのってなったとき。](https://qiita.com/yushimatenjin/items/3e789afd06ecb7a198a1)

# 概要

#### JavaScriptでリアルタイム通信するゲームを作る
JavaScriptはよく触ってるけど、そういえばリアルタイムの通信/対戦ゲームってどうやって作るのってなった時に参考になるかもしれないです。
PlayCanvasでマルチ対戦のゲームを作るために今回はPhotonというネットワークエンジンを使用して作成します。役割としては描画の部分は`PlayCanvas`、リアルタイム通信の部分については`Photon`を使用して作っていきます。

今回デモとして作成したこちらのゲームは[WASD]で移動ができるシンプルなゲームとなっております。
２窓などをしていただければ一人でも遊べます。

元記事を表示

【Rails6】（送信時のリロード無し！）Action CableでSlack風チャットアプリを作成

Railsの学習をされた方なら誰しも一度は作ったであろう**Twitterの簡易クローンアプリ**。最初に実装したときは大変でした:sweat:

この記事では， **Action Cable** を利用して， **Slack** のようなリアルタイムチャットアプリの作成方法，さらに Javascript でいろいろな機能を付けるところまでを解説します！

なお， Action Cable を扱う多くのチャットアプリ記事では，**メッセージ送信時にリロードが発生**しますが，この記事では**送信も非同期で行える**ように設計します。

容量制限の都合で見づらいですが，こちらが完成後のチャットアプリです。

![chat_app.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431142/2c8ac242-a

[Vue.js] v-modelのinputの処理を間引く

# v-modelでの入力する際のinput処理を間引く

input時に動く処理が多くて重くなってしまったので、間引けないか考えた時のメモ
※class styleで記述しているので注意

setterが動く際にlodashのdebounceを使って間引くようにする

“`vuejs