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

ChromeのデベロッパーツールのコンソールでJavaScriptのライブラリをちょこっと使いたいとき

# はじめに
CDNがあるライブラリ限定となります。
環境作るのめんどくさいときに役立つかと思います。

## 例
試しにmoment.jsをコンソールで使えるようにします。

“`.js
const script = document.createElement(‘script’)
// scriptタグを作る

script.src = ‘https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js’
// srcにCDNのURLを入れる

document.getElementsByTagName(‘head’)[0].appendChild(script)
// headタグにscriptタグを入れる

const now = moment()
now.toDate()
// Thu Dec 19 2019 11:00:54 GMT+0900 (日本標準時)
“`

Javascript indexOf() のちょっとした罠

## ちょっとした罠

気軽に文字列検索したいとき、正規表現使ったりするほどでもないなというとき、indexOf()を使いたい。

ただそんなとき、

“`javascript
Var string = “abcdefg”;
if( string.indexOf(‘abc’) ){
// true
console.log(‘true’)
}else{
// false
console.log(“false”)
}

“`

みたいに書いたとしたら

“`zsh

false
“`

とでてくる。

## なんでfalseになるのか？

これはindexOfの返り値は「True/False ではなく ヒットした文字列の出現位置」であり、なおかつ「1文字目は0番目」という仕様が関係している。
つまり、「0番目にヒットした」という意味で `string.indexOf(‘abc’)` の返り値は `0` となり暗黙変換によって `0 = false` として処理されることによる。。

厳密にfalseを取るためには、マッチしなかったときの返り値である -1 と比較

コーディング習慣改善

