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

`SyntaxError: Cannot use import statement outside a module` JSでimportの箇所でエラー起きる

### エラー
“`
(node:211) Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
~/getMessageOnSlack.js:1
import axios from ‘axios’;
^^^^^^

SyntaxError: Cannot use import statement outside a module
“`

### 解決法
エラーが言っているように、package.jsonに`type:module` を追加するだけ

“`package.json
{
“name”: “”,
.
.
.
“type”: “module”,
}

“`

`SyntaxError: Cannot use import statement outside a module` JSでimportの箇所でエラー起きる

### エラー
“`
(node:211) Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
~/getMessageOnSlack.js:1
import axios from ‘axios’;
^^^^^^

SyntaxError: Cannot use import statement outside a module
“`

### 解決法
エラーが言っているように、package.jsonに`type:module` を追加するだけ

“`package.json
{
“name”: “”,
.
.
.
“type”: “module”,
}

“`

Vueのwatchで自分自身の状態を変更したときに変な動き

Vue 2.6.11 で確認

v-modelでバインドした変数を監視したとき、
つまり

“`html

オンにならないはず

{{ getString(check) }}

“`

こんなんがあって、

“`javascript
new Vue({
el: “#app”,
data: {
check: false,
},
methods: {
getString: function(target) {
return JSON.stringify(target);
},
},
watch: {
check: function(){
if (this.check) {
this.check = false;
}
}
}
});
“`

チェックボックスオンにするけど、watc

Railsでvue.jsとvuetifyとjqueryを一緒に使う方法

現在、ポートフォリオを作成している途中のゆーた(@onoblog)です。

**vue.jsとjqueryを同時に使いたい!!!**

そんな中で、しばらく思考錯誤し、Railsとvue.jsとvuetifyとjqueryを、erbファイルで使いたい思い使える方法を、
見つけたので共有したいと思います。

##環境
– rails 5.2.3
– jquery-rails (4.3.5)
– vue/cli 4.1.2
– yarn 1.21.1
– webpacker (5.0.1)
– Docker 19.03.5
– docker-compose 1.25.2
– nginx 1.15.8

##結果

このようにerbファイルで、

–

Choices.jsをカスタマイズし、2行のセレクトボックスを作成する！

この記事では、ありそうでなかった？2行のセレクトボックスを作る方法についてご紹介します。

完成例がコチラ?

