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

contentEditableな要素で文字入力とカーソル移動が遅い時の処方箋

## 要点

– `contentEditable=”true”`な要素において入力内容（文章量）が多くなると、文字の入力やカーソル(キャレット)の移動が遅くなる問題がある。
– 特にChromeやChromiumのelectronにおいて顕著。
– テキストの文字数よりも、DOMのノード数が多い時に顕著になる。
– `contentEditable=”true”`な要素中でKaTeXやMathJaxなどの数式を大量に使うと起こりやすい。
– 解決策として、画面外に出た要素はstyleで`display:none`にする。
– ただし、その他の要素の表示位置が崩れないようにラッパーspan要素を作ってstyleのwidthとheightをセットしておく。

# モチベーション

Webアプリとしてリッチテキストエディタを作る際など、`contentEditable`は大活躍していると思います。とても便利なのですが、入力内容が多くなると文字入力やカーソル(キャレット)の移動が極端に遅くなることがあります。

経験則としては特徴がありました

– ChromeやChromium系のEle

「スマポン」という、コミュニケーショントイの顔の表示のハナシ

#ハジメに
「スマポン」という、コミュニケーショントイ~~が投げ売りされていたの~~を買った。


スマホに専用アプリを入れて、スマホに乗せることでコミニュケーションが取れるらしい
[スマポン｜商品情報｜タカラトミー](https://www.takaratomy.co.jp/products/smapon/)

ちなみに、裏から見るとこんな感じ

このスマポン本体にコンピューター的なモノは搭載されておらず、
スマホの専用アプリで顔の表示制御や会話などを行っている。
じゃ仕組みさえわかってしまえば、好きな顔

JavaScriptの初心者が学ぶ③~配列とオブジェクト~

##概要
JavaScriptの文法を自分で忘れないためにメモの代わりとして投稿しています。
##配列
配列は複数の要素をまとめて管理するためのものです。

“`javascript:array1.js
const name=[“高橋”,”田中”,”佐藤”];
const number=[0,1,2,3,4,5];
console.log(name);
console.log(name);
“`
>[“高橋”,”田中”,”佐藤”]
[0,1,2,3,4,5]

###配列とインデックス番号
配列の要素にはそれぞれにインデックス番号がついています。
インデックス番号は「０」から始まります。
それを使用して配列の要素を取り出すことができます。

“`javascript:array2.js
const name=[“高橋”,”田中”,”佐藤”];
console.log(name[0]);
console.log(name[2]);
“`
>高橋
佐藤

###配列と更新
配列は要素を更新することもできます。

“`javascript:array3.js
const name=

破壊するかどうか

ほぼ備忘録。よく使うメソッドがArrayを破壊するかどうか
ググるときは日本語なら「配列 [メソッド名] 破壊的」など、英語なら”array [メソッド名] mutating”あたりがよい

# 破壊する

– `fill()`
– `pop()`
– `push()`
– `reverse()`
– `shift()`
– `sort()`
– `splice()`
– `unshift()`

# 破壊しない

– `concat()`
– `entries()`
– `every()`
– `filter()`
– `find()`
– `forEach()`
– `includes()`
– `indexOf()`
– `join()`
– `keys()`
– `map()`
– `reduce()`
– `some()`

# 参考情報

– 手元の環境はNode v12.16.1
– [Array – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Globa

自分のITライフを振り返りつつ、プログラミング言語の学ぶ順番について考える

http://www.minekawada.com/program-language-oder.html

目次
自分のプログラミング言語の学んできた順番

川田さとし、C言語を始める
川田さとし、Javascriptを始めるの巻
川田さとし、Pythonに目覚める
川田さとし、C#で仕事としてのプログラミングへ

後編は作成中

React Native ゲーム開発 Whack-A-Mole(もぐらたたき) 第一回

# Whack-A-Mole(もぐらたたき) 第一回

フロントエンジニアの、YAMATAKUです。前回、

React Nativeでゲームを作る(ための、はじめの一歩)
https://qiita.com/team-lot/items/3fe8d3f77535a7cae8b6

で、環境構築と、プロジェクト作成を完了している前提で、実装に入ります。

## App.jsを整理

“` App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/

import React, { Component } from “react”;
import {
View,
Text,
StyleSheet,
SafeAreaView,
} from “react-native”;

export default class MainScreen extends Component

「うちでヨガしよう」ヨガポーズがあっているか判定してくれるLINE bot～Node.jsに読み込む～

#概要
　コロナウイルの影響で外出自粛、在宅ワークをされている方が多いと思います。普段よりも運動量が減ってしまうので、何かできないかと考えてヨガを支援するLINE botを開発しています。

#やりたいこと
　機能としては、お題のポーズ写真がbotから送られてくるので、そのポーズをとった自分の写真をbotに送ると正しいポーズか判定してくれます。

　まずはLINE botアカウントだけ作りました。

#実装
　学習モデルの作成は次の２つの記事で解説しています。
[Googleが提供しているサービス「Teachable Machine」でヨガポーズの学習モデルを作って遊んでみた](https://qiita.com/kmaepu/items/1350464b3940dfe6957e)
[Teachable Machineで作成したモデルを使用する

crypto-jsを使って簡単に暗号化・ハッシュ化する方法

# はじめに

今回、JavaScriptの暗号化用ライブラリ、「crypto-js」を使う機会があったので、

その際に得た知見をメモ、共有するために記事を執筆します！

それでは行きましょう！

# crypto-jsとは何か

crypto-jsのGitHubリポジトリは[こちら](https://github.com/brix/crypto-js)です。

用途としては、パスワードや何かしらの値を暗号化、ハッシュ化したいときに使用します。

READMEに書いてあるとおり、非常にシンプルに使用することができます。

。。が、ここで落とし穴が！

ドキュメントの通り、AESで暗号化しようとしたところ、いくつかハマりどころがあったので以下で解説します。

これからcrypto-jsを使おうとしている方、それから未来の自分に対してメモを残します笑

# AESで簡単に暗号化する

AESで暗号化するためには、まずcrypto-jsのパッケージをインストールしましょう。

“`
npm i crypto-js
“`

package.jsonにcrypto-jsが追加されていること

在宅ワーク中に会議中サインをobnizとLINEBotで作ってみた deploy編

### はじめに
この記事は前回[在宅ワーク中に会議中だよサインをobnizとLINEBotで作ってみた \- Qiita](https://qiita.com/3yaka4/items/5765dc5abf547783dc59)のなかで外部Deployができなかったので前回のコードを元にHerokuにDeployしました。
deployとは別のところで一部未完成です。

### 概要
「今オンラインミーティング中！！！！ノックしないでー、開けないでー」みたいなことで気まずい思いをしたことが増えてきたので、いわゆる トイレの空き情報「空」 みたいなサイネージが欲しくて作りました。

LINEBotに「開けないで」といれると　obnizのディスプレイに　『　×　』　を描画し
「終わったよ」　といれるとけしてくれます。
　
### できたもの
(ngrokからHerokuにかわりましたが、よく考えると見た目は前回同じだった。。。)
![IMG_20200415_214353-COLLAGE (2).jpg](https://qiita-image-store.s3.ap-northeast

Kinx ライブラリ – Range, Enumerable, for in

# Range, Enumerable, for in

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。新たにサポートした機能のご紹介。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

最近サポートした Range オブジェクトです。`2..5`、`2…n`、`1..`、`”a”..”z”`、`”a”..` といった書き方もできます。また、Ruby のように Enum

個人アプリ（link_to　使い方）

<%= link_to new_block_path do %>
press a to start
<% end %>
do〜end を忘れていてページの遷移ができなかった。

GET http://localhost:3000/block/css/css.css net::ERR_ABORTED 404 (Not Found)
記述変更
変更後 link href=”/assets/css.css/” 　　変更前 href=”css/css.css”
でエラーは解決

GET http://localhost:3000/block.js net::ERR_ABORTED 404 (Not Found)
記述変更
変更後 script type=”text/javascript” src=”/assets/block.js”>

プログラミング初心者がTECH CAMPに通うと、一ヶ月半でこのくらいのアプリを作れるようになります。

初めまして。
2020年２月17日よりTECH CAMPというプログラミングスクールに通っている寺嶋と申します。

今回は、スクールの課題である「個人アプリ」について紹介させていただきます。

マークアップ言語もロクに扱えなかったプログラミング初心者が、TECH CAMPに通ってどこまで成長するのかの参考になればと思っておりますので、スクールに通うことを検討している方はぜひ参考にしてください。

# 「男飯」取り扱い説明書

## 本番環境URL
http://18.178.138.85/users/sign_in

## テストユーザー
メールアドレス　test@gmail.com
パスワード　aaaa1111

# 制作した経緯
私自身、「今日のご飯は超簡単に済ませたい！」と考え料理投稿アプリを検索する

位置情報を送ると天気予報を教えてくれるLINE BOTを作成してみた②【LINE BOT】【Heroku DB管理】

前記事：[「位置情報を送ると天気予報を教えてくれるLINE botを作成してみました」]
(https://qiita.com/Naru0607/items/5368af476451159c2568)では、142件もの地域コードをソース上で条件分岐させていたのですが、
HerokuのHeroku Postrageを使用することで、地域コードマスタをDB管理することが出来ましたので、私の方で実施した内容をご紹介したいと思います。

BOTの名前は、weとweatherとtogetherをもじって、”we-together”です。

こちらのBOTのQRコードです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612352/d8c91b58-8785

動画の再生後に別のページに遷移する

#videoタグの場合

“`html

“`

#YouTubeの場合

“`html




nuxt.js+typescript環境で　Property ‘$bvModal’ does not exist on type~ とエラーが出てビルドできない問題をごり押しで解決

# 問題
nuxt.js+typescriptでbootstrapVueを使っていた時の事、ビルドしようとしたら以下のようなエラーが表示されてビルドできない。

“`console:
Property ‘$bvModal’ does not exist on type ‘CombinedVueInstance; }, { idNum: string; deletePermission: boolean; “name/names”: any; }, Readonly<...>>’.
“`
モーダルの制御に使う$bvModalがvueインスタンスに存在しない型だとかなんとか。

# 対処法
##正しいやり方
ちゃんと型を定義する。
##今回のやり方
Vueインスタンス側(this)をany型にダウンキャストして型の

Teachable Machineで作成したモデルを使用する方法（webブラウザ編）

#概要
　Googleが提供している画像認識の学習モデルを手軽に作成できるサービス「**Teachable Machine**」の使い方について紹介していきます。

　今回は作成した学習モデルを使ってみます。学習のさせ方については[こちら](https://qiita.com/kmaepu/items/1350464b3940dfe6957e)の記事にかきました。

　この記事ではWebブラウザで動作確認する方法を紹介しています。実行すると次のようにWebカメラで撮影した画面と、判別したポーズの確立が表示されています。

#使ってみる
　学習が完了した後、完了したPreview欄に「Export Model」というボタンがあるので、ここをクリックします。
![image.png](https://qiita-image-store.s3.ap-n

[ソースコードあり]一瞬で作るChorme拡張

#完成作品

# 所要時間
40分くらい。

#概要
ルークが”May the force be with you”というと、スターウォーズのいろんなキャラが”Always”と言い返してくれるChrome拡張を作りました。コロナで家でずっと開発している自分の癒しになればと思い作りましたw

## 動作
1. Chrome拡張を開くとこんな画面です。

2. このボタンを押すと…

Node.jsのモジュール解決プロセス(和訳)

Node.jsの`require`がどのようにモジュールを探すか、そのプロセスを説明した下記公式ドキュメントの和訳です。

* [Modules | Node.js v13.13.0 Documentation](https://nodejs.org/api/modules.html#modules_all_together)

内容に誤りがあればお教えください。

## Node.jsのモジュール解決プロセス

require(X) をパス Y にあるモジュールで実行したとき、

1. もし、 X がコアモジュールなら、
– a. コアモジュールを返す
– b. __終了__
2. もし、 X が “/” で始まるなら、
– a. Y のパスをファイルシステムルートにセットしなおす
3. もし、 X が “./”、”/”、”../”のどれかで始まるなら、
– a. [LOAD_AS_FILE]\(Y + X)
– b. [LOAD_AS_DIRECTORY]\(Y + X)
– c. 例外”not found”を投げる
4. [LOAD_SELF_

Googleが提供しているサービス「Teachable Machine」でヨガポーズの学習モデルを作って遊んでみた

#概要

コロナウイルスの影響で在宅ワークしているのですが、運動量が減って健康に悪いなと思い、簡単にヨガのポーズを診断してくれるものを作ってみました！

Teachable Machineでヨガポーズの学習させてみた。
※ヨガ未経験です(~_~;)
#うちで作ろう #protoout pic.twitter.com/cr8B4wVuXj

— まえぷ

jestでCould not find source fileが発生したときの対処法

# 原因
テストファイル名を変更したことで、キャッシュの内容と相違が生じるため
# 対処法
キャッシュを削除すれば大丈夫

“`bash
$ jest –clearCache
“`

# 最後に
`ts-jest`のバージョン`25.3.2`で修正が入るみたい。

# 参考文献
– [Github – ts-jest 25.3.1 – “cannot find source file” #1506](https://github.com/kulshekhar/ts-jest/issues/1506)