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

What’s new in React Native 0.62

この記事は [React Native Tech Blog #2](https://ducklings.connpass.com/event/169637/) で発表した内容です。

React Native の最新バージョン、0.62 がリリースされました。
マイナーバージョンのアップデートは最後に行われたのが 2019年の9月なので半年ぶりのマイナーバージョンアップとなります。

この記事では 0.62 で新しくなったことについてまとめて行きます。

## Flipper のサポート

0.62は主に React Native のデバッグ周辺が改善されています。その大きな要因として、Flipper のサポートがデフォルトで入るようになりました。

Flipper とは、Facebook が開発しているネイティブアプリ用のデバッグツールです。
この度、React Native でもその恩恵を受けられるようになった他、React Devtools など、React Native ならではのツールも組み込まれるようになりました。
React Devtools は新しい v4 が組み込ま

ワイ「なに！？flatMap()で有給取り放題やと！？」

前回の記事、
[**ワイ「なに！？型のズレを吸収できるやと！？」**](https://qiita.com/Yametaro/items/af7dde38c6523dba110c)
の続きやで！

## ある日、コソコソと配列をいじるワイ

ワイ「うーん、これではまた駄目や・・・」

ハスケル子「やめ太郎さん、さっきから何か配列いじってますけど」
ハスケル子「それ何の配列なんですか？」

“`javascript:JavaScript
let vacationOrderList =
[“ハリー先輩”, “カリポリ君”, “やめ太郎”, “ハリー先輩”, “カリポリ君”, “やめ太郎”, …];
“`

ワイ「↑これはな、ワイのチームのみんなの**有給休暇の順番**や」
ワイ「弊社は**有給取り放題**やから」
ワイ「チームのみんなで順番に有給休暇を取得しまひょ〜、いうて」
ワイ「有給の順番表を表示するための**簡単なWebページ**を作ったんや」

ハスケル子「はあ」

ワイ「さっきの配列を元に、画面上に**有給の順番リスト**を表示して」
ワイ「そのページを見ながら、

JavaScript チートシート

##書いてあること
– JavaScript開発メモ

##参考

[JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript)

##JavaScriptの記載方法

###インラインスクリプト

bodyの閉じタグ直前に書くのが一般的

“`html

“`

###外部スクリプト

“`html

“`

###コメント

####1行コメント

“`javascript
// コメント
“`

####複数行コメント

“`javascript
/*
コメント
コメント
*/
“`

##文字列

文字列ははシングルクォート、ダブルクォートで囲って記載
それぞれを文字列で利用したい場合は別のクォート文字で囲う、またはエスケープ文字を利用する

“`javascript
console.log(‘string’);
console.log(“stri

僕（フロントエンジニア）のQiita投稿内容

初めまして。渡辺大地です。

現在（2020/04/08）大学生ながらフロントエンジニア兼営業のフリーランスとして活躍しています。

画像の拡大の仕方忘れた→調べよう

エンジニアの方なら、分からないことを調べる。当たり前の日常ですよね！？
僕も毎日これの繰り返しです。
しかし僕の場合同じことを何回でも調べてしまうのです。

非常に時間がもったいない。そう感じたので自分なりの教科書を作ろうと思いこのアカウントを作りました。

いずれは皆さまも分からないことが出てきたらグーグルではなく僕の投稿から調べたくなる。そんな投稿をしていきますので今後ともよろしくお願いします。

Vuetifyのテキストエリア(v-textarea)内のカーソル位置に文字列を挿入する

# はじめに

テキストエリア内の文字列に、何か別の文字列を挿入したいという場合がある。

例えば、お客様に送信する定形メールでは、お客様の名前は、`%name%`などとして送信時に置換する。

この定型文を作成している場合に、置換文字一覧表でクリックしたら、自動的に定形メールが入力されているテキストエリアに挿入したい。

# Javascriptでの実現方法

Javascriptでは、以下のようにします。まとめていただいてありがとうございます。

* [JavaScript でテキストエリア内のカーソルのある位置に文字列を挿入する方法](https://qiita.com/noraworld/items/d6334a4f9b07792200a5)
* [JavaScript でテキストエリア内の文字列を書き換えた際に undo や redo が効くようにする](https://qiita.com/noraworld/items/020296f63f285ca2bd86)

# Vuetifyのv-textareaで実現する

Vuetifyは、色々とコンポーネント化がされています。

clearIntervalでLINE botの処理を止める（「obnizとLineBotで防犯ツールを作ってみた」の続き）

# この記事で紹介すること
前回の記事では、
[obnizとLineBotで防犯ツールを作ってみた（NO MORE XX 泥棒）](https://qiita.com/shima-07/items/e4d6a33c460da77e25ec)
LINEBotから遠隔で「監視開始」指示を出したのはいいが**「監視終了」の指示が出せなかった。**
そのため、永遠に監視をしてセンサーが反応するたび何通も「誰かいるかも？」とメッセージがきていた。

本記事では「監視終了」の箇所を紹介します。

# どうすれば止められるか
setInterval()を使っていたので、clearInterval()を使って止めます。

[こちらの解説](https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval#example)によるとこういうことらしい。

>setInterval() メソッドは、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。これは、インターバルを一意に識別する interval ID を返します。よって

PdfMakeを使ったPDF作成APIをZeit Nowで動かしたメモ

## 概要
PDFをサーバサイドで作成し、ダウンロードするAPIを作成した。
ローカルで動いていたものがデプロイ時に動かないなどのトラブルがあったが、
最終的には成功できた。

[作成したソース](https://github.com/hibohiboo/develop/tree/50f65f9a5d578a4630bd69ca4c2bb5aa5a7ebdea/tutorial/lesson/react-my-examples/scenario-sheet/)

## ローカル環境
* node:13.12.0
* Now CLI 17.1.1

## フォルダ構成

“`
– api
– pdf.ts
– fonts
– ipaexg.ttf
– ipaexm.ttf
– src
– pages
– index.tsx
– PdfArea.tsx
– .babelrc.js
– next-env.d.ts
– next.config.js
– now.json
– package.json
– tsconfig.json
“`

## ハマった点

Kinx ライブラリ – Integer

# Integer

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。言語はライブラリが命。ということでライブラリの使い方編。

> [リポジトリ(https://github.com/Kray-G/kinx)](https://github.com/Kray-G/kinx) のほうの説明を “Looks like JavaScript, feels like Ruby, and it is the script language fitting in C programmers.” に変えてみた。意味的には例の名探偵のオマージュですが、英語の表現は違っていてオリジナルです。

今回は Integer です。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)

【Node.js】複数のファイルパスをオブジェクトでの階層表現に変換する

# 経緯
Node.jsのfsを使って特定のディレクトリの中身をファイルパスにて取得した際に、ディレクトリの階層と互換性のあるオブジェクトに変換したかった。

# 結論
“`index.js
const data = [
‘/public/aaa/1.file’,
‘/public/aaa/2.file’,
‘/public/bbb/1.file’,
‘/public/ccc/1.file’,
‘/public/ccc/2.file’,
‘/public/ccc/3.file’,
‘/public/ddd/1.file’
];

const output = {};
let current;

for (const path of data) {
current = output;
for (const segment of path.split(‘/’)) {
if (segment !== ”) {
if (!(segment in current)) {
cur

googleスプレッドシートのPDF化を楽にするブックマークレット

googleスプレッドシートをPDF化するときの自分用設定をブックマークレット化してみました。

“`javascript
javascript:(function(){const current = location.href;if (current.match(/^.+docs\.google\.com\/spreadsheets\/d\//)) {const m = current.match(/^.+\/d\/(.+)\/edit#gid=(.+)$/);const printUrl = `https://docs.google.com/spreadsheets/d/${m[1]}/export?exportFormat=pdf&format=pdf&size=A4&portrait=false&sheetnames=false&printtitle=false&fitw=true&pagenumbers=false&gridlines=false&top_margin=0.75&bottom_margin=0.75&left_margin=0.25&right_margin

TypeScriptで学ぶデザインパターン〜Factory 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編〜](https://qiita.com/junkimatsud

100日後にエンジニアになるキミ – 18日目 – Javascript – JavaScriptの基礎1

今日からプログラミングの方に入って行きます。
本日はJavaScriptというプログラム言語についてのお話です。

## JavaScriptについて

JavaScriptはwebブラウザーなどで動作するスクリプト言語で
ESxxというバージョンで呼ばれたりしています。

6th editionの「ECMAScript2015」以降は年号で呼ばれており
新仕様は従来のものよりも効率的にコードが書けます。

JavaScriptはHTMLのスクリプトタグに直接記述するか
jsファイルとして分離しておく方法があります。

jsファイルはスクリプトタグの中身を書き
`.js` と拡張子を付けて保存します。

なおJavaScriptとJavaは別物であるため
略称をJavaにすることは混乱を招きます、間違えないようにしましょう。

もしJavaって呼んでいる人がいたら
DS(だっせえ！！！)って言ってあげましょう。

略称は `js` です。jkでもjdでもなくwwwwww

Javascriptはブラウザ上ではwebサイトの機能部分を司ります。
PCやスマホなど、ブラウザ側のことを

opencv.jsのダウンロード方法

#結論
以下のコマンドでとってこれる。(ver 4.3.0)

“`
curl https://docs.opencv.org/4.3.0/opencv.js -o opencv.js
“`

#OpenCV.jsとは
公式から出ているOpenCVのJavascript版です。

https://docs.opencv.org/4.3.0/d5/d10/tutorial_js_root.html

#公式での入手方法
一応、公式ではopencv.jsに関しては自前でビルドするように書いてある。
https://docs.opencv.org/4.3.0/d4/da1/tutorial_js_setup.html
これをwslのUbuntu18.04でやってみたが、環境変数周りがうまくいかないのか、ビルドできなかった。

↓これのあと

“`
$ source ./emsdk_env.sh
Setting environment variables:
EMSDK = /mnt/c/Users/hattt/Desktop/emsdk

This is rm_wrap: Do not

htmlで共通メニュー部分をajaxで対応させる

“`html:index.html

“`

“`html:footer.html
表示させたい内容を記入
“`

“`js:temp

【React】ルーティング画面を作ってみた【react-router-dom】

[React Router: Declarative Routing for React.js](https://reacttraining.com/react-router/web/example/auth-workflow)
このサイトを参考に自分なりにアレンジ

“`jsx
import React from ‘react’;
import { useSelector } from “react-redux”;
import { HashRouter as Router, Switch, Route, Redirect } from ‘react-router-dom’;
import Top from ‘./components/Top’;
import Nav from ‘./components/Nav’;
import SignIn from ‘./components/SignIn’;
import SignUp from ‘./components/SignUp’;

export default () => {
return (

Node.js: child_process.fork()で起動したプロセスを子子孫孫殺す方法

本稿では、Node.jsにて、子プロセス、そこから派生した孫プロセス、さらにそこから派生したひ孫プロセス……を、一括して終了する方法を説明します。

※説明にあたって、実行環境はUNIX/Linuxを前提にしています。

## 子プロセスを殺しても、孫プロセスは死なない

Node.jsの[child_process.fork()]は、子プロセスを起動できて便利です。子プロセスの中で、`fork()`を使って、孫プロセスを起動することもでき、さらに、孫プロセスで`fork()`して、ひ孫プロセスを、といった具合に子プロセスはネストして起動することができます。

[child_process.fork()]: https://nodejs.org/api/child_process.html#child_process_child_process_fork_modulepath_args_options

起動した子プロセスは[subprocess.kill()]で終了することができます。しかし、これは直接の子プロセスしか殺すことができません。どういうことかというと、

1. oya

Nuxt.js Vuetify2系でFontAwesome5(無料)とmaterial-icon、Font Awesome SVGを導入する

# はじめに

Nuxt.jsでVuetify2系を使っている場合に、FontAwesome5(無料)を導入する方法がわからなくて、調べちゃったので備忘録として残します。

以下の手順でGithubで公開しています。

https://github.com/idani/nuxt-vuetify-fontAwesome5

# 初期状態

Nuxt.jsでVuetifyを導入した初期プログラムを作成しました。
ダークモードは見づらいのでオフにして、
`index.vue`を以下のように修正しています。

“`vue