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

JSXを使わずにJS内にHTMLを記述する

#結論
複数行コメントアウト(/* ~ */)内にHTMLを記述したのみの関数を作り出し、それをtoStringして取り出す

“`getHtmlTemplete.js
let insert_html = (function(){/*

Hello World!

*/}).toString().match(/\/\*([^]*)\*\//)[1];

document.getElementById(“insert_target”).innerHTML = insert_html;

“`

##補足
・styleタグの挿入も可能
・scriptタグは挿入はできるが実行されない

JSでconsole.logの出力をしない

コンソール出力を表示しないメモ

“`js
var DEBUG_MODE = false;
if(!DEBUG_MODE) {
window.console = {};
window.console.log = function(i){return;};
window.console.time = function(i){return;};
window.console.timeEnd = function(i){return;};
}
“`

OpenplayerJSの使用法

##はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

In my opinion ***OpenPlayerJS*** is a really interesting player and I would like to show you common use cases. OpenPlayerJS is simple and easy to use.
***Plyr*** は興味深いプレイヤーなので、一般的な使用法を説明します。Plyrはシンプルで使いやすいです。

##Copyrights of videos
**Big Buck

【初心者】JavaScript　コールバック関数／JSのES5／復習・練習【備忘録１５】

##11/12～11/14に勉強したこと
###コールバック関数
引数に渡される関数のことをコールバック関数という。

【例】

“`js

const petDog=()=>{
console.log(“ココちゃん”);
};

const call=(callback)=>{
console.log(“コールバック関数を呼び出します”);
　callback();
};
//コールバック関数を呼び出すときは「();」が必要。

call(petDog);
//コールバック関数を渡すときは「()」は付けない！

“`

【出力】
コールバック関数を呼び出します。
ココちゃん

###直接、引数の中で関数を定義する場合
【例】

“`js

const call=(callback)=>{
console.log(“コールバック関数を呼び出します”);
callback();
};

call(()=>{
console.log(“ココちゃん”);
});

“`
【出力】
ココちゃん

###JSのES5
jQueryに入る前に、ES6だけでなく元々使用さ

アニメーションライブラリ Lottie

**Lottie(ロッティー)** は、**Airbnb 社**が開発したアニメーションライブラリで、2017年2月頃に発表されたものです。
これがとても面白かったので、メモとして残します。

# Lottie の特徴
– Lottie で使用するデータは、Bodymovin というオープンソースライブラリで作成します。
– 作成したアニメーションデータを Adobe After Effects で json 形式に変換し、javascript 内で指定の形式で記述すれば、そのアニメーションを表示できます。
– 通常の html, css, javascript でプログラミングした場合よりも、デザイナーの方が考えたアニメーションを再現できます。

# Lottie を使用するメリット
アニメーションデータが json 形式なので、画像や動画などの多数の、容量が大きなデータを保持する必要がなくなります。
なので、システム上の**ディスク使用率をかなり節約**できます。

# Lottie を使用するデメリット

Lottie の Web サイトのサポート機能一覧にあるように、現状実現で

window.showModalDialogを移行した話

# ようやく移行しました
Google Chromeからwindow.showModalDialogが使えなくなって久しいのですが、
アプリ利用ユーザの標準ブラウザがIEになっているので長らく棚上げしていました。

ChromeからshowModalDialogが完全になくなったのが2015年5月、FireFoxからも2017年9月になくなり、OperaはとっくにChromiumでEdgeもChromiumベースになろうととしていて、**Callbackベース**で移行したいなと考えていて方法を思いつきました。

今まで私のshowModalDialogの使い方と、それを踏襲した実装方法を順を追って書いていきます。

## 今までのshowModalDailogの使いかた

子画面から値を返すのは例えば

“`
window.opener.document.main.elementId.value = ‘xxx’;
“`
などと書いたら戻せるのですが、__子画面側が値をセットするエレメントIDを知る必要があり__子画面の汎用性がなくなるため、**window.returnVal

一週間で遊戯王風ARカードゲームを作ってみた

