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

【javascript】Array.prototype.reduce()の動作確認

>構文
arr.reduce(callback[, initialValue])

>reduce() メソッドは、配列に存在する各要素ごとに対して、callback 関数を次の 4 つの引数を渡しながら一度だけ実行します。

[リファレンス詳細はこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

### つかってみる

##### 配列内の値の合計値を出す

“`js:
const ary1 = [1, 2, 3, 4, 5];
const sum = ary1.reduce((a,b) => {
return a + b
});

console.log(sum);
//15

“`

##### オブジェクトの配列の値の合計値を出す

“`js:

const ary1 = [{x:1}, {x:2}, {x:3}]
const sum = ary1.red

Vue.jsでアバター作成

# 0. はじめに
– [MYJLab Advent Calendar 2019](https://qiita.com/advent-calendar/2019/myjlab) 7日目の記事です。
– Vue.jsとCodeSandboxでアバター(のようなもの)が作成できるツールを作成しました。

– 顔、髪、眉、目、鼻、口の形をそれぞれ6種類から選択することができ、位置や大きさ、角度を変更することができます。
– デモページは[こちら](https://jysze.csb.app/)

# 1. 実行環境
エディタ : CodeSandbox

## CodeSandbox
– https://codesandbox.io/
– オンラインコードエディター
– Vue.jsのフレームワークを簡単に使うことができる。
– ライブラリやコンポーネント

THREE.IKでIK入門してみた

[Three.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/threejs)の6日目の記事です！
今回は[Three.js Meetup Tokyo #0](https://threejs.connpass.com/event/153560/)で話せなかったIKライブラリ**「THREE.IK」**の話です。

## 開発環境
Three.js: v0.111.0
THREE.IK: v0.1.0

## [THREE.IK](https://github.com/jsantell/THREE.IK)とは

– Three.jsベースで提供されているIKライブラリ
– IKの説明は[Shade3D 第9回「FKとIK」](https:/

Illustratorでオブジェクトの面積を計算するスクリプト

イラレでオブジェクトの面積を求めようとしたら地味に面倒だったのでスクリプトを作りました。

#概要
面積を測りたいオブジェクトを選択した状態で実行すると、新規テキストを作成して計算結果を表示します。

#注意
– 小数点を丸めているので厳密な計算には使えません。あくまでも目安ということで。
– 複雑なパスの場合、事前にパスの単純化をかけてから実行したほうが良いかもです。
– モニタの解像度によって計算結果が異なるかもなので、単純な四角形などで計算結果を確認してから使用してください。

“`javascript:area.jsx
var area = app.selection[0].area; // 選択中のオブジェクトの面積（単位がpt）を取得
var Absolute = Math.abs(area); // 負の数字を引っ張ってくる場合があるので、絶対値を取得して正の数に統一
var convert = Math.ceil(Absolute * 0.12445216049); // 小数点を切り上げしてptからメートル法に変換
var result = (convert *

葛飾北斎になりたい

Ubiregi Advent Calendar 2019 5日目です。

またまたフロントエンドエンジニアのコジャが担当します。

流石にそろそろ疲れてきました。今回のアドベントカレンダー、3記事目です。仕事中もコード書いて、仕事終わったら記事を書くためにコード書いて、すごいななんか。

もうコードを書くのは疲れた……。文章を書くのもめんどくさい。ああ……ああ……

*絵を描こう。すげー絵を、描こう……*

## 葛飾北斎

葛飾北斎ってみなさんご存知でしょうか。私は存じております。富士山書いた人です。多分もっと色々すごい。私は教養がない……。

[葛飾北斎 – Wikipedia](https://ja.wikipedia.org/wiki/%E8%91%9B%E9%A3%BE%E5%8C%97%E6%96%8E)

> 葛飾 北斎（かつしか ほくさい、葛飾 北齋、宝暦10年9月23日〈1760年10月31日〉? – 嘉永2年4月18日〈1849年5月10日〉）は、江戸時代後期の浮世絵師。化政文化を代表する一人。
> 代表作に『富嶽三十六景』や『北斎漫画』があり、世界的にも著名な画家

Node.js + Express で ES6を使う

# 確認環境
node v10.17.0

# アプリケーションテンプレートの作成
ここでは`play_express`というアプリを作る前提で進めていきます。
※npxコマンドの使用には、`npm 5.2.0`以降がインストールされている必要があります。

“`
npx express-generator play_express
“`

次に依存関係をインストールします。

“`
cd play_express
npm i
“`

一旦、動作確認をします。アプリのカレントディレクトリで以下のコマンドを実行します。

“`
npm start
“`

このあと、webブラウザから`http://localhost:3000/`にアクセスすると、「Welcome to Express」画面が表示されます。
動作確認を終了するには、`npm start`実行中のコンソール上で、**Cmd(Ctrl)+c** を押下します。

# Babelのインストール
ES6を使うため、babelをインストールします。

“`
npm i @babel/core @babel/node

jqueryで追加された要素に対してイベントを設定するのにつまづいたこと。

# はじめに
プログラミングスクールの課題で、Railsを用いたチャットアプリを作成した際にjavascriptの処理で詰まったことがあったので、同じことで悩んでいる人もいるのではないかと思い記録に残します。

# 行なった内容
チャットグループを作成または編集する際、インクリメンタルサーチでユーザーの検索を行い、出現した名前の[追加]ボタンを押すことでメンバー一覧の箇所に選択したユーザーの名前が表示されるという流れを実装した。

# 環境
Rails 5.0.7.2
Ruby 2.5.1

# 詰まってしまった内容
上記のGifは正常に動作している状態なのですが、私は下の状態になってしまい困り果てていました。
![chatspaceerror.gif](https://qiita-image-store.s3.ap-nor

Riot.js v4 レガシーブラウザに対応させよう

個人的にriotのv4は中規模のプロジェクトでも使いやすくなった感じがしますが、公式でieに対応していないためなかなか仕事で導入しにくいです:frowning2:
今のところ自分のプロジェクトではこれで問題なく動いてますが、まだ十分に検証していないので注意

まずはparcelで最低限の環境を整えましょう。
### インストール
“`
npm install riot parcel-bundler @riotjs/parcel-plugin-riot
“`

### コード
“`index.html

“`
“`index.js
import { component } from ‘riot’
import App from ‘./App.riot’
component(App)(docum

エラトステネスの篩→素因数分解→二項係数 with mod (JavaScript)

篩を使えば素因数分解できるし、素因数分解できるなら、そこそこ大きい二項係数 with mod も溢れず計算できるね、というだけの記事。

まず単純な実装のエラトステネスの篩。

~~~js
const sieve = max => {
const m = Math.ceil(Math.sqrt(max));
const s = [];
for (let p = 2; p <= m; p++) if (!s[p]) for (let q = p * p; q <= max; q += p) s[q] = p; return s; }; ~~~ `false` / `true` ではなく、素因数のうちどれか一つ / 無ければ `undefined` が入っている(`0` で初期化してもいいけどサボり)。 つまり、`n` が `2` 以上で `sieve[n]` が `undefined` なら素数、と言うことになる。 こうしておくと次のようにして素因数分解ができる。 ~~~js c

年末まで毎日webサイトを作り続ける大学生 〜49日目 サイトを10*10に区切って、マウスを動かすと背景も変わる〜

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

サイトを10*10に区切って、マウスが動くと背景も変わるようにしました。
ほぼ全部JavaScriptを使っています。

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

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

##やったこと
伝えづらいんですが、映像を見れば一発だと思います。
こんな感じです。↓

htmlはdivを一つ用意するだけです。↓

“` html

“`

JavaScript全文↓

“`javascript
let mouseMove = document.getElementById(“mous

FigmaプラグインでcurrentPageの全テキストを取得

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

今回はFigmaのプラグインで扱えるレイヤーやオブジェクトを整理しつつ、currentPageの全テキストを取得するところまで説明したいと思います。

# 名前とレイヤー
まず、公式サイトの説明で出てくる単語がFigma上の何を指しているのかを整理しておきましょう。

## Document

ドキュメントはPageをまたいだワークスペースを指します。

## PAGE
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249136/a7753066-e

react + marked + highlight の設定や拡張

# はじめに

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

今回は前回に続いてMarkdownをReactで表示するために、htmlに変換する部分です。
あとは、シンタックスハイライトをする方法ですね。

## じっそー

まずはインポートとインスタンスの生成
“`js
import marked from ‘marked’;
import hljs from ‘highlightjs’
import ‘highlightjs/styles/monokai.css’　// monokaiの場合
const r = new marked.Renderer()
“`

そして、markedの拡張(変更)

“`js
// h1,h2,h3 ….
r.heading = (text, level) => {
let escapedText = text.toLowerCase().replace(/[^\w]+/g, ‘-‘);
return (

脱出ゲームのようなものを作成するKitのPGM

GASから脱出ゲームについての各ページのデータをJSONで作成し、
そのデータをJavaScriptで読み込ませることで
脱出ゲームを作成できるようなプログラムを作成しました。

脱出ゲーム用の各ページ(とアイテムとアイテム合成)データを
作成するためのGASページ(CreateJsonDataメソッドより作成):https://docs.google.com/spreadsheets/d/e/2PACX-1vQrSTK83cIbQwfRdl2jRlfVjQ49fBsSOtvD0nfJtLKPsw2-bp1K0RIYT0lF1PUfRQN84EhYSKAVQD-Q/pubhtml

作成したJsonデータから脱出ゲームの動作を行うJavaScriptプログラム
のgithubURL(中のindex.htmlをコピーすれば動作可能となることを確認済み)：https://github.com/NanjoMiyako/DasyutuGame1

プレビュー
![preview1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaw

Emscripten で C/C++ から JS の関数を呼ぶには

## TL;DR;

* コード中に JavaScript を埋め込む
* 外部関数として定義して、実装を　WASM 出力時に埋め込む

このどちらかで、JavaScriptのユーザ定義関数を呼べます。DOM APIのいくつかは、[`html5.h`](https://emscripten.org/docs/api_reference/html5.h.html) に定義されている関数を通じて呼ぶことができます。

## WebAssembly から JS の関数を呼ぶには（一般的な話）

WebAssembly はソフトウェアモジュールを定義します。ES モジュールと同様に、関数をエキスポートするだけではなく、他のモジュールで定義された関数をインポートできます。

インポートされる関数に関する情報は、wasm ファイルに書かれています。この情報は `import` セクションに「どういう引数 / 返り値の関数が」「どういう名前で与えられるか」という形で書かれています。

~~~LISP
(import “console” “log” (func $log (param i32)))
~

音声認識するオンラインビンゴゲームつくった

# オンラインのビンゴゲーム
私は[commew（こみゅー）](https://commew.net/)というフリーランスコミュニティーに参加してます。
そこでチームを組んで作った「みんにゃでビンゴ」というWebアプリを紹介します！

commewでは、月に１回「フリーランス集会」が開かれています。オンライン飲み会的なやつです。
その集会で**「オンラインでビンゴゲームをしたいよね」**と言う話になったのですが、なにげにWebを探してもいい感じのサービスが見つからない~~（最近のわけぇもんはビンゴとかしないのかな・・・）~~ので、**コミュニティー内でチームを組んで作る**ことにしました。

このビンゴには、遊び心で**音声認識**の機能をつけたので、そこの実装を中心に紹介をします。

ゲームは公開済みです。
https://minnya.fun/
https://github.com/daisuke85a/bingo ~~(コードは汚いから読まないで)~~

JSとPHPで作っています。フレームワークは使ってません
~~（むしろ、当初の僕はフレームワークを使えなかった・・・）~~

08. 暗号文

## 08. 暗号文
与えられた文字列の各文字を，以下の仕様で変換する関数cipherを実装せよ．

英小文字ならば(219 – 文字コード)の文字に置換
その他の文字はそのまま出力
この関数を用い，英語のメッセージを暗号化・復号化せよ．

###Go
“`go
package main

import “fmt”

func cipher(s string) string {
r := “”
for i := 0;i= ‘a’ && s[i] <= 'z' { r += string(219 - s[i]); } else { r += string(s[i]); } } return r; } func main() { s := cipher("AaBcCcDd1234efgEFG"); fmt.Println(s); } ``` ###python ```python # -*- coding: utf-8 -*- def cipher(s): r = "" fo

YYTypeScript#12「これを作ればTSを大体理解できるモノ」「eslintのルール追加に追従するのって大変」「jQueryから移行するならVue？React？」「VueならNuxt入れたほうがいい？」「SPAの良い点・悪い点」

これは2019年12月6日に開催したTypeScriptイベント[YYTypeScript#12]のイベントレポートです。

[YYTypeScript#12]: https://yyts.connpass.com/event/154510/
[YYTypeScript]: https://yyts.connpass.com/

[YYTypeScript]は一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆるく・ワイワイ話しながらTypeScripter同士の交流を深める「双方向的な座談会」の形式になります。集まった人たちで「今日話たいこと」「聞きたいこと」をいくつか挙げていき、それをテーマに雑談していきます。

__今回の配信動画__

YYTypeScript #12 の生配信収録をアップしました！ https://t

Node.jsでTwitterを自動化する

https://adventar.org/calendars/4650
OUCC(大阪大学コンピュータクラブ)のアドベントカレンダー12日目です。

Node.jsのtwitterモジュールでtwitterAPIを叩きました。
モジュールの更新が2017年で止まっており、一部機能が使えなくなっています。
先駆者の皆さんの記事のコードが動かないこともありました。

# ツイートする
twitter APIを取得して、API key, API secret key, Access token, Access token secretを取得しました。これに関しても参照ページからほかの方の記事をご覧ください。

送信できる環境が整ったので、ひとまずtwitterモジュールからツイートしてみました。

“`
//モジュールの読み込み
const twitter = require(‘twitter’);

//ツイート内容
const text = ‘test’

//上からAPI key, API secret key, Access token, Access token secret
c

JavaScriptでCookieを使う

# JavaScriptでCookieを使う

## 保存
“`javascript
document.cookie = “hoge=tes”; // hoge=test
“`

## 取得
全部取得しちゃう．「；」区切りになっているので，「；」を元に文字列操作する必要がある．

“`javascript
document.cookie
“`

## 削除
“`javascript
document.cookie = “削除対象の名前=; max-age=0”;
“`

JQueryでAlt+←/Backspaceでのブラウザバックを無効化

# やりたいこと
探せばいくらでも出てきそうな、[Alt]+←とBackspaceでのブラウザバックを無効化する方法です。

# ソース
“`js
$(document).on(“keydown”, function(event) {
var tagName = “”;
var type = “”;
var readOnly = false;
var disabled = false;

// イベント発生元要素の情報を取得
if (typeof event.target.tagName !== “undefined” && event.target.tagName != false) {
tagName = event.target.tagName.toLowerCase();
}
if (typeof event.target.type !== “undefined” && event.target.type != false) {
type = event.target.type.t