See the Pen
CustomSelect by tuubo ((フロントエンド初心者)AngularのPWA少しずつちゃんとやる。デプロイしたら端末側は最新状態に画面をアップデートしたい(Todoistみたいに)

PWA簡単にできますよっていうQiitaの記事はみましたが、本当かな。
PWAが一度有効になるとServiceWorkerから情報取るのでデプロイで新しいソースが来ても端末側で更新できない問題がすぐに見つかる。どうすんの。
Todoistとかはこの辺うまくやってるのですごいなぁと思う。
公式ドキュメントは日本語よみにくいことこの上なし

この辺の情報は日本語でググっても情報なかったので私がググった結果をリンクおいておきます

## 結論
下記を実装しましょう
https://medium.com/@arjenbrandenburgh/angulars-pwa-swpush-and-swupdate-15a7e5c154ac 記事のGithub

* https://github.com/arjenbrandenburgh/medium-pwa-example/pull/3/files#diff-465e9f13ce23ec4a1e366935273fdbb6R8-R10

と、updateがうまく行かないので下記を

* https://stackoverflow.com/questi

Reactチュートリアルをやってみて

## ■ やってみたこと

– [Reactチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)
– 五目並べを作りつながらReactを学んでいくチュートリアル
– [チュートリアルの最終結果](https://codepen.io/gaearon/pen/gWWZgR?editors=0010) に少し手を加えた。
– 各componentをファイルに分割
– React Hooks を使うように変更
– Jest, Enzymeでテストを実装
– コードはここに置いてあります

## ■ チュートリアルの最終結果

“`jsx
function Square(props) {
return (

{props.value}

);
}

class Bo

setTimeoutとsetInterval

#JavaScriptの関数

###繰り返し手順で必要な4つの関数
####setTimeout,clearTimeout,setInterval,clearIntervalという4つのグローバル関数について

setTimeoutとsetIntervalは、指定した時間（ミリ秒）が経過したらコールバック関数を呼び出す関数。
コールバック関数とは、他の関数の引数として指定された関数のこと。（関数Aに引数として渡す別の関数B）

setTimeout・・・一度だけコールバック関数を呼び出す。
setInterval・・・ブラウザを閉じるか、ページを移動するまで繰り返す。

呼び出しを止めるには、
setTimeoutかsetIntevalの戻り値をclearTimeoutとclearIntervalへ渡す。

“`
let タイムアウトID = setTimeout(コールバック関数,ミリ秒);
let インターバルID = setInterval(コールバック関数,ミリ秒);

clearTimeout(タイムアウトID);
clearInterval(タイムアウトID);
`

もっと気持ち悪く if を関数化したい

元ネタ:[4歳娘「パパ、constしか使わないで？」](https://qiita.com/Yametaro/items/17f5a0434afa9b88c3b1)

仕組みについては [Haskell の記事](https://qiita.com/yumura_s/items/d5ede4cc88f9ade72aed)を読んでいただきたく。

“`.js
// 代数的データ型を関数に、
// パターンマッチを関数適用に見立てる宣言
const caseOf = match => adt => adt(match);

// Haskell の Maybe を意識した何か
const Nothing = () => ({Nothing}) => Nothing();

const Just = x => ({Just}) => Just(x);

const guard = flg => flg ? Just() : Nothing();

const fmap = f => caseOf({
Nothing,
Just: x => Just(f(x))
});

const

Kinx ライブラリ – Net.Http

# Network – Http

## はじめに

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

今回は Network(Http) です。

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

libcurl を抱えているので Http 以外も作れるはずだが、まずは一番欲しいのは Http/Https でしょう。

## HTTP

【サクラエディタ】文字列を一括で複数置換する

“`javascript:plus1.js
//☆使い方☆
//①エクセルの1行目に置換前、2行目に置換後を記入。
//②対象データ範囲をコピーし、クリップボードに登録。
//③処理対象文字列を選択し、マクロ実行。
var listConv = function (inStr, inClip){
var convList = inClip.split(‘\r\n’);
for(var i in convList){
var convRecord = convList[i].split(‘\t’);
var oldStr = convRecord[0];
var newStr = convRecord[1];
if(typeof oldStr === ‘string’
&& typeof newStr === ‘string’){
inStr = inStr.replace(new RegExp(oldStr,’g’), newStr);
}
}
return inStr;
}
//(INPUT)選択範囲

【初心者】addEventListenerでnullエラーが出る。

インターネットを参考にしながらjavaScriptでトグルメニューを作る方法を勉強した。

しかし、Chromeにて、いざ実行すると
「Cannot read property ‘addEventListener’ of null」
というエラーが発生する。

はい？何故ですか？？
エラー文を読むと、「addEventListener」が「null」である事が分かる。
id関係のエラーであると予測し、文法ミスをく

初心者がWordPressでタイピングのリアルタイム対戦ゲームを作ってみました

#はじめに
この記事は、WordPressでしかホームページを作れないプログラミング初心者が、無理やりWordPressを使って、タイピングのリアルタイム対戦ゲームを作ってみた記事です。
タイピング初心者用に、７０近くあるステージをクリアしていくモードもあります。

IT系の集まりで、「WordPressでこのサイト作ったよ」って言ったらどよめきが起こり、「Qiitaに書いてみれば？」と言われたので書いてみます。

ちなみに、[タイピンガーＺ](https://typingerz.com)というサイトです。

このサイトをWordPressでどうやって作ったのかを、ざっくり書いていこうと思います。

#テーマのテンプレート
はるか昔に購入した有料テンプレートを使ってみましたが、改造しすぎて原型をとどめていないので、なんでも良かったと思います。

#記事投稿と固定ページテンプレート
タイピンガーＺは、対人対戦を除いて、ステージをクリアしていく仕組

Angularでアプリのテーマ管理

#はじめに
世の中にダークモードが流行ってる中、ダークモードを実装するには色んな方法がありますが、今回はAngularでアプリのテーマ (背景、色)を管理してみった。

今回のアプリに使用したものはこんな感じです。

– Angular 9
– Angular Material 9.2.1

##Angular Materialによるカラー管理
Angular Materialのインストールと設定が終わりましたら、まずはテーマ作成用のscssファイルを作成する。
最初はAngular Materialのテーマ機能をインポートして、コアmaxinをincludeする。
これでAngular部品のテーマ作成機能が使えるようになりました。

##カラーパレットを設定
![image.png](https://qiita-image-store.s3.a

【忘備録】Javascript : varとlet、宣言に使うべきは？スコープの違いから理解

## はじめに
今まで Javascript で変数宣言をする際に let を使っていたけど、その理由がよくわかっていなかったのでまとめます。
## まとめ
・ 変数には「グローバル変数」と「ローカル変数」があるよ。
・ 基本型と参照型の変数で処理の流れが変わるよ。
・ やっぱり、varよりletを使った方がいいよ。

#先ず、最初にスコープのおさらい。
## ⑴グローバル変数とローカル変数
基本、関数内で定義された変数が「ローカル変数」です。
**ローカル変数は関数全体でのみ有効な為**、グローバル変数に影響しません。

“`js:javascript.js
var scope = “global”;

function getScope(){
var scope = “local”;
return scope;
}
console.log(getScope()); //=> local
console.log(scope); // => global

“`
上のコードを見てもらうとわかる通り、グローバル変数 scope とローカル変数 scope は同じ変数名でも互い

Chart.jsとAPIによるコロナウイルスのデータのグラフ化～Vueを添えて～

はい、皆さんこんにちは！
ある日ネットサーフィンをしていたら、数値を基にグラフを作成してくれる「Chart.js」と世界のコロナウイルスに関するデータを提供してくれるAPIを見つけたので、今日はこれらとVue.jsを組み合わせて世界のコロナウイルスのデータを表示するグラフを作っていきたいと思います。

#今回作るもの
APIから国別のコロナウイルスについてのデータを取得し、そのデータをChar.jsを使って棒グラフとしてブラウザ（今回はGoogle Chrome）へ映すプログラム。また、今回扱うAPIはコロナウイルスについて数種類のデータを提供しているため、グラフの利用者がほしいデータの種類を利用者自身がブラウザ上でを選べるようにする。

#本日の材料はこちら
– Chart.jsファイル（ダウンロードは[こちら](https://www.jsdelivr.com/package/npm/chart.js)）
– API(ダウンロードは[こちら](https://covid19api.com/))
– Vue.js(グラフの値の操作等で使うだけなので、面倒くさければjavascript

【Rails】住所を入力すると自動で地図表示される方法(Google Maps API)

#はじめに
ポートフォリオ制作で、Google Maps APIを用いて住所フォームを送信した際に住所名と地図を自動で地図表示される設定を行ったので、アウトプットも兼ねて手順を紹介していきます。

#手順
1.Google MapのAPI Keyを取得
2.住所(address)、緯度(latitude)、経度(longitude)カラムを追加する
3.住所を登録するフォームを作成する
4.gem geocoderを追加する
5.viewにGoogle Mapを表示させる記述を追加する
6.詳しい住所を表示させる
7.GitHubにPushされないように設定する
8.APIキーの書き換え
(その他)AWSでデプロイしている場合

#1.Google MapのAPI Keyを取得
APIの取得はこちらの記事がわかりやすいので参考にしてみてください。

https://qiita.com/tiara/items/4a1c98418917a0e74cbb

#2.住所、緯度、経度カラムを追加する

住所(address)、緯度(latitude)、経度(longitude)カラムを追加し

jsPsychによる心理学実験作成チュートリアルまとめ

# はじめに

本シリーズは，サイモン課題の作成を通して，jsPsychで心理学実験を行うために最低限必要なスキルを身につけることを目標としています。

具体的には，以下の4つです。

1. 参加者情報の入力（[第6回](https://qiita.com/snishym/items/e0f82fa972970cda632c)）
2. 課題の教示（[第7回](https://qiita.com/snishym/items/2296fc1aff6d711aaa0b)）
3. 刺激のランダム提示（[第1回](https://qiita.com/snishym/items/45cfd220f7af8c7a13e0)，[第2回](https://qiita.com/snishym/items/a121a4d6a02c71b69f3e)，[第3回](https://qiita.com/snishym/items/bec56308c67922c3b3df)，[第4回](https://qiita.com/snishym/items/ccbf53e64e313584dd48)）
4. データの保存（

Reactチュートリアル　◯✖️ゲーム

##Reactで作る　◯✖️ゲーム

公式サイト 　　　https://ja.reactjs.org/tutorial/tutorial.html
公式の最終コード https://codepen.io/gaearon/pen/gWWZgR?editors=0010
###
変更するのは一つのファイル(index.js)だけ
デザインを変えたければindex.cssを変更する

“`js:プロジェクトディレクトリ/src/index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;

function Square(props) {
return (

{props.value}

);
}

class Board extends React.Component {

【第7回】教示と練習課題 [jsPsych]

# はじめに

本記事は，「jsPsychによる心理学実験作成チュートリアル」の第7回の記事です。[第6回](https://qiita.com/snishym/items/e0f82fa972970cda632c)では参加者情報の取得方法を紹介しました。そこで実験課題は完成しましたが，もう少し実験プログラムを作り込んで行きます。今回は課題の教示，課題の練習をこれまでのコードに追加します。

このチュートリアルシリーズの目的・概要等が気になった方はこちらの[全体のまとめ](https://qiita.com/snishym/items/1e0511f8622282993ed1)をご一読ください。

# 教示・長文テキスト

参加者が課題を行うにあたって，どのように進めればいいか説明する必要があります。といっても，これまで使い続けてきた`html-keyboard-response`を使えばいいだけです[^1]。

[^1]: ただし，教示文の改行や配置（左寄せ・中央寄せ）にこだわりがあったり，図なども教示に表示したいという場合は，パワーポイントなどで教示用の画像を作って`image-k