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

AutoML Visionを使った鼓膜画像判別Botの作成

##概要
普段は耳鼻科の開業医をしています。
今回AutoML Visionで作成した鼓膜画像分類モデルを使った鼓膜画像判別Botを作ってみました。Botが診断するのは法的にまずいので公開はしない予定ですが、名前は鼓膜占いボットということにしておきました（占いならよさそうなので）。

前回までの記事はこちら
[GCP Cloud AutoML Vision を使った鼓膜画像分類](https://qiita.com/doikatsuyuki/items/ff00183f71347219d0f8)
[Node.jsからAutoML Vision の鼓膜画像分類モデルを使ってみる](https://qiita.com/doikatsuyuki/items/2de5e4bb09ead3cb0296)

##完成動画

AutoMLを使った鼓膜占いBot pic.twitter.com/Vye3d3Bj5K<

Kinx 実現技術 – Yacc/Bison

# コンパイラ・コンパイラの話

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。作ったものの紹介だけではなく実現のために使った技術を紹介していくのも誰の役に立つかもしれないしね。その道の人には当たり前でも、そうでない人にも興味をもって貰えるかもしれないので。ソースを具体的にさらすのは（アドホックにやってる部分もあるので）多少恥ずかしいが、どうせ OSS にしてるし、まぁいいか。

最初のテーマは構文解析。なお、以下のような感じで記事をプランしてみる。

* **コンパイル時編**
* 構文解析 … Bison を使っている。kmyacc に変えるかもしれない。（本記事）
* Switch-Case … 色々条件を判断。結構複雑。
* **実行時編**
* VM（Virtual Machine） … gcc ではダイレクト・スレッディング。
* Garbage Coll

TypeScriptでモジュールのimport/exportやrequire

TypeScriptを書いていて、たまに`import`出来なかったりして、そしたら`require`したりとか、モジュールのインポートはふんいきでやっていたんですが、TypeScriptで古いJSのライブラリの型定義を書いていて気持ち悪かったので、調べました。

## ２つのモジュールインポート方法

### CommonJS (Node.js)
#### インポート方法
– `require`

#### エクスポート方法
– `module.export`
– `export`

#### exportとmodule.exportの違い
例えば、`require(“some-module”)`とすると、`id=”some-module”`で以下のようなコードが呼ばれる

“`javascript
const module = new Module(id)
(function(export, module) {
/* モジュール本体のコードがここに差し込まれる */
return module.export
}(module.export, module)
“`

`e

React Native × React Navigation v5 で Deep linking

# はじめに
またしても React Navigation v5 の記事です。
今回は Deep linking を実装していきます。

# 下準備
iOS 用の設定をします。

`URL Types`の設定をおこないます。


次に、 `AppDelegate.m`を修正します。


コードはこちらです。

“`swift
#import “AppDelegate.h” // 元からある
#

JavaScriptで超お手軽香川県民認証をつくる

## 前文
なんかヤバげな条例がうどんでおなじみのあの県で可決されてしまったのでノリと勢いと恨みにまかせてウェブサイトに県民認証を追加します。

明日のことを気にしてばっかじゃ毎日タイクツしちゃいますのでサクッと対応して気の滅入る条例のことは一旦忘れることにしましょう。

しれっと初投稿です。よろしくお願いします。割とひどい記事かもしれません。

## 前提
すでにあるサイトにちょっとだけ手を入れて認証ぶち込みてえなというのを想定します


https://github.com/project-alisa/Ouranos

このサイトのシステム(Ouranos)はLaravelで構築しており、viewはbladeで書いています。

## 求められそうな仕様
* どのページにランディングされてもちゃんと確認する
* 県民かどうかを聞く
* 県民なら

GAS 特定の列の最終行番号を取得する

とにかくめんどくさいので自作

“`js
var headers = speadersheet.getDataRange().getValues()[1]

// 列とか変更されると辛いので、動的に常に列番号を取得
function getColumnRow(columnName) {
return header.map(function(h) {
return h.replace(/\r?\n/g, ”)
}).indexOf(columnName)
}

function getAlphabets() {
return ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’.split(”)
}

// 特定のカラムの最終行を取得
function getLastRowByColumn(columnName) {
var index = getColumnRow(columnName)
var alph = getAlphabets()[index]
var range = alph+’:’+alph
var rangeData = sh

Gulp さんぷるこーど　いろいろ

“`javascript
var gulp = require(“gulp”);
var del = require(“del”);
var rename = require(“gulp-rename”);
var concat = require(“gulp-concat”);
var uglify = require(“gulp-uglify”);
var sass = require(“gulp-sass”)

var copyTask = async function () {
return gulp.src(“./src/sample1.txt”)
.pipe(gulp.dest(“./dist”));
};

var delTask = async function () {
return del(“./dist/*”);
};

var renameTask = async function () {
gulp.src(“./src/sample1.txt”)
.pipe(rename({ suffix: “.mi

条件分岐

#はじめに

Javascriptで条件分岐を行う際、
3つの方法が存在します。

###if文、else文、else if文です。

この3つについて説明していきます。

#if文

「もしも○○だったら〜」
という、処理を行いたい時に使用します。

#else文

今までの処理で、(true)にならなかった時に
使用されます。

#else if文

1の場合、2の場合、それ以外の場合、
というように条件を複数設定するときに使用されます。

#記述方法

テストの点数で例えてみましょう。

“`js

var seiseki = 70;

if (seiseki > 60){
alert(“あなたの成績は60点以上”);
}else if (seiseki > 50){
alert(“あなたの成績は50点以上です”);
}else{
alert(“あなたの成績は50点未満です。”);
}
“`

このようになり、記述方法で、
alertで表記されるのは、「あなたの成績は60点以上」になります。

#注意事項

else if文を使用する際は、
実行順序に気を付けま

A-FrameでWebVRのカメラをトラッキング

#A-Frame
バーチャルリアリティ体験を構築するためのオープンソースのWebフレームワークの一つです。
https://aframe.io

#Entity Component System

>A-FrameのEntity Component SystemのComponentは外観・動作・機能を構築するためにEntity上で組み合わせ・照合・および構成できるJavascriptモジュールです。
JavaScriptでComponentを登録し、DOMから宣言的に使用できます。
Componentは構成可能・再利用可能・および共有可能です。

>A-FrameアプリケーションのほとんどのコードはComponent内に存在する必要があります。

[*

JavaScriptで *タブ* を作成する方法 windowオブジェクト

## タブとは何か？

タブとはドキュメントを切り替えて表示するためのGUIウィジェットである。一般的には長方形のボックス中にテキストラベルを表示する形で画面上部に表示され、タブの選択により**管理するドキュメントを切り替えて表示させる**仕組みとなっている。

>wikipedia
https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%96_(GUI)

**<完成品>**
*タブが作成されます！*

永遠に続くクソ計算クイズ2 typescriptで

## 成果物
https://yuzuru2.github.io/neta1/dist/

## リポジトリ
https://github.com/yuzuru2/yuzuru2.github.io/tree/master/neta1

## UI

## src/index.ts

“`typescript
// くそIEに対応させる
import ‘babel-polyfill’;

class Calculation {
private static instance: Calculation;

// 秒数
private count = 15;

// タイマーで使う
private time_id;

// シングルトン
private constructor() {}

// dom
private

インクリメンタルサーチで追加済みユーザーが検索されないようにする

## 目的
チャットアプリのグループメンバー追加ページを以下の仕様で作成する。
– インクリメンタルサーチでメンバー検索をして登録リストに表示
– 登録リストに表示されたメンバーを登録ボタンで追加リストに登録
– 登録されたメンバーは登録リストに表示されない

## 問題点
登録されたメンバーが登録リストに表示されてしまう。

## 考え方
検索されたメンバーのIDが追加リストに登録されたメンバーのIDと重複しない場合のみ表示させれば良い。

## コード
“`javascript:before.js
users.forEach(function (user) {
if (user.id) {
addUser(user);
}
})
“`
“`javascript:after.js
users.forEach(function (user) {
let idNum = document.getElementById(user.id);
if (user.id && !idNum) {
addUser(user);
}
})
“`

Vueの$routeがどうしてもundefinedになってしまう

# 反省文

Vueでルーターの設定をしようとしていましたが、なぜか何をやっても設定がVueに反映されません。

下のどちらかのコードには間違いがあります。

“`a.js
import router from “./router”;

new Vue({
router,
render: h => h(App)
}).$mount(“#app”);
“`

“`b.js
import Router from “./router”;

new Vue({
Router,
render: h => h(App)
}).$mount(“#app”);
“`

a.jsの方は動きますが、b.jsの方は動きません。動かそうとするとこんなエラーが出て止まります。

“`javascript
vue.esm.js?efeb:628 [Vue warn]: Error in render: “TypeError: Cannot read property ‘meta’ of undefined”

found in

—> at src/App.vue

TypeScript 型 メモ

## 型リテラル
### `[]`
– 空のTupleを表す
– `Params`は関数の引数がないときに引数の型は`[]`になる

### any
– すべての型の値を代入することができる
– あらゆるプロパティがあるものとしてアクセスすることができる
– すなわち型システムとしてこいつは崩壊しているので使用するべきではない

“`typescript
const notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn’t check)
“`

### unknown
– 他の言語で言うany

[TypeScript 3.0のunknown型 – タイプセーフなany – Qiita](https://qiita.com/suzuki_sh/items/9b168b44d1d21c127aeb)

### void
– 他の言語で言

ウェブサービスの主な機能について

# 主な機能一覧

###ユーザー管理
1.ユーザー登録機能
2.ログイン機能
3.ログアウト
4.プロフィール登録
5.プロフィール編集
6.退会
7.パスワード変更
8.パスワードリマインダー
9.管理者ユーザー登録

###コンテンツ管理

10.コンテンツ登録
11.コンテンツ編集
12.コンテンツ削除
13.コンテンツ一覧表示
14.コンテンツ詳細表示
15.コンテンツ検索
16.お気に入り登録
17.決済

基本的には上記の機能を実装し、そこに追加で機能を付け足していくことでほとんどのウェブサービスを作ることが可能になる。

JavaScriptの論理演算で値に対して「または」を使いたい時のTip

JavaScriptの学習中に、論理演算の課題に取り組んだ際に「または」の表現で悩んだので備忘録も兼ねてまとめます。
具体的には値について「または」を使いたい場合の考え方です。

以下の記事を参考にさせていただきました。
https://wp-p.info/tpl_rep.php?cat=js-application&fl=r6
https://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r19

#課題内容
ジャンケンで、自分が出したい手(user_hand)をpromptに入力し、

1. グー・チョキ・パーが入力された際にはランダムに生成したJavaScript側の手(js_hand)との勝敗を出力
2. グー・チョキ・パー以外の文字列が入力されたときは、「グー・チョキ・パーのいずれかを入力してください」とアラートを出し、もう一度入力させる。
3. キャンセルボタンが押されたときは「またチャレンジしてね」を出力

別途、JavaScript側の手のランダム生成はgetJShand、勝敗の判定・出力はjudgeという関数を組んでいます。

#困

【備忘録】JavaScriptでfilterに通る値とは ～ nullとかundefinedとか空文字とか～

###はじめに

JavaScriptで `filter` を使用しているときに「あれ？なんでこうなるんだ？」ってつまづいたところを備忘録として記載します。

###つまづいたところ

例えばこちらのコード

“`javascript:例
var fruits = [”, null, undefined, ‘mango’, ‘orange’];
var text = fruits.filter(value => {
return value;
});
console.log(text);
“`

“`javascript:結果
[“mango”, “orange”]
“`

`空文字` とか `null` とか `undefined` をfilterにかけるだけでそれらを抜かした配列ができている。。。。！！
ほぉーなんでだろーと調べました。

###説明

調べてみると、MDNサイトにちゃんと説明がのっていました。

[Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaS

Reactは怖くない！入門1

## はじめに
Reactが怖い、書き方全くわかんない！！って人がReactに抵抗がなくなることを目的としてこの記事書いてます。
めちゃくちゃ噛み砕いてるつもりです。
間違った表現や、もっと説明するべきものがあれば教えてください。
初心者の方は、ガンガン質問してもらえると嬉しいです。

## Reactって何
javascriptのライブラリ
UIを部品と考えその部品をたくさん作り、それを組み合わせて画面を作ることができます。

## ディレクトリ構造（例）
“`
src/
components/
Hoge.js
index.js
App.js
public/
index.html
package.json
webpack.config.js
“`
### 各ディレクトリの説明
#### src/
reactのcomponentというか実装はこの中に全部書いていく

#### public/
htmlファイル、画像ファイルはここに配置する。
webpackでビルドされたファイルの出力先もここになることが多い

#### packag

スクリプト言語 KINX/ライブラリ（File/Directory）

# ライブラリ（File/Directory）

## はじめに

「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」でお届けしているスクリプト言語 Kinx。[前回](https://qiita.com/Kray-G/items/4c6011279d0bd3036da8)の記事で **プレビュー・リリースしたぜ** と勇み足ぎみに突っ走ったが、マニュアルが整っていないので、やはりなかなか使いづらいに違いない。現時点で参考になるのは以下しかないし、英語なので。

* [Quick Reference Guide](https://github.com/Kray-G/kinx/blob/master/doc/QuickReference.md)
* [Kinx Specification](https://github.com/Kray-G/kinx/blob/master/doc/spec/README.md)
* [初回紹介記事](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76) からの各

Node.jsからAutoML Vision の鼓膜画像分類モデルを使ってみる

##概要
普段は耳鼻科の開業医をしています。

前回の記事はこちら
[GCP Cloud AutoML Vision を使った鼓膜画像分類](https://qiita.com/doikatsuyuki/items/ff00183f71347219d0f8)

今回は作成したAutoML Visionの鼓膜画像分類モデルをNode.jsから使ってみました。

##作成
**1.プロジェクトの作成**

こちらを参考にしました
[Cloud AutoML: Node.js Client](https://googleapis.dev/nodejs/automl/latest/)

“`index.js
require(‘dotenv’).config();//.envを読み込む

const automl = require(‘@google-cloud/automl’);
const fs = require(‘fs’);

// Create client for prediction service.
const client = new automl.PredictionSer