# AR.jsを使って遊戯王カード（アニメ版）ぽいゲームを作ってみた
初めてQiitaに投稿いたします。
10月から[G’s Academy](https://gsacademy.tokyo/)という~~プログラミングスクール~~エンジニア養成学校に通っており、入学一ヶ月の成果としてARカードゲームを作りました。
昔からの夢が実現できて嬉しかったのでみんなにも見て貰いたいです。

### お前は誰だ
前職は大手SIerで保守運用SEをやってました。
元々IT技術が好きだったのですが、SIerの管理メインの業務に違和感を持って先月晴れて退職をキメました。ビバ無職

プログラミングは独学でdotinstallなどを少しだけ触ってましたが、本格的に始めたのは一ヶ月ほど前にG’s Academyに入学してからです。
ちなみに前職では障害対応を通じてLinuxコマンドとSQLを叩きまくる経験を手に入れました。

##作ったもの
これです。
制作期間は約一週間です。

G’s Acad

constっぽい処理。

先日やたらレガシーな案件で、スポットのお手伝いとしてJSを書きました。
その時constの代わりが欲しくなって変わりの処理を書いたので一応メモ書き。

“` js
/** GlobalRegistor CLASS */ (function () {

“use strict”;

// constructor

function GlobalRegistor () {}

// static accessor

Object.defineProperty(GlobalRegistor, ‘global’, {
/**
* @return {Object} global object
*/
get: function() {
return new Function(‘return this’)();
}
});

// static

Object.defineProperty(GlobalRegistor, ‘readOnly’, { writable: false,

JQueryをVanilla JSに緩やかに置き換える

元々JQueryを多用していた物をVanilla JS（普通のJavascript)に徐々に書き換えていくポイントメモ的な物と関連記事を集めてきたもの。

***書き換えの前提***

* 時間がある時に、ちょっとずつ変えていく。一気に変更しない。
* 普通のJavascriptであれば５年以上は持ちそう。XMLHttpRequestなんて２０年前からある。
* JQueryを無理に無くそうとはしない。JQueryじゃなくても良いところを書き換えていく。(ただしJQuery1.xは脆弱性があるので3.xにする）
* 中途半端に変えるとわかりにくくなる場合もある。時間と人に余裕があるなら最初から作り直すことも考える。
* そのままでIE11でも動くようにする。Babelの使用までは考えない。

### JQueryオブジェクトをJavascriptのDOMに変換

“`js
var elm1 = $(‘.test’);
const dom1 = elm1[0]; // インデックス０番目からDOMが取得できる
const dom2 = elm1.get(0); // インデックス０

今日のサッカー日本代表W杯予選をオブジェクト指向プログラミングで振り返る

本日はJavaScriptでオブジェクト指向プログラミングや、class構文について復習していたので、サッカー日本代表のW杯予選キルギス戦を用いて復習しようと思います。

“`
//キックオフ： 2019/11/14（木） 20:15試合会場： ドレン オムルザコフ スタジアム
let Jcount = 0;
let Kcount = 0;

class STMem {
constructor(name, num, position) {
this.name = name;
this.num = num;
this.position = position;
}
goal(x) {
console.log(
x +
“分、” +
“背番号” +
this.num +
“番、” +
this.position +
“、” +
this.name +
“選手のゴール！！”
);
Jcount+

JavaScriptの基本箇所についての復習③(DOM)

#はじめに
jsは色んな事に使える言語ですが、多くはWebページを動的にするために使用されているようです。
この記事からは、jsを使って動的なWebページを作るための手法について書いていきたいと思います。

#内容
動的なWebページを作るために、まずはDOMについて学びたいと思います。

#実行

DOMとは”Document Object Model”の頭文字を取った用語で、
htmlコードのクラスやidをJavaScriptでオブジェクトとして使う事ができる仕組みです。

例えば、

“`html
前略

押す

“`

というhtmlファイルがあったとします。
これは”押す”というテキストに”btn”というクラスがついています。
例えば、このテキストの色を赤にしたい時は、cssファイルを用意して

“`css
.btn{
color: red;
}
“`
と書いてあげれば良いのでした。
あんまり使われない表現かもしれませんが、
***btnクラスをテキストにつけることによって、cssファイルの”色を変える”という処理を実

高階関数を活用してネストされたオブジェクトを安全にCRUDする

社内での質問がきっかけで高階関数でなんとかなりそうと思いサクッと作ってみたのでメモ。
オブジェクトがない場合は空オブジェクトを自動で作成するようになっているので最近話題のOptional Chainingとはちょっと違います。

\# タイトルの「安全に」はオブジェクトなくても子や孫のツリーを実現できる意図でつけました、nullやnumberなどに対してオブジェクトを追加しようとするとエラーになります

\# コメントで0や”といったfalsyが値としてセットできない指摘がありましたのでnullも入るように修正しました、ありがとうございます

“`javascript
/**
* Create, Read, Update, Delete
*/
function crud(obj, key, value) {
let result = obj[key];
if ((typeof result) === ‘undefined’) { // 値がまだなければ空オブジェクトで初期化
result = obj[key] = {};
}
if ((typeof

Webpackで名前にハイフンを含むモジュールをimportする

# どうすればいいか

ケバブケースの名前をキャメルケースに書き換える。

例：
moment-duration-formatというモジュール名なら
`import momentDurationFormat from ‘moment-duration-format’`

と書く。

# 何がしたかったのか

Webpackを使ってJavaScriptをクライアントサイドで実行している環境で、moment-duration-formatという、時間（期間）の表示を簡単にするライブラリ（Nodeモジュール）を導入したかった。

webpackを使っているので、ES Moduleスタイルで
`import moment-duration-format from ‘import-duration-format’`と書いた。

# どんな問題が起きたか

moment-duration-formatは時間を扱うライブラリであるmomentを拡張するライブラリであるためimport部は以下のようになるが

“`javascript:index.js
import moment ‘import-d

最短コードで100ループしてみる

最短のコードで100ループさせる方法を考える遊び。

“`javascript
for (let _ in […Array(100)])console.log(_)
“`

“`javascript
[…Array(100)].forEach(_=>console.log(_))
“`

“`javascript
for (let _ of Array(100))console.log(_)
“`

“`javascript
(i=>{do{console.log(i)}while(i–)})(99)
“`

“`javascript
(i=>{while(i–)console.log(i)})(100)
“`

“`javascript
let i=100;while(i–)console.log(i)
“`

“`javascript
for(let i=100;i–;)console.log(i)
“`

@shiracamus さんコメントありがとうございました！

thisのスコープ問題

ただのスコープ問題ですが、忘れたときにあたふたするのでメモ。

“`javascript:index.js
var app = new Vue({
el: “#posts”,
data: {
posts: []
},
created: function() {
axios.get(“https://○○○/wp-json/wp/v2/posts/”).then(function(response) {
this.posts = response.data;
console.log(this.posts)
})
}
});

// this.postsは[]のまま
“`

then()の中ではthisの参照先が変わってしまうので、this.postsに値を代入してもdata内のpostsは変更されない。
then()の外で変数にthisを代入して、代入した変数をthen()の中で使用することで解決！

“`javascript:index.js
v

CentOS7にcordova環境構築(GUI無し）

CentOS7にcordova (android アプリコンパイル環境含む）の構築手順

android studioは導入せず、android sdkのみ入れてみました。
GUI環境無でapkファイルの生成までできます。

“`sh
sudo yum install -y gcc-c++ make
curl -sL https://rpm.nodesource.com/setup_12.x | sudo -E bash –
sudo yum install nodejs
sudo npm install -g cordova
mkdir cordova
cd cordova/
cordova create myapp
cd myapp/
# cordova platform add ios
cordova platform add android
cordova requirements
“`

“`console
$ cordova requirements

Requirements check results for android:
Java JDK: not ins

NuxtでFATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memoryが発生する場合の解決方法

Nuxtのdevモードで`FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory`が発生する場合の解決方法です。
以下のように、`standalone: true,`を`nuxt.config.js`の`build`オプションに追加して下さい。エラーが解決します。

“`javascript:nuxt.config.js
// 略
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
standalone: true, //これを追加！
extend(config, ctx) {}
}
// 略
“`
参考: https://github.com/nuxt/nuxt.js/pull/5452

JavaScriptのimport文を使ってみた

JavaScriptのimport文は、いままでHTMLで`