#はじめに
これは「[Linkbal Advent Calendar 2019](https://qiita.com/advent-calendar/2019/linkbal)」の19日目の記事です！
今年の10月から弊社に入ったばかりなのでなかなか勉強しなければならないことは全くたくさんあるはずです。新し技術だけではなくコーディング規約も身につけるようにしています。
その中に非常に細かいことですが改善しないと悪い影響を与えることは**コーディング習慣**です。つまり、悪い癖を直すべきです！以下はよくつける癖です。

#コードブロックは短いの方が良い？
確か皆さんはプログラミングすると、コードブロックをきなるべく縮小するようにしますね。「コードが短いと実行時間も短いはずだ」と考える人は少なくないと思っています。僕もそう思いましたが、実はそのことが本当でしょうか。いつも正解訳ではないんです。:pensive:

コードブロックを縮小するために関数を何回も無駄に呼び出すと時間がかかることもあります。以下の例を一緒に見ましょう。これは例だけなのでコードの目的はこだわらないでください。

“

退職者を送る技術 – Twilio と Socket.IO で作る電話マルチプレイシステムの小ネタ

この記事は [DeNA Advent Calendar 2019](https://qiita.com/advent-calendar/2019/dena) の12/19(木)の記事です。


会社で代々行われている文化である、非テック縛りの、謎 LT 大会のタイミングがちょうど退職者の最終出社日にあたったため、寄せ書きがわりに「不特定多数のマルチプレイゲームシステム」を開発しました。
（LT 会ではテックな話はせず、ここですることにしました）

開発したシステムはクイズとシューティングゲームの二種類ですが、表示が違うだけで技術は同じです。

なお今回ご紹介する内容は忘年会や新年会、または春の歓送迎会など、イベント向きのシステムであったりもしますので、この記事を小ネタとしてストックとしてご活用いただけたらと

【業務】『何使ってもいいよ』と言われたプロジェクトにReactを導入して感じた事【利用経験者ゼロ】

Reactというフレームワークに魅入られ**『いつか業務で使ってみたい!』**と焦がれ幾年。
巡り巡ってようやくReact開発のプロジェクトに出会えた際に感じた事を、記事にまとめようと思います。

## 筆者について
– Webエンジニア
– 業務ではjQueryでDOM操作ゴリゴリというプロジェクトを転々
– React自体は未経験ではなかった
– v14辺りから個人的な学習は重ねていた
– **業務での利用経験はゼロ** ~~タイトル詐欺??~~

## プロジェクトについて
– (当然)Webアプリケーション開発のプロジェクト
– バックエンドはPHP
– 業務系のBtoBなアプリケーション(not SPA)
– 他メンバーは筆者と違い、ReactやモダンなJSフレームワーク自体が完全に初体験

## 経緯
– 参画当初、具体的なフロントエンドのアーキテクチャは決まっていなかった。
– 『jQueryで作ろうかなー、なんか他にイイのある?』くらいの温度感
– Reactを提案してみる → あっさり『**イイね!みんなで勉強しながら

Intersection ObserverのrootMarginには負の値を指定できる

# tl; dr

– IntersectionObserverの`rootMargin`オプションに`’-50% 0px -50% 0px’`とか指定できる
– 要素が画面の真ん中に来たときにイベント発火！とかできる

Google Chrome Version 79で確認しています。

# Intersection Observerとは

[Intersection Observer API \- Web API \| MDN](https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API)

JavaScriptにおいてDOM要素の交差を監視することができるAPIです。
いままでonscrollなどで実装していた画像の遅延読み込みなどが簡単、効率的に実現できます。

使い方としてはこんな感じ

“`javascript
var intersectionObserver = new IntersectionObserver(function(entries) {
// intersectionR

[約束のネバーランド] Vue.jsでミネルヴァさんのモールススタンプを描いてみる

私が今年最もハマった漫画「約束のネバーランド」で登場する、ミネルヴァさんのモールススタンプをVue.jsで作ってみました。

まずは完成したものをどうぞ…

[こちら](https://minerva-morse-evtbiligq.now.sh/)で実際に遊べます
いらすとやさんのおかげもあって、なんだか本家よりもファンシーになっていると思います。

## コードの解説

https://github.com/minojiro/minerva-morse

まず、スタンプのSVGはVueのコンポーネントになっていて、propでメッセージを渡すとスタンプのSVGが作られます。

こんな感じです。

“`vue

Vue.jsでのボタン制御の方法

# はじめに
これはVue.jsに触り始めて間もない私が、自分で書いたコードを公式ドキュメントを参考に修正するといった内容になります。
そのため、私と同じようにVue.jsに触り始めた方の参考になれば幸いです。

# 具体的な内容
先日Vue.js+firebaseでSPAを作成したのですが、Vueを学び始めて数日だったので、**ボタン制御の部分**で誤った実装をしてしまっていました。
その時はこれでいいやで済ませたのですが、[公式ガイド](https://jp.vuejs.org/v2/guide/)を読んでいる際に正しい実装方法が載っていたので、これをもとにコードを修正しようと思います。

# 動作のイメージ

今回の対象は入力フォームに何も入力されていなかった場合にボタンが非活性になるという単純なものです。

# 元のコード
“`vue

非Javascriptエンジニアのための「オブジェクト」

[前回 – 非Javascriptエンジニアのための「Javascriptの制御構文（後編）」](https://qiita.com/akumachan/items/639a8d7b1d7e3326639c)

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)をベースに書いているデモ。

ここまで記事を半月書いてきて気づいたデモ…
**Advent Calendarの間に絶対最後まで終わらないデモ！！

Javascript復習①

Javascriptの復習もかねて記事を書いていきます。
今日は関数と配列について。

##関数の書き方

###①関数宣言
“`
function wanko(){
}
“`
wankoという関数名をつけて関数宣言しています。
おなじみですね。

###②関数式
“`
const wanko = function(){
}

const wanko = () => {
}
“`
無名関数というやつです。
関数はデータの方として存在しているのでこのような書き方が可能になります。

Functionオブジェクトのオンストラクタを使った書き方もあるのですが、ほぼ間違いなく使わないので省略します。

##書き方
“`
const p = document.createElement(‘p’);
p.textContent = ‘wanko’;
documen.body.appendChild(p);

これを関数にすると

function toypoo(){
const p = document.createElement(‘p

JavaScriptで配列内の文字列から最も文字数の小さい要素を取得する方法。

# はじめに
短く書くにはどうすればいいか調べたのでまとめたよ。

# ゴール
“`javascript:index.js
const string = “Lorem Ipsum is simply dummy text of the printing and typesetting industry.”;

function findShortWord(s){
return Math.min(…s.split(” “).map (s => s.length));
}

console.log(findShortWord(string));
“`

# 概要
## Math.min()
* 引数に渡された一番小さい値を返す。
* [MDN Web Docs – Math.min()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/min)

## スプレッド構文（…）
* 配列・関数の引数・オブジェクトを個々に展開できる。
* [MDN Web

Node.jsのバージョンを上げた際のnode-sassのビルドエラー

ほんとにどうってこと無いメモです。

久々に開発しようとしたNuxtJSプロジェクトで、node-sassがコケました。
[node-sass](https://github.com/sass/node-sass)はv4.13.0です。

“`bash
$ yarn dev

・
・
・

● Client █████████████████████████ building (61%) 431/466 modules 35 active
node_modules/markdown-it/lib/rules_core/state_core.js

✖ Server
Compiled with some errors in 9.34s

✖ Client
Compiled with some errors in 13.93s

✖ Server
Compiled with some errors in 9.34s

ERROR Failed to compile with 1 errors

[ReactNative] expoのAppAuthでOAuthを実装してみる

# What
expoの[AppAuth](https://docs.expo.io/versions/latest/sdk/app-auth/?redirected)の登場で、イジェクトなしでOAuth実装が非常に簡単になりました。
マイナーなSNSとの連携が必要な場合に非常に重宝しますね。

実装手順は以下
グーグルログインの場合

“`react

import * as AppAuth from “expo-app-auth”;

const config = {
issuer: “https://accounts.google.com”,
clientId: “クライアント識別子”
scopes: [“profile”]
};
const tokenResponse = async () => {
try {
const authState = await AppAuth.authAsync(config);
console.log(authState);
} catch ({ message })

Vue初級者がPropsとv-Slotをどう使い分けるかを考えた話

#はじめに
**Vue.js**をある程度やり、**props**で子コンポーネントにデータの受け渡しをできるようになった…。
ところで**Slot**てあるけど、どういうシチュエーションで使っていくのだろうか、ってのを考えていきましょう。
ついでに**Props**とどう使い分けていくのかも。
#おさらい
まずは**Props**と**Slot**は何なのかのおさらいをしていきましょう。
###Propsとは
[Props – Vue.js](https://jp.vuejs.org/v2/guide/components.html#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E5%AD%90%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%B8%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E5%8F%97%E3%

Amazonの注文履歴ページから商品のASINコードを取得する雑JavaScript

これを参考にした

– Amazonで一年間に使った金額と、注文履歴のTSVを出力するブックマークレット【2015年版】
https://qiita.com/koyopro/items/d8b259f1eb75a01d3a0b
– koyopro/amazon-calc.js
https://gist.github.com/koyopro/a480a45712ccf1bf239c

下記スクリプトを、注文履歴ページ上で対象期間を絞った上で実行すると、商品名・ASINコード・商品ページURLが記載されたcsvが吐き出される。

ReactNative AndroidのBrige解説

## 機能
– Native Modules
出来ること
・関数の作成
・イベントの通知
・コールバック

– Native UI Components
出来ること
・Viewの作成
・Viewのイベントの通知

## Native Modules
ダイアログを表示するModuleを例にします。

**[機能]**
1, Androidのダイアログを表示する。（関数の作成）
2, ダイアログの”OK”ボタンがクリックされたらコンソールに”true”が表示される。（イベントの通知）
3, “DATE”ボタンがクリックされたら現在時刻が表示される。（コールバック）

“`java:DialogModule.java
public class DialogModule extends ReactContextBaseJavaModule {
// コンストラクター
public DialogModule(@NonNull ReactApplicationContext reactContext) {
super(reactContext);
}

JavaScriptのArrayとLuaのtableの比較

# はじめに

Qiitaに下書きが多すぎて新しい記事作れませんと言われたので途中まで書いて放っておいた記事をとりあえず投稿して下書きを減らします、すみません。

***

JavaScript の Array は「0以上の整数のキーを特別扱いするコレクションオブジェクト」と捉えると
Lua の テーブルに結構似ています。（テーブルは1以上ですが）
（実際にはArrayオブジェクトはObjectを継承しているものの、独自にプロパティを
　設定することは推奨されていない気がします）

– JavaScriptのArrayとLua（5.3）のテーブルの比較
– Arrayにあってテーブルにないものの中で便利そうなのはLuaでも実装してみる

をやっていこうと思います。

– JavaScriptは下記参照先の表記優先（その他、ブラウザやVScodeのデバッグ）
– Luaは lua.exe (lua-5.3.5_Win64_bin)にて確認
– Luaはやっとメタテーブルをなんとなく理解してきたレベル
– JavaScriptは調べながらじゃないとFizzBuzzも怪しいレベル

[Ar

[javascript]2つのarrayで完全一致と部分一致

たまに使いたくなるけど、書き方忘れるので備忘録。

“`javascript:変数
const baseArray = [1,2,3,4,5,6,7,8,9,10]
const target1 = [10,9,8,7,6,5,4,3,2,1]
const target2 = [1,2,3]
const target3 = [11]
“`

“`javascript:完全一致(every)
baseArray.every((num) => target1.includes(num))
> true

baseArray.every((num) => target2.includes(num))
> false

baseArray.every((num) => target3.includes(num))
> false
“`

“`javascript:部分一致(some)
baseArray.some((num) => target1.includes(num))
> true

baseArray.some((num) => target2.includes(

PlayCanvasで作成したゲームをPWAにしてAndroid端末へインストールする

### PlayCanvasで作成したプログラムをPWAにしてリソースをキャッシュする

はがです。

PlayCanvasアドベントカレンダーの記事となります

####

今回のデモはこちらになります。

コインドーザー
[https://yushimatenjin.github.io/](https://yushimatenjin.github.io/)

#### PlayCanvasからダウンロードします

まずPlayCanvasで作成したプロジェクトをダウンロードします。

#### ダウンロードされたファイルについて

PlayCanvasからダウンロードされたファイルは、`index.html`を始めとする静的なファイルが入っているものになります。


#### PWA対応のウェブサイトを作る

PlayCanvasで作ったゲームをPWAに対応させるために２つのファイルを追加します。

– serviceWor

jsで配列の特定keyだけ取り出してカンマ区切りの文字列にする

#jsで配列の特定keyだけ取り出してカンマ区切りの文字列にする

言葉だけだと何言ってるの？？ってなるので

表示だけ考えて文字列でカンマ区切りで最後は必要ないってやつ

“`javascript
// これを
const array = [
{id: 1, category: ‘ねこ’, name: ‘ポチ’},
{id: 1, category: ‘ねこ’, name: ‘ねこねこ’},
{id: 1, category: ‘いぬ’, name: ‘にゃん’},
];

// ↓↓↓ こうしたい ↓↓↓
const string = ‘ポチ, ねこねこ, にゃん’;
“`

## 結論

“`javascript
function(array) {
// 配列からnameだけ取り出して「,」区切りの文字列にする
return array.map( (row) => {return [row[‘name’]]} ).join(‘,’)
},
“`

## 分解

“`javascript
function(array) {
// 配